The Dos and Don'ts of web site design
The Dos and Don’ts of Web Site Design: Part 2
Part 1 | Part 2 | Part 3
by: Stefan Mischook
Also Available in SPANISH
I've received many emails on the first do's and don'ts article, people wanted more, so I thought a part two was in order.
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 special cases like say an MTV or Disney website, this can work. But for most websites this is just a bad idea for a few reasons:
• 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.
• 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 band's latest 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 animated 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 different pages; one page may have the navigation menu across the top of the page, then on the next page it will be 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.
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 design 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 ton of cash to figure out what types of navigation 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 flexible page layouts because it is not possible to control all those factors.
7 Do make your web pages viewable at 800 x 600 resolution.
Many web designers have computers that can display higher resolutions like 1024x768 and 1280x1024. They design their 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-a-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 custom 404 'Page not found' page.
We've all seen them, 404 pages. On websites that are served by Windows servers it is a plain white page that has this text:
The page cannot be found |
The page you are looking for might have been removed, had its name changed, or is temporarily unavailable. |
Please try the following:
HTTP 404 - File not found
|
Not very friendly and not useful to visitors, since the page itself doesn't give you much information. The solution is that you can create your own 404 page and have that appear instead of the practically useless one that you see above.
A 404 page is just an html page like any other, you just need to ask your host to set it up so you can use your own homemade 404 page. A good 404 page will make clear to visitors that they found the right website, but just not the right page. 404 pages should include a link back to your 'home' page and maybe the site map page. If you have a search engine built into your site, then include the search too.
10 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.
11 Do keep your web pages under 60k 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 typically 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.
12 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.
13 Don't rely on JavaScript to work on your pages.
The last statistic I've seen show that 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 enable 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.
That completes this article. I hope you'll all find it useful, and if you would like to see more articles in the 'do's and don'ts style, feel free to email me.
Top