15 Best Responsive Web Design Testing Tools

Over the past few years we’ve seen an explosion of web-enabled devices with varying resolutions, capabilities, form factors, pixel densities, interaction methods and many more. As the use of different devices continues to rise all across the world, so does the need for us to deliver a tailored experience for those devices on the web. But how do you test your website responsiveness?

Thankfully, there is a growing number of browser-based tools available that emulate the screen sizes of a wide variety of devices. This article takes a look at the 15 best responsive web design testing tools available on the web. Feel free to dash through the list and happy testing!


Responsive Web Design Testing Tool

This is a great testing tool by Matt Kersley. With the tool you can test how responsive your website is, in various screen sizes simultaneously in a single screen. Just enter your website's URL into the address bar at the top of this page (not your browser's address bar) and click enter.

Respondr

Respondr is another simple, yet useful tool for testing webpage responsiveness. Select from different devices like iPhone, iPad and Mac, and see how your website respond on these devices.

Colimnial

Columnal is a Pulp+Pixels project. It is based on work from the fantastic people of cssgrid.net and 960.gs. Columnal makes responsive prototyping a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers.

resizeMyBrowser

resizeMyBrowser allow you to test your website from different dimensions. You can choose between 15 different presets, or you can enter your own custom screen sizes.

Screenfly

Screenfly is a tool by Quirktool. With screenfly, you can test any webpage from variety of devices: Phone, Tablet, Desktop, or TV. You can also enter a custom screensize, rotate the screen, and generate a URL to share with others for testing.

Responsive.is

Responsive.Is is created by TypeCast another browser emulator tool, which you can use to test your responsive design. Just type in a URL, and it will automatically change its size depending on the device you choose.

RWD Bookmarklet

The Responsive Design Bookmarklet is another impressive testing tool. Just drag the bookmarklet link into your bookmarks bar and it will be saved to your browser. You can then choose to preview the current page on screen widths the size of tablets and smartphones.

Adobe Edge Inspect

Adobe Edge Inspect is a paid service that currently relies on apps that only work on iOS and Android devices. There’s a whole host of other mobile platforms out there, including Windows Phone, Symbian, BlackBerry and more.

ProtoFluid

ProtoFluid simplifies the development of fluid layouts, adaptive CSS and responsive design. It builds precise, dynamic viewports in which to test your work. This allows you to quickly effect changes and demonstrate benefits to interested parties. It is free and lets you use other extensions like FireBug.

FROONT

FROONT is a web-base tool that runs in your browser and allows you to see what you're designing in the same way users will. Present comps online on all devices. Instead of giving static images to your developer, provide them with fully functional HTML and CSS code.

Opera Mobile Emulator

Developing for mobile phones and tablets becomes a breeze. The emulator is super simple to install and lets you do serious mobile development from your desktop.

Am I Responsive?

Quoting the developer, "This is not a tool for testing, it is really important that you do that on real devices. This instead is a tool for quick screenshots (for me) and to visually allow people to ‘get’ what you mean in client meetings." Instant view of your site as it would display on four different iOS devices.

ResponsivePx

ResponsivePx is an awesome tool for testing your responsive website design. It features some an awesome function that let you identify the breakpoints and also test how the CSS media queries are working in your site. Enter the url to your site - and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

ScreenQueries

14 handsets and 12 tablets are provided here, with a separate control to switch between portrait and landscape mode. An interesting feature of this site, for several of the devices there is a “Trueview” option which shows your site wrapped in the specified device’s browser chrome.

Responsinator

Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the Responsinator. It also shows your site both in portrait and landscape mode.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz