THE DO'S AND DON'TS OF WEB DESIGN
There are many good and bad things you can do in web design; the following is a list of some of
those options and how you should deal with them.
1. No page counters: Page counters do nothing except make you look like an amateur, mess with
your design and tell people information about your site you probably don’t want them to know!
If you want to know how many people are hitting your site, just ask your host for server stats. Any
host worth it’s salt should be able to provide you with detailed stats that make page counters look
stupid.
2. Forget blinking or flashing text: The only place you see blinking and or flashing text is on the
neon signs of naked bars or web sites made in the mid 90's! People don’t like them and expect to
see naked people inside sites or buildings that have them … enough said.
Let’s discuss an important point about online content/text versus print. People read text off a comput-
er screen at about 1/4th the speed that they do paper.
This important fact tells us that we should keep what we want to say on the web short and sweet.
3. Make your titles on your web page make sense: One of the core attributes of a web page is its
title. In between the tags you can specify the page's title as it appears in the browsers
top title bar and in the search engine results.
People pay attention to page titles, so you should make sure that they are clear. If you have a page
on how to take care of dogs and you happen to have a dog named ‘Jimmy’ don’t title your page:
‘How to look after Jimmy and his furry friends.’ You should title you page something like: ‘How to take
care of dogs.’
4. Don’t force people to download a new browser or special plug-in to see your site: Unless
you have a site that people are dying to see, why limit your audience because you want to use some
special features in a browser or a plug-in like Flash. Today, with proper use of CSS and HTML you
can present fantastic looking pages without having to jump through the hoops old timers like me had
to when garbage browsers like Netscape 4 were being used in great numbers.
5. Think twice before using framesets: In the olden days you could argue a use for framesets
because of HTML’s lousy layout capabilities. Today with CSS positioning being well supported by all
the major browsers there is no need to use framesets for just about 99.9% of websites. Why don’t
you want to use framesets you ask? Well beginners tend to have trouble creating and using them
properly. Framesets tend to make websites more complicated than they need to be and finally they
can cause you all kinds of problems with the search engines.
6. Don’t try any silly cheat tricks in an attempt to fool the search engines: In the past we web-
masters developed various nefarious (disreputable) methods in an attempt to get higher rankings in
the search engines. Tactics included putting hundreds of key words on the pages as invisible text etc
… These tactics may have had some limited success in the past, but those days are long gone.
Try to fool Google (the king of search engines) and you and your web site will die a horrible and
painful death! I will not describe how to get high rankings now, but keep this is mind: good content
honestly presented is the foundation of high rankings and high traffic for your site.
7. Chat rooms: Most people don’t care about chat rooms. And worse than having a chat room is an
empty chat room. Who wants to hang out at a club that has nobody inside? So unless you have a
web site with tens of thousands of visitors a month and is of a subject that might necessitate a chat
room, don't do it.
8. Flash intros: I am guilty of this as much as the next guy. A few years back Flash intros where all
the rage, not sure if anyone knew why we ‘needed’ them, but as it turns out the ‘skip intro’ button is
the 2nd most clicked on the web today. Flash should be only used in special situations, or where
appropriate to the profession.
9. Under construction pages: Just forget it, if the page is not ready, don’t put it up. If you have links
that are pointing to the pages, disable them until your page is ready. If your page is truly ‘under con-
struction’ and has content on it that is ready to be seen by your web surfers, just post a ‘last updat-
ed’ date and make sure you get the new content in place soon.
PART 2
1. Don't use background music on your web pages
Some web designers like the idea of a little background music to set the mood of the page. In spe-
cial cases like say an MTV or Disney website, this can work. But for most websites this is just a bad
idea for a two reasons:
1) Music files are typically pretty ‘heavy', and take time to download. Most surfers will not think
that it's worth the wait. Besides, many computers simply don't have sound capability, so it seems silly
to force these people to download something they can't use.
2) Unexpected music/sound spewing forth from ones PC can be very annoying and potentially cause
problems. If you want to have music on your web site, make it an option that the user can turn on
and off. A good way to do this is with a Flash movie; most browsers come equipped with the Flash
plug-in and the Flash supports compact MP3 files.
Of course, if you just want to give users the option to hear some piece of music, like your bands lat-
est tune, or a sound clip from an interview, the easiest solution is to create an MP3 of the audio, and
then create a link to it.
2. Don't use Internet Explorer's scrolling ‘marquee' tag.
Internet Explorer came out with the infamous ‘marquee' tag in version 3. This HTML tag (that only
works in IE), allows you to create a stock quote like horizontal scrolling display of whatever text you
put in-between the tags.
There are options in using the tag in terms of how the text is animated, but in a nutshell, you get ani-
mated text scrolling across your page. Some web designers like it, but most surfers don't. Scrolling
marquees make your page look cheap and take away from the rest of the page.
Tickers like that make sense when the information it displays is constantly changing. Stock quotes
are a great example of when you might use a marquee display. But for static text, it is just a bad idea
for the most part.
3. Do keep the structure of your web pages consistent throughout your website.
Some web designers get bored with what they're doing and decide to create a different structures to
their web pages within same web site. A classic example is found in the way navigation works on dif-
ferent pages; one page may have the navigation menu across the top of the page then on the next
page it will along the right side and so on.
People like things consistent, so your web pages should be too. That's why all windows programs
have the same look and feel; the same goes for the Mac programs.
4. Don't create automatic pop-up windows!
JavaScript pop-up windows are probably one of the most annoying things you can do to someone
visiting your website. If you want to annoy your visitors go right ahead. BUT, under certain circum-
stances, for example a Privacy Policy, it may be the best way to present your information.
Pop-ups are typically used to present ads and other ‘non-core' material to users. If you use pop-up
windows, you have to learn how to integrate those elements into your main pages and forget about
pop-up windows.
5. Do use standard styles for your navigation.
Sometimes as web designers we may be tempted to use some funky navigational system. Things
like navigational links arranged in a circle, or some sort of freaky 3d cube that you have to rotate to
find the web page links; this serves only to confuse people.
Big companies like Apple and Microsoft have spent a tone of cash to figure out what types of naviga-
tion works, and what they found is that left side navigation and top navigation is what people are
used to.
6. Don't automatically resize a visitor's browser window.
Some designers will come up with a style is that looks best with a particular screen size, so they will
use JavaScript that will resize the users window to fit that size. This is another surefire way to tick
people off; people will typically set their browsers to the window size they are comfortable with.
If your style requires such precise window sizing to work, you need to change your style! There are
many factors that can affect the screen real estate that visitors may be viewing your web pages with
(window size, screen resolution, browser text size), as such you should strive to create fluid and flex-
ible page layouts because it is not possible to control all those factors.
7. Do make you web pages viewable at a minimum of 800 x 600 resolution.
Many web designers have computers that can display higher resolutions like 1024x768 and 1280 x
1024. They design there pages to fit in that resolution, when someone hits those pages with a
computer that can display only a maximum of 800 x 600, the visitor has to scroll to see the page
properly.
Scrolling web pages vertically (top to bottom) is ok, as long as it's not more than two and half pages
or so. But scrolling horizontally (side to side) is really bad and annoying to visitors.
In a nutshell, you want to design all your pages these days for 800 x 600; they make up about 40%
of the web audience!
8. Don't automatically redirect visitors except in very special circumstances.
Sometimes web designers will use JavaScript or other ways to automatically redirect visitors from
one page to another for various reasons. This can confuse people, and it can cause problems with
the search engines. If you want to send people to another page, create link with a little explanation
as to where they're going.
The general theme here is that you should not try to take control away from the visitor except under
special circumstances.
9. Do create a site map page.
A site map is a simple web page with text links to all the websites sub-pages organized in proper
categories; a lot of people will use a site map if they can find one.
10. Try to keep your web pages small in size.
Web pages can be made up of text, images (GIF, JPEG and PNG) and multimedia content like Flash
movies and QuickTime video etc. When you add up the size of all those elements in kilobytes, you
get the total amount of kilobytes someone will have to download to see the entire page. This is typi-
cally referred to as simply the ‘page size'.
If someone has to wait over 10 seconds to see your page, you are probably losing most of your
potential audience. High speed Internet is growing steadily, but the majority of surfers are still on old
56k dial-up modems. That means that you are begging for trouble if your pages are over 60k.
11. Don't center everything on your web pages.
Centered text on pages is just hard to read; just think about having to read a book where all the text
was centered! Print rules have been refined for well over a hundred years now, and they work well.
When in doubt about layout, think about how they do it in print.
With that in mind, for western cultures, left justified text (text that is lined up on the left side of the
page) is the way to go. You can center major titles or something similar, but do it very sparingly.
12. Don't rely on JavaScript to work on your pages.
The last statistic I've seen, about 10% of people on the web can't run JavaScript or they have it
turned off! That basically means that you can't use JavaScript for key features of your website; key
features like JavaScript enabled drop-down menus for navigation.
That doesn't mean you shouldn't use JavaScript based menu system, but it does mean that if you
do, you should provide an alternative like simple text links at the bottom of your pages, or a link to a
site map so that people can still navigate your website.
PART 3
1. Don't use busy backgrounds on your pages:
You can create a tiled background on your web page by taking an image (GIF, JPEG or PNG) and
using it in your body tag like this:

