Design Tips
 |
Text and Fonts:
- Blinking Text is a NO-NO! <BLINK>
This ranks as the number one annoying thing to do on a webpage.
Just about everyone hates Blinking Text.
- Don't write everything in caps. It's equivalent to yelling.
- Don't write like this: hI CaN YoU ReAd ThIs WiThOuT GoInG InSaNe?
Simply because it's annoying, and difficult to read.
- Do not overuse the H Tags.
It's for headlines (thus it is called <H1>,
<H2>, etc.),
not for normal text. Try to use only in the titles of different sections.
For example on this page, the only place we would use a H tag would be for the title, "Design Tips".
- When using other fonts with the <FONT FACE> tag, or in CSS, make sure it's a font that comes standard on most computers.
The most common fonts other than Times Roman are Arial, for Windows, and Helvetica, which is a similar font to Arial on Macs. Windows also commonly uses Comic Sans and Verdana.
Example:
<FONT FACE="arial,helvetica">
This will produce a page in Arial font on PCs and the very similar Helvetica font for a Mac.
- It's a good idea to always use a different colour for your links than the colour you used for regular text.
It makes it easier for people to find the other sections of your page at a quick glance if you have
them buried in text. The biggest no-no in this case: Do not use black text and black links!
General Graphics:
- Use only .gif, .png and .jpg (jpeg) files for website graphics.
Windows .bmp files are often too large and poor quality, while other graphics file formats are simply not recognized by all browsers.
- Avoid large graphics and several graphics on one page in order
to keep downloading times reasonable.
- Whenever possible try to look for ways to decrease the KB of a
graphic file without cutting corners on it's quality. One tip is to try saving a pic
as both a .gif and a .jpg. Then compare their file size and use which ever format is smaller.
Typically something with few colours and with text on it will work better as a gif. While a
photo, or graphic with lots of colours will work better as a jpg.
- To decrease loading time when using graphics: include the pic's height
and width in within the <IMG> tag.
This tells your browser how large the pics will be and allows it
to load and layout the page more quickly. Example:
<IMG SRC="pagetip.jpg" WIDTH=242 HEIGHT=43 ALT="Page Tips" BORDER="0">
This tag is for the "Page Tips" banner which appears on the top of this page.
Note the BORDER="0". This causes the pic not to have a border around it when you make it
part of a link.
- In pic galleries, either use small preview version of pics (and we don't
mean resize the pic in the <IMG>
tag!) or use thumbnails. Thumbnails are graphic files which contain a collection of smaller, preview
versions of your pics. This will give visitors a chance to pick and choose which files they want, without waiting for all of them to download. If you have a large gallery
make more than one thumbnail, don't pile them all into one.
Backgrounds:
- Never have the same colors in the background, text and links on the same page.
- Avoid having really complicated backgrounds, this will help to make things much easier to read. Keep it simple.
- Do not use large backgrounds, remember these things still have to be
downloaded just like any other graphic file!
Screen Resolutions:
- Remember how different computers can have different screen resolution settings.
The default is 640 pixles by 480 pixles, however, less and less computers are using this resolution.
So while the safest thing to do is make your pages no wider than 600 pixels, (for screens using 640), it's now pretty safe to design sites for 800 X 600, making your pages no wider than 740 pixels. Why 600 and not 640? Why 740 and not 800? Because your browsers have space for window borders, scroll bars and other items. It doesn't actually let you use the full width
of the screen. Thus, 600 and 740 are the "magic numbers" to keep in mind,
use those, and you shouldn't run into any problems.
- Use no more than your chosen "magic number" of pixels for the width
of your pics. If you place pics side by side in a table, make sure their widths don't add up
to more than your "magic number" of pixels.
- If you use pixels to size your table widths, do not make them larger than your chosen "magic number" of pixels. Another idea is to use percentages for your table widths.
This makes a table fit any resolution. However, use this carefully, as it may leave people
with higher resolutions a lot more space between items than you desired for your layouts.
- If you use a higher resolution than 640 or 800 on your own computer, here's a little trick to see if your page will fit the lower resolutions without changing your resolutions all the time. Just paste the following HR tag into any blank HTML. That is one without any text or pics in yet.
<HR WIDTH="600" SIZE="6"> (for 640 X 480) or
<HR WIDTH="740" SIZE="6"> (for 800 X 600)
Now open the HTML file in your browser, then resize the width of the browser window,
making it smaller and smaller until the horizontal scroll bar appears on the bottom of the window.
Pull back slightly, making the width larger, till the horizontal scroll bar is gone.
Now when you load your page onto the browser, it will show you how your page
will appear in 640 or 800 res. When you close the browser, it will normally save the size of the
window.
- So far we have only mentioned the width of your screen. Now height isn't as important, because most people are used to having to use the vertical scroll bar.
However, it's a good idea to keep any navigation (links) you have on your site within the top part of your screen. If possible, set it up so your visitors don't have to scroll to see all of your main navigation. This ensures they can see all of your major sections at a glance, and also helps them not to miss any sections.
Getting in Contact/Email:
- It may not seem so important, but the most important link on anyone's page
leads to information on how to contact the site's owner, usually in the form of a link to
an email address. The contact page or email link should be in a easily found place
on the index page, and whenever possible, should be linked on every web page in the site.
- If you do not know how to make a email link, here's the code for it:
<A HREF="mailto:EMAIL ADDRESS">email</A>
Replace "EMAIL ADDRESS" with your email address.
JavaScripts:
- JavaScripts are fine in moderation, but don't use things like cheesy text animators or those annoying windows that constantly ask for names or pop up to say "Hope you enjoy my page!"
- Only use it if you understand it.
- If you don't really need it, don't use it.
- One last thing to keep in mind: Yes, using JavaScript is very common, but lately a bit of "JavaScript Rebellion" has started on the Internet, with several users choosing to turn off the JavaScript on their browsers. They do this to avoid some of the more annyoing pop-up ads that are around the net now. So it's a good idea to keep in mind if you can do something without JavaScript, you should avoid using it so those people have full access to your site as well.
Frames:
There are a lot of people who hate frames! This is mainly due to two reasons:
- Poorly setup frames can cause browsers to be trapped in frames, or have the same frames repeating over and over. This eventually causes the browsing area of their browsers to
be filled with tiny frames!
- Many early attempts at using frames were, well quite simply, UGLY!!!
To avoid ugly frames make sure you size them with COLS="___" in the
<FRAMESET> tag. This is to help avoid the appearance
of the dreaded horizontal scroll bar. However, this won't work if you place a pic wider than the
size of the frame. Also, frame borders are a bit of a no-no. Add
BORDER=0 and FRAMEBORDER="NO"
to the FRAMESET tag to remove them. For Example:
<FRAMESET COLS="150,*" BORDER=0 FRAMESPACING="NO" FRAMEBORDER="NO"
FRAMEPADDING=0>
This tag will create a left frame which will be 150 pixels wide, without a border.
- A simple rule to always remember with frames, if you don't really need to use them,
don't use them. Ask yourself, do I need to use frames? Or can I do this with tables?
If you think you can create the same design with tables, then use tables.
Avoid frames whenever possible.
Cascading Style Sheets (CSS):
- The latest versions of Netscape and Internet Explorer support
something called Style Sheets. However, there are certain CSS properties that IE recognizes and Netscape doesn't, so watch out.
For more information on what CSS properties each browser supports, check out:
Webmonkey's Browser Compatibility List
Accessories and Junk!
- Don't overload your page. In other words, don't cram in stuff that could go
on another page. Also, don't fill your page with several webrings, lots of awards, more than one
cyber pet, and other junk. You may have a great modem, but what about the rest of the world?
- Never use that dumb "Under Construction" thing, don't upload your page till most of it is done! A good web page is always under construction, always changing, so it's stupid
to have that on a site.
- For MIDI's, you may want set up a way so a visitor can select if they want
to hear the MIDI or not. To do this, simply add a width and height to your embed tag. This will put a "Sound Player" on your page with controls for the sounds. Adjust the width and height to show at least the play and stop buttons. As for other sound file formats, don't use them. Okay, yes, mp3 and wavs sound better than mids but they are much, much larger in size and take a lot of time to download. Remember, while you might have a Cable or DSL connection, most people still only have Dial-up modems.
You may also want to check out tips from various other Sailormoon sites. We have a listing of some
here.
