Skip to main content

5 Useful Tools For Responsive Web Design

Posted on April 18, 2012 by nDeHertoghnDeHertogh

1. FitText.js

The first one I’d like to discuss is a JavaScript plugin that makes font sizes flexible. It’s called FitText and is pretty simple to use. You can download it, for free, on github. In the zip file you’ll find 3 files: a readme file, the actual JavaScript file and an example.
Like I said, it’s fairly easy to use. If you open the example, you’ll see that the headers (h1) all got an id. It’s these parts that will be resized when you resize the window. Their are a couple of things you have to pay attention to in the css file, or script if you put in the html file. However FitText ignores the font-size you specify in the css file (body tag), you have to be sure to set one as a fallback in case JavaScript is turned off. You also have to make sure that the h1 tag has a display block with a specified width.
So in the example, they just call the function for the first id (fittext1) which has all the default values. For the second id (fittext2) they set a “compressor” value. If you set a high compressor value, the text will shrink more aggressively. If you give a lower value, for instance .fitText(0.8), the text will shrink less aggressively. For the third id (fittext3) they set a min- and maxFontSize, this allows users to specify two optional pixel values.
More information, and the link to github, can be found on their website
2. Adaptive Images

This tool detects your visitor’s screen size and automatically creates, caches and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. It’s a bit more difficult to use because, you don’t only have to know the basics of html and css, you also have to have some basic server knowledge. You can also download this tool for free on github. When you unzip this file it’s best to first read the instructions file. Here you’ll find a very detailed list of instruction to create your adaptive images.
They say the setup is really easy and quick (just 3 steps). You first have to add the .htaccess and adaptive-images.php to your document-root folder. Than you have to add just one line of JavaScript between the head tags. And finally you have to add your css media query values into $resolutions in the php file.
You can find all the information you need on
3. Responsive Testing

My prayers have been answered with this tool. I find it really dreadful to constantly have to resize my huge window so I can test a responsive website. No more I tell you! Just visit and enter the url of the website you’d like to test. You can test only on the width or the device sizes. You have a beautiful overview for each device and their fore you can easily see where you have to tweak some more. The only downside I could find is the fact that it only covers apple’s products. So if you create for Android tablets or phones you still have to figure out their device sizes. But even for them it will be a great help!
4. Less Framework 4

“Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 set of typography presets, all based on a single grid.” You can download Less Framework for free on github.
If you want to see what it does, you just create a new webpage with some dummy text in it from you just have to copy the css you want (I choose the main-16px.css) and paste it in your css file. If you run the page now you can already see it in action. If you want something more sophisticated, you can always tweak a couple of things in the css file.
There are a couple of rules you have to keep in mind when you want to use this tool for your website. So for more information about this useful grid tool, visit their website
5. Responsive Web Design Sketch Sheets

If you still use paper and pencil to create your mockups, you could use these sketch sheets for your responsive web sites. You can download the sheets at


Image of webdesign
8 years ago

I constantly emailed this web site post page to all my contacts, as
if like to read it after that my links will too.

Image of Luke
8 years ago

These are some great resources. May I add my page, inspired my Matt Kersley’s page. It allows you to test your page to popular phone and tablet resolutions:

Image of nDeHertogh
8 years ago

Sure you can! The Matt Kersley tool is really helpful, even if you’re developing for Android devices, but not perfect since it’s only Apple devices.

Image of George
7 years ago

Hi there. I think you could replace #3 with the Opera browser. They seems to have the responsiveness included, as the page takes the CSS of a responsive layout if you shrink the window size as necessary. I use it when I do development, and it works. You get the same result as if you were using Opera Mini or Opera Mobile in a smartphone.

Image of Web Design Liverpool
Web Design Liverpool
7 years ago

Some very useful tips here! I think one of the main reasons so many companies are going reponsive, is that Google will be looking at mobile user experience as a determining ranking factor.

Leave a Reply

Your email address will not be published. Required fields are marked *