Modern websites are now responsive websites. We couldn’t imagine a newly launched one without it having a responsive version and adapting to different devices and sizes. Today we are presenting to you a couple of free tools that you can use to check the responsiveness of your website. Actually, we 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.
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.
The label above each screen tells you the exact size and which device it matches to. Plus from the dropdown menu there’s a wide selection of smartphones, tablets, and laptops for testing specific devices.
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.
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.
Devices include the most common iPhones and the Android Nexus devices, both with portrait and landscape previews. You’ll also find iPad device previews also in portrait and landscape.
Another cool feature is the switch between HTTP and HTTPS. Responsinator offers both types for previewing sites depending on the URL you enter. It’ll automatically match whatever site you’re previewing to avoid SSL errors.
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.
In the sidebar you’ll find a ton of predefined screen sizes for common devices like Nexus tablets, Kindles, and even newer phones like the Google Pixel.
The site also supports large screen sizes with desktop monitors up to 24″ wide. Surprisingly these large sizes work well even on small monitors because the preview pane resizes based on ratio, not total pixel width.
So if you’re struggling to test 1920px monitors on your smaller MacBook screen this tool is well worth bookmarking.
Google is full of great tools for webmasters and their Mobile-Friendly Test is one such example.
This testing tool isn’t really a previewer and it doesn’t help you spot UI bugs. Instead it’s a dedicated mobile tool for pinpointing issues within your site on mobile.
Once the test runs you’ll 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.
Keep this saved as a trustworthy mobile testing tool. It’s not a complete resource for responsive testing but it’s a great place to gather info and it comes from perhaps the most authoritative company on the web.
You probably won’t need this tool if you’re looking for pixel-perfect accuracy.
Instead the Am I Responsive? website works best for quick checks and previews on a few common device types.
You simply enter a website URL and it’ll load into four device preview panes: a smartphone, tablet, laptop and desktop. These are not to scale so you’re only looking at the site as a ratio.
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.
There are several website and tools available today, even with some excellent Google Chrome Addons that you should check out, but the above can surely help if you are developing responsive websites or you simply want to check how your developers are working. Use the comment area if you feel we need to add more information here or you feel we missed a great product.