Designing websites, while a creative process, is a very different process from traditional desktop publishing. Traditional desktop publishing is largely a what-you-see-is-what-you-get (WYSIWYG) process. The page size is fixed, the font size is fixed, the method for creating headers, italics, bold and underline elements is largely irrelevant as long as the final printed output looks correct.

With website development, many of the constraints of font size, page size and placement are no longer valid. The LyX Document Processor has a saying of what-you-see-is-what-you-mean (WYSIWYM) which I believe is applicable to the mindset necessary to developing websites.

There is no page size..

With a webpage, there is no set page size. A web page could be viewed on a computer or laptop with various size screens. It could also be viewed by a PDA or cellphone with a significantly smaller screen. It could be printed out and viewed on paper (Letter, A4, Legal, who knows..). It might not even be viewed and instead manipulated by an application (data mining) or perhaps listened to with a text-to-speech browser for the blind.

There is no set font size..

Even using the most unflexible methods of website development, while you have the ability to specify how font size relates to another font size on the page (assuming a visitor doesn’t override your requests), there is no sense of absolute font size. Even “pixel precise” font size and style may display larger or smaller on a different browser or operating system. The particular system may not have the font style requested and substitute another font.

There is no pixel precise placement..

This one in *theory* could be acquired through the mis-use of tables or the correct use of CSS (when specifying a certain browser). Unfortunately, even with pixel precise placement a standard in current day XHTML/CSS web development, the leading web browser has a non-standard implimentation which does not conform to the standard. As a result, using this technique with a general use website is useless.

WYSIWYM

This brings us to what-you-see-is-what-you-mean (WYSIWYM). In modern day web development, at the core are paired tags to specify certain types of elements. For example, a paragraph is denoted with the <p> and </p> tags. An image is denoted with an <img /> tag, a header can be denoted by <h1> and </h1> tags (where the number denotes the header level). There are many such codes that, when used properly, can provide content structure.

In theory, if a website is developed well, it is possible to navigate the website and fully understand the content without needing a graphical web browser. Web browsers such as Firefox have options to disable graphic and styles from a website (and through extensions examine the document object model (DOM)). This is the level that a potential visually impaired visitor might interact with. It is also the level that older web browsers or textual browsers would interact with (or even automated data applications).

By designing by what we mean instead of what we see, even though the output is very different from our original intentions, it is still very usable due to this inherent structure of the core content.

Adding Design

So what about design? Design should be separated from the content. Fortunately there is a technology called cascading style sheets (CSS) that provides this level of separation. With CSS it is possible to define what a page should look like in various scenarios (ie with use of a cellphone, web browser, printed, etc.). CSS has the capability of defining how elements are positioned relative to one another, how elements should be formatted, etc.

While this will provide a good starting point for effective WYSIWYM website development, it is definitely not an absolute as with WYSIWYG desktop publishing.

Different web browsers can render a page in different ways. While standards are set to aid in consistent rendering across different browsers, not all browsers impliment the standards in the same way and, as a result, could introduce differences in the final output that a visitor sees.

Whats the solution? Generally for style concern, the lowest common denominator wins out. At the present, this generally equates to developing for standards as they were when Internet Explorer 6.0 was released in 2001 (of course, working around non-implimented attributes of the standard by this particular web browser). All other web browsers (Which combined with Internet Explorer make up 99.5% of all web traffic) have been updated more frequently and generally support a greater level of the W3C standards.

In addition to only using attributes that applies to all browsers, it is a strong recommendation to not make assumptions. For example, do not artificially constrain the width of your web page if possible. Users with larger monitors may want to utilize their full screen and a website developed exclusively for a smaller monitor may be difficult to read on the larger, higher resolution display. This also includes font sizes. Different systems may display fonts in different resolutions (ie 72 dots per inch or 96 dots per inch). A particular user might by default increase font sizes larger than the default to accomodate personal preference or slight visual impairment.

The design should be flexible enough to allow for these changes to occur to accomodate the preferences of your visitors.

Other Considerations

Certain levels of color blindness may impact a minority of your visitors. When selecting colors, it is important to make choices that allow these visitors to easily understand content. The Wikipedia entry on color blindness has further details and tests that can be utilized to visually inpsect a websites design as it would look to individuals with color blindness.

Access keys can be assigned to certain parts of the website to aid in navigation for people with limited mobility that may have a difficult time using a mouse. While access keys are not currently a very prominant feature on websites, it does aid in navigation similar to shortcuts in traditional applications and is highly recommended.

Conclusion

What this article does not go into details on the “how”, I hope it provides some overview of web site development consideration. By understanding available technologies to provide accessibility for your visitors, it is possible to design a web site that is very functional for a wide variety of users and devices. While an accessible site following the “WYSIWYM” principle may provide less visual design flexibility, I firmly believe that access to content through an accessible website is far more beneficial for your visitors.