Everyone who builds websites knows that responsive design is important. In fact, any modern website should be built with responsive techniques in mind.
While there are plenty of tools for creating responsivity, it’s tougher to find debugging & testing tools. And what good is an untested layout? About as good as an uninspected car, although less threatening to your corporeality.
The following tools are built for responsive testing along any medium. I’ve included free webapps along with browser extensions and desktop software. No matter how you prefer to check your website projects, there is a tool in here for you.
1. Designmodo Responsive Test
Perhaps the greatest free online webapp is Responsive Test by Designmodo. This was built specifically for users who needed to test their responsive layouts.
The interface is completely draggable and resizable without changing the browser window. You’ll find a ruler fixed along the top of the page and manual inputs for resizing. Plus there are custom dropdown menus that include pre-determined sizes for smartphones, tablets, and e-readers.
All-in-all this is the responsive tool you’ve been waiting for. It has everything you could possibly need in one place. The interface is really intuitive and it just feels like home.
2. Responsivetest
An alternative to Designmodo is the more simplified Responsivetest. This webapp is built in a similar fashion to serve a similar purpose with a redefined interface. Everything is draggable and quickly resizable with access to specific devices.
If you prefer a root domain that’s easier to remember then stick with Responsivetest. It has plenty of great features and while it may not be as packed as the Designmodo webapp, it still serves its purpose flawlessly.
3. Responsive Inspector
Google Chrome is one of the fastest growing web browsers for its speed and simplicity. Thus many developers have latched onto this platform and developed nifty little extensions.
One such example is Responsive Inspector currently with over 60k users. This extension adds an icon into your toolbar which allows you to check out individual media query breakpoints. It’s kinda like Firebug for media queries giving you an inside look at individual areas of content.
4. Responsive Web Design Tester
If you want to actually test breakpoints then you need Responsive Web Design Tester. This extension has been developed for Chrome and Opera, both of which are free open source solutions.
Right-click on any website and select the responsive tester menu. From here you can choose predefined resolutions or make your own. Plus the extension offers customizable options for view style and rendering modes. If you need a reliable browser extension for responsive testing, this is your best option.
5. More Display Resolutions
The previous extension works great for Chrome and Opera, but what about Firefox? Check out More Display Resolutions on the Firefox extension website. It offers some basic tools for resizing and testing websites at pre-defined dimensions.
But wait, that’s not all! Firefox also has its own breakpoint snooping extension just like the responsive inspector. It’s called FireBreak and it’s pretty awesome. Both of these extensions are completely free and provide the best toolkit for debugging a responsive layout in Mozilla’s foxy browser.
6. ResponsiveResize
Some of you Apple users may be asking “well what about Safari?”. Luckily another developer named Duncan Midwinter felt the same way. He built a free Safari extension named ResponsiveResize that you can download straight from his website.
I didn’t spend much time testing this one but it does feel solid. You get a new iOS-styled bar on top of the browser with selectable resolutions. For those of you still riding the Safari bandwagon this is the undoubtedly the best native browser extension you can find.
7. RWD Bookmarklet
If you’re not a fan of browser extensions, why not try a bookmarklet instead? This is just a link written in JavaScript that runs from your booksmarks toolbar. RWD Bookmarklet is a free tool and super easy to install.
Just go to the website and look for the dark blue button. Drag that link into your bookmarks toolbar and then visit any website you want to check. It’ll add a dynamic black bar to the top of the window with custom settings for landscape/portrait on touchscreen devices.
Keep in mind that this is all written in JavaScript and runs within the browser’s rendering engine. It’s not a fully-fledged extension or webapp, so it may feel a little clunky. But it’s great for simplicity’s sake and runs perfectly on all Operating systems from Linux to Unix and Microsoft.
8. Aptus
Finally I’d like to cover an interesting piece of software for Mac OS X. Aptus is available on the Mac App Store and can be downloaded directly from the website.
It operates like a web browser but focuses on responsive testing. You can pull screenshots or preview different resolutions for different layouts. Everything is based on the web and it’s a rather unique yet helpful tool. It may not be the first choice for Apple users but it is part of the responsive testing tool library.
These 8 tools should give you more than enough to work with. Anyone who does responsive design knows that it can be tough. But with the right tools & resources at your disposal, the process gets a little easier.
Responsive web designers will love these other posts:
34 Inspiring & Responsive Web Design Portfolio Layouts
Popular Responsive Grids for Designing Website Layouts
Author: Jake Rocheleau
Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau
