Chapter 1. Designing for a Variety of Browsers
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.
|
