Optimizing for Different Web Browsers

This page discusses how to display web site designs correctly to different browser programs. Looking to optimize the loading speed of a web page? Follow this link.

A web browser is the program used to display web site code. Commonly written in HTML, XHTML, XML, PHP, ASP and other formats. The browser program converts the document code to an image on a monitor.

Years ago there was just one graphically based web browser. It was called Mozilla. That browser grew up and became Netscape. When a designer built a web page it was written in HTML and set up for a 640X480 size 16 color screen. Ah, the good old days.

Computers got faster, the connection speeds increased and video cards improved, Microsoft entered the picture with Internet Explorer. Then AOL joined the open Internet. Java code and javascript offered new ways of doing on screen displaysand navigation. Things improved. Not for the designer!

Different Browsers & Versions handle web pages differently.

Fast forward to today. Surfers have many different browsers. Even though most broswers are free, many folks still run versions that are years out of date. Each browser and browser version runs on a different set of rules (how the page will display). Many different computer Operating Systems, video cards, screen resolutions, and monitor sizes have been added to the mix. If a designer writes to the bleeding edge spec (just beyond the cutting edge) of todays capabilities many surfers will have trouble seeing the page correctly, if at all.

If life was fair, all browsers would follow W3C standards. In reality, however, browser programers worked independently and implemented compliant features as well as non-standard features, all in somewhat inconsistent ways. The mix of browsers don't always display web pages in quite the way the designer intended or expected. As a final stake to the designers heart an individual surfer has complete control over the browser's internal settings and can chose to overide any display choice the designer makes. (colors, size and font)

The Solution(s):
To be fair there is no simple answer. There are several strategies to deal with the challegenes. Rather than simply redoing already well done instructions, links to sites covering the strategies are provided.

1. Write to a very simple basic HTML text based style that allows for a fluid display. For information on that style Click Here.
   
   
2. Convert most of the web site to a graphic display. This involves a simple image map or maps. Sample site. Instructions on how to.
   
   
3. Write multiple versions of the site and use javascript to display a different version based on the surfers browser. Detect browser type script.
   
   
4. Design to a specific browser and leave the rest of the surfers out in the cold. The fast way to do this is decide Netscape or MS IE. Currently MS IE (4, 5 & 6) is the most popular at 80+% of the world browser market. If you must build for Netscape use Netscape Composer which is part of the free download of Netscape. For IE your best bet is to buy the current version of MS Frontpage.
   
   
5. Design a middle of the road site, use CSS, check design features against different browser types and adjust the code (compromise site design) to create a site correctly viewable to most, 95-98%, of surfers.

It is WWW (world wide web):
If a web designer wants the greatest possible audience then choice 5 is the most practical. In fact, when working for hire, it is the most ethical. If we are talking an E-Commerce site it is vital to reach the widest possible cross section of potential customers. Unless there is a specific reason to limit the potential number of surfers to any given site, the word compromise quickly becomes part of a web designers daily mantra.

Study, Study and More Studying:
No attempt will be made here (see below) to try to sort out all the different browsers, rules, variations and web page programming styles (code). Just the warning that after building a web site it needs to be tested and tweaked as necessary (within the owners goals) to achive a balance in correct page display in the various browser types. At RLPG we test against the latest versions of AOL, IE, Netscape and Mozilla. In addition we test several others in alpha and beta versions. It our suggestion to the web surfer to download and install the latest version of their favorite browser.

Current Versions:
Currently AOL, Microsoft and Netscape provide their latest browsers free of charge.

• Microsoft IE Version 6 SP1
• Netscape Version 7
• A Non AOL related version of Netscape Mozilla
  Mozilla is a fast, relatively small browser (better than Netscape - no bloat)

  A slimmed down, relatively fast browser; Opera (Retail)

  W3C own browser Amaya (limited platform support)

  "Designed to be fun and easy to use"; Neoplanet

  All the current browsers started with Mosaic

  Development stopped in 1997 - works with Win 95 & NT - solid but outdated.

Sites Dedicated to Solving Compatibility Issues:
These are long term goal oreinted organizations that want all browsers to meet a current standard.

• The World Wide Web Consortium "W3C" to lead the Web to its full potential.
• Allows web page checking by older browser styles; delorie.com
• The Web Standards Project is a grassroots coalition fighting for browser standards.
• The Viewable with Any Browser Campaign is a noble effort.

Sites Dealing with Current HTML Incompatibilities:
These are (for the most part) in the trenches, make it work, NOW web designers.

• Deals with Browser useability; Lighthouse on the Web.
• Indepth examples and help with browsers' quirks A List Apart.
• A nice list of browsers and page compatibility issues; Yahoo; Internet Info
• Learn The Net has good tutorial on HTML compatibility here.
• Webdisplays has some good lists of that comapre browsers features.
• This is the area within aol.com that compares its browers features.

Largest Browser Program Archive:
Adrian Roselli of Algonquin Studios has put together a fantastic resource. Downloadable versions of nearly every past browser released. The URL is http://browsers.evolt.org/. The browser archive was built to ensure that the sites built would truly be usable, and not potentially usable based on imprecise data provided by third parties.

Color Depth:
This area used to be full of tips and tricks on dealing with the problem of dithered colors to work with the 16 color based video cards that most people were using. Today the statistic show that 46% of surfers have 65 thousand color displays, 39% have 65 million color displays, 10% have 16 million color displays and less than 5% use 256 color displays. Problem solved.

"more" Web Site Design Tips, Tricks and Secrets!

1. Page Loads: Surfers have short attention spans - i.e. they will not wait. Estimates range from 8 to 20 seconds to load a page and keep a surfer. That range is based on how bad they think they want to see your content. Your index page must load quickly. Learn how to optimize page loading.
   
   
2. Simple Navigation: Think of web site navigation in outline form. An organized presentation of information. Simple. Easy to follow. The path may need to be forced. Several different links leading to the ultimate goal. That goal is different - based on what the site is trying to accomplish. Have several different "testers" try the site under observation. Modify, based on their reactions, questions, success or failure to browse the site.
   
   
3. Meta Tags: The "meta-tags" contained between the <head> </head> html tags are used by many search engines to define the title, description and content of a web site. Proper use of meta-tags will help in placement with some of the "big 10" search engines. If the search engines can't find and properly index a site, neither can surfers using those engines. Learn about optimizing meta-tags.
    
4. Facade Pages: Use registered variations of the domain name to build, link, promote and track, "facade pages", to boost traffic to the primary domain. Web host hrc4.net offers facade pages.
   
   
5. Update Frequently: Give your surfers a valid reason to return to the web site(s) by constantly updating information, entertainment, providing a new service or presenting a new product. Make a "what's new" link part of the index page.
   
   
6. Ask For Feedback: Contact information and Email links must be easy to find. Ask for Questions and Comments!

The Universal Browser

The Holy Grail of Web Surfing: What every surfer and every web designer wants. Over the years several attempts and claims have been made. Part of the problem is the target, compatibility, is not a fixed standard. The definition of and technology that supports it keep changing. What is compatible today will be "old hat" in just 6 months as new capabilities of computers arrive. Programmers aren't standing still either. All the changes that cause challenges to designers are brought about by improvements in what browsers and plug-ins can do.

So designers can only build and re-build their sites as the rules change and the competition of building a better browser keeps moving the compatibility target.

Questions?... Comments ... Please  E-Mail us!

Back

Home  Photography  Graphics  Video  Models
Web Services  Leftovers  Links  Production Services
New  Affiliations  Privacy Policy