The release of Google Chrome (Google’s new internet browser), has re-opened a can of worms for webmasters and site owners in terms of website compatibility.
Accordingly I’ve whipped up a list of resources to help ensure your site’s looking its best and functioning properly no matter what browser your site visitors are using.
While there are too many browsers and versions out there to monitor continuously, if you’re not putting your site through its paces in the major new browser environments (Internet Explorer, FireFox, Safari, Opera and now Chrome) – you could be doing yourself more harm than good.
First things first - checking your site in the various browsers:
Now if you want to check your website in the major browsers and versions out there, then you’ll need to download them and set them up on your computer. Note running different versions of the same browser can difficult, so aim for the latest (stable) version.
Here’s the majors:
If your primary focus is appearances rather than function, and you want a quicker way to check your site in the various browsers – then I recommend giving BrowserShots a whirl. They’ll check your site across almost all browser and operating systems (incl. Linux and Mac)
BrowserShots – Access Here
If you’re the tech person behind your website, then the following tips and resources will help ensure your site is designed for optimal compatibility (if you’re not – you’ll need to get your website designer/developer on the case – maybe send them this post) :
Anthony Short, an enterprising young graphic and web designer, provides the following summary for browser compatibility (his whole post is worth reading and bookmarking). (Warning – it’s totally tech speak.)
1. Always use strict doctype and standards-compliant HTML/CSS
2. Always use a reset at the start of your css
3. Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari
4. Never resize images in the CSS or HTML
5. Check font rendering in every browser. Don’t use Lucida
6. Size text as a % in the body, and as em’s throughout
7. All layout divs that are floated should include display:inline and overflow:hidden
8. Containers should have overflow:auto and trigger hasLayout via a width or height
9. Don’t use any fancy CSS3 selectors
10. Don’t use transparent PNG’s unless you have loaded the alpha
Here’s some other great links for more vital browser compatibility resources: