Responsive Web Design
Responsive Web Design
What is it?
Responsive Web Design as a term was coined by Ethan Marcotte in his article on the subject in A List Apart.
Smashing Magazine offers this simple definition - "Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries."
The web continues to leap forward. As it does, our internet browsing has evolved and the devices we access it with continue to grow more diverse. And we use them. A lot. We're now seeing 15-25% mobile browsing on some of our clients' websites, making a great user experience paramount no matter what they're using to access it.
As users switch between their smartphones, tablets and desktops, websites need to begin to automatically accommodate for the different screen sizes and resolutions. Without getting technical, this is what sparks the need for responsive web design & development.
How it came to be.
Simple. John Allsopp likened it to this - "The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things."
This makes great sense. When we design print design, the first step is to specify its physical traits, namely dimension.
A number of years ago we could make some acute assumptions about the kind of screens in which people would be trafficking the sites we design and build. And as desktop monitors got larger, so did the lowest common denominator we'd design for. The first mobile experiences were full websites stripped from their designs and text delivered to your postage stamp-sized flip phone screens. Designers, after being frustrated by those experiences, began designing stand-alone mobile websites. These served their purpose for a while. And then something huge happened.
Apple released the iPhone. This is when the proliferation of screens - all different kinds and sizes of screens - became something we'd need to monitor and test our development efforts on. Following that was the iPad, which has leaped forward faster than any growing segment of mobile web traffic ever and will surely soon dominate.
Now that we've got these many different kinds of sizes of screens, we need to reverse the common thought of trying to be proactive instead of reactive. We now WANT our webistes to react, and to present themselves as if they were custom designed for whatever screen on which someone might be viewing them.
Responsive website examples.
Happy Cog's blog, Cognition, is an early and good example of responsive web design. The below screenshots show how the website, at different widths, adjusts the size and flow of content. Visit their site and scale the size of your browser to see it in action for yourself. You'll see how they're making decisions at certain breakpoints in which they want to alter the way images and content flow within the article. At the smallest width on the left (smartphone width), they've opted to remove the images for the 3 sub-stories completely.
A few other notable websites that respond to your window size are:
3)Momentum
What it means for you.
Is it always right for your website?
Precisely why we run analytics on the websites we build, allowing us to see what size screens (and exact mobile devices) people are using. If your website is mission critical to the bottom line of your business, then it is imperative you offer a great mobile experience, and responsiveness might be the ticket.
Can you simply make your current website responsive?
Short answer - no. Going responsive will be a complete re-write of the code, which presents the perfect opportunity to implement a new and fresh design anyway.
How much extra work is it to go responsive?
It definitely depends on the design and type of content on your website, but it is safe to say that it could add anywhere from 20% to 80% on top of your investment.
Will it take me very far down the road?
For the foreseeable future, yes. As new devices and screen widths become available, we can continue to add new breakpoints in the code to create customized views of your content specifically for them.
Our recent work on BCClark.com.
We just finished work on a completely new, ground-up redesign of BC Clark Jewelers' website. As we began to wireframe their content in a new way, we saw the opportunity to take advantage of repsonsive web design to deliver a new level of user experience.
While a great user experience on multiple screen sizes is important, one of the main objectives of their site is to "wow" users when they arrive at their homepage with great imagery. What better way to do this than to allow the main image area to grow to consume as much screen real estate it can on larger screens. This is very impressive on a 1920x1200 monitor in full screen (pictured below).
The meat of the BC Clark website is the product pages. We've alienated the "slideshow" style pages we used to have, in which only one product was shown at a time, and have laid down a fluid grid of images that scale and adapt to fit any screen, from an iPhone to a big-screen tv. This allows the user to get the essence and array of each designer line, at a glance. Again, a beautiful sight on large monitors (pictured below).
Each and every page on the BC Clark site dances and shifts its content around to fit your screen, making for a game-changing experience when window shopping local jewelers online.
We won't lie. This website was a big departure from our typical website development process and presented numerous challenges which brought on many internal discussions (okay, arguments) that pushed us back to the basics (reading… online, of course) to learn heaps of new tips and tricks about responsive design and development. In the end, it allowed us to flex our development muscles more than ever, and satisfy a client and their massive counts in web traffic with a new, industry-leading website.
Was it worth it? Of course. It's well into 2012 and your website makes or breaks you as the modern-day first impression. Websites are the hub of our marketing efforst these days, so the goal is to always keep the site evolving and always send more and more people to it. Speaking of that, go grab a device (any device) and check our BCClark.com for yourself.