10 Tools & Apps for Testing Your Responsive Design
It’s never been more important to ensure your design is ready for every type of user—and device—before launch. While it can be tough to physically test on every device, there are some tools and apps to help you replicate a variety of responsive scenarios.
With free and premium tool options, there’s no reason not to test your responsive design before deployment. Just make sure to use that information to many necessary design adjustments! Today we’re running you through a selection of tools for testing a responsive design.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
1. Google Mobile-Friendly Test
Google Mobile-Friendly Test is one of those go-to tools that somehow gets overlooked. You need your website design to pass Google’s standards to help with search visibility; it’s that simple.
Use is easy, just type in a URL and see how your page scores on mobile devices. The best part of this tool is that it pinpoints where your website might be slowing down or not rendering well on mobile so that you can make the fixes.
Cost: Free
2. Responsinator
Responsiator allows you to see your website design in a number of different device environments. (This is a great way to replicate devices without having a stack of phones in a drawer somewhere.)
The best part about this site is that new devices are added quickly and each actually lets you scroll so that you see an entire page, not just what appears above the scroll. Devices are offered in portrait and landscape view as well. Plus, each device preview is labeled so you know exactly what you are looking at and where issues might lurk.
Cost: Free, but with ads (remove ads for a donation)
3. Responsive Design Checker
Responsive Design Checker puts your website into a window where you can manually adjust sizes – great for checking breakpoints – and see different device orientations.
Where this tool excels is that it shows desktop sizes as well as mobile and tablet devices. (Some of the other tools really put the emphasis on mobile and not larger screens.)
What’s nice about it is that you can see different sizes without changing the size of your browser. Another nifty use for this tool? Use it to grab screenshots for mockups.
Cost: Free
4. XRespond
XRespond lets you compare multiple versions of your site on different devices simultaneously. The beauty of this tool is that you can figure out how consistent of a user experience you are providing from one device to another. (Users expect websites to be the same wherever they access them.)
Test the design in landscape or portrait view and choose devices by the same maker – such as Apple or Samsung – or compare across a variety of devices at similar sizes. The one downside to this tool is that it doesn’t include all of the newest devices, although many of the most popular models are listed.
Cost: Free
5. Screenfly
Screenfly has some nice tools, such as sharing, so that you can work as a team to test and view a responsive design. It includes more device types than some other tools as well – desktop computers, phones, tablets, televisions and the ability to add any custom screen size you want.
Tools allow you to rotate, scroll and more with simple click buttons at the top and everything works right in-browser.
Cost: Free
6. LambdaTest
LambdaTest is one of the more robust tools in this list. It includes the ability to test on more than 2,000 real browsers and operating systems.
This tool is more than just seeing what your website will look like, it tests for compatibility, user experience, pixel perfection, and more in a live environment. It tests on multiple devices, browsers and versions of browsers so you’ll know exactly how your website works.
You can get screenshots of how it all looks and even collaborate with the tool (and team) online. Plus, the bonus of a premium tool such as this is that it includes debugging features to help you solve design problems as they arise.
Cost: The Lite version is free; paid plans start at $15 per month
7. Responsive Design Illustrated
Responsive Design Illustrated is more of a planning tool than testing tool. Consider this beginner option something that you can use to help visualize aspect ratios and how to plan design elements for different device and screen sizes.
You do it all right in the browser, so you can visually explore how to think about the design at different sizes.
Cost: Free
8. Responsive Web Design Testing Tool
The Responsive Web Design Testing Tool is a simple URL-based viewer that lets you compare devices by size or device type.
What’s nice about this tool are the toggle options to see different orientations, lengths or views with just a click. If you want to host this tool for testing in your own environment, that’s an option too. (So, you can test before a site goes live.)
The developer of the tool, Matt Kersley, has made it available on Github.
Cost: Free
9. Designmodo Responsive Test
The Designmodo Responsive Test might be one of the best-looking tools to test your website design. It includes plenty of easy toggles, loads of device options and a clean interface as a viewing environment.
Users can also add custom dimensions and view in different orientations. It’s updated often with new devices so you can test easily.
Cost: Free
10. CrossBrowserTesting
CrossBrowserTesting is a premium tool that offers manual and automated testing. Users can run manual, visual and Selenium tests in the cloud on more than 1,500 real desktop and mobile browsers.
The tool is highly scalable – even for enterprise-level operations. It’s simple to deploy, includes debugging tools, works on a number of browsers, versions, and devices and has a robust test configuration so that you can find problems in the test before they become big issues.
Cost: Plans start at $29 per month
Conclusion
Do you have a favorite tool that’s not on this list? Share it with us. We love to see tools that we didn’t know about.
As with any website design and development tool, it’s a good idea to play with a couple of options before settling on just one thing. Most of these tools can help you figure out if your design is working, but all work in slightly different ways and have different levels of user control. Play around and find the one that’s most comfortable for you.