SpyreStudios

Web-Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

8 Best Tools for Testing Responsive Websites

June 10, 2015 by Jake Rocheleau

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

designmodo webapp responsive tool

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

responsive test webapp tool

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

responsive inspector extension

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

responsive tester chrome extension

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

firefox more display resolutions addon

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

responsive resize safari browser extension

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

rwd bookmarklet javascript responsive

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

aptus osx app responsive testing

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

Filed Under: Resources Tagged With: responsive, tools, webapps, webdesign

Search SpyreStudios

Web Design Jobs

Development & Programming Jobs

Graphic Design Jobs

Computer & IT Jobs

UX Design Jobs

LiquidWeb

Level up professionally!

Coursera - Hundreds of Specializations and courses in business, computer science, data science, and more

Envato

SpyreStudios © 2021