{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

You’re probably growing tired of the phrase ‘responsive design’, but it isn’t one of those overly-hyped buzz phrases that you can ignore, and it’s not going to go away anytime soon.

The reality is that many sites – ours included – still need to figure out how to deliver a consistent user experience that adapts to devices with different screen sizes.

So, I thought I’d compile a few resources, and some lovely tools, to help you (and me) to go down the responsive design route. 

THE THEORY

1. Multi-device layout patterns

The sagely Luke Wrobleski presents various different approaches to page layout. Well worth a read if responsive design is a new concept to you, or if you are about to embark on your first responsive project.

2. Wireframing for responsive design

Leigh Howells at Boagworld offers up a great primer on responsive design, and concludes that:

On a mobile page there are really only two hot areas, the header and the footer, both of which will need to carry important navigation options for our site. Everything in between is fairly equally weighted.

3. Complex navigation patters for responsive design

Do you really think that those mega-dropdowns are going to work on a mobile device? Here are a bunch of approaches to responsive navigation design for different screen sizes.

4. Responsive is a characteristic

In which Stephanie Rieger suggests that “mobile is an opportunity to reboot”, something I heartily agree with. 

Developing a standalone (but responsive site) provides an ideal opportunity for learning and experimentation. It enables you to re-focus your content, lighten and streamline your experience, and deliver real user value—without the (often all too real) burden of re-structuring your entire legacy web site.

5. Responsive retrofitting

This is “about finding a way to use responsive techniques on legacy sites to create a better experience for more users”. Ben Callahan explains that you don’t need to start over, and shows you that a little CSS can go a long way.

THE TOOLS

6. Wirefy

This is a responsive wireframing framework that allows you to play around with page layouts within the browser.

7. Rubber Cheese

A wireframing template from Rubber Cheese, which caters for three different screen sizes: 978px, 768px and 320px. This is a free vector file, for Adobe Illustrator fans.

8. UXPin

A collaborative online design tool, which costs from $12 a month. Looks promising for remote / distributed teams.

9. Chris Bannister’s templates for Photoshop

Provides templates for desktop, tablet and mobile screens.

10. Gridset

Mark Boulton’s app allows you to create complex grids with breakpoints to adapt your layout for various screens. Costs $18 / £12 a month.

11. Jetstrap

I’m very keen to try out this web-based responsive wireframing tool for Twitter Bootstrap (which I’d also like to play around with). One project / three screens is free, otherwise it’s priced from $8 a month.

12. This Man’s Life’s content repositioning tool

This interactive tool allows you to flip between desktop and mobile views, to see how content elements will be repositioned according to screen size. Aim for the top right of the page to switch things up.

13. RWD Wireframes

Here’s another online tool for figuring out how to position your content on various devices.

OLD SCHOOL

14. The Responsive Design Sketchbook

Here’s a notepad specifically created with responsive designers in mind. I love this kind of thing. Here's what the pages look like...

15. Printable 

Take a look at these wonderful download-and-print wireframing grid templates. Various sizes, all of which are fantastic for those of you who like to sketch... 

INSPIRATION! 

16. Media Queries

See how other sites are winning the responsive game. 

TEST

17. Resize my browser

A neat tool that allows you to test your web pages to see what they look like on different screen sizes.

18. Design Modo's test

Excellent for seeing how your web pages render on all manner of devices. Simply add your URL and then choose from dozens of devices in the top right menus.

Hope that helps. Do let me know if I've missed anything obvious, and by all means share your responsive design tips in the comments below.

Chris Lake

Published 9 May, 2013 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (6)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Andi

Nice list, Chris Bannister’s Photoshop Template helps me daily, Didn't know about Jetstrap, love how fast the concept of RWD is evolving and new local/cloud apps are getting made weekly. Ghostlab would be a nice addition to this list. http://www.vanamco.com/ghostlab

about 3 years ago

Avatar-blank-50x50

Santiago Martín-Cleto

Great article, thanks for the resources.
Viewport Resizer is a very useful tool as well http://lab.maltewassermann.com/viewport-resizer/

about 3 years ago

Avatar-blank-50x50

App Mockup Tools

For wireframing iOS apps I design iOS GUI Element Kits that work with Apple Keynote. No coding required. I also design iOS app sketchbooks and Production Todo Lists. http://www.appmockuptools.com

about 3 years ago

Avatar-blank-50x50

Justin Avery

For a quick and easy screen shot of your responsive designs you can use http://ami.responsivedesign.is

about 3 years ago

Avatar-blank-50x50

Jason Munslow, Head of Digital at HOMEDECOR

Good article - thanks

about 3 years ago

Avatar-blank-50x50

Peter Drinnan

I used something called Pencil Project. It is an open source project and I use if for standard and desktop layouts. Just google "pencil project" and and you'll see it right away.

about 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.