Cross Platform Design

Ayrora Temple
It's a sad day in every web designer's life when you first see the web page you so carefully crafted to perfection displayed on a different computer using a different operating system, web browser, screen resolution and color depth. It's like looking at a work of art turned into a jumbled mass of confusion far removed from your original vision. Sadly enough, it is in this way that most of us learn the need for and value of cross-browser and platform-independent web design.

For those interested in learning how to present their content to the widest possible audience, the principal resource to become familiar with is W3C, located at According to its website, "The World Wide Web Consortium (W3C) develops inter-operable technologies (specifications, guidelines, software and tools) to lead the web to its full potential."

Directed by Tim Berners-Lee, one of the inventors of the Internet, W3C is an international body of experts dedicated to developing standards and guidelines for the Internet's infrastructure and assisting developers in producing platform-independent content presentations. For webmasters, this means a web page that is viewable on as many platforms and devices as possible.

W3C not only provides in-depth technical "white papers" on high-level network engineering issues but a variety of easy-to-use tools such as its popular HTML and CSS Validators, accessibility aids and resources for developers seeking to target the growing number of mobile and other platforms.

As the Internet grows in sophistication and moves beyond the capabilities of traditional HTML, the resources and knowledge base that the W3C provides will become an increasingly vital resource for those striving for standards-compliant design.

If Internet standards are so well established that webmasters can visit one website and easily verify their HTML code's accuracy and compliance, then why is the subject of cross-browser design one that is worthy of discussion? The answer is really quite simple: Some of the most "attractive" web page elements are not part of established standards and their implementation is not universally supported.

'Browser Wars'
The origins of this practice can be traced back to the earliest days of the "browser wars," when the two main commercially backed browsers, Netscape's Navigator and Microsoft's Internet Explorer, squared off against each other. At the time, both hoped to overthrow the National Center for Supercomputing Applications' Mosaic, which had become the de facto standard for browsing in an age before commercially available browsers. Each wanted to establish itself as the dominant graphical web browser.

The battles in these browser wars were (and to a lesser extent, still are) fought with strategies such as Microsoft's "fixing" of malformed HTML code to render pages as the designer intended, rather than in the way he poorly coded it, and Netscape's infamous introduction of the quickly overused "blink" tag that allowed important text to be highlighted by blinking on and off. Microsoft's IE didn't support Netscape's proprietary blink tag, while Netscape rendered code more accurately — often displaying web pages (especially those that contained complex table structures) in a way that often looked wrong.

Netscape fixes most HTML errors these days, although IE still (thankfully) offers no support for the blink tag. While all major modern browsers will display valid HTML in a reasonably similar way, there are still some differences among them. This easing of the differences between browsers hasn't necessarily made the chore of cross-browser design any easier however, as an increasingly broad variety of platforms must now be catered to by the conscientious designer.

When considering the impact of multiple platforms on web design today, one must go beyond the old Windows/Mac/Linux standards and begin looking at PDAs, cellphones, set-top boxes, the Sony PlayStation Portable (PSP) and other technologies. Soon, we won't even be talking about "web" design but about "cross-platform content presentations" that target devices beyond the web.

Testing For Success
While relying upon a properly configured HTML authoring application such as Macromedia's DreamWeaver can help webmasters build compliant web pages, and using the online validation tools that the W3C can ensure their "correctness," nothing can replace actually viewing your web pages across as many browsers and platforms as possible. Your website's server logs will give you an indication of the types of browsers being used to view your web pages and the relative percentages of surfers using them.

Some webmasters will view this information and conclude that perhaps 80 percent of their traffic is using the latest version of IE on a Windows platform using a screen resolution of 800x600 and decide that designing web pages that will look their best in this environment is good enough, but few people that I know would turn down a 20 percent increase in their income if all that was required was to cater to those other folks and their systems.

Part of catering to the growing diversity of platforms is the realization of what an enormous role a display monitor's screen resolution and color depth plays. Designers have long been accustomed to designing web pages targeting an 800x600 screen resolution in full-color.

These designs will show undesirable horizontal scroll bars for some users of set-top boxes and those with older systems using 640x480 display settings, but will appear quite acceptable at 1024x768 — even if the content area appears a bit small at higher resolutions; but view these designs on a cellphone with a 200x300 screen that displays 256 colors and you may be in for quite a shock.

The Bottom Line
As a practical matter, web pages should be designed to be as cross-browser and platform-independent as possible. Webmasters should view their web pages in the latest versions of the IE, Netscape, Opera and Firefox browsers — on both the Windows and Mac platform, if possible — at 800x600, 1024x768 and 1280x1024 screen resolutions. There is a free Windows-based software emulator available from MSNTV, formerly WebTV, that will give users an idea of how their websites will display on the company's set-top boxes and Windows-powered SmartPhones are inexpensive enough to be readily used as mobile testing platforms. And don't forget the PSP — not only is it the future of web and DVD content delivery but a great toy as well.