Have you ever noticed that your website looks different across different browsers such as:
- Microsoft Internet Exploer (IE6)
- Mozilla Firefox
The primary reason is standards. The World Wide Web Consortium (W3C) and the Internet Society work to define, develop and promote standards. By having standards, independent designers and developers can create open source software and websites that will be compatibile across the internet. So, a website that is built to standards will look the same on my Mac as it will on your PC, for example. Indeed, it is because of standards that has enabled the Internet to grow as fast as it has over the past 15 years.
The reason why some websites don’t look the same is because the internet browsers, i.e., the programs we use to view and navigate websites are not all built strictly according to the same standards. Some companies, like Microsoft, build additional features and functionality into their browsers which may provide a richer user experience but this only works if web designers and developers create code according to Microsoft’s proprietary non-standards.
Safari, IE7 and Firefox tend to comply better with universal standards whereas IE6 tends to rub up against or caust problems with these universal standards. And now, with HTML5 and CSS3 on the way to final development, acceptance and proliferation then we can expect to see more incompatibilities with legacy browsers.
It is possible to make a website look the same on IE6 as it does on IE8, Firefox or Safari. However, in some cases, depending on the style or effect we are trying to create, it is a significant amount of additional work. We are not afraid of work, we simply want to make sure that our work adds value. So, if it takes 2 hours to create square corners on a button but 12 hours to create rounded corners on a button, we need to make sure the additional 10 hours of work is justified by the aesthetic value.
NOTE: the number of hours are theoretical, not actual.
We could take the easy way out and rely more on tables and JPGs instead of CSS, but that often compromises Section 508 accessibility, maintainability, server performance and load time. So, there are a lot of variables and constraints that we need to consider as we design for accessibility and cross-browser compliance.
In order to replicate the problem and create a screenshot of IE6 behavior (or misbehavior), we have to do the design in HTML/CSS and then run it through IE6. It could take several days of work simply to demonstrate the IE6 behavior. In addition, we cannot always anticipate every behavior (or misbehavior) of IE6. For this reason, we call the misbehaviors “glitches” and the solutions “hacks”.
In order to minimize unintended glitches and need for hacks, try to stick to W3C standards as well as techniques like a 960 grid, square corners, minimal background patterns and gradiants, etc. Designing according to these standards and methods produces more consistent results across a wider array of internet browsers.