Planet Fox

Planet Fox > /etc > Designing a Web Page


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.


Powered by FreeBSD
Valid HTML 4.01
Site Map
©MMIX-MMXIV Planet Fox