Web Design Guidelines and Tips for Good Pages
1. Look Professional.
I can't emphasize this enough.
Avoid blinking and scrolling text, animations, and Flash intros.
How many times do you press “Skip Intro?”. Animations are very distracting
to the eye when you are trying to read. Make sure your graphics add to the site
and the presentation of your content—never put something on your site
just because you can or because “it's so cool!”. Professional sites are
clean—they make good use of whitespace and don't distract you with irrelevant
stuff. Make sure your text is readable—avoid distracting background images.
Fonts should not be either huge or tiny. Avoid “Under Construction” signs—if
you haven't finished it, don't put it up. Nothing is more aggravating than
going to a site you think will be interesting and relevant only to find a cute little
animation of a man with a shovel. We've all planned to update our page—until you actually
do, it doesn't count. Avoid banner-exchanges and web-rings as well for the most part—the trickle of traffic
they may bring in is not worth the space it takes to display them.
2. Have a consistent layout using familiar elements.
There are some design guidelines that have become commonplace on the web, and if you
don't follow them your visitors may be confused.
- Clickable Logo—You should at least have your logo on each of your pages, which is clickable to get back to your homepage (the only exception is if you have “printer-friendly” versions of your pages).
- Navigation Bar—Have a navigation bar that appears on each page and links to the major areas of your site as well as a contact form and homepage. Your visitors may not enter your site through the front page, especially if they find it through a search engine. On every page it should be clear what the page is about, what the site is about, and how to get around the rest of the site. Your navigation scheme doesn't have to be big or elaborate, just useful and relatively unobtrusive. This navigation bar should include a search box if your site is large or has a lot of textual content.
- The About Page—This is not required, but it has become pretty standard and your visitors will expect it. This is a page that tells a bit of history about your company and organization and what it does. It builds trust and establishes you as a real person.
- The Contact Form—You must have a way for your visitors to contact you or a link to such on each page. Having a contact form is very useful because some people may be surfing at work or a friends house and not have their email readily accessible.
3. Know HTML—and use it.
There are web page authoring tools
that allow you to write pages without knowing HTML—but eventually
you will need to know HTML. And while it doesn't take much to learn
basic tags like <b>Bold</b>, writing HTML effectively
and designing good pages
is more than that. A good web page is much more than a list of links
or a column of text—it's an interactive information source. Learn
to use tables and/or use style sheets (CSS) effectively for positioning
and formatting. CSS is a better technology than HTML for formatting,
but not all browsers support it completely or consistently, especially Netscape.
To be the most accessible, use tables for layout and CSS for formatting.
4. Study other webpages.
Most of what I know about HTML
and webpage writing I learned by viewing the page source of well
designed sites. Whenever you come across a web page that looks good,
figure out how the authors did it. Copy and paste the code into
Notepad and turn all the table borders to 1. Then save it as an .html
file and open it in your browser—this will let you see
the exact structure of the webpage. Do this to major sites like
Excite, or the excellently
constructed Bronx High School of
Science. Learning HTML isn't very hard...but developing good
webpages is a skill and an art. Don't skimp in your studies.
5. Avoid buggy technology like frames and Javascript.
Frames were a good idea—but they
have a lot of problems. First, they're messy, visually and functionally.
They break the rules of how people are used to navigating webpages, which
severely hampers the accessibility of your site.
Second, many search engines don't index them properly.
If you want to use them, please, think it through very carefully first.
Make sure that you couldn't accomplish your goal any other way.
Almost no professional sites use frames and
most sites that use frames don't look very professional. Some
browsers can't read them properly, and many people simply hate them.
That being said, there are a few circumstances where they are both useful
and the most efficient way to display data. Just be very sure you need them.
[More on frames]
Javascript is a client-side scripting program which means it depends on your visitor's browser to be executed correctly. Given the mess of browser non-compatibility, it's pretty obvious why it's a bad idea. Search engines also choke on Javascript.
6. Use the image tag effectively.
- Put height and width specifications in all your image tags—it makes download time a lot faster because your browser can draw a box where the picture will be and then fill it in later. That way it can construct the page and you can read it while the images are downloading.
- Don't stretch or shrink the image with the height/width tags. This will just look bad, as it doesn't really resize the image and it takes just as long to load. Use a image editing program to actually resize the image.
- Use the alt tag—for text-based browsers (used on cell phones, for the blind, etc) the alt tag is essential so they understand the content.
7. Test your pages thoroughly.
There are a lot of free services
that will test your pages for you online. My favorite is
NetMechanic—they'll check
your entire site for broken links and html errors. [More pre-deployment advice]
8. The single-pixel gif trick.
This is a nifty tip for getting
around HTML's lack of spacing control. Basically, you use a transparent
1-pixel gif for spacing out things vertically and horizontally.
By changing the “height” and “width” attributes you can
indent and control paragraph spacing (and many other things).
An in-depth explanation can be found at
Web Wonk. You can also use CSS for better spacing control, although not all browsers
support it consistently.
9. Copyright your pages.
The copyright notice on webpages has become shorthand
for how old a page is and how recently it's been updated. If the copyright notice
says © 1999, people think the page hasn't been touched for years. A notice like this:
“Copyright © 1999–2004 All rights reserved.” means the site has been around since 1999
but is being updated. True, it would be easy to fake, but most people don't so it's still
helpful. It's a simple and free way to add a touch of professionalism to your site.
10. If you collect information, post a privacy statement.
Privacy is an important issue
on the internet. Privacy Statements are a way of telling your
members what information you are gathering from them and what
you are going to do with it. There are many examples online with lots of legal jargon.
Or you can just state in simple terms why you collect information, and
what you do and don't do with it.