Here are some general rules that I like to follow when
creating web pages.
It's a good idea to keep it in mind that a lot of
different
people will be accessing your website, all with different devices,
operating systems and browsers. Unlike images, which can only be
rendered a certain way, HTML documents are rendered differently on each
platform. To make the most of your pages, you should create pages that
conform to one
of the standards published by the World
Wide Web Consortium. Some web browsers, especially older ones, can
even crash when trying to render an improperly marked up page. The W3C provides a validator that allows
you to upload your HTML documents to be checked for errors.
Pages should be as legible as possible - please avoid
eye
melting patterned backgrounds and excessively bright colors. If your
page has a background, it's generally a good idea to make text boxes
with a plain colored background, like I have here. Invariably, at least
some of the people visiting your pages will have some kind of
disability. Avoiding the aforementioned mistakes will help people with
visual impairments navigate your site. Blind people rely on text to
speech programs, so keep your content well formatted with paragraph and
heading tags, and always check for spelling mistakes. Deaf people will
require captions for videos and transcripts of any relevant audio
content.
Every site should have a plain
text
formatted site map, which is customarily setup as a series of
unnumbered lists. The site map should be linked to from each page, and
should be displayed instead of the server's generic 404 message to help
users locate missing or badly linked pages. The site map is also quite
useful to anyone using a text-only browser like Lynx, and helps search
engines categorize your pages.
Don't use special proprietary characters, like those
based on
Microsoft's Symbol font, instead, use HTML entities like © for the ©
symbol, for example. Don't expect users to have any particular font
installed, since different systems have different sets of fonts. For
example, Microsoft Windows includes Verdana, while most other operating
systems do not. Keep font choices limited to things like Serif,
Sans-Serif, and Monospaced and let the user's browser decide what font
to map those to. Only three fonts should be considered universally
available; Times,
Helvetica,
and Courier,
which are examples of serif, sans serif and monospaced fonts,
respectively. Use, but don't overuse pre-rendered images wherever a
special font is needed.
For graphics, such as cartoons, buttons, logos, etc
always use
the GIF or PNG file formats, which use lossless compression that deals
well with continuous block of color. Use the maximum compression
setting, since it won't affect the images appearance, and use the
minimum number of colors necessary for the smallest file size. I don't
recommend using JPEG for site graphics since the compression artifacts
build up around sharp edges, making text hard to read. Use the JPEG
format exclusively for photographs. Be mindful of the compression
settings you use, you want good image quality, but you also don't want
to go overboard and make every image 6MB, some people are still using
dial up, which is slow, or satellite, which has usage limits. If your
web host limits your bandwidth, overly large images and graphics can
put you over your limit very quickly.
When creating graphics for your site, use generally
pleasing
color schemes, if you need help with this, consult a color wheel,
colors on opposite sides of the wheel generally work well together.
It's really easy to tell when someone has used MS Paintbrush to create
graphics, which is why you should use a full-featured image editor like
Corel
Draw, or if you can't afford that, use a free alternative like The GIMP. If you're going to use
clipart, be sure that you've either paid for it or use royalty-free
art, and give any credit necessary. Microsoft Word is a good source of
free clipart.
If you feel like you absolutely must use animations,
please
use them sparingly. Consider whether adding an animated graphic will
actually improve your users' experience. Never make proprietary
animation plugins like Flash and Silverlight an integral part of your
site's navigation - I would avoid using these for navigation
altogether, but if you do, make sure there is a text-based alternative.
Don't embed things in your page that make sound and
start
playing without the user's interaction. Different media players can
have different volume settings, and if a user is browsing some place
public, like a library or coffee shop, and anything starts blasting from
their computer at full volume it's likely to annoy everyone involved.
This goes for ads as well, I usually leave my speakers on and when an
ad starts playing somewhere on a page and I have to find it to turn it
off or down the last thing I'm thinking of is buying whatever they're
advertising.
Links should be something more intuitive than "click
here",
try to integrate links into the text so that they don't distract the
user from what you're saying. Consider the following two examples;
Sonya built a pair of
speakers
out of household junk. Click here to see them.
Sonya built
a pair of speakers out of
household junk.
See how much better the second example is? Nouns and
clauses with verbs
in them make excellent links that can describe what you're linking to
without explicitly spelling it out.
|