[vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="3" bottom_padding="3" overlay_alpha="100" gutter_size="3" shift_y="0" row_height_use_pixel=""][vc_column column_width_use_pixel="yes" overlay_alpha="50" gutter_size="3" medium_width="0" shift_x="0" shift_y="0" zoom_width="0" zoom_height="0" column_width_pixel="800"][vc_column_text]By now I’m sure you’ve come across the term ‘responsive design’. It’s one of those phrases that has crossed over from developer terminology into marketing buzz-wordery. But don’t let that put you off. Here’s a run-down of what responsive design is all about and why you should already be using it.
The new digital landscape
Since the launch of the smartphone in 2005, the number of internet-connected devices has increased exponentially. Prior to that, there were a relatively small number of resolutions and screen sizes that a designer could reasonably expect their users to use.
Less than ten years on, there are now over 1.1 billion smartphone users globally and smartphone penetration in both the US & UK is at 55%. In fact, the total number of people accessing the web on mobile devices is set to surpass desktop users by 2015 and the arrival of smart TVs, internet-connected cars and even wearable computing means a user sitting at a desktop computer is the less likely scenario. The mobile web is growing but the truth is, there is no ‘mobile web’ – it’s all the same thing. The beauty of the web is its ubiquity and mobile is just another facet of that.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_single_image media="54665" media_width_percent="80" alignment="center"][/vc_column][/vc_row][vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="3" bottom_padding="3" overlay_alpha="100" gutter_size="3" shift_y="0" row_height_use_pixel=""][vc_column column_width_use_pixel="yes" overlay_alpha="50" gutter_size="3" medium_width="0" shift_x="0" shift_y="0" zoom_width="0" zoom_height="0" column_width_pixel="800"][vc_column_text]With such device fragmentation, how are we supposed to design an experience that is not just pleasing but also functional to all these disparate access points? As designers, this new digital landscape has thrown out all the old preconceptions and fallacies we relied on and forced us more than ever to consider what our users want and the hierarchy of the content we are designing. We need to break free of the slavish devotion to the Photoshop layouts we create and embrace the dynamic potential of digital media.
So what is responsive design?
At its core, responsive design is about designing an experience that is right for the user, regardless of what screen or interface they view it on. When we use the word “design”, we’re not describing an aesthetic; more a way of working. Ethan Marcotte, who first described the approach in his seminal article on A List Apart, put it like this: “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.”
Web design, and design for digital interfaces in general, owes a great debt to print design. The great designers of the previous centuries experimented, innovated and developed the principles and practices of good design. But digital design has also inherited limitations from print design that are irrelevant in a digital context. Our canvases are boundless, design elements can change and move over time, layouts can be interactive and reactive. In many ways responsive design represents a maturation of these design principles for the web – an evolution of best practice.
Smaller screen = reduced experience?
Conventional wisdom has it that users only want a pared down experience on their mobile. If they’re on a mobile device, they’re ‘on the go’, right? Maybe. But ‘on the go’ isn’t the only use-case. 86% of people access the web via a mobile device while watching TV, 80% in retail stores, and 39% while on the toilet. Mobile users will do anything and everything desktop users do, provided it’s presented in a usable way.
Latest figures also show 41% of email is opened on mobile devices. And with 70% of consumers saying they delete emails immediately if they don’t render well on their mobile device the importance of responsive design to email marketing really can’t be underplayed. After all, you only get one chance at a first impression. So you’d better make sure your visitor receives the best experience, regardless of whether they’re on a desktop or mobile device.
A glimpse of the future
Here’s a small sample of the sites out there that are doing responsive web design well:BBC One; Microsoft; Hicks Design; and Boston Globe. Try opening them on a range of devices – or just resizing your browser window – and you’ll see how they intelligently adapt to give you the optimum experience in every instance.
Now compare these sites with those that offer that all-too-familiar experience of scrolling horizontally to read the second half of a line of text, or zooming in and out to see elements properly. It’s not hard to see the difference responsive web design makes to your enjoyment of the content, is it?
Getting started
One of the main misconceptions about responsive web design is that it’s just another trend – like glassy buttons, rounded corners and peeling stickers. Things that were “so 2010” in 2009, but still look “so 2010” in 2013. However, responsive web design is much more than a passing design fad. It’s a core design philosophy for the new digital landscape. Or, put another way, it’s doing our job properly.
If your web presence isn’t responsive yet, it’s time you had a look into it. Every day sees new advances in how to improve our processes but a great starting point is This Is Responsive where you’ll find responsive resources and patterns for every scenario. Or just get in touch with us. We’re always happy to answer your questions.
This post originally appeared at http://www.mzl.com/blog/responsive-design-transformers-websites-in-disguise/[/vc_column_text][/vc_column][/vc_row]