Responsive Website Design Posted by: Kenny S on 12/03/2013

What is responsive web design and when should you use it? image

Since Ethan Marcotte published his seminal article on responsive design, responsive design is now being widely adopted as a cost effective solution towards cross-platform design and development.

Until the beginning of this year, we've been taking several approaches to mobile, including bespoke mobile sites (where there's a strong rationale for mobile users having a very different user experience, content or functional needs) plus responsive design and of course mobile apps where device functionality and non-internet capabilities are essential.

Recently the balance is tipping strongly in favour of responsive design for some good reasons. Firstly, developing a bespoke mobile website is expensive, time consuming and difficult to maintain - often beyond the development resources available to most SMEs. Secondly, advances in responsive design techniques & tools have made responsive design viably the best or most feasible approach. And thirdly, demand prompts supply; whilst in 2010/11, most companies considered mobile web as merely an option for consideration, by 2012 mobile web is an almost mandatory requirement for any new project.

So, throughout 2011 we've been experimenting and cutting our teeth with responsive design, understanding best practice, ironing out what we saw as its many flaws. Fast forward 12 months and we're onto our tenth responsive implementation, albeit our own site is still at the back of the production line.

So what are our thoughts and experiences to date?

For anyone new to the approach, the main objective of responsive web design is to create fluid grids, images and CSS media queries to adapt the content and design of a website to any device browser, such as a desktop, laptop, tablet or smartphone. In other words, avoiding the need to create a separate mobile version of your website, and moreover the expense in adapting multiple versions to adapt to the peculiarities of every device. One set of templates using a fluid grid should adapt to any device.

Take our new Cash for Kids website for example.

Blog Cash For Kids

 

The website doesn't differ much between desktop and tablet. Fundamentally, the layouts flex, with font size and images getting smaller with smaller screen resolutions and browser widths. And, mindful of device size, page size and data costs for mobile users, content must be streamlined to a degree. This involves some compromise, and content prioritisation is perhaps the key challenge (or skill) in adopting a 'responsive, one grid fits all' approach.

Fortunately, good UX design principles do extend neatly to responsive design (or mobile applications for that matter); whatever the device or user context being designed for, UX common sense does prevail. For example, it's relatively easy to translate applications from desktop point & mouse-click towards the gesture & touch interfaces of smartphones. And, fluid grids don't present so many challenges to content layout across narrower devices that would grind a solution to a halt. No, the greatest challenge to date is navigation design; for large, complex and highly functional sites, there are major challenges in adapting essential design & functionality from desktop, to the limited real estate of a smartphone which be up to 80% smaller than desktop. This really is new territory for digital design(ers); navigation design paradigms have been evolving towards recognisable standards for desktop for over 10 years, whereas information design for smartphone browsers & applications is less than 3 years old.

Fortunately, there's a growing body of articles, references and best practice sites out there. Our team is consuming these as we speak and we'll be sharing the best bits here, over the coming months  - so do check back.


Back to blog