This is written for our clients, more so than our peers in the industry. The web is inundated with great technical articles on responsive web design. Instead of attempting to contribute to that discussion, here, my mission is just to demonstrate what responsive design is to someone unfamiliar with the concept, to explain why we think it’s cool and to share some resources from people we believe are leading the way forward in this area.
What is responsive web design?
A responsive website is one designed to be flexible, so its layout adapts, or responds, to the screen size of the device being used to access it.
The following video shows a quick demo of our own site adapting to different screen sizes.
Why do we need this?
Responsive design is a solution. The problem is that we have started to use small screens to access the web, so traditional websites can look like this:
The screenshot is taken of the Irish Times website from an iPhone 4. The website appears in miniature form to fit on the small screen and requires the use of two fingers, to zoom and pan, in order to read the content. This makes for an unpleasant experience which is often met with a quick exit from the page. (Check the bounce rate of mobile devices accessing non-mobile optimised sites)
Why do we think responsive design is cool?
For businesses, it’s a nice solution to the multi-device challenge. Designing a different website for every device, or even one for mobile, tablet, desktop, would be a chore, incredibly difficult to maintain, and they would go out of date as quick as you could design them. Longevity is an important quality of a site. The longer the shelf life of a site, arguably, the greater it’s value, from the point of view of a business owner having to re-invest in a new design. Responsive design, and I’d argue, image support for hi-resolution, retina devices, are two of the strongest wins to make sure a site will hold up on the technology we’ll be using in 3-5 years.
For designers, the idea that content on the web does not necessarily exist in fixed width pages is an important step forward in the web being understood as its own thing. Dan Rubin, in an article he wrote for the The Manual, asked something along the lines of, “what could the web look like if it wasn’t presented on a page?” The question broke my brain a little, I felt it wasn’t meant to be answered, just thought about. It’s kind of being asked to think outside of the box, but, of a box we’re not in, we’re looking at it, and we made the box and we put stuff into it. It’s like the content is static in a way and it’s our perspective, or the tool we use, that changes our experience with it.
Designers get to play a large part in deciding how people interface with their content, while working within the ever changing constraints of the technology we use. I think that’s pretty exciting.
Resources (more for designers than clients)
- Environments for Humans put on the RWD Summit, an online conference. You can still purchase the recordings.
- The guys over at Paravel are doing great things in the responsive world. I really recommend Trent Walton’s blog.
- Ethan Marcotte coined the term and wrote the book Responsive Web Design.
- Also, from A Book Apart is Luke Wroblewski‘s Mobile First.
- For images, I’m keeping an eye on the Filament Group and have put my money on the proposed picture element by using their Picturefill approach. Scott Jehl talks about it on The Web Ahead podcast.