It is always a smart decision to test the design of your site on a variety of devices. In order to deliver a consistent user experience design you need to focus on UAT testing the same actions across a range of mobile devices and browsers.
To have a real understanding how your user will experience your site, you have to test, touch & feel it on all kinds of devices and browsers. Is it above the fold? Is there enough white space on mobile screen resolutions? Are the fonts too small? This is why our visual frontend testing tool – DebugMe is recording the screen size, the viewport and the browser info every time you send in a ticket.
However, you can’t have all the devices and browsers.. Making sure your responsive design works across different browsers and different viewport sizes can be daunting. Fortunately, there are some great web design tools available to help alleviate the pain of responsive design testing. Let’s check them out.
Note: Article has been updated in September 2017 as many of the earlier tools are discontinued.
With smart search and quick review features, this website testing tool brings altogether an ideal solution to test a responsive site on varied number of devices. This web design tool supports all major browsers to provide the exact preview of the website on any specific device. Available free of cost at online stores, the software requires entering the URL of a web page to quickly assess the responsiveness. By providing accurate results in a matter of few seconds, the tool saves a lot of time. User friendliness and browser-compatibility are another added features which make it better than the other tools available.
This project started as many others – based on personal pain. Justin had to take a lot of screen shots of the various device breakpoints for his responsive design projects. He wanted to save time, this is how he created ‘Am I responsive?’ It can be helpful for showing your more visual clients what you mean by responsive design
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. It only supports viewport sizes for Apple devices.
Screenfly is another fantastic multi-device compatibility testing tool which allows previewing web pages as they appear on different devices. The most popular ones include tablet and other smartphone devices like Galaxy Tab, Apple iPad, Motorola Xoom. Additionally, it supports different screen sizes and resolutions. The site automatically detects if the URL entered has a mobile site and redirects you to it. To switch between screen resolutions, all you need to do is click on the icon of the device type or choose the device which has closest in screen resolution.
No more back and forth emails. Track bugs visually – Try the Tool
This tool is pretty similar to Screensize, you can pick from various devices/viewports within the 3 main categories – desktop, tablet, phone. Unlike some other tools, this is being updated – it supports the latest iPhone sizes as well.
In a bunch of different display resolutions, Viewport Resizer comes as a browser bookmarklet which can be used with any modern web browser. It lets you create custom sizes that show a website in a default screen size. A user-friendly browser tool, ViewPort Resizer is completely configurable. You can easily select an initial range of screen resolution sizes and build your own custom bookmarklet.
ViewPort Resizer is free.
Responsinator help site owners get an idea of how their site will work on the most popular devices. Just type in the website URL and you will quickly see how your site looks on screens of various sizes.
Responsinator has a free version, but you can also get a subdomain for yourself and use it with your clients for just 6 USD a month.
This might interest you too: 16 Web Design Podcasts to Listen to
Froont is a web design tool and it makes responsive web design testing accessible to all kinds of designers without requiring any coding skills. Designs can be created in the browser with this intuitive drag and drop tool. By testing each URL specifically, it tests the designs on real devices right away.
The goal of every website is to create the best experience possible for its visitors so that they can find exactly what they are looking for. To reduce the stress of losing consumers, you should adopt an approach to mobile web design that ensures your site will scale perfectly to your visitors’ screen. With the help of responsive web design tools given above, creating a responsive website for Android, iPhones, iPads and Tablets is no longer a challenge. Using these web design tools and doing user acceptance testing by each redesign, you can easily make your website available to everyone.
Bryan Lazaris is a web designer and developer at HireWebDeveloper. He has been into this business for years and has been sharing the current ideas that help business owners enhance their web presence globally.
The makers of DebugMe hope that you like this post and would love it if you follow us on Twitter. We are tweeting about web design, UI/UX and development related topics multiple times a day. DebugMe is an issue tracking, project management and screenshot tool for every website project. Get visual feedback right away and solve front-end problems faster. Try it now for free.