Transcript Chapter 1: Designing for a variety of browsers

Web Design in a Nutshell
Chapter 1 : Designing for a
variety of browsers
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
1
 Wiley and the book authors, 2002
Overview

Brief Synopsis:
 The browser problem
 Browsers
 Browser usage stats
 Browser features
 Design strategies
 Knowing your audience
 Test, test, test
 Standards
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
2
 Wiley and the book authors, 2002
The Browser Problem


Most web authors agree that the biggest challenge in
web design is dealing with the variety of browsers and
platforms.
Features and capabilities improve with each new major
browser release



This does not necessarily mean that older versions of browsers go
away. People continue using them years after they are obsolete.
How do you design pages that are aesthetically,
technically, and functionally intriguing without
alienating users with older or unusual browsers?
How many, if any, do you need to cater to?
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
3
 Wiley and the book authors, 2002
Browsers

The “Big Two”





The browser market is dominated by two major browsers: MS Internet
Explorer (MSIE) and Netscape Navigator (Mozilla).
Together, the “Big Two” comprise over 95% of browser use
Since 1994, the two main contenders battled for market dominance.
These early struggles to be cooler than the next guy resulted in a
collection of proprietary HTML tags and incompatible implementations
of new technologies.
Competition, however, also resulted in the rapid advancement of the
medium as a whole with dramatic improvements to the UI and
capabilities
Other Browsers




IE on the Mac (not the same as the IE for Windows)
America Online (uses different versions of IE and Netscape as its base)
Opera (touted to be more standards compliant, but don’t believe it)
Lynx (text-only browser)
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
4
 Wiley and the book authors, 2002
Browser Usage Statistics



Knowing which browsers are out there is just a part of the battle
Knowing how many people visit your site with which browser
will aid you in “tweaking” your site for the best response
Several methods exist for determining browser usage

Server log analysis (e.g. http://siu.globaleyes.com/stats
www.globaleyes.com) &


General statistics listings


Web servers record information about each page request including
information about what browser is requesting those pages
The Counter & W3 Schools
Most important method revolves around determining which
browsers people are using that are visiting your website

Especially if you can control which browsers are being used (e.g. in a
closed corporate environment)
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
5
 Wiley and the book authors, 2002
Browser Features



Once you’ve determined the browsers of choice for the
majority of your audience, you can make better
decisions regarding which HTML tags and which web
technologies are safe to incorporate into your design
HTML tags in the text are accompanied by a chart
indicating which browsers (& versions) support it
Compatibility charts


In addition to references next to each HTML tag in the text, page
10 has a compatibility chart for different HTML feature support
Online resources also abound for checking browser compatibility
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
6
 Wiley and the book authors, 2002
Design Strategies

The “correct” way of handling a particular site depends on its use and
audience

Lowest Common Denominator design



Current Version design



At the other end of the spectrum, are developers who design only for the most current
version of popular browsers with little concern for site performance for everyone else
Useful only for those sites which cater only to techies, etc.
Splitting the Difference


One way to make sure that your pages are accessible to everyone is to stick with the
safest HTML standard and shun any extras. This way your pages will work on all
browsers
This approach represents a conservative extreme in design strategies (useful only for
sites that will be viewed from the “red states”)
More commonly, designers take a balanced approach to site creation. Designing web
pages that “degrade gracefully” allows you to take advantage of the latest web
gadgets, but still make your site accessible for those with older or non-standard
browsers
Something for everyone

This approach creates multiple versions of websites for different browsers (i.e., if you
use IE, click here. If you use Netscape, click here…)
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
7
 Wiley and the book authors, 2002
Knowing your audience

As with most design challenges, making appropriate decisions
regarding which browsers to support and which new
technologies to adopt largely depends on knowing your
audience. Before designing a new site, be sure to spend plenty
of time up front researching the likely platforms, browsers,
technical savvy, and connection speeds of the users you are
targeting




If you are designing a scientific or academic site, you should probably
consider testing your site in Lynx and Netscape
If your site is aimed at general consumers, make sure that you are
especially cognizant of your sites performance and test with AOL
If you are designing for a controlled environment, you can do whatever
your chosen browser supports.
If you are designing a government site, you’re required by law under
section 508 to make sure your pages are accessible to all browsers
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
8
 Wiley and the book authors, 2002
Test, Test, Test!




The final word in the dilemma of designing for a variety of
browsers is test!
Always test your site on as many browsers, browser versions,
and platform configurations (operating systems) you can get
your hands on
If you don’t have the resources to keep a copy of each browser
and OS, try looking at your site from your friends, colleagues,
and workplace computers
Your pages will almost certainly look different in varying
environments, just make sure that everything functions, nothing
is broken, and your design is at least passable on the other
systems.
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
9
 Wiley and the book authors, 2002
The Importance of Standards



The Internet was built on standards. New standards
follow a painstaking process of RFCs (request for
comments), working groups, task forces, and
consortiums.
The web skipped over much of this standards process
initially resulting in many incompatibilities
Modern browsers, however, have made great strides
towards adhering to the latest standards, but aren’t
quite there yet.
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
10
 Wiley and the book authors, 2002