How To Make Your Website Design Compatible With Old Browsers

22 April 2009
In the age of technological advancements and evolution of development standards, certain old browsers are lagging behind.

In the age of technological advancements and evolution of development standards, certain old browsers are lagging behind. While some are unable to support new technologies and file types, others fail to provide a rich user experience to the website visitors. All these factors take toll on the website design and determines the overall success of the website on the World Wide Web.

Problems with Old Browsers
One of the major challenges faced by website designers is making the website compliant with outdated and non-compliant web browsers. Users browse the internet through a variety of web browsers. While some use new age Mozilla Firefox and Google Chrome, there are others who swear by Internet Explorer, Opera 9.6 and Safari4.

The plethora of browser options available on the internet makes the job difficult for website designers and developers. This is because each browser renders a website differently. Moreover, as browsers improve over time, they are able to manage JavaScript, deal with server calls and render images differently. This makes it even more difficult for website designers to create websites that look good and perform well on all major web browsers.

For example, Firefox and Google Chrome are two browsers that keep users up to date by enabling automatic update. On the other hand browsers like IE 6 lack this feature totally. On the other hand, there are some new age browsers that don't comply with the standards specified by the World Wide Web Consortium (W3C). The W3C is an independent body that specifies certain web standards for the designers and developers in order to maintain uniformity in the web coding principles.

Solving Old Browser Problems
The old browser problems can be efficiently solved by applying the 80/20 rule known as the Pareto principle. According to this, 80 percent of online business is generated by 20 percent of potential customers. However, it should be taken to account that what percentage of your customers use what browsers lest your incorporate changes on your website to cater to a insignificant population.

Firefox vs. IE 7 and IE 6
Firefox – Creating a website that performs efficiently on Firefox is a relatively easy task. All you need to do is follow the standards specified by the W3C and your website would render perfectly fine on the browser.

IE 7 – However, it is not as easy with IE 7 because it has some W3C incompatibility issues that further leads to non compliant behavior. Here are some common problems.

Peekaboo Bug – This bug is a result of management of box models by IE 7
Border Chaos Bug – IE 7 scrambles box borders as a result of negative margins for consecutive boxes
Double Float Margin Bug – IE 7 causes margins to get doubled on floated elements.

IE 6 – The main problem with IE 6 is that it fails to render alpha transparency in PNG files. PNG files are by far the most efficient way to store transparent and semitransparent images. However, IE 6 renders it completely useless.

Solutions to overcome these Problems

Use JavaScript and Make Users Upgrade

Use JavaScript to identify the bowser used by website visitors and request them to upgrade their browsers. The request should be accompanied with information about what benefits they would gain if they upgrade. Users only put in effort into something if they know they can have some advantages.

Use IE Only Conditional Comment
Use a conditional comment that points your website to an IE 6 safe CSS style sheet. This usually negates the problems of older versions of the Internet Explorer because you can create two versions of the web pages – one that is regular W3C compliant and other that is IE friendly. Also, IE specific CSS can be used to display hidden elements that asks users to upgrade their web browsers.

Maneet Puri is the managing director of LeXolution IT Services, a professional web development company based in India. The company specializes in offering a variety of outsource web design services like website design & development, website maintenance and search engine optimization.

 

blog comments powered by Disqus