Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

5 Web Design Principles To Live By

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

Summary

After years of project, teaching and lecturing experience in web design I offer a few principles that will go along way towards making pages that are accessible, usable and rank high in search engine queries before they are launched. It's not everything you need to know about best practices but it's a good start.

1. Use W3C Technologies

Use HyperText Markup Language (XHTML/HTML), Cascading Style Sheets (CSS), Extensible Markup Language (XML) and similar markup systems as being developed by the World Wide Web Consortium. Those technologies enjoy the broadest support among user agents and have the widest installation base in the world.

Due care must be given when using non W3C , proprietary systems such as Flash, Shockwave, Real, Windows Media and similar multimedia content.

2. Separate Structure From Presentation (Style)

Remember to use XHTML/HTML for its strengths and what it is designed to do -- provide the structural framework for the page. Use CSS for it's text styling and positional properties

This means that XHTML is used for the structure, the foundation, the girders and ibeams of pages. CSS is used for style and positioning. It's the floor treatments, color of the exterior paint and distance placed between furniture in a cyber home analogy.

Refrain from using deprecated elements such as Font and Center or deprecated attributes such as bgcolor, hspace and vspace.

3. Validate Work At All Phases Of Production

Use XHTML/HTML and CSS validation tools while composites, templates or other pre-production pages are in development.

Code should be validated and cleaned throughout all phases of production. Do not wait until a page is almost finished before validating the file. It's too late by then.

I have a considerable list of other validation and repair resources ranging from browser compatibility and color analyzers to accessibility tools which are available by request from bud@trynet.com.

4. Design For The Electronic Canvass

Design is a decision making process.

This environment calls for the use of relative, proportional and scalable topography over fixed width measurements. That is the approach which ensures design reliability and leverages the flexibility of the user interface.

And this means, among other things, that font sizing should be expressed as a percentage of the user's preference (like this page) and not a fixed measurement.

As such there is no need to use spacers, shims and other invisible transparent files in your design. It adds to file management and site over head and download delay to name but a few issues.

To get a fuller understanding of The Electronic Canvass see my article "Old World, New World."

5. Use The Alt Attribute

The purpose of the alt attribute is to provide an alternative text equivalent for every embedded image on a web page.

Doing so will benefit:

  • people who choose not to download images
  • devices that do not support image downloading
  • site searchability in that search engine crawlers collect alt (text) information
  • people who use assistive technology

In additional to providing alternative text equivalents when embedding images into pages use the alt attribute when:

  • an image for a submit button
  • clickable image maps

Where an image conveys no useful information (such as those that are decorative) use the markup alt="".

At the end of the day using the alt attribute is the single most significant thing you can do to make web content accessible.