{"id":1008,"date":"2017-10-24T01:50:41","date_gmt":"2017-10-24T01:50:41","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=1008"},"modified":"2018-12-04T05:44:39","modified_gmt":"2018-12-04T05:44:39","slug":"7-free-tools-for-testing-responsive-layouts","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/tools\/7-free-tools-for-testing-responsive-layouts\/","title":{"rendered":"7 Free Tools For Testing Responsive Layouts"},"content":{"rendered":"\n

Every website should be designed with a responsive approach. To keep you on the right track, testing early and often, with any of these responsive testing tools, will ensure that your design looks right on all browsers, and at all viewport sizes.<\/p>\n\n\n\n

Every modern website needs a responsive design. This does require more effort but the end result is worthwhile.<\/p>\n\n\n\n

I actually recommend testing your ideas with responsive design tools to see how your site looks at each stage. You can look for usability issues on different screen sizes all from one handy tool.<\/p>\n\n\n\n

And these free tools are my top picks for responsive testing since they\u2019re all super easy to use. Best of all these support many device sizes so you can get a good feeling for how your layout should look from smartphones to desktops.<\/p>\n\n\n\n

1. XRespond<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The XRespond app<\/a> calls itself a \u201cvirtual device lab\u201d and I\u2019d say that\u2019s pretty spot on.<\/p>\n\n\n\n

With this site you can preview how any website looks on a variety of devices. The site works in a long horizontal style where you have to scroll sideways to see all the screen formats.<\/p>\n\n\n\n

The label above each screen tells you the exact size and which device it matches to. Plus from the dropdown menu there\u2019s a wide selection of smartphones, tablets, and laptops for testing specific devices.<\/p>\n\n\n\n

That dropdown even supports a custom width\/height setting if you want to see how your site appears on specific monitors. An excellent testing tool for responsive design and it supports a lot of variety in device styles.<\/p>\n\n\n\n

2. Responsinator<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

One similar app you also might enjoy is Responsinator<\/a>.<\/p>\n\n\n\n

Instead of using a horizontal scrollbar this site lists each device preview in a vertical column. This way you can scroll down through each device and preview the site on each one.<\/p>\n\n\n\n

Devices include the most common iPhones and the Android Nexus devices, both with portrait and landscape previews. You\u2019ll also find iPad device previews also in portrait and landscape.<\/p>\n\n\n\n

Another cool feature is the switch between HTTP and HTTPS. Responsinator offers both types for previewing sites depending on the URL you enter. It\u2019ll automatically match whatever site you\u2019re previewing to avoid SSL errors.<\/p>\n\n\n\n

3. Responsive Design Checker<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Need to quickly check if a website really is responsive? Then try using this Responsive Design Checker<\/a> made specifically for custom screen sizes.<\/p>\n\n\n\n

Once you enter a URL you have full control over the responsive testing space. You can alter the width\/height however you want and even use it to match certain screen ratios if you use an aspect ratio tool<\/a>.<\/p>\n\n\n\n

In the sidebar you\u2019ll find a ton of predefined screen sizes for common devices like Nexus tablets, Kindles, and even newer phones like the Google Pixel.<\/p>\n\n\n\n

The site also supports large screen sizes with desktop monitors up to 24\u2033 wide<\/strong>. Surprisingly these large sizes work well even on small monitors because the preview pane resizes based on ratio, not total pixel width.<\/p>\n\n\n\n

So if you\u2019re struggling to test 1920px monitors on your smaller MacBook screen this tool is well worth bookmarking.<\/p>\n\n\n\n

4. Google Mobile Test<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Google is full of great tools for webmasters and their Mobile-Friendly Test<\/a> is one such example.<\/p>\n\n\n\n

This testing tool isn\u2019t really a previewer and it doesn\u2019t help you spot UI bugs. Instead it\u2019s a dedicated mobile tool for pinpointing issues within your site on mobile.<\/p>\n\n\n\n

Once the test runs you\u2019ll either pass or fail as a mobile-friendly site. This is a little too generic for designers but Google offers tips based on problem areas & page elements that could use improvement.<\/p>\n\n\n\n

Keep this saved as a trustworthy mobile testing tool. It\u2019s not a complete resource for responsive testing but it\u2019s a great place to gather info and it comes from perhaps the most authoritative company on the web.<\/p>\n\n\n\n

5. Matt Kersley\u2019s Responsive Tool<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Designer & developer Matt Kersley<\/a> released his own free testing tool<\/a> for responsive layouts. This one\u2019s a lot simpler than others and doesn\u2019t have many frills.<\/p>\n\n\n\n

Instead it\u2019s a plain inline site previewer with 5 fixed widths: 240px, 320px, 480px, 768px, 1024px.<\/p>\n\n\n\n

The preview panes do feature scrollbars so you can move through content effortlessly. However you can\u2019t click any links or browse through other pages within the panes, so this is really best for testing singular pages.<\/p>\n\n\n\n

But for a simple tool that gets the job done this works great and it\u2019s one of the few testing tools that offers a 240px width by default.<\/p>\n\n\n\n

6. Am I Responsive?<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

You probably won\u2019t need this tool if you\u2019re looking for pixel-perfect accuracy.<\/p>\n\n\n\n

Instead the Am I Responsive?<\/a> website works best for quick checks and previews on a few common device types.<\/p>\n\n\n\n

You simply enter a website URL and it\u2019ll load into four device preview panes: a smartphone, tablet, laptop and desktop. These are not<\/strong> to scale so you\u2019re only looking at the site as a ratio.<\/p>\n\n\n\n

But this is really cool for grabbing screenshots of your site to showcase how it looks in various devices. The rendering is accurate to scale and it relies on your browser for proper rendering.<\/p>\n\n\n\n

Plus this tool lets you run localhost addresses so you can even check projects you\u2019re building locally on your computer.<\/p>\n\n\n\n

7. Designmodo Responsive Test<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

One other tool I really like is the Responsive Web Design Tester<\/a> created by Designmodo. This free tool again lets you preview a site in your browser based on certain widths.<\/p>\n\n\n\n

But the one cool addition to this tool is the grid-based page setup. You can check your page for pixel points and even study the page\u2019s grid using this web app.<\/p>\n\n\n\n

Alongside the predefined device widths you can also drag the preview pane to fit whatever screen widths you\u2019re testing. It has inputs for the width\/height if you need to enter sizes manually too.<\/p>\n\n\n\n

But each device icon in the top-right corner lets you select from dozens of common screen sizes making this tool perfect for checking any device you can imagine.<\/p>\n","protected":false},"excerpt":{"rendered":"

Every website should be designed with a responsive approach. To keep you on the right track, testing early and often, with any of these responsive testing tools, will ensure that your design looks right on all browsers, and at all viewport sizes. Every modern website needs a responsive design. This does require more effort but the […]<\/p>\n","protected":false},"author":2,"featured_media":1009,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[95],"tags":[57,48,16],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2018\/02\/featured_rwd.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-gg","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1008"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=1008"}],"version-history":[{"count":3,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1008\/revisions"}],"predecessor-version":[{"id":1615,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1008\/revisions\/1615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/1009"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=1008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=1008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=1008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}