21 Great Tools for Responsive Web Design

As web designer, we knows that responsive web design had come to stay. You’ve taken your time to build a very beautiful and robust website, with considerable number of traffic to your site from search engines. Then, you come to the reality of devices. Which device will be used to open your website?. What about the height and width of the device? There are thousands of devices, along with several dimemsions and viewports.

21 Great Tools for Responsive Web Design

As web designers, we knows that our design will be viewed from various devices and browsers, and at the same time our blocks of code will be executed by various devices.

There had been massive increase in the number of web enabled devices, coming along with a lot of pixel density, interaction, resolution and so on, also judging by the current trends in technology, there will be more devices with which people can access web.

The fact that responsive web design is necessary for every web does not mean it is as easy as that, considering the fact that, you have to put put several devices into consideration as well as dimensions and viewports. The challenge is that, we have to make an interface that will scale with virtually all devices, from small screen to big screens at the theater hall.

This simply made it imperative for all websites to be responsive to various devices for easy navigation and better user experience.

If you’ve seen one of our past posts on useful responsive web design toolbox, then you know that there are so many tools on the web for responsive web design. But, from my many years of experience as web designer, developer, and consultant, coupled with thorough research which I had done, I will be sharing 21 great tools and resources for responsive web design. Mind you, for designers who are yet to come to terms with responsive web design. I recommend reading Importance and Reasons for Responsive Web Design, you may also ask your question, and an expert will answer you through your email address. After which you can continue here with 21 Great tools for Responsive Web Design.

01. ZURB Foundation

ZURB Foundation

ZURB Foundation is one of the world most accepted and advanced framework for a responsive site. A lot of resources had been spent by ZURB on the framework, in addition to the several effort that had gone to open source project on the framework.

ZURB Foundation has huge enhancement strategy, as you are allowed to increase the layer in complexity based on size of the screen and design capabilities. Not only that, You will also found a comprehensive library consisting of several UI component, making it easier for you to prototype any interface you can imagine.

Visit Website

02. Jetstrap


There had been massive turn around in wed design process, as wireframe will not show how a particular design will look in several web environment. And coding knowledge is required to make use of some prototyping tools.

This is where Jetstrap comes. It allows designer to quickly assemble prototype simply by dragging and dropping components from the UI to the canvas. Frontend development skills are not required to start, and you will end up with a breathing web page. You only need to use the drag and drop tools on the interface.

Visit Website

03. Responsive Design Weekly

Responsive Design Weekly

Web developer Justin Avery spends time sending dedicated newsletter on resources, tools and techniques for responsive web design. As a designer, I spends part of my time on twitter reading feeds on responsive web design. Some of the feeds involve latest resources, and helpful tips on building a responsive web design. Joining responsive web design discussion from LinkedIn will surely improve you skill and get you latest ideas on current trends in responsive web design.

Visit Website

04. Style Prototype

Style Prototype

Style prototype is an HTML page showing button style, typography, color, photography style, roll over and other elements for a propose site.

One of the main purpose of style prototype is to create deliverables which are useful and replicable. While there are no rules to building a style prototype, you have to include some basic elements, like button style, typography, color and roll over aside from other elements which can be included.

Style prototype allows you to add animation, color, and other elements in web environment.

Visit Website

05. Element Collages

Element Collages

When creating full page mock-ups, one of the hardest thing we have to face as designer is the designing of the minute of each page. Professionally, it is advisable to spent more time designing the hero messages on homepage than spending more time on the rest of the pages.

As a designer, creating your site mockups in photoshop is not advisable with current trends in web development industry, as you have a lot of other things to do.

Founder of agency SuperFriendly Dan Mall had gone a step further in simplifying things with Element Collages.

Element Collages has a very good User Interface for visual exploration of interface components. Collages helps you in the visual direction, and you don’t have to create the entire component by yourself, considering the fact that you are not designing for just one device.

Visit Website

06. Pears


Some important benefits of frontend style guides involves, allowing for easier testing, better workflow, shared vocabulary, and serving as reference to keep coming back to. Pears is an open source wordpress theme created by Dan for creating guide to frontend style.

Pears makes it easy for designers to utilizes common library for a consistent design system.

Visit Website

07. Icomoon


Retina and other high resolution displays are fast becoming order of the day, bitmap icons doesn’t scale very well with these high resolution devices. Thankfully, the web development industry is equal to the task.

The effective solution to this is to a create resolution independent icon, which can be achieved by creating custom icon font and embedding it with CSS @font-face.

Iconmoon simply makes the process of creating and displaying icon font easy. You will be able to choose from a library of icons, with options to upload your icon. From there, you can then generate you custom icon font and download a package that includes the font and appropriate CSS. When it comes to creating resolution independent icon, Iconmoon is an important tool.

Visit Website

08. Foresight.js


Various devices has different ways of displaying bitmap images, but as a designer, you must have it in mind that that loading high resolution images can bulk up page weight. Foresight.js detects has the ability to detect device display and connectivity to determine whether to load hi-res components or not.

