Web Design in a Nutshell

1. Web Design in a Nutshell Chapter 1 : Designing for a variety of browsers

2. Overview • Brief Synopsis: • The browser problem • Browsers • Browser usage stats • Browser features • Design strategies • Knowing your audience • Test, test, test • Standards

3. 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?

4. 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)

5. 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/statswww.globaleyes.com) & • Web servers record information about each page request including information about what browser is requesting those pages • General statistics listings • 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)

6. 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

7. Design Strategies • The “correct” way of handling a particular site depends on its use and audience • Lowest Common Denominator design • 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”) • 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 • 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…)

8. 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

9. 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.

10. 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.