5 Great Responsive Design Testing Tools
Consumer-grade computer devices come in many shapes and sizes nowadays. What they all have in common is the ability to access the internet, allowing consumers to browse the web whether they have desktop PC, a tablet, or a smart-watch. Add to that a variety of web browsing software, each with their own suite of add-ons, plug-ins, and extensions, and you get a digital ecosystem where everyone gets to surf the web in way they find most comfortable.
On the other side of the equation, things couldn't be more different. Web developers and designers now have to create websites that render equally well across the myriad of devices in use today. Methods of input, screen sizes, and bandwidth limitations, are only some of the factors?that make the professional lives of modern website creators more difficult than they used to be.
To address the issue of designing for an increasing variety of browsing configurations, a set of standards about what constitutes responsive web design were developed. These provide guidelines on how to adapt websites for optimal browsing on different devices and software. There are now various software packages on the market that allow you to test whether your website conforms to these principles. Here is a list of 5 of them that caught our attention recently.
Responsinator
Responsinator's main selling point is its ease-of-use. Simply type in a web-page URL, and Responsinator will give you a preview of how the page renders on a variety of common screen shapes and sizes. The page previews are fully functional as well, allowing you conduct rudimentary tests by clicking on links, filling out search fields, etc. Responsinator also has a handy feature in the form of a button for toggling between HTTPS and HTTP modes of previewing a site. This will give you an additional perspective for analyzing web pages. Responsinator is available for free online, and is used through a browser interface.
Google Resizer, DevTools Device Mode, and Mobile-Friendly Test
Google offers a variety of tools for helping web developers and designers create websites that display perfectly on a range of popular devices, with a focus on mobile browsing. Google Resizer offers the ability to test a web-page across multiple screen sizes. Google DevTools Device Mode provides software simulations of various common devices, thus providing an opportunity to see how a given website works in practice. Google Mobile-Friendly Test is not a design tool per se, but it nonetheless presents a handy tool for?analyzing whether a web site is mobile friendly. All of Google's tools are available for free online.
XRespond
The XRespond app markets itself as a “virtual device lab”. The app offers the standard preview features for this kind of software, giving users the ability to see how a website looks on a variety of devices. The app interface is based around scrolling sideways to see how a site displays on a variety of screens, side by side. At the top of the screen is a toolbar that displays relevant information, such as the exact screen size, pixel density, etc. Supported devices include popular smartphones, tablets, and laptops. There is the option to manually specify screen sizes as well, for conducting tests for specific devices. XRespond is available for free online as a browser app.
Ghostlab
Ghostlab is something of an industry standard when it comes to testing for responsive design. It offers the ability to test a site for multiple devices at the same time, side by side, giving you a clear overview on how well it renders on a variety of configurations. Actions in one browser sub-window, such as following links, clicking on buttons, or filling out forms, will get replicated on all others, giving you an unparalleled productivity boost. Sydney based web design agency?recommend Ghostlab as the definitive tool to use when creating responsive websites. Ghostlab is a paid app, with a 7-day trial being offered as well. It is a mid-point between free online apps, and expensive corporate solutions.
Am I Responsive?
If you need a quick and dirty way to check how responsive your website is, look no further than the Am I Responsive? browser app. It is not intended for serious design analysis, but it works really well for what it is intended for. You can choose between a generic desktop, laptop, tablet and smartphone display, which are good enough for giving you a rough estimate on a website runs on such devices. It has a handy screenshot feature that puts the various display modes all into the same frame, which is great for creating promotional screenshots. You are not limited to testing remote websites either ? just type in a localhost address into the search field, and get a preview of how a website in progress from your hard drive is panning out.
