Most web authors agree that the biggest challenge (and headache!) in web design is dealing with the variety of browsers and platforms, each with its own support and 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 many others may be using the computers of a company or institution that chooses a browser for them.
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?
This chapter provides background information, statistics, and current wisdom from professional web designers that may help you to make some of these decisions.
There’s 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.
The browser market is dominated by the two major browsers: Netscape Navigator and Microsoft Internet Explorer. As of this writing, Navigator is in version 4.0 and Internet Explorer is in version 5.0. Together, the “Big Two,” including their collective past versions, account for approximately 90% (or more) of browser use today.
The browser landscape has been dominated by these two contenders as they battle it out for market dominance. Their struggle to be cooler than the next guy has resulted in a collection of proprietary HTML tags as well as incompatible implementations of new technologies (most notoriously Dynamic HTML, but also JavaScript and Cascading Style Sheets). 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/. Of particular interest are the documentation pages, including listings of Netscape’s HTML tag support at http://developer.netscape.com/docs/manuals/.
Microsoft provides a rich resource of developer information at their SiteBuilder Network site, http://www.microsoft.com/sitebuilder/, and the SiteBuilder Workshop, http://www.microsoft.com/workshop/.
Most web authors base their designs on the functionality of Navigator and Internet Explorer, 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.
Not all IE4.0 browsers are created equal! The Macintosh version of IE4.0 lacks significant functionality found in its Windows sibling, so including 4.0-specific features in your site may still leave some users out. As a general guideline, treat Mac IE4.0 like Netscape 3.0.
Some documented shortcomings include:
No embedded font support
No support for CSS filters and transitions (visual effects such as “drop shadow” that can be applied to text elements)
No multimedia controls (animation and transition effects ordinarily created by multimedia authoring software)
Problematic DHTML implementation: despite the fact that Microsoft claims DHTML is supported on all platforms, it’s extremely unreliable on the Mac
Microsoft’s official statement on Cross-Platform Functionality can be found at http://www.microsoft.com/workshop/essentials/versions/xplatform.htm.
America Online subscribers use one of seven possible browsers (depending on their platform and version of the AOL software), some of them lacking all but the most minimal HTML support.
The current version of America Online for the PC, 3.0 as of this writing, uses an adaptation of the Microsoft Internet Explorer 3.0 browser; however, you can’t always count on it to perform the same as the standard MSIE 3.0 release. (Functionality is particularly limited for Mac users.) 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 and spit out in one of their browsers.
The difference is partly due to AOL’s reliance on proxy servers and image compression techniques. Their image compression is known to have problems displaying JPEG graphics, resulting in blotchy and color-streaked images (see Chapter 15, for more information). Problems have also been noted in the display of background images.
In addition, some technologies, such as Java and Cascading Style Sheets are not available to users with Windows 3.0 (approximately 40% of AOL’s audience). JavaScript (and many other features) will not work for AOL’s Macintosh users (approximately 8%).
Fortunately, AOL publishes a site specifically for web developers who want their sites to be accessible and attractive for 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.
AOL’s web developer’s site can be found at http://webmaster.info.aol.com/.
WebTV brings 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. It does a respectable job of parsing standard HTML 3.2, but is unable to display frames, Java, JavaScript, ActiveX, or any format that requires a plug-in (except Shockwave Flash and RealAudio 3.0, which are built in). They have also created many new proprietary HTML tags for use only with WebTV.
Because WebTV displays web pages on televisions, it introduces new concerns regarding color and screen real estate. This unique browsing environment is discussed further in Chapter 2.
WebTV publishes a developers’ resource called “Primetime,” where you can find specific information regarding developing sites for WebTV, including a list of the WebTV proprietary tags. WebTV Primetime can be found at http://www.webtv.net/primetime/.
A search for “WebTV” on Yahoo (http://www.yahoo.com) retrieves a number of other useful WebTV resources.
Opera is a lean and mean little browser created by Opera Software in Oslo, Norway. It is currently only available for the Windows platform, although a Mac version is in the works. As this book goes to press, Opera costs $35 (that’s $35 more than Navigator or Internet Explorer), but it boasts extremely quick download times and a small minimal disk requirement (just under 1.2 MB). 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.) will not render correctly in Opera.
Opera 3.0 does not support Java, Cascading Style Sheets, or DHTML, although Java support is promised to be added in version 4.0 (not available as of this printing).
The general public is not likely to flock to Opera, so it may never figure high in browser usage statistics; 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.operasoftware.com/.
Last, but not least, is Lynx, a freely distributed text-only browser that offers fast, no-nonsense access to the Web. It has stood 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 partially sighted users who browse with Lynx and a speech device.
The Extremely Lynx page is a good starting point for finding developer information for Lynx. You can find it at http://www.crl.com/~subir/lynx.html.
For information on designing Lynx-friendly pages, see http://www.crl.com/~subir/lynx/author_tips.html.
Knowing what browsers are most used can be helpful in deciding which technologies to adopt and where to draw the line for backwards compatibility. The most meaningful statistics are those culled from your own site’s usage. Server tracking software typically breaks down hits according to the browser making the request, so if you find that only 20% of your visitors are using 4.0 version browsers, for instance, you might not want to switch your site over to style sheets just yet.
There are a few browser statistics sites available on the Web. These sites base their statistics on hits to their own pages, which skews the data towards users who care about browser stats—probably not the same section of society using the Web to research a new car purchase or look up television schedules. BrowserWatch provides statistics that are meticulously broken down by version, sub-version, and sub-sub-version for each particular browser.
Because the sampling base is probably not representative of the whole web audience, the statistics on these pages shouldn’t be considered as absolute fact, just general guidelines. It’s interesting to see the long scrolls of browsers you’ve never heard of that make up .1 to .5% of overall site usage.
- BrowserWatch
- Which Browser
- BrowserCaps
As of this writing, the latest trend in browser usage is the closing of the gap between Netscape Navigator and Internet Explorer. In mid-1997, Netscape enjoyed a comfortable 70-80% of the overall browser usage (according to statistic sites such as those listed above). Currently, they are running neck-and-neck at about 40-45% of the market share each (all versions included). This may be due to the fact that IE is so integrated with the Windows operating system that new users are using Internet Explorer by default. It may also reflect consumer approval for the quality of the IE software.
Another trend is that some webmasters are beginning to see WebTV hits increase. Although WebTV is slowly gaining in popularity, it is not making a tremendous impact on browser statistics. It may be difficult to track the WebTV browser, because those users are not likely to ever visit browser statistics sites.
Browser statistics change much faster than book publishing schedules, so the statistics presented below are not necessarily meaningful; however if you are completely unfamiliar with the typical browser breakdowns, these statistics from the BrowserWatch site should give you an idea of who’s using what—as of this writing of course. These were the number presented on July 13, 1998. One caution: some of the browsers in this chart are obscure or defunct; don’t expect to see them in any sizable numbers.
|
Netscape Navigator |
52.00% |
|
Microsoft Internet Explorer |
35.80% |
|
Cyberdog |
2.42% |
|
Ibrowse |
1.37% |
|
Opera-3.0 |
1.22% |
|
Lynx |
0.93% |
|
Echo |
0.68% |
|
MacWeb |
0.40% |
|
NEWT ActiveX |
0.30% |
|
EmailSiphon |
0.27% |
As an indication of how statistics can vary, these statistics were taken the same day from the Which Browser site.
Again, the most meaningful browser usage statistics will be those gathered from your own site.
Once you’ve determined the browsers of choice for the majority of your audience, you can make better decisions regarding which HTML tags and web technologies are safe to incorporate into your design. Likewise, you can determine how much of your audience you risk alienating by relying on certain features such as Java or JavaScript.
Every HTML tag in Part II of this book is accompanied by a chart indicating which browsers support it. Exceptional attribute support (or lack thereof) is noted in the descriptions following each tag.
Table 1.1 provides a general listing of popular browsers and the web features and technologies they support.
Table 1-1. Browser Support for Web Technologies
|
HTML 3.2 |
HTML 4.0 |
Anim. GIFs |
Tables |
Frames |
Plug-ins |
Java |
Java- Script |
Style Sheets | |
|---|---|---|---|---|---|---|---|---|---|
|
Windows | |||||||||
|
Navigator 4.0 |
yes |
partial |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
|
Navigator 3.0 |
yes |
— |
yes |
yes |
yes |
yes |
yes |
yes |
— |
|
Navigator 2.0 |
yes |
— |
yes |
yes |
yes |
yes |
yes |
yes |
— |
|
Navigator 1.0 |
— |
— |
— |
yes |
— |
— |
— |
— |
— |
|
Explorer 5.0 |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
|
Explorer 4.0 |
yes |
partial |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
|
Explorer 3.0 |
yes |
— |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
|
Explorer 2.0 |
— |
— |
— |
yes |
— |
— |
— |
— |
— |
|
Explorer 1.0 |
— |
— |
— |
yes |
— |
— |
— |
— |
— |
|
AOL 3.0 (Win95) |
yes |
— |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
|
AOL 3.0 (Win3.0) |
yes |
— |
yes |
yes |
yes |
yes |
— |
yes |
— |
|
Mosaic 3.0 |
— |
— |
— |
yes |
yes |
— |
— |
— |
— |
|
Mosaic 1.0 |
— |
— |
— |
— |
— |
— |
— |
— |
— |
|
Opera 3.0 |
mostly |
— |
yes |
yes |
yes |
— |
— |
yes |
— |
|
Macintosh | |||||||||
|
Navigator 4.0 |
yes |
partial |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
|
Navigator 3.0 |
yes |
— |
yes |
yes |
yes |
yes |
yes |
yes |
— |
|
Navigator 2.0 |
— |
— |
yes |
yes |
yes |
yes |
— |
yes |
— |
|
Navigator 1.0 |
— |
— |
— |
yes |
— |
— |
— |
— |
— |
|
Explorer 4.0 |
yes |
partial |
yes |
yes |
yes |
yes |
yes |
yes |
tial |
|
Explorer 3.0 |
yes |
— |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
|
Explorer 2.1 |
— |
— |
— |
yes |
yes |
yes |
— |
— |
— |
|
AOL 3.0 |
yes |
— |
yes |
yes |
yes |
yes |
— |
— |
— |
|
AOL 2.7 |
— |
— |
— |
— |
— |
— |
— |
— |
— |
|
Mosaic 3.0b4 |
— |
— |
— |
yes |
yes |
— |
— |
— |
— |
|
Mosaic 2.0 |
— |
— |
— |
yes |
— |
— |
— |
— |
— |
|
Mosaic 1.0 |
— |
— |
— |
— |
— |
— |
— |
— |
— |
|
Set-top | |||||||||
|
WebTV |
yes |
— |
yes |
yes |
— |
— |
— |
yes |
Get Web Design in a Nutshell now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
