Friday, September 05, 2008 at 12:44 PM
To web surfers, Google Chrome is a quick, exciting new browser. As webmasters, it's a good reminder that regardless of the browser your visitors use to access your site—Firefox, Internet Explorer, Google Chrome, Safari, etc.—browser compatibility is often a high priority. When your site renders poorly or is difficult to use on many browsers you risk losing your visitors' interest, and, if you're running a monetized site, perhaps their business. Here's a quick list to make sure you're covering the basics:
Step 1: Ensure browser compatibility by focusing on accessibility
The same techniques that make your site more accessible to search engines, such as static HTML versus fancy features like AJAX, often help your site's compatibility on various browsers and numerous browser versions. Simpler HTML is often more easily cross-compatible than the latest techniques.
Step 2: Consider validating your code
If your code passes validation, you've eliminated one potential issue in browser compatibility. With validated code, you won't need to rely on each browsers' error handling technique. There's a greater chance that your code will function across different browsers, and it's easier to debug potential problems.
Step 3: Check that it's usable (not just properly rendered)
It's important that your site displays well; but equally important, make sure that users can actually use your site's features in their browser. Rather than just looking at a snapshot of your site, try navigating through your site on various browsers or adding items to your shopping cart. It's possible that the clickable area of a linked image or button may change from browser to browser. Additionally, if you use JavaScript for components like your shopping cart, it may work in one browser but not another.
Step 4: Straighten out the kinks
This step requires some trial and error, but there are several good places to help reduce the "trials" as your make your site cross-browser compatible. Doctype is an open source reference with test cases for cross-browser compatibility, as well as CSS tips and tricks.
For example, let's say you're wondering how to find the offset for an element on your page. You notice that your code works in Internet Explorer, but not Firefox and Safari. It turns out that certain browsers are a bit finicky when it comes to finding the offset—thankfully contributors to Doctype provide the code to work around the issue.
Step 5: Share your browser compatibility tips and resources!
We'd love to hear the steps you're taking to ensure your site works for the most visitors. We've written a more in-depth Help Center article on the topic which discusses such things as specifying a character encoding. If you have additional tips, please share. And, if you have browser compatibility questions regarding search, please ask!
Step 1: Ensure browser compatibility by focusing on accessibility
The same techniques that make your site more accessible to search engines, such as static HTML versus fancy features like AJAX, often help your site's compatibility on various browsers and numerous browser versions. Simpler HTML is often more easily cross-compatible than the latest techniques.
Step 2: Consider validating your code
If your code passes validation, you've eliminated one potential issue in browser compatibility. With validated code, you won't need to rely on each browsers' error handling technique. There's a greater chance that your code will function across different browsers, and it's easier to debug potential problems.
Step 3: Check that it's usable (not just properly rendered)
It's important that your site displays well; but equally important, make sure that users can actually use your site's features in their browser. Rather than just looking at a snapshot of your site, try navigating through your site on various browsers or adding items to your shopping cart. It's possible that the clickable area of a linked image or button may change from browser to browser. Additionally, if you use JavaScript for components like your shopping cart, it may work in one browser but not another.
Step 4: Straighten out the kinks
This step requires some trial and error, but there are several good places to help reduce the "trials" as your make your site cross-browser compatible. Doctype is an open source reference with test cases for cross-browser compatibility, as well as CSS tips and tricks.
For example, let's say you're wondering how to find the offset for an element on your page. You notice that your code works in Internet Explorer, but not Firefox and Safari. It turns out that certain browsers are a bit finicky when it comes to finding the offset—thankfully contributors to Doctype provide the code to work around the issue.
Step 5: Share your browser compatibility tips and resources!
We'd love to hear the steps you're taking to ensure your site works for the most visitors. We've written a more in-depth Help Center article on the topic which discusses such things as specifying a character encoding. If you have additional tips, please share. And, if you have browser compatibility questions regarding search, please ask!
28 comments:
The best way to ensure all browsers get it mostly right is to use the strict DOCTYPE. Even fixes up most of IE6!
“To web surfers, Google Chrome is a quick, exciting new browser. […]”
Did you mean: “To Windows users, Google Chrome…”?
Given how genuinely exciting Chrome seems to be and given that WebKit was developed on Linux and Mac, a Windows-only release was a huge disappointment to me. I congratulate Google on its efforts to make a better browser but I don’t understand its decision to leave aside Linux and Mac users, even if only temporarily. It goes against the principles—interoperability, sharing, etc., that make the web what it is, principles Google is obviously aware of.
— a happy and sad Mac user
@lug: At this point, your copyediting skills seem appropriate. ;) Sitting at my work desk with a MBP and Linux desktop, believe me, I'd love to be test driving Chrome right now.
I honestly believe (as has happened with a few other products) that we may first release in Windows because it allows us to reach the most users. We get feedback quickly, work to improve the product, and hopefully, release more (and more stable) OS versions in the future.
I'm a member of the Open Web team here at Google -- all of us dedicated to "interoperability and sharing." You're correct, we get that these principles are important. I wouldn't have written a post about Chrome had I believed Google didn't feel the same way.
So, lug, thanks for your comment. I hope that you'll become an even "more happy" and "less sad" Mac user, and don't forget that Chrome is open-source. If you have some spare time... :)
@richuncleskeleton: Good tip! Thanks!!
Turns out Chrome doesn't like my drag 'n' drop shoping basket (http://www.coffeesh0p.com/) - it's more than happy with me dragging and dropping, but products just don't seem to want to stay in the basket!
I'll have to put my thinking cap on later...
Hi Maile! Did we meet at SES with Dave talking about content ranking over links? I cannot see a picture, so am not sure. Either way - thanks for your post. I have been coding sites for 11 years and every site I do is W3C compliant (most are accessible as well - our current site is finalizing all its accessibility items this week) I hear people all the time having to use hacks and arguing against using compliant code, but to me it always just made good sense.
Compliant code means your site works in all browsers and platforms and renders almost equally (in all versions as well) a point you made so well today!! To me it just boils down to good business sense. Better code = better rendering // better rendering = more browsers // more browsers = more users // more users = more sales! Thanks!!!
I hope that Linux version will also be released soon. This would give a truly powerful addition to internet surfing on Linux platform.
You have to stress out to most of the webmasters that use mistype or confused with doctype , standard of w3c. I will try if they can use well with my js sites.
Thank You
Sorry, but this post sounds like a hypocrisy from a company that routinely ignores or blocks Opera browser.
Practice what you preach!
(and I had to post it from Safari, because in Opera blogger gives bogus "Duplicate action error")
I am using the strict DOCTYPE, this fixed the problems I faced!
Remember browser makers, it's up to you to make sure your browsers render code according to the standards.
Requiring webmasters to write 3 sets of code for cross browser compatibility is a backwards trend. It should be write once, read many and it's up to the browser manufacturers to figure it all out.
I tried Chrome. I just say put the same website on Opera and Chrome and what ever rendered Chrome uses totally fails by comparison TOTALLY. Chrome looks blotchy, streaky and simply does not handle screen zooming nearly as well as Opera or Firefox (3.0 which is not as good as Opera but better than chrome).
I'd consider reworking the interface it does not look as rick as Opera and Firefox - cosmetic but important.
I stopped using it because I heard of some security breach.
Jon
www.merlin333.bigforumlive.com
I have tried Google Chrome and I love it!
I just downloaded Chrome and looked at my Web site in it. Right away discovered an embedded Flash video does not play in Chrome, although it plays just fine in IE, Netscape, Firefox, and Opera. I could use some advice on how to make it work.
www.abctricks.co.nr is a blogsite which is helpful to every computer users, for getting new and updated practical tricks and tips and also ethical hacking, this site is ment for helping you in all respects for using computers. If you have any doubts you can ask to me , i will help you in my best. Thich site also helps You with searching ability in allover the site and also the whole web in association with google.
go to
abctricks.blogspot.com
Great list of links. I validated my site's html. I can sleep better now.
Thanks!
Will this fix IE, and all browsers? How much better is the Google crome? How good will it be?
Uncle Bobs Trailers
@schachin: Yes, we probably met at that session -- thanks for saying "hi!" :)
@kkll2, Jon Holt / Merlin333, robin: The Chrome community seems very open to hearing input about what's working and not working in Chrome, especially to prevent developers from having to write more workarounds.
In case you missed it, the developer FAQs are here:
http://www.google.com/chrome/intl/en/webmasters-faq.html
And when you notice compatibility issues, bugs can be reported here:
http://dev.chromium.org/for-testers/bug-reporting-guidelines
Analyzer doesn't work on IE8 Beta 2, Jaak http://shop.it.ee/
Sounds a bit hypocritical to ask webmasters to make sites that validate.
Lets have a look at google.com
73 Errors, 11 warning(s) according to the W3C validator
So, why should webmasters care when google does not?
thank you
Arkadas
@admin: Validation is one aspect of our advice for improving browser compatibility. You don't have to validate your code, of course -- we even wrote "consider validating your code" in the post :), but if you're having problems with the rendering/usability of your site on certain browsers, then it's a place to start. Take care!
Lida Veryy Good site..
sharing for thanks. a lot of nice writing.
web tasarim | film izle
thanks for you
film izle
Hi everyone,
Since over a year has passed since we published this post, we're closing the comments to help us focus on the work ahead. If you still have a question or comment you'd like to discuss, free to visit and/or post your topic in our Webmaster Central Help Forum.
Thanks and take care,
The Webmaster Central Team
Post a Comment