Visit Website

09. Detector


Device detection and profiling can be tricky a times, as device library are difficult to manage. Since, feature detection relies on client side detection, so solely depending on it can bring some limitation in flexibility when delivering functionality to wide range of devices.

This leads to creation of detector by Dave Olsen, using PHP script, and browser based on Javascript, along with a host of feature detection library. The library users modernizr and user-agent detection to determine device classes. Detector has the ability to adapt to new devices and browsers on its own without any need to pull from central database of browser information.

Visit Website

10. Enquire.js


Every designer knows the important of using media queries in CSS. Then what happen when you want to alters some experiences at a certain point? These can be easily accomplished Enquire.js script.

Enquire.js script uses uses matchmedia to conditionally execute some functions, and load some script if certain conditions are met. With this you can expect better user experience and easy from users.

Visit Website

11. SocialCount


Loading social media share widgets such as Facebook, twitter and Google takes 19 HTTP request widgets and added additional 246.7KB to pages weight, this often increase time for web pages to load, and consumes more bandwidth.

Zach Leatherman addressed it by creating light weight solution, named social count.It is a small script that lazy loads social widgets, so that users are not penalized at all.

Visit Website

12. FitVids


Several media objects including videos are different when compare to images, in the sense that they don’t maintain some of their aspect ratio after resizing. This creates a scaling issue when viewing video from a host of different web enabled devices.< br/> Chris and other designer succeeded in developing a plugin called FitVids.js.the plugin is able to detect and use correct ratio of video or any other media objects when resize. With this, you can get correct resize ratio when your video is resize, and as a result get finely displayed media objects including videos in your applications.

Visit Website

13. IE-friendly mobile-first CSS

IE-friendly mobile-first CSS

Every designer knows how important is media queries, but the fact is that internet explorer does not support media query. At the same time, as a designer, you cannot decide to do away with media query, just because you want to support old IE. This problem can be easily overcome by using Sass. Sass will help us to mobile-first styles, and at the same time provide appropriate desktop styles to old version of IE.

Visit Website

14. ish.


As a designer,if you check online to search for viewport testing tools, you will found many view port testing tools. But the issue there is that most of the viewport testing tools rely on popular devices widths such as 320, 768, 1024 and so on.

Ish classify and bring out general ranges (small-ish, medium-ish, large-ish, etc) just to make sure that your brings out the general resolution spectrum.

Visit Website

15. Proportional Media Queries

Proportional Media Queries

Some designers are still making use of pixel values to set breakpoints, while we’ve been using widths, measurement, and font units relative to various devices viewpoint. A good tutorial was given by Lyza Gardner which explains how we can use relative units for breakpoints to create better user experience.

16. MQTest.io


As designer, a times, it might be somehow daunting to track media queries that a particular browser supports. This is easily solve by using MQTest.io developed by Viljami Salminen. The tool will help you to recognize and analyze various media queries that different web browser responds to. With this, you might also be able to utilizes media queries which are not commonly used.

Visit Website

17. Sparkbox media query bookmarklet

Sparkbox media query bookmarklet

Sparkbox is a media query bookmarklet which helps to determine queries for current media or media in use. It is imperative for designers to have access to screen dimensions, as it saves time and also helps in determining proportional media queries.

Visit Website

18. BrowserStack


As designer, we knows how expensive, challenging and even daunting it can be when it comes to testing in a representative stack of browsers and devices. This is easily solved when we make use of BrowserStack.

Browser stack provides remote access to several devices and environments, thereby allowing you to do some quality assurance testing. BrowserStack is as impressive as anything as it is also effective when testing on old versions of internet explorer.

Visit Website

19. Mobitest


Performance is one of the most essential aspect of web design. With Mobitest, you will be able to see how your designs are performing with some analysis.

When testing your design on Mobitest, you only needs to enter a web address, after which the tool displays the site on a real device, and at the same time gives you a lots of performance statistics, as you will also be able to know load time, and average page size along with other statistics.

Visit Website

20. Adobe Edge Inspect

Adobe Edge Inspect

The importance of testing on a real device cannot be over emphasize for a web designer, as you need to see and analyze the kind of performance your design will bring to a user prior to publishing. An Adobe Edge Inspect had made testing on real device very easy and straight forward, as you have the tool auto-refreshing all connected devices. You are also able to test code on wide range of devices.

Visit Website

21. Codepen Pro

Codepen Pro

CodePen is a tool that quickly helps to demonstrate responsive patterns and techniques. It is a tool which also helps performance of our designs on different devices and computers, while still typing.

CodePen is a powerful tool which helps you to see the results of your code on multiple devices and computers as you type.

Visit Website


All the 21 tools mention above are good for responsive web design. But, each of the tools have different functionality, personally, I don’t have any preference, as all the tools are effective, though with different interface and functionality. The choice is yours.

Visit us at InstantShift.com



Leave a Comment