gbar_669x300

The good, the bad and the responsive

Posted on: November 30th, 2011 by Karl Parton | 5 Comments

Cue iconic Ennio Morricone film score. Cue tumbleweed blowing through some agencies. Cue the arrival of a responsive stranger signalling a shift in the way things are done around here.

The arrival of responsive web design and the increase in mobile web traffic presents agencies and clients alike with the opportunity to consider delivering layouts and content designed specifically for the device being used to access their website or application.

The good

In June 2011 13% of all web traffic in the UK was of mobile origin. The increase in mobile web traffic along with the number of devices capable of connecting to the web, estimates vary wildly between 15 and 35 billion, suggest the arrival of this responsive stranger has come not a moment to soon.

Adopting a responsive approach, providing identical content but delivering a design specifically built for a smartphone or tablet will undoubtedly improve a users experience of a website or web application.

The bad

Some websites out there are just plain not ready for this responsive strangers arrival. They continue to deliver a homespun desktop solution to these new fangled mobile devices or just as bad, try and second-guess what a user is interested in when, visiting their website, using a new fangled mobile device.

In other words they are falling in to the mobile context bear trap – ok – there’s no bear trap in the mobile context. I added that for dramatic effect.

So what is the mobile context? The answer used to be clear, but its not anymore. The mobile user used to be always on the go; trying to consume location related and task-oriented content very quickly. The problem is that this is not necessarily the case now. Phones are getting more and more capable and the browsing experience on many of them can be downright enjoyable.

Where are people using mobile devices?

  • 84% at home
  • 80% during miscellaneous downtime throughout the day
  • 76% waiting in lines or waiting for appointments
  • 69% while shopping
  • 64% at work
  • 62% while watching TV (alt. study claims 84%)
  • 47% during commute in to work

The responsive

We’ve witnessed the good and understand the bad but what’s this responsive strangers proposition that means we’ll all get the happy Hollywood ending we want so badly? Fortunately there’s nothing ugly in the responsive – quite the opposite.

The responsive stranger’s approach is device agnostic, functioning on smartphones and tablets – without the need to design separate websites or proprietary apps for different devices.

A single code base, another benefit of adopting a responsive approach, has advantages for both clients and agencies. The single code base gives us tighter control over branding and more efficient maintenance and redesigns.

This responsive stranger is not without its issues. The production of alternative layouts for different devices will mean revised workflows and processes. These revised workflows and processes will eventually bring to an end separate desktop and mobile development cycles.

The look and feel of a design will be agreed upon for a single device and move quickly to prototyping using the agreed design to influence the look and feel of layouts on other devices, meaning a fair proportion of the design will be done in the browser.

And in the world of the web – that’s about as much of a happy ending as we can hope for.

So long…

Until next time…

Reference:

http://en.wikipedia.org/wiki/Ennio_Morricone

http://www.tecmark.co.uk/uk-mobile-stats-2011

http://www.abookapart.com/products/responsive-web-design

http://timkadlec.com/2011/03/responsive-web-design-and-mobile-context/

There are 5 comments on this article

1

The only thing I would add is that responsive has great benefits in taking on board put many people are forgetting about the old school term “adaptive” which is roughly that you also cater your content on download as opposed simply using responsive techniques to hide content. Using display none which many articles that deal with responsive suggest will still mean the user downloads content we hide using css.

This practice needs to be discouraged and have people think about device detection early on in the process and saving page weight sizes to ensure the user gets a responsive design that is also adapting to their network needs.

This is the best presentation I have seen on it:
http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

While the book by ethan marcotte was great he side steps the need to think about lowering page weights i.e. don’t make a user download a 1000px wide image and resize using css when you could automatically serve a smaller image and filesize from the server.

Ray Mosley

Comment left on: December 12th, 2011 at 10:39 am

2

I agree that in the case of websites which are primarily for content consumption a responsive design works best. I’d say that the split mobile site is still very applicable for application based websites, which may function markedly differently (or be unusable) on a smaller device, or a device without a mouse and keyboard. There’s also something to be said for being more particular with serving of external resources (especially scripts) to a mobile browser, as the load times can be far more significant.

The next question is, for content consumption sites do you begin designing at the small screen and responsive design your way to larger screens, or do you start with the traditional desktop site and then slim it down with your responsive stylesheet?

M1ke

Comment left on: December 12th, 2011 at 3:27 pm

3

Hi Mike,

Thanks for your comment. I agree with your point in relation to application-based websites. A responsive approach is not suitable in every context. If the user experience cannot be improved – I see little value in producing a responsive solution.

Your point about serving external resources’ is a good one – I’d add that where possible responsive designs should be tested on specific devices, rather than simply re-sizing a desktop browser. Testing on devices will ensure device and network specifics can be experienced and resolved whilst a responsive design is in production.

In response to your final point – a number of prominent individuals within the industry suggest designing for mobile first. The argument being that designing for mobile first will ensure a design is focused on helping users complete a task – with none of distractions that are often found on desktop websites.

Reference:

http://www.stuffandnonsense.co.uk/projects/320andup/
http://www.abookapart.com/products/mobile-first

Karl Parton

Comment left on: January 3rd, 2012 at 4:41 pm

4

Hi Ray,

Thanks for your comment. I agree with the points you make, however my understanding of a responsive approach is not to hide content as such but to display it in such a way that the user experience is improved for the specific device on which the content is being consumed.

I’ve seen the excellent yiibu presentations. There is no arguing that a server side solution is the most thorough approach to delivering a device specific design.

It’s early days in terms of adopting a responsive approach, with best practices yet to be discovered or widely used – the most obvious being a clean method for delivering scalable media be-that server or client side. There are a couple of different techniques posted on the advent calendar for web geeks – 24ways.

Reference:

http://24ways.org/2011/adaptive-images-for-responsive-designs-again
http://24ways.org/2011/adaptive-images-for-responsive-designs

Karl Parton

Comment left on: January 3rd, 2012 at 4:41 pm

Leave a comment here