saila.com

Web Design

Steadfast Suggestions for Web Design

The following are some general guidelines for designing Web sites. There is a slight focus on webzines, but the advice is general.

The Look

• Avoid using graphics to display any type. This increases download time, and reduces a site’s usability.
• Don’t make the graphics too big. This includes both the file size (big is anything more than about 30KB), and actual size—including images and associated files.
• Design a site based on the 216 Web-safe color palette. Make sure your GIFs are optimized to that palette, and the HTML colours used are from that palette, as well. (More info: “Using Colour on the Web”)
• Brand the site. Make sure every page has the site logo on it (best in the top left or right of the screen), copyright (best near the bottom), and the time it was last updated (wherever).

The Backend

• Describe what the target link is. Don’t resort to the “click here” syndrome. Anchor the link around a descriptor (“The Starr report is available online” not “The Starr report is available online. Click here to get it.”)
• Use comment tags. When designing pages insert comments to describe what a particular chunk of code does <!--This is a comment -->. Very useful when someone else has to go in and edit the page.
• Use templates & style guides. Like in print, these help maintain a consistent look and feel throughout the site. They also make it easier to update it. (An example style guide: “The Convergence House Style”)
• Use common sense naming structure. For example, save each section within its own directory (News in /news/) sections names like about, contact, help, and subscribe.

Usability

• Have clear navigational aids. Make sure the user always has a way to get back to the home page, as well as the major site sections. It is a good idea to indicate where in the site the user currently is. Also provide a site index. (More info: Read Webmonkey’s “Advanced Web Techniques”)
• If it’s not a link, don’t underline it. People have been trained to click on text that is underlined—the same is true for blue text. Unless you have a specific reason for doing so (like in this example), avoid both of these design touches for any text item.
• Avoid unnecessary scrolling. Online, “above the fold” is the first 620 or so pixels across, and the first 460 or so pixels down. Designing a site too wide prevents older monitors from displaying the full site. People are not generally willing to scroll far down a screen to find something. (More info: Get saila.com’s Sizer Template)
• Keep it small. The page size shouldn’t take much more than ten seconds to load—on a dial-up modem. Pages (graphics and all) should total no more the 40-50KB at the most. (More info: Read Jakob Neilson’s “Need for Speed”)
• Use ALT in image tags. The ALT can be a caption, a description of the image, or a blank space. Filling it, though, helps make your site more usable. While there, specify the image’s width and height (this helps the page to display faster).
• Make sure your site is available to everyone. This means it’s degradable for older browsers and computers. Check the site on a Macintosh and Windows running Netscape, and then again with Internet Explorer. Does it look okay? What about in older browsers?
• Include contact information. Don’t limit it to email, though. There should also be a mailing address and phone number available on one page. Let the users be able to quickly email the editors, writers, and the webmasters of the site is usually a good idea.