Designing cross-browser friendly websites
Sure, designing a site for all browsers takes time, efforts and, sometimes, nerves. Is there an easy way to create cross-browser compatible designs with the least possible amount of effort?
There are web standards, such as HTML and CSS, and there are web standards compliant browsers. By following the technologies to the letter ((x)HTML/CSS), you can create sites that will work in all web standards compliant browsers. But they won’t work in IE right away, because IE doesn’t support CSS well. In fact, IE is infamous for its lack of CSS support (bugs).
They removed a couple of issues in IE7 and are still working on it, but there isn’t and won’t be full support for CSS in IE7 to call it as web standards compliant as Firefox or Opera.
That’s why CSS developers (yes, that may include you, too) create sites that follow HTML and CSS specifications (the web standards) and work in Firefox, Opera, Safari and other browsers first. Then they overcome IE bugs by adding code that would trick IE in displaying the site right after all.
However, having all the IE fixes in the same stylesheets will both make them larger and harder to edit, so you can create a CSS layout for Firefox/Opera, then add any styles required to make IE display the site correctly, put the IE-specific styles in a separate external stylesheet and attach it via the IE-only IF conditional clauses. This way only IE users will have to wait while IE fixes are loaded and it will be easy to edit the IE fixes in the special separate CSS file.
Generally, one of the most often used fixes is the ‘box model hack’, along with other IE-only predicaments.
How do you create cross-browser friendly sites? Is there a set of fixes you always include in your designs? Why?
Related posts:
- Redesigning a site with CSS to improve business
- Using analogies in web design
- Neat Redesign’s two month’s digest