Responsive Design for Mobile-Tools, Techniques, Future Trends

(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)