We’ve shown some of our favorite responsive design examples, we’ve told you why responsive design is important, and we’ve even explained how it works. Now, we’ve collected our absolute favorite layout tools, testing tools, development tools, articles, and inspirations to make designing responsively as easy as possible. We think that all websites should be responsive, so take these tools and make our dream come true!
The best way to start any design is with a sketch. These free sketch sheets have four different sizes so you can plan out your design according to your different break points. They’re perfectly sized to print out so you can make as many as you want!
This is the most interactive and best-looking grid generator I’ve come across. You can specify the size of your grid elements–number of columns, column padding, gutter width–resize the grid for different resolutions, and even add break points. Once you’ve set your specs, one click will download your Gridpak containing PNG, CSS and JS files. This means you can use it in your design process, as well as your development. It works super well and looks pretty sweet doing it!
This page has 5 different layout wireframes which you can toggle to a mobile view to see how content can be rearranged. Unfortunately you’re unable to make your own wireframes, and can’t control the screen sizes, but it’s still a good resource when you’re thinking about content organization.
This is a great collection of the various patterns used in responsive design. Different ways of reflowing content, handling navigation, tables, images, and more are shown with accompanying descriptions. By clicking “Edit This Pen” at the bottom of each page you can see the full HTML and CSS. Nicely done!
Your days of manually dragging out grids in Photoshop are over! GuideGuide is a free plugin for Photoshop that allows you to input a few values (column width, row width, gutter width, etc), press a button and Photoshop draws out the grid perfectly for you. I wish I had known about this sooner!
This article by Ethan Marcotte is a great introduction to responsive web design and development. Ethan provides a background for responsive design while walking the readers through his creation of a responsive page. He does a great job of explaining every step along the way as well as his thought process behind the work.
Are you just starting to plan your responsive site and don’t exactly know where to start thinking about content organization? Give this article a read. Luke discusses a few different ways to reorganize your page once the resolution gets smaller. With tons of examples and helpful diagrams, you’ll be on your way to a great responsive site in no time!
This article is rare in that it’s written for designers who won’t be touching any code. That being said, the article rightfully says, “To truly learn how to design a website, you must understand how the design will later be implemented in code, even if it’s only a rudimentary understanding.” The basics of Responsive Web Design are covered, as well as giving designers helpful tips on how to plan a design before anything gets started.
Deciding on breakpoints will always come up when designing responsive pages, but where should you place them? Many people hold to a standard set of breakpoints based on the resolution of popular devices, but there’s another way of thinking. This short and sweet article is an enlightening read if your wanting to refine your process for setting breakpoints for your responsive layouts.
BostonGlobe.com is one of the more recognizable responsive sites and frequently appears on lists about RWD. The author of this article talks us through the whole process of designing the new BostonGlobe.com with insights into breakpoints, where to start, and which programs to design in. It’s really interesting to read the problems they ran into and get some insight into the thought process that goes into redesigning a large website while keeping responsiveness in mind.
The whole process of designing for responsiveness is covered here. As a designer, responsiveness changes our workflow a bit. More design work must be done in-browser rather than completed before handing it off to the developer and the author does a great job of detailing this new process.
If you are wanting to test a responsive website that’s in development and you left your iPad at home or simply prefer doing it all on your desktop, responsive.is is the way to go. Put in a website and you can resize it for desktop and ipad or iphone in portrait and landscape orientation. It doesn’t offer manual control over window size, but it’s simple and works well for people targeting iOS.
There are a lot of testing sites out there, but I’ve found Screenqueries to be my favorite. It’s got a large list of mobile devices that you can select from, or you can drag the ruler around to fine-tune the window and choose exactly the resolution you want to see. You can easily rotate the view with a single click, and even see how it’ll look within the device’s browser UI using the “True View” button.
14. Fluid Grids
This grid generator gets right to the point and does it well. It allows you to input exactly how many columns you want, as well as widths and gutters, whereas other generators only give you a few pre-selected options.
Such a great repository for inspiration! Media Queries shows off tons of responsive examples with the different screen sizes side-by-side. It’s a great place to get ideas, or see how other designers are reorganizing content as screen size changes. Go to http://mediaqueri.es/popular for the best examples.
What are your favorite tools? Let us know in the comments below!
Options: Facbeook, Twitter, Linkedin, Pinterest...