October 3, 2012

15 Best Responsive Web Design Templates, Frameworks, and Tools

15 Best Responsive Web Design Templates, Frameworks, and Tools

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!

25 Best Responsive Web Design (2015)
25 Best Responsive Web Design (2015)
Spanning travel, design, and business sectors, we hope these great examples will be an inspiration for your next web project. Check it out!

Name*

Email*

Company

Are you interested in working with social driver?




Please leave this field empty.

Layout Tools

1. Responsive Web Design Sketch Sheets

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!

2. Gridpak

Gridpak Responsive Design Resources Tools

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!

3. Responsive Layouts, Responsively Wireframed

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.

4. Responsive Patterns

Responsive Patterns Best Design Tools
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!

5. GuideGuide

Guide Guide GuideGuide Responsive Design Tools
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!

Articles

6. Responsive Web Design by Ethan Marcotte

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.

7. Multi-Device Layout Patterns by Luke Wroblewski

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!

8. Designing for a Responsive Web

Designing for a Responsive Web Design Tools
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.

9. Setting Breakpoints in Responsive Design

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.

10. How to Approach a Responsive Design by Tito Bottitta

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.

11. Designing for responsiveness

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.

Testing Tools

12. Responsive.is

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.

13. Screenqueri.es

Screenqueries Responsive Design Tools
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.

 

Development Tools

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.

 

Inspiration

15. Media Queries

Mediaqueries Best Responsive Design Tools
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!

Social Sharing

Options: Facbeook, Twitter, Linkedin, Pinterest...

AUTHOR DETAILS

Options: Headshot, Bio Excerpt, Link to page with more details

Casey
By: Casey DenBleyker
Creative Director
Casey oversees the creative direction for clients at Social Driver. He has supported the development of over 100 websites, with a keen focus on responsive design.
  • Pingback: jfd98ayhcim()

  • Partha Chakraborty

    need more

  • Really enough more stuff for me. I was looking something similar but I couldn’t find any source to solve my problem. Here I get the best solution that I need to add on my website.

    Thanks a ton dear…!!!
    61design Street- Best web design company

  • Ammar Khan

    What make us different tablets and mobile phones are the template for Responsive Website

  • Tablets and phone size is different so responsive need it.

  • Great and a very useful blog for me. I like reading this blog. Thanks a lot for sharing.

  • Great tutorial.Thanks for these best example websites. Time is changing and web designers need to focus on latest web design trends, that’s a fact.