Previously, we talked about responsive web design — what it is, how it works, and why websites that hope to survive in the 21st century (and beyond) should have it. We also covered the best tools to help you build those types of sites, including Adobe Edge Impact and Responsinator. Both of these can be used to check how your site will look no matter what device it's viewed on.
Luckily, they're not the only tools available for that purpose. Aside from them, here are eight more that can save you the trouble of having to use different devices to test for responsiveness:
Am I Responsive?
This tool is quite simple to use: Just enter your site's URL in the space provided, and it will show your site as seen on a desktop, a laptop, a tablet and a mobile phone. Although it's not the most thorough way to check for responsiveness, it's still a quick way to know whether your site displays for your target users the way you want it to.
Mobile Phone Emulator
As the name suggests, this emulates the way your site looks on a mobile device — which comes in handy if you only have a desktop/laptop to check for responsiveness. Mobile Phone Emulator automatically detects your computer's display settings, so you only need to specify your monitor size, the mobile phone model, the preferred browser, the screen orientation and the website to emulate.
Brad Frost's Ish
Here, you can specify the window width in px or em. Ish 2.0 also allows you to manually adjust the width using the resizer, or one of seven available settings: small, medium, large, full, random, disco and hay. You can easily check for breakpoints with this one, since its "random", "disco" and "hay" modes show you how your site responds to even the tiniest changes in browser width. (Note: "Random" shows a random fixed window width, "Disco" expands/contracts the window width live, and "Hay" keeps expanding the window width until you stop/switch to another mode.)
Responsivepx
Unlike Ish 2.0, Responsivepx doesn't have any preset sizes. However, it does make up for it with greater customization of the display's width and height. If your client wants to know how a site will look given a specified window width, you can quickly forward an image to them using the "Share" button.
ResizeMyBrowser
If you want to test how your site looks on, say, a Google Nexus without actually using one, this is a good alternative. All you have to do is click on the resolution that closely matches the one on your device (in Google Nexus' case, either 480 x 800 or 800 x 480), enter the URL in the address bar, and you're done. It's only a rough test, though, so be sure to complement it with other ways to test for responsiveness.
Screenqueri.es
Unlike the others on this list, Screenqueri.es requires you to sign up first. It does, however, make up for this with its comprehensive toolset. Here, you can select the viewport (mobile or tablet), adjust the window width using the resizer, rotate the screen, and test your site's breakpoints further on BreakPointTester.com (linked in a yellow-green box on the rightmost corner of your screen).
Matt Kersley's Responsive Design Testing
By default, Matt Kersley's tool checks for responsiveness based on width, though you can also set it to test based on device size. Afterwards, type your site's URL in the space provided, use the scroll bars in each box to navigate your site like a mobile user would, and scroll horizontally on your browser to compare different breakpoints and viewports.
DesignModo's Responsive Test
This is probably the most thorough tool on this list. It allows you to manually drag the display up to 2,550 px, type the dimensions in the "height" and "width" fields, or choose a viewport from the selection provided. You can even flip the heights and widths around, so you can see how your site looks on a rotated screen.
Bonus Info
Aside from these, there are other ways to check for responsiveness. For example, you can download emulators like the ones for Opera Mobile and Android, or use Google Chrome's DevTools to recreate the mobile browsing experience, and weed out any possible bugs from your responsive design. You can even go about it the old-fashioned way: View your site on the devices your visitors are most likely to use. This is probably the method that'll yield the most accurate results, though it's also the most time-consuming and expensive.
At any rate, keep in mind that no single tool can say — with 100 percent accuracy — whether your site is as responsive as you need it to be. It's better to use a combination of tools and processes, and base your next step in refining your website's responsiveness from there. No matter how you go about your testing, remember that RWD is all about improving user experience, which is one of the many critical factors to any website's success.
Danny K, 9 September, 2015
Some great tools here, thanks for showing them. Liked DesignModo in particular!