A Great Looking Site With Google Chrome

After the launch of Google Chrome in September last year, many webmasters and web developers have raised questions on how to make their sites look good in Google Chrome. As a response to these questions, Glenn Wilson, Product Manager, Google Chrome is giving few tips in his post that will provide a stellar look to your website.

Detecting Google Chrome

As Safari and Google Chrome are web-kit based browsers, most of the sites will look same on both. If you think your site looks right in Safari, then it will definitely appear right in Google Chrome too.

Because of Google Chrome being new, many sites confuse it with another browser. If you find your site not looking quite good in Chrome in comparison to Safari, there is a possibility that your site is not recognizing Chrome's user-agent string.

Most of the platforms and browsers adopt WebKit as rendering engine, there are chances that your site automatically detects and supports them with right JavaScript checks. In maximum cases, sites use JavaScript to 'sniff' the navigator.userAgent property for both the browsers, Safari and Chrome. But, it is always better to use proper object detention. Even Gmail is detecting Webkit properly in Chrome from the very first day.

For detecting the user-agent type, use this JavaScript to detect the WebKit:

var isWebkit =

navigator.userAgent.indexOf("AppleWebKit") > -1;

If you want to make sure that the version of WebKit is a certain version, or if you want to use a new WebKit feature:

var webkitVersion =

parseFloat(navigator.userAgent.split("AppleWebKit/")[1]) ||

undefined;

if (webkitVersion && webkitVersion > 500 ) {

// use spiffy WebKit feature here

}

Here are some of the browser releases and versions of WebKit used by them:

Do not add 'Google' or 'Apple' to navigator.vendor checks for detecting the WebKit or Google Chrome, as this will be unable to detect other WebKit or Chromium-based browsers.

Other Tips:

• Google Chrome supports NPAPI plugins but, do not support Active X plug-ins. This will enable you to show plugins in Flash and Java in Google Chrome, just like it is done on Safari and Firefox.
• If you are finding the text on the site a bit off, check if proper content type and character encoding information is provided in HTTP response headers or at the starting of the page. A placement near the top of the section is more preferred.
• It is wrong to block elements inside the inline elements.
  • Wrong: <a><div>This will look wrong.</div></a>
  • Right: <div><a>This will look right!</a></div>
• If JavaScript is not working in Google Chrome, debug using Chrome's in-built JavaScript debugger, under 'page' menu-> 'Developer' -> 'Debug JavaScript' menu option.

If you want to know more about detecting WebKit, visit at http://trac.webkit.org/wiki/DetectingWebKit.

Click here to subscribe to our RSS feed to get a daily digest of news around search engine industry. PageTraffic SEO Blog is updated four times a day and is ranked as one of the best search engine resources blog by Pandia!