Building a Website? Know Your Browsers
If you're building a new website, it is important to ensure compliance with all major browsers. There are three main browsers that you should focus on to ensure good compliance; Google Chrome, Mozilla Firefox, and of course Internet Explorer. Fortunately for web-developers, there is a growing trend for people to have the best and latest browser, and this gives us the opportunity to create fancy web layouts that may have compatibility issues with older browsers. Unfortunately however, even with increasing popularity of Google Chrome and Firefox, there are simply too many users sticking to the default browser that comes supplied with their operating system. In particular Internet Explorer; which as you will no-doubt find-out for yourself, causes a whole boat-load of compatibility issues.
As web-developers, it is important to keep everything compliant. Anything processed locally by the web-browser must be compatible with every modern browser, or employ fall-backs to prevent errors from occurring on the page. If you're veiwing website desings directly in Dreamweaver my advise is to stop. Dreamweaver uses it's own built-in browser, and often it is outdated, and may display perfectly valid code incorrectly. You may want to download some additional web-browsers for compliance testing.
There are 4 major layout engines used by web-browsers; Trident, WebKit, Gecko, and Presto. While this in itself is not particularly important from a web-design point of view, it does help understand the reason for layout discrepancies with different browsers. For example, Google Chrome & Safari are both WebKit based as illustrated in the chart below, so these would render virtually the same. However Firefox is Gecko based, and often this is enough to break your design.
Recommended browsers for compliance testing (in order):
- Google Chrome (WebKit)
- Mozilla Firefox (Gecko)
- Internet Explorer (Trident)
- Safari (WebKit)
- Opera (Presto)
Image courtesy of Wikimedia.org
Do not rely on a single browser to test your designs, especially Google Chrome. Google Chrome supports just about every web markup out there, including some that haven't even been officially released yet. Chrome also allows for a lot of page errors, and can usually correct for missing tags automatically, and that's great! ...For the users, not so great for web-developers. Different browsers react differently to these errors, sometimes dramatically changing the layout of a page.
Mozilla Firefox has a great add-on available called Firebug, a web-development tool used to Inspect HTML and modify style and layout in real-time. I highly recommend this add-on for debugging any misbehaving code.
If Internet Explorer is the most popular web-browser, why prioritise other browsers? Simple, it's easier. If you design a website in HTML5 with lots of fancy CSS3 semantics (and why wouldn't you?), chances are most of it won't work in IE9.0, and none at all in IE8.0. Instead, test your designs with a modern browser, and then worry about making it "work" in IE. See this article for more information on how to deal with IE.
There are lots of web validation tools out there, none as comprehensive as the W3C Validator. However you should not rely on validation alone, especially with HTML5. Just because your code is "valid" doesn't mean it's well structured. It's up to you to ensure your code is well optimised. The HTML 4.01 specification was very strict about what you could and couldn't do, and so validation was usually enough. You can get away with a lot more with HTML5, but be careful not to make the common mistake of assuming the validator knows best. There's no harm in skimming through your source code the old fashioned way.