Responsive Web Design

Introduction

Responsive Web Design is a method of delivering a web site which works on multiple screen sizes running from a single code base. Despite its recent popularity, RWD is not a new concept. The first examples can be traced back to 2001, but the relatively recent explosion of internet capable mobile devices has driven a business need to have web sites that work on both mobile devices and traditional desktop computers. Historically (~pre 2006), mobile devices generally could not support standard HTML, and relied upon a standard called WML, and so, there were typically two sites made, one for mobile and one for desktop.

The move to a single code base was driven by two key factors. The first was the cost of developing and maintaining two separate code bases, and the second was the increasing proliferation of internet enabled mobile devices has effectively driven a massive growth of mobile site views with users expecting a very similar experience to the desktop experience.

Grids

RWD sites divide up a screen on to a fluid grid layout, made up of columns and rows. Responsive layouts automatically adjust and adapt the grid layout to any device screen size, from mobile through to desktop. Content is presented to the end user within the grids, allowing desktop and mobile users to see the same content, just rendered differently.

Most RWD Frameworks support the concept of breakpoints. Breakpoints are a way to categorize difference screen sizes, typically arranged around mobile, tablet and desktop. A break-point occurs at a specific screen size - or more typically, screen width. For example, anything under 400 pixels could be considered mobile. Anything over 1024 could be considered desktop and tablet falling between those ranges. The layout is then adjusted to the devices break-point.

The mobile first philosophy

Browsers of basic mobile phones do not have the performance of desktop computers, and as such may not be able to support the complete set of features of the desktop site. The philosophy behind responsive web design is to design for basic mobile device first, and then enhance it for more powerful mobile devices and desktop computers, rather than design a complex site which works well on a desktop and rely on graceful degradation to make it work on mobile. Doing the work from the bottom up ensures that mobile users will have a good experience without failing due to hardware limitations.

The benefits of RWD

The following highlights the benefits of developing a web site following an RWD methodology:

Cost: - It is cheaper to develop one code base to support multiple devices than maintaining multiple code bases to address specific device groups. It arguably costs an incremental amount to build the extra code over just a single device code, but the incremental costs of developing an RWD site over a plain desktop site is minimal.
Search Engine Optimization: - By consolidating all devices in to one web site and one URL, you will have a single path to your site, which allows you to focus your SEO efforts and reduces content dilution. There is a secondary additional benefit of reduced costs of hosting multiple sites and domains.
Content: - The content for an RWD site is the same across all devices. Consolidation of content reduces the operational costs of maintaining multiple sets of content for different sites, but also reduces ongoing maintenance costs as opposed to maintaining multiple content databases.
Device Redundancy: - An RWD site has a level of device redundancy, as new devices entering the market will work out of the box, as opposed to a mobile device centric site which may require updates to device detection to serve appropriate content.

The drawbacks of RWD

The following highlights the drawbacks of developing a web site following an RWD methodology:

UX: - An RWD site provides the same user experience, for example, get to the home page, search a product, add to basket and checkout. This ignores the way that people really use mobile devices. In this example, most people will use a mobile to locate and evaluate a product, but will place the order itself from their desktop.
Site Performance: - RWD sites are often heavier than dedicate mobile sites, resulting in end users experiencing longer loading times and greater data usage. If a page takes too long to load, users will simply go elsewhere.
Specific content elements: - Images which contain text do not always scale well to mobile devices, and can often become unreadable. Whilst you can work around this by overlaying text instead of embedding it, you may still face alignment issues - e.g the text was to be in a specific desired starting spot on the image.

Calculating your ROI

On the surface, going with an RWD site is an easy choice. Reduced development costs, reduced operational costs, speed to market and the ability to consolidate your SEO efforts all make it very attractive. However, it is worth understanding your end users before making any decision. If you have access to analytics data, review and understand the behavior differences between mobile and desktop users. If your goal conversion rates differ significantly, then it may be worth understanding why and adjusting your mobile offering to reflect what the end user wants. In the example above, if your e-commerce conversion rate is 4% on desktop and 0.2% on mobile, try and understand why and what users are really using the mobile site for. Once you know your user, then make your decision.

Request more information:

If you would like to know more about what Dygitized can do for you please fill out the form below. Please explain your requirements or specific issues that you are facing.