Say hello

Jellyfish would love to hear from you.
Give us a call, email or fill out the form and we'll be in touch.

443-842-4452

hello@jellyfish.net

Close
*Required field
Close

Thank you

We'll be in contact soon

Hot Right Now – Responsive Design

By | August 24th, 2012 | Department: Creative & Development | Categories: Mobile


On the 6th June 2012 a post appeared on the Google Webmaster Central Blog titled ‘Recommendations for building smartphone-optimized websites’, that has the potential to be a bit of a game changer for the world of web design & development.

http://googlewebmastercentral.blogspot.co.uk/2012/06/recommendations-for-building-smartphone.html

Google state that they support three different solutions for the optimization for smartphone users, but their recommended configuration is for ‘sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device.

So what exactly is responsive web design and how does it work?

Responsive web design is a technique used by developers to deliver a design solution that is based upon proportional relationships between elements on a page, as opposed to a fixed canvas size. Though the use of CSS (Cascading Style Sheets – code that controls how the browser renders information to create the webpage you see in your browser window), web developers can determine how a website page will display, based upon the width of the browser window.

It’s a relatively simple theory, which relies upon three key elements:

1. Media Queries – Media Queries are supported by the most recent version of CSS, CSS3, and enable developers to communicate with the browser to determine certain attributes relating to the browser session. For instance we can use a media query to determine the window size (width or height) in pixels, and use the response we get back from the browser to enable or adapt a particular style sheet.Responsive design uses the outcome of these queries to adapt the style sheet and change the way that the information on the page is displayed, for instance reducing the column width of a text box as the window size reduces. Why is this so useful when optimizing for smartphones? Well it means we can vary the width of the page and deliver the optimal design solution in all cases. Smartphones now come in so many different viewport (the viewable window area stated in pixels) combinations, that it’s impossible to code a dedicated version of the page for each device. By basing our design on proportions and using media queries to adapt the layout, we can accommodate the wide variety of smartphone and tablet devices, in addition to desktop and laptop devices, with one set of code.

2. A Fluid Grid – In order for a responsive design solution to work, we need to think about the layout in terms of a flexible grid, so that column width, font size, margins etc. are all based upon the ideal proportion rather than a fixed canvas size. The idea of a web page being a fixed size is an echo of the days of print design, where designers would naturally start to think about the design solution being based on a fixed physical canvas size. This habit dies hard, and it’s only over the course of the last couple of years that this ‘old school’ approach has started to be replace by a more fluid way of thinking with the web design community.

3. Flexible Images – If the layout is fluid, then the content elements contained within the layout need to be flexible too. Whilst we can control font size etc from within the CSS, it’s also possible to resize the images on a page dynamically to ensure they fit the layout in all applications. There’s an additional layer of complexity on it’s way too, screen resolution density is becoming move varied, for instance the later model iOS devices (and now Mac laptops) feature high density screen resolutions of around 250 pixels per inch (commonly known as retina display ion Apple devices). Using Javascript, we can dynamically swap out images for higher resolution versions, enabling the responsive design solution to accommodate this new variable.

Why is responsive design such a hot topic?

Google have gone on record saying this is how they prefer websites to be built, and Bing have recently announced they feel the same:

http://www.bing.com/community/site_blogs/b/webmaster/archive/2012/03/07/building-websites-optimized-for-all-platforms-desktop-mobile-etc.aspx

So what’s driving this?

One of the key drivers is the search engine's desire for an Internet with one URL per content item. By outputting only one URL for the same content, as opposed to multiple versions of a page or website for different devices (usually delivered via an ‘m.’ sub-domain, or a .mobi root domain), it’s far easier (and more cost effective in the long term) for the search engines to identify the nature and authority of your content if there’s just one URL per content item.

For website owners, there are some pretty compelling reasons too. Generally, you will have more ranking signals to your main site content, as very few users tend to link to mobile versions of a web page. By employing a responsive web design solution, you will benefit from the positive rankings relating to you core content items. Managing and maintaining one site that works for all devices is more time and cost efficient that trying to manage multiple versions of a site. Many mobile sites are currently optimized for the original iPhone screen resolution of 320 x 480 pixels, and this is simply outdated. There are over 500 different ‘standard’ viewport resolutions for Android devices, so why try to build and maintain a site that’s optimized for just one viewport size? It doesn’t stack up.

Finally, there’s a benefit for those with larger websites where regular crawls by the search engines can impede performance. By focusing your energies on just one website for all devices, you can reduce this overhead on your servers considerably in some instances.In the long run, it’s the search engines that will penalize or reward you dependent on how you deliver your content, and following their ‘best practice’ guidelines often has rewards in visibility, authority and traffic volume.

There is stack of further information available on this topic, but personally I found this video from Responsive Web Design pioneer Ethan Marcotte a great summary. It’s an hour long, but certainly time well spent:

http://vimeo.com/34662135

Ethan has also written a short book on the theory and practice of Responsive Web Design that for sale here:

http://www.abookapart.com/products/responsive-web-design/

I spoke about this subject in a little more detail at the recent Jellyfish Digital Journeys conference, here's a link to the video of that talk:

Tags: Responsive Web Design