50 fantastic tools for responsive web design | Feature | .net magazine

To get started with building a responsive site, having a strong toolkit can make a world of difference. Here Denise Jacobs and Peter Gasston round up 50 great tools to aid the process of making your sites responsive

As introduced/coined by Ethan Marcotte in both his article “Responsive Web Design” as well as his best-selling book, one needs three elements to make a site responsive:

  1. A flexible/fluid grid
  2. Responsive images
  3. Media queries

There are plenty of other great articles that cover motives, concepts, and techniques regarding responsive web design, so we’ll keep the focus of this article on some top tools that will help you become responsibly responsive.

Check out the full list of tools here that will help you make your site responsive.



How to create a flexible grid

Using a flexible grid, we should forget about the fixed width style and centered content. It means that all the elements of our design are resized in correlation to each other. The basic idea of a fluid grid is to use this formula for calculating the proportions of the design in percentage: “target / context = result”


Responsive Web Design

The same formula works for types. We stop using pixel-based sizes, instead we use the em or percentage. Example:
14 pixels – the body font size;
21 pixels – the H1 font size;
21 ⁄ 14 = 1.5

Read more: http://www.webdesign.org/web-design-basics/design-principles/secrets-of-resposive-web-design.21388.html#ixzz2eZ0Du6NU