You've just finished building a new website, all of the content is flowing how you want it, the images look great and you're satisfied with a job well done - that is until you open that website project in IE instead of Chrome and now you're back to square one. If you are responsible for a website in any way, this scenario probably sounds incredibly familiar. Today, the market share of web browsers for North America is significantly split with the top browser, Chrome, only getting 26.2% of total market share (Visit the w3schools site for global browser stats) . IE 9 is a close second with 25.1%. Here's a full run down of the top six browsers according to a recent study by StatCounter:
The issue arises when you consider that each of these browsers interpret HTML and CSS slightly differently than the other and optimizing for all of them can be difficult. Here are a few quick tips for ensuring your website looks best in the browsers your site visitors are using.
1. Know which browsers your site visitors are using. It may seem like a no-brainer, but be sure to check regularly so that you know that your site visitors are still using the browsers you have your site optimized for. Sure, Chrome is currently the most popular browser in North America, but is it the most popular with your visitors? IE 9 is a significant upgrade from IE 8 - have your visitors made the switch? Check your Google Analytics account at least once or twice per year to be sure you know where the bulk of your traffic is coming from.
2. Cross-browser test. There are free tools out there that you can use to quickly test what your site looks like across browsers, such as Browser Shots. Before you make a new web page live, it's worth it to do a quick check on one of these sites or services to ensure everything that looks perfect in IE 9, still looks great in Firefox. Don't forget to take a quick look on mobile devices as well. IE9 also provides some great new tools that allow a designer/developer to test a website in multiple versions on the fly. The new debug tool may not be as powerful as the tools found with Chrome or Firefox, but it can still assist with addressing some frustrating issues. Here is an article providing more detail on the debug tool: www.sitepoint.com/debug-faster-with-f12-developer-tools-in-internet-explorer-9/.
3. Design and code for compatibility. Aside from making sure your HTML is as error-free as possible (to help with that here is a free validator to catch any open tags or other errors: http://validator.w3.org/), another way to limit compatibility issues is to ensure design and development features are in line with the browsers your site visitors are actually using. Consult with a reputable web development firm or expert if you want to deploy new, cutting-edge features on your website - they might not be compatible with your visitors' favorite browsers and that effect will fall flat.
Follow these tips and you'll be well on your way to providing a great online experience for your web visitors.