This will cause your browser to tile the image across the web page. There are two things wrong with
this:
1) You want to do all your styling in CSS.
2) Background tiles are usually bad news.
3) Once upon a time tiled backgrounds where all the rage on the Internet; these days most have
understood that it's just a bad idea. It can work if your tile image is not noisy and is a solid color, but
if you use tiles that are of say a picture of your dog or some other bold image, it will make your page
unreadable.
2. Do end your URL's with a forward slash in your links:
Ok, this point is a touch nerdy so bare with me ... this little point will help speed up things a little as
far as your user is concerned. If you have a URL (web address) that does not specify an exact page,
then you want to trail the URL with a forward slash:
Creating Killer Web Sites
In the above link, you will notice that after the '.COM' I placed a forward slash (/).
If the link were pointing to a particular page, I wouldn't add the forward slash at the end of the address:
Creating Killer Web Sites Articles Page
By adding the forward slash (as in the first example), we remove a step that otherwise the web
server and browser would have to take; removing this extra step can give you a speed boost.
So to sum it up:
If your link is pointing to a particular file (an html page or a PHP page or an ASP page etc ...) you
don't want to use the trailing slash. But if you are pointing to a directory like:
Articles
Then you want the trailing slash.
3. Don't set your type to all capital letters in your body text:
Using ALL CAPS in text is good for emphasize and title elements, but don't create long sentences or
paragraph in all caps ... it's just hard to read.
Just compare this paragraph in all caps:
USING ALL CAPS IN TEXT IS GOOD FOR EMPHASIZE AND TITLE ELEMENTS BUT DON'T CRE-
ATE LONG SENTENCES OR PARAGRAPH IN ALL CAPS; IT'S JUST HARD TO READ. JUST
COMPARE THIS PARAGRAPH IN ALL CAPS
4. Don't have more than a few words in italics:
Italics are one way to draw attention to text, but it makes text harder to read. Using italics for one or
two words on occasion is good, but if you go crazy and start using italicized text all over the place, or
for long sentences or paragraphs then your looking for trouble!
Just compare this paragraph in just italics:
-
Italics are one way to draw attention to text, but it makes it harder to read. Used for one or two
words on occasion is good, but if you go crazy and start using italicized text all over the place or for
long sentences or paragraphs then your looking for trouble! Just compare this paragraph in
just italics.
5. Don't have more than a few words in a bold case:
Sounds like the last two. Nonetheless it is still valid for the same reasons in that the text is harder to
read, and then loses its point. Remember that setting text bold, italics or in capitals are all ways to
bring attention to the particular words, if you're making everything same, it loses it's impact.
6. Don't use

