The long running problem:
One of the common problems facing web designers today is not so much the design and creation of the site itself but rather ensuring it displays correctly in all of the popular web browsers. Many issues can affect the way a designer creates a site, in some cases ambitious ideas and features have to be scrapped to make way for a “safe” approach making sure all browsers can display a page without errors. This blog post will hopefully provide you with an insight to the problems of cross browser compatibility and possibly a solution that could help you create a design that looks great and works in all browsers.
Browsers statistics:
Today the most popular browsers are Internet Explorer, Firefox, Chrome and Safari. With so many browsers the job for a designer can be a nightmare. We can already see that newer browsers such as Firefox are gaining an impressive usage but is it fair to simply design for it? Our key aim in this post is to find out how we can design with a positive approach to cross browser compatibility, below are a few of the ways we can do so.
Ways to test your web site for problems in all browsers:
If you are a designer or even the owner of a website you MUST test in multiple browsers
This can be the best way to understand the mistakes you are making when producing a design for the web. You can test this in many ways, for one you can install multiple browsers on your computer so as you design your site you can simply refresh your site locally in a real time environment and see the changes. This method has been successful for many designers but many problems do exist with this, while we may have browsers such as Mozilla Firefox , Chrome, Safari and the IE series installed, we may not always be seeing the changes made in certain browsers with previous versions. For example from experience browsers such as Internet Explorer it is very hard to test all earlier versions on the same machine, these type of browsers have the habit of updating themselves to provide you with the best possible render of that browser. So while you think you are creating a great looking site in Safari, Firefox and even IE7 & 8 there is always that problematic Internet explorer 6 contributing to your design woes.
Moving away from the older methods of testing your browsers on your own machine we can now rely on resources from the web, today we can see a vast amount of browser testing applications that run simply from the net. This now keeps a designers work area clean and allows them to simply refresh four browsers using simply one application. This would seem a more reliable form of testing for designer so what are the applications you can use?
Adobe Browser Lab:
Sign up for an Adobe account then test your web site. In my eyes this application provides the most complete way to test cross browser compatibility, with a vast amount of browsers to pick from you can feel safe that whatever you are designing it will be covered by browser lab.
Litmus:
Over a period of just a few months, Litmus has risen in popularity to become one of the most favoured cross-browser testing tools on the market today.
Unfortunately, their free options are very limited and only allow testing in IE7 and FireFox 2.
Browser Shots:
Browser Shots has become one of the most common methods of testing lately, and with good reason. They allow testing in almost any browser/os, including some very rare combinations. But due to its popularity many renders of browser screen shots can take a little longer than its competitors in other applications such as Adobe.
A Brief Conclusion:
Overall we can all agree that as long as there are multiple browsers out there no two will ever behave the same and this is something a designer must take on board when design the hardest of designs. Technology may evolve browser wise but it is apparent from this blog that we will always have visitors to our sites that will use the older software out there. Although apparent and sometimes irritating to the designer we must accept the problems faced when trying to create that perfect look in all browsers, in doing so we can help out own technique by using methods shown above.
