Responsive Web Design

Responsive Web Design

by , 14 Jul 2012

Responsive Web Design is a technique for developing web pages with layouts that react to different device widths. With the increase of mobile usage it is becoming more important that wesites work well on small medium and large size screens. Responsive web design attempts to resolve the problems accociated with different screen size by adapting the display to best match the viewers screen size. This website has been developed to utilize responsive web design techniques. If you change your screen size or view on you phone the layout and images will adjust to fit.

Fluid Width/Fixed Width Web Design for Desktop PCs

Until recently the norm for developing website layouts was to provide a fixed width design targeting the most common desktop screen (1024x768 pixels). This gives the designer some control over the visual look and means testing and developmet time is kept to a minimum. Most smart phones and tablets will automatically zoom down to this fixed size and allow text to flow to the width of the phone or tablet. Whilst this works ok for most websites an optimized layout improves the user experience on smart phones and avoids excessive scrolling and zooming to navigate round a page.

So beyond providing a fixed width design which work ok on phones, what are the options for a mobile optimized site?

Mobile Specific Web Design Versions

Many site owners create a separate version of a website under the "m" sub domain eg m.example.com. This technique goes some way to improving the end user experience however it is not without its limitations. Firstly even mobile sites will have to provide some form of flexible layout. Tablets and phones still have different screen widths and rotated phones should react to the lanscape or portrait format when tilted. Secondly having multiple versions of content potentially weakens the search profile of the content by spliting thesearch "Authority" between the two versions. Search engines like Google look for a unique url when determining rank and sharing content on multiple urls can degrade search performance.

Mobile Device Detection

Web servers can be programmed to detect the users device. With this information a set of css rules, layout and images can be provided to best fit the target device. In theory this is a good option, it would support fine control over each layout and the urls would be the same for mobile or desktop versions. In practice this approach could be risky and time intensive to develop. Google has fairly strict mechanisms to detect "cloaking" a technique used by black hat SEOs to provide google spider one version of a page and users another. Following Googles guidelines should avoid any potential for being mistaken as a "cloaker" but the potential effects if done incorrectly could result in a catastrofic penalization or removal. Additionally, mobile device models change quickly and the detection mechanism would need regular updates and an excessive testing process.

Responsive Web Design

Creating and testing for multiple widths requires additional design, development and testing time. It may not be the right choice for a small website owner with limited budget however if your site needs optimizing for mobile Google has officially recommended responsive web design as its preffered technique. The following statement is taken from Google's webmaster blog:

When building a website that targets smartphones, Google supports three different configurations:

  1. 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. This is Google’s recommended configuration.

  2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.

  3. Sites that have a separate mobile and desktop sites.

To dicuss optimizing your site for mobile delivery, please contact me.

Email News: Sign-Up Here

phone:
07 572 4483

mobile:
0275 339 855