Posted by Nicole Hambleton / Article /

Mobile web use is on the increase, a growing trend and for good reason. A recent survey shows that Australian smartphone penetration sits at 52%, up 15% from 2011.

Recent figures suggest that more people will access mobile devices than desktops within a few years, possibly as soon as 2013. We are fast approaching the point at which a mobile strategy is obligatory for all new web projects and not just a ‘nice to have’ feature.

What is Responsive Web Design?

Responsive web design basically means the site is designed to be device agnostic. The layout and information is coded to scale to a variety of devices from desktop resolutions to tablets, smart phones and even an in-car screen or fridge! The process of responsive design needs to be considered in the preliminary design process and allows for the scalability of a site across the various platforms.

How does it differ from Mobile Web?

With a dedicated mobile site the User Interface is designed for a specific task, to mimic a native mobile app and to have more control over the content displayed, whereas with responsive design the whole site is built around a single codebase, flexible grid design and scalable images. CSS media queries identify the screen size and use the appropriate CSS rules based on set screen width break points.

View the two sites below for an example of the difference between Responsive Design and Mobile Web implementation

Hambo Development's site when viewed on a mobile device using responsive design:

Hambo Development full screen

Hambo Development's site when viewed on a mobile device using responsive design:

Hambo Development mobile responsive view

 

Snow White trailer site when viewed on a desktop: 

Snow White desktop site


 

 

 

 

 

Snow White Trailer as a dedicated mobile site: 

Snow White mobile site

 

Who would benefit from Responsive Web Design over Mobile Web?

The short answer is every client that doesn’t need a dedicated mobile site. We believe that unless the site in question requires interaction to be unique to the device it’s being viewed on (for example a ticket purchase system on a desktop or a mobile), then responsive should be your ‘go to’ solution for mobile strategy and indeed every site you pitch for.

The first consideration is cost effectiveness and ongoing maintenance. If you are building a new site, the benefit of responsive web over a dedicated mobile site is that it can be built into nearly any type of design without having to create an independent platform.

The ongoing maintenance rests with one site and one codebase making it cheaper to maintain. If the site content will not vary much from desktop to mobile then responsive is a more cost effective approach.

When do you need to consider a mobile site instead?

If the client already has a fully functional desktop ready site and wants to be mobile savvy then building a separate mobile platform might be a better option, at least until they are ready to redesign their whole site again. Also if the client needs their mobile site to utilise different functionality or incite different user behaviour to their desktop site, then a separate mobile site would also be a better alternative.

In addition, the complexity of the desktop site needs to be considered before responsive design is used in favour of a mobile site. Bandwidth considerations for mobile devices are still an issue and responsive design means that all the content, whether displayed or not is effectively downloaded. This may be a hindrance if the original desktop site is a lot more complex than the requirements of the mobile site.

Is a mobile ready strategy really that important yet?

Regardless of whether the right solution is a responsive or a dedicated mobile site, your design and pitch needs to be mobile first. Mobile usability should be standard spec on new websites to cater for the growing number of mobile and tablet users (as cited at the beginning of this article). Mobile users are just as likely to perform the same actions or want to view the same content as a desktop user.

You have to assume that people will view the most basic of sites on a mobile device. People sit on their sofa at home, read on the train and surf while waiting for their other half to try on clothes. At home, some people don’t even own a desktop or laptop, which is why your clients need to think beyond the standard website format.

Development in ExpressionEngine

One of the biggest pitfalls of responsive design is that even though the site is downloaded with restricted images and content in a mobile friendly format, the full site code still downloads. This can be an issue for mobile bandwidth, particularly for larger sites. A recent add-on in development for ExpressionEngine has started to overcome this by restricting the information that is downloaded in the background to mobile devices. This is a groundbreaking advancement in the implementation of responsive design and something we are very excited about! We’ve used it for our own site and so far, we’re impressed.

See an example of how our new site can be viewed on your mobile. Even if you don’t have a mobile on you, just reduce the width of the browser to a mobile size and refresh the screen to see it reconfigure it’s content.

If you want to know whether you should be pitching responsive design or a standalone mobile site to your client talk to us and we can provide you with more information to help you make your case. We can also provide you with some additional technical information to complement your design process. Our next newsletter will also feature a new section aimed at your technical team that will outline the technical and coding implications alongside our main article that discusses the growing importance of standalone mobile sites.

Learning more about Responsive Design

UXBooth has written a great article to get you started

Responsive example: Hambo Development (View on desktop and smartphone)

Mobile web example: Snow White promotional site

To view a collection of well designed Responsive sites, head to mediaquerie.es