Though Google realizes that multiple versions of a website can help tailor that site for display on a specific device, Google uses a different approach for displaying websites on a wide variety of devices. Instead of having separate websites for PC’s, iPhones, Androids, feature phones, etc., Google uses dynamic page shaping they call responsive design to make sure their web pages display properly, or at least legibly, on any type of device. Over at the Google Webmaster Central Blog, the Google Webmaster Team has Google+Webmaster+Central+Blog%29″>outlined the process for webmasters who are tired of updating multiple sites for the same content.
Google developed this process while following three rules: pages should render legibly at any resolution, only one set of content should be marked up and be viewable on any device, and a horizontal scrollbar should never be shown, no matter the window size. Using these guidelines, the team set up a liquid layout that is able to reformat the page dynamically based on the pixel-width of the browser it is displaying in. Instead of giving container elements a fixed width, they specified a max-width. Likewise, they used min-height instead of a set height. From there, media queries are used to rearrange content as the width of the browser changes.
The examples used are the Google about page, seen above, and Google’s Cultural Institute page. The about page begins to shift non-essential content down to the bottom of the page when the browser width narrows, while the Cultural Institute page allows larger photos to be cropped until a certain pixel width is reached and it then transforms into a list-type view. Unfortunately, the blog points out that a quarter of website visits are still made with older browsers that don’t support some of these features, such as media queries:
It’s worth bearing in mind that there’s no simple solution to making sites accessible on mobile devices and narrow viewports. Liquid layouts are a great starting point, but some design compromises may need to be made. Media queries are a useful way of adding polish for many devices, but remember that 25% of visits are made from those desktop browsers that do not currently support the technique and there are some performance implications. And if you have a fancy widget on your site, it might work beautifully with a mouse, but not so great on a touch device where fine control is more difficult.
You can find out more, including the CSS code which enables Google’s liquid layout at Google’s Webmaster Central Google+Webmaster+Central+Blog%29″>Blog. Make sure, though, to leave a comment here and let us know your opinion on whether this process would be right for your website.
