(Guest post from Magnus Jern, CEO of Golden Gekko).
Next to the
Mobile First philosophy (see previous article) Responsive Design (according to
Wikipedia) also referred to as Liquid Design is probably the most talked about
trend in mobile and web user experience design. The term was coined by Ethan
Marcotte in 2010 and the principle is simply that you design one web site that
adapts to any device using modern web development methods including CSS3 and
image scaling.
Examples of
Responsive Design
Although
there are thousands of examples of web sites based on responsive design today
there is only a limited number of big companies that have adopted it and
usually more as an experience or only partially. The most mentioned being the
Boston Globe which displays beautifully on devices ranging from a big screen TV
to a Blackberry Curve. Other examples include Starbucks and Google News
(partial). Ethan also has a list of other great sites here. To get a basic
understanding of how it works simply open up one of these sites in a browser
and reduce and increase the browser window and see how the page changes and try
accessing it from your mobile. Then compare it to a traditional site such as
NYTimes.com (the owner of Boston Globe).
So is
responsive design a hype or solution?
Opinions
vary. At the moment the main proponents of responsive design are web front-end
developers as it puts them in a powerful position and potentially removes the
need for separate sites and teams and they can claim to support all channels.
On the other hand only a few major websites have fully embraced the methodology
and some like Linkedin simply believe that it delivers a bad user experience
for their users according to an article in Venture Beat. So what are the pros
and cons?
Pros
Easier and
quicker to manage one project and web site than multiple
Reduces
cost of development and maintenance by only maintaining one infrastructure and
one team
Typically
will work automatically on new devices, e.g. tablet without customisation
Simple technical
solution to a common issue
Could
improve SEO as all traffic will be directed to one URL rather than multipe,
e.g. www.website.com, m.website.com and touch.website.com
No need for
device recognition
Read more
pros in this article in Society of Digital Agencies
Cons
Complex to
plan and design which may actually lead to a higher cost and longer time to
market than separate channel
Data size
of pages become very big for a mobile device both in terms of download time and
memory used (see article about Mobile First)
Rescaling
for mobile devices typically generates very long pages requiring lots of
scrolling which is a bad mobile user experience
Difficult
to generate revenue from ads Images are typically optimised for the device with
the highest resolution
Use cases
for mobile and a PC web can be very different
Most common
denominator between browsers means you typically end up doing trade-offs to
support all channels
User
interaction between different devices is very different on a touch screen
device from a screen controlled by a mouse or remote control (TV)
Requires
the same amount of testing but needs to be done across a lot more devices every
when you make an update.
So what’s lies ahead in the future?
The reason that most major companies have not embraced responsive design is that although it’s technically straight forward, it really complicates the layout of pages and information architecture a lot. Designers have to plan for most common denominator between different devices which will usually lead to a compromise. At the same time any website should be as responsive as possible without compromising the user experience for bigger screens. Both Amazon and Facebook are examples of partially responsive design that scales certain elements but not all. One of the reasons to separate mobile and web is also that the use cases are very different. If you are standing in a clothing store accessing their website then you are most likely to want to find out about something related to the customer touch points in the store such as price comparison, offers, where your size of a product is available, etc. If you are sitting at home browsing then you’re primary use case is more likely to be browsing through the products. I believe that the Mobile First methodology is a more important principle than Responsive Design as it forces you to focus on the core use cases and enhance over time.
(Image courtesy of white-fire.co.uk)