and

tags:
These tags will make your text smaller than the browsers default size and make it bold. This
combination will result in text that is really hard to read.
7. Do turn off the blue borders around linked graphics:
As you know, you can turn graphics into links or in other words buttons, by wrapping a link tag
around an image. By default browsers will surround the image with an ugly blue border showing us
that the image is a link. Your images that are acting as buttons, should look like buttons; it should be
obvious that the image is something to click on ... so we don't need the blue border.
To get rid of the blue border all you need to do is add this code inside your image tag: border="0"
Check out an image tag:

You may have noticed that I snuck in another tip in this one: making your button images look like
something that can be clicked on. That's a 'free of charge' extra for you!
8. Do provide alternate text (using the 'alt' attribute of the image tag) for all your major
images:
Alternate text is text that you insert in your image tags () that is used by text only browsers.
Text only browsers are used by the blind to surf the web since images won't help them very much ...
the alternate text in your image tags is read by the text only browsers in place of displaying the
images.
You should put meaningful information in the alternative text that will benefit those who can't see and
it will also help you with the search engines. The alternate text is inserted in your image tags like so:

The alternate (alt) text will also be displayed as a tool tip in Internet Explorer.
NOTE FOR MACS:
The ALT doesn't work on the MAC, so instead you can use the 'title' attribute instead:

There is no reason you can't use both on the same tag.
9. Do make images that look like buttons act like buttons:
I think we saw something like this already! Just as I said above, button graphics should look like but-
tons ... and on the flip side, don't create graphics that look like buttons that aren't buttons!
What constitutes a 'button-like' image?
Classically, any images with bevels or a 3d look to them are typically intended to be buttons and
people will naturally try to click them. But the best way to determine what a button looks like (from
your visitors perspective) is to consider your web site; if you find that your links are underlined text
then any text that is underlined will be perceived as being a link or button ... a little common sense
goes a long way here. Another thing to do is to visit other web sites and pay attention to how they do
things.
What ever you do, remember these two points:
Always try and make things as clear as possible to your visitors.
What may be obvious to you may not be to your visitors!
10. Don't use too many colors in your web site:
Color is a way that people identify things; that is why the Coke label dominantly red and the Pepsi
label is dominantly blue. Keep the color scheme of your web site limited to a couple of colors and
keep it consistent across your site unless you want to denote some major section.