Your site should degrade gracefully

Browsers all interpret your web site slightly differently. Should the aim be to have your site look identical across multiple browsers, or for your site to take advantage of the latest enhancements offered by modern browsers while still covering the basics for the older ones?

Internet browsers all serve the same basic purpose: They display content contained on a web server based on a visitor's request. (The request could be in the form of typing a URL into their browser's address bar or simply clicking on a link.) This process is described below:

1. A user enters a URL (web address) into the Address Bar of their browser.
2. The browser then determines which web server hosts the content for the requested URL.
3. The browser then sends a request to the web server for the relevant content that makes up the website. This could require additional computation by the web server if the document requested is written in an advanced programming language like .NET or PHP.
4. The resultant HTML document sent back by the server is downloaded to the user's computer.
5. The browser starts to process the document and may be instructed (by the document itself) to retrieve additional supporting files from the web server. These could include CSS, Javascript, images, and video etc.
6. The browser then organises all the content into a visually pleasing and logical format for the user, based on the instructions included in the retrieved HTML, CSS, Javascript and other files.

Our problem lies in step 6 - the processing and organisation of the downloaded contents. Each and every browser - be it Chrome, Firefox, Safari or Internet Explorer - will interpret the instructions contained in the HTML and CSS slightly differently. Adding to the confusion is the fact that even various versions of the same browser can display the same element differently.

Web standards and the light at the end of the tunnel

This problem is slowly being negated by a common set of web standards that browsers are meant to adhere to, although even some of these rules seem to be open to interpretation. Web browsers like Firefox, Safari and Chrome all support these standards with only a small handful of quirks. Unfortunately the same cannot be said for Microsoft's Internet Explorer. While this browser continues to improve with each major release, it's older versions - namely Internet Explorer 6 and Internet Explorer 7 (both of which still hold a fairly large market share thanks to lousy IT departments in corporate environments and the lack of high speed Internet to facilitate alternative browser downloads in the developing world) - are nothing short of atrocious in their flagrant disregard for the standards laid out by the W3C.

Browser usage statistics reveal that as at January 2010, 10% of web surfers still use Internet Explorer 6 (released in 2001) and 12% still use Internet Explorer 7 (released in 2006). This means that we cannot easily ignore them when building a site, but rather need to go out of our way to accommodate them. This process is costly and resource intensive, but cannot be avoided.

Building web sites that degrade gracefully

There are two ways to build web sites. You can build a web site specifically for the lowest common denominator, which will almost always be Microsoft's charming Internet Explorer 6. Doing this ensures that the web site not only works but also looks identical in all browsers. Unfortunately this also means that you're ignoring the last nine years of evolution in web design, effectively hamstringing your site.

You can alternatively build it for the strongest browsers on the market (adhering to web standards) and ensure that it degrades gracefully in older browsers. This means using the very latest technology and enhancements available to you, most of which will not be supported in Internet Explorer 6 and possibly 7, but also providing fallback information for the older browsers so that if a command is not understood, there is a backup instruction guaranteed to work. This ensures that your web site can use the very latest tools available, often greatly improving areas such as design or user experience. The down side, if you can call it that, is that your web site will look slightly different across multiple browsers.

The Hatchery will always choose the latter option when building your web site.

How major are these differences?

As I mentioned, most of these enhancements involve either design or user experience, and are thus cosmetic. Examples of this include a heading that could have a text-shadow effect applied to it in modern browsers but would just appear as plain text in Internet Explorer 6, 7 and 8; or a box which could have rounded corners and a gradient background in newer browsers but would appear as a solid rectangle in older ones. Overall structure and colours should not be affected in any way.

Adhering to standards futureproofs your site

Internet Explorer has been around for a long time - too long in most designer's minds! But thankfully it is being phased out. Microsoft will stop supporting it (no more security fixes etc.) in 2011, and many influential web presences like Google Docs and YouTube have formally stopped supporting it already (or will do in the next month or so). Once it is gone you do not want to be amongst a crowd of competitors who chose to to use the latest technology available to them whilst you aimed for a basic Internet Explorer 6 compliant site. The fact that your site may look slightly different across multiple browsers really shouldn't be a major concern.