Chapter 1. Designing for a Variety of Browsers
Contents:
Browsers
Browser Usage Statistics
Design Strategies
Knowing Your Audience
Test, Test, Test!
The Importance of Standards
Most web authors agree that the biggest challenge (and headache!) in web design is dealing with the variety of browsers and platforms. While the majority of HTML elements are reliably rendered in most browsers, each browser has its own quirks when it comes to implementation of HTML and scripting elements.
Features and capabilities improve with each new major browser release, but that doesn't mean the older versions just go away. The general public tends not to keep up with the latest and greatest -- many are content with what they are given, and others may be using the computers of a company or institution that chooses a browser for them. The varying functionality of browsers has a strong impact on how you author your site, that is, which web technologies you can safely use to make your site work.
How do you design web pages that are aesthetically and technically intriguing without alienating those in your audience with older browsers? Does a page that is designed to be functional on all browsers necessarily need to be boring? Is it possible to please everyone? And if not, where do you draw the line? How many past versions do you need to cater to with your designs?
There is no absolute rule here. While it's important to make your content accessible to the greatest number of users, experimentation and the real-world implementation of emerging technologies is equally important to keep the medium pushing forward. The key to making appropriate design decisions lies in understanding your audience and considering how your site is going to be used.
This chapter provides background information, statistics, and current wisdom from professional web designers that may help you make some of these decisions. It begins with an introduction to the most common browsers in use today, their usage statistics, and supported features. After describing the browser landscape, it discusses various design strategies for coping with browser difference and, finally, what's being done in the industry to set things straight again.
1.1. Browsers
Before you can develop a strategy for addressing various browser capabilities, it is useful to have a general knowledge of the browsers that are out there. While web browsing clients are increasingly being built into small-display devices such as PDAs, telephones, and even car dashboards, this chapter focuses on the traditional graphical computer-based browsers that developers generally keep in mind. The particular needs of handheld devices are discussed further in Chapter 32, "WAP and WML".
1.1.1. The "Big Two"
The browser market is dominated by two major browsers: Microsoft Internet Explorer and Netscape Navigator. As of this writing, Internet Explorer is in Version 5.5 for Windows (5.0 for Macintosh) and the Navigator browser is one component of Netscape 6 (they did not release a Version 5). Together, the "Big Two," including their collective past versions, account for over 95% of browser use today.
Since 1994, these two contenders have battled it out for market dominance. Their early struggle to be cooler than the next guy has resulted in a collection of proprietary HTML tags and incompatible implementations of new technologies (JavaScript, Cascading Style Sheets, and most notoriously Dynamic HTML). On the positive side, the competition between Netscape and Microsoft has also led to the rapid advancement of the medium as a whole.
Netscape publishes information for developers at http://developer.netscape.com.Information about the Netscape 6 release can be found at http://home.netscape.com/browsers/6/index.html.
For information on designing for Internet Explorer, visit Microsoft's Internet Explorer Developer Center (part of its MSDN Online developer's network) at http://msdn.microsoft.com/ie/default.asp. Additional information is available on the Microsoft product pages at http://www.microsoft.com/windows/ie/ (for Windows) and http://www.microsoft.com/mac/products/ie/ (for Macintosh).
TIP
Although Netscape's browsing component is still officially called Navigator, Netscape seems to be downplaying "Navigator" and promoting its latest product release simply as Netscape 6. Because this is the title that has stuck with the industry, this book refers to "Netscape 6," but uses "Navigator" for previous releases.
1.1.2. Other Browsers
Most web authors base their designs on the functionality of Navigator and Internet Explorer on Windows systems, since they claim the lion's share of the market; however, there are a number of other browsers you may choose to take into consideration.
1.1.2.1. Internet Explorer on the Macintosh
For better or worse, Internet Explorer releases for the Macintosh platform have varied in functionality from their Windows counterparts. Web usage statistics indicate that Mac users account for just 2-3% of global web traffic, but if your site has Mac-targeted content, keep the following browser differences in mind.
IE 5.0 for the Mac (the current version as of this writing) was the first browser on any platform to be almost fully standards-compliant, thanks to its specially developed Tasman rendering engine (see Section 1.6, "The Importance of Standards" later in this chapter). In general, you can treat Mac IE5.0 like Windows IE5.5 or Netscape 6.
The Macintosh version of IE4.0 lacks significant functionality found in its Windows sibling. This Mac version has no embedded font support, no support for CSS filters and transitions (such as drop shadow effects), and a very problematic DHTML implementation. Some of these issues were addressed in Version 4.5 (the first Mac version that significantly deviated from the Windows version). As a general guideline, treat Mac IE4.0 and 4.5 like Navigator 3.0.
1.1.2.2. America Online
America Online subscribers use a variety of Internet Explorer browsers, ranging from Version 2 to 5.5 (the most current as of this writing). The browser version number is not necessarily tied to the AOL release, as noted in this excerpt from AOL's developer site:
Beginning with Windows AOL 3.0 (32-bit), theAOL client does not have a browser embedded, but instead uses the Internet Explorer browser the user already has installed within their system. On the Mac and 16-bit Windows clients, theAOL client containsvarious versions of Internet Explorer embedded directly within the client, andindependent of the versionof Internet Explorer installed outside AOL in the system. Therefore, browser compatibility is mostly independent ofany specific AOL version.
As of this writing, approximately 80% of AOL users view the Web on Windows machines using Internet Explorer 5.0 or higher. While this is encouraging news, the reality is that Internet Explorer's functionality is limited somewhat when used in conjunction with the AOL client. This is due to the way the specific AOL clients interact with the browser and AOL's reliance on proxy servers and image compression techniques. Many web designers have been horrified to see their site design (which works perfectly in all the major browsers) once it's been run through the AOL system.
Fortunately, AOL publishes a site specifically for web developers who want their sites to be accessible and attractive to AOL users. Of particular use is the browser chart, which provides a specific listing of each of its browsers (by release and platform), the technologies and features supported, and a breakdown in percentage of users for each browser. It also provides a style guide for optimizing web pages for its newly released AOLTV set-top browsing device.
AOL's web developer site can be found at http://webmaster.info.aol.com.
1.1.2.3. WebTV
WebTV was the first to bring web surfing to the living room with a set-top box, an ordinary television, and a remote control (an optional keyboard is also available). WebTV uses its own specialized browser for viewing web pages.
The WebTV browser supports HTML 3.2 (plus a few 4.0 tags and handful of WebTV proprietary tags), graphics, tables, frames (with some problematic behavior), forms, cookies, JavaScript 1.2, a subset of the CSS1 Style Sheets specification, a wide variety of audio and video formats, and Flash 3. The browser does not support Java, PDF files, or streaming Flash formats.
Because WebTV displays web pages on televisions, it introduces new concerns regarding color and screen size.
WebTV publishes a developers' resource where you can find specific information regarding developing sites for WebTV (http://developer.webtv.net) It includes information on HTML and various web technology support.
You may also choose to download their free tool called WebTV Viewer (available for both Windows and Mac, although the Windows version is more up to date as of this writing). WebTV Viewer shows how your web page will look and perform on WebTV, right from the comfort of your own computer. For information on WebTV Viewer, go to http://developer.msntv.com/Tools/WebTVVwr.asp.
1.1.2.4. Opera
Opera, in Version 5.0 as of this writing, is a lean and mean little browser created by Opera Software in Oslo, Norway. It is currently available for Windows and Linux platforms, although the Opera 5 for Mac beta version was released in mid-2001. Opera is free if you don't mind ad banners as part of the interface. To register the browser and get rid of the ads, the price is $39.
Opera boasts extremely quick download times and a small minimum disk requirement (around 2 MB, compared to IE's 24 MB download). Opera is respected for its exact compliance with HTML standards. Sloppy tagging that gets by the larger browsers (such as missing closing tags, improper nesting, etc.) does not render correctly in Opera.
Opera 5.0 supports Java, HTML 4.01, Cascading Style Sheets (CSS1 and the vast majority of CSS2), JavaScript, and DHTML. While it does accept plug-ins, the word on the street is that they are somewhat difficult to install.
The general public is not likely to flock to Opera, and it never so much as blips in the browser statistic charts; however, many designers continue to test their sites in Opera to make sure their code is clean.
For more information about Opera, see http://www.opera.com.
1.1.2.5. Lynx
Last, but not least, is Lynx, a freely distributed, text-only browser that offers fast, no-nonsense access to the Web. It stands proud as the lowest common denominator standard against which web pages can be tested for basic functionality. Lynx may be a simple browser, but it is not stuck in the past. Lynx is constantly being improved and updated to include support for tables, forms, even JavaScript. People do use Lynx, so don't be surprised if a client demands a Lynx-compliant site design. Lynx is also important to users with disabilities who browse with Lynx and a speech or braille device.
The Extremely Lynx page is a good starting point for finding developer information for Lynx. You can find it at http://www.trill-home.com/lynx.html.
For information on designing Lynx-friendly pages, see http://www.cs.umanitoba.ca/~djc/personal/lynxfriend.html.
 |  |  |
| I. The Web Environment |  | 1.2. Browser Usage Statistics |
Copyright © 2002 O'Reilly & Associates. All rights reserved.