This article was originally written for The Edge Newsletter on 2004-06-29, with the title, "Standards in Web Design and Accessibility".
When designing websites, there are traditionally two completely separate methods that are commonly used. We're going to look at those methods, and look at why web design standards are important.
Many people, not desiring to learn about proper standards, purchase expensive programs to build the web pages for them. Some of these, like Macromedia Dreamweaver, are not actually that bad at creating standard web documents, although for some of the newer standards, you are still required to play around to get it to work properly. Others, like Microsoft FrontPage, are absolutely abysmal when it comes to generating standards-compliant pages. So how then, when so few of these programs conform to proper web standards do you go about designing websites? Well, if you are serious about website design, take a little time and learn the standards.
Web pages are written in a coding language known as Hyper-Text Markup Language, or HTML. Originally HTML was based on another language called Standard Generalized Markup Language, or SGML. In the mid 90s a new language known as the Extendable Markup Language, or XML, was created as a wholly new version of SGML, far more suitable for use by average people. In response to this, the World Wide Web Consortium (known as the W3C), re-engineered HTML to conform to this new standard, XHTML was born. XHTML comes in several flavours, but is recommended by the W3C as the standard to which all new web pages should be designed. You can read about XHTML on the W3C's website (the address will be given at the end of this article).
Accessibility is a very important consideration in designing web pages. Different people have different needs, and making pages accessible to all people used to be a difficult task, because layout and formatting was specified by the web page itself, and was nearly impossible to change by the reader. To come up with a solution to this problem, the W3C introduced Cascading Style Sheets (CSS), a standard designed to cover all layout and formatting for the page, and allowing multiple style sheets to be applied, including one specific to the user, which overrides the one provided by the website. This way, someone who requires a high contrast, low-colour page, may have that appearance on all sites, rather than whatever the default look for those sites may be. Similarly, those using a text-only browser, or screen reader may be able to view the pages properly, and special CSS properties can even specify voice styles for screen readers (e.g. italics will be read in an emphasised voice, bold in a strong voice, etc.)
There are a few other considerations to proper web design other than using XHTML (referred to more often as simply HTML, as it replaces the older standard) and CSS, which are also important for accessibility concerns. First, all images used as navigation or to display content must have alternative text tags attached to them (known as "alt" tags) so that those using text-only browsers can still "see" (or hear) the images. Also, when designing navigation toolbars, try to avoid using proprietary technologies such as Flash or Java as much as possible, if you are going to use these technologies for a navigation bar, always provide a plain text version somewhere on the page for those without access to these products. A serious flaw I've noticed in many places are sites written entirely 100% in Flash without offering a HTML version of the page for those unable to view Flash. This is really bad design. If you really want to have a page done entirely in Flash, go for it, but please make an alternative version (which doesn't have to be as fancy, just offering the same content) in plain HTML.
Another no-no is the use of an older technology known as Frames, without offering a no-frames version of the page. In fact, in the newest release of XHTML, the W3C has depreciated frames entirely, offering CSS Level 2 and 3 as well as Internal-Frames (IFRAMES) as an alternative. Note that even IFRAMES are not supported in text-based browsers and should still have an alternative version available, or just stick with CSS, which can emulate the effects of frames or IFRAMES for browsers supporting it, and provide a plain text version of the same page for those not.
Another thing to avoid is the overuse of animated images. While some animation is not always a bad thing, the overuse makes the page annoying and distracting. You want to keep your readers interest, not drive them away.
One final thing to avoid doing is using HTML Tables for page layout. I know that I am probably one of the most guilty people for this in all of my older page designs. The W3C suggests that you use tables for what they were meant to be used for, data and field display, not page layout. Cascading Style Sheets allow for a much more flexible page layout mechanism anyway.
Now there are also a few standards which although being recommended by the W3C are not yet fully supported in all web browsers, I will cover some of them starting with those mostly supported, and working down to those yet to be implemented without third party extensions.
Portable Network Graphics (PNG, pronounced Ping) are a replacement for the older GIF images found on many websites. While all major browsers support simple PNGs, Internet Explorer (the most common browser, although one of the poorest in rendering things properly) in particular has some serious problems with the transparency model used in PNG images. It's getting better, but do note that if you are going to use PNGs, they may not look as expected when using Internet Explorer. I would offer a suggestion of trying an alternative web browser: Mozilla Firefox, instead (link at end), as it renders web pages far better than the current version of Internet Explorer. Hopefully Microsoft will fix the remaining issues with PNG transparency in the next release of Internet Explorer.
Multiple-image Network Graphics (MNG, pronounced Ming) is a replacement for animated GIF images. It's based on PNG, and has a lot of really neat features. Unfortunately, none of the major browsers seem to support MNG without installing a plug-in (which, considering you have to install the Flash plug-in to view Flash, I cannot see why people can't install other plug-ins as well). Both Internet Explorer and Mozilla-based browsers have plug-ins for MNG. Mozilla will likely be including support for MNG in browsers based on their rendering engine (Firefox, Netscape 6/7, Camino, Epiphany, etc.) Microsoft has not confirmed nor denied whether they will have native support for MNG in the next revision of Internet Explorer.
Scaleable Vector Graphics (SVG) is another W3C recommended standard. Through ECMA-Script scripting (usually referred to as Javascript or J-Script, although these are just implementations of the ECMA-standardized language) it can be used in a similar form as Flash, but is recommended by the W3C instead of flash, as it has the advantage of being an open standard, and not a proprietary extension, as Flash is. However, support in browsers is similar to MNG, and requires third party plug-ins to activate SVG support. In Mozilla browsers, the plug-in is provided by the Mozilla Organization themselves, and will eventually be included in the standard distribution. For Internet Explorer or older versions of Netscape, you must install the Adobe SVG Viewer, which is available on Adobe's website for free.
In conclusion, as we go forward in this new millennium, the Internet as a major medium will become even more common. To make sure that this future is accessible by the widest majority of people possible, it's very important that we conform to the standards as set out by the W3C, and start learning the up and coming technologies such as SVG. It doesn't take long to learn, it just takes patience and perseverance. In the end, it's definitely something you will want to learn, so get going.
ReferencesThis article is copyright © 2004, Timothy M. Totten. You may freely reprint and publish this article, as long as this copyright information remains intact.