In web design, responsiveness refers to the ability of a website to adjust to the display size of any given device. Responsive websites look good on phones, tablets, laptops and desktops. In contrast, static websites require scrolling and zooming to be usable on mobile devices. While many templates and themes claim to be responsive, some display better than others, and some won’t project correctly on less common screen sizes.
Even if you have a fully responsive theme, you may need to check your website for responsiveness after adding plugins, modules, or other site elements. Luckily there is an easy way to check your website for responsiveness. Use these various responsive design testers to see how your website displays on just about any device from a small iPhone screen or e-reader, up to a large slate pc or smart TV display.
The Responsinator website is a great tool for checking your site’s layout or template. This online tool is free and easy to use. It replicates four of the most common devices used on the mobile web, including the iPhone 5, iPhone 6, Nexus 4 and the iPad. To check your website with the Responsinator simply enter your site’s URL in the upper left menu of the site.
Scroll down to see your website as it would display on the four popular devices that Responsinator checks for. The makers of this tool recommend using Chrome with OSx 10.7 or higher for the most accurate results, but it also works well with Chrome or FireFox on Windows. One great thing about this tool is that it can check for each device using portrait and landscape modes, so you know how you’re site will look either way your visitors hold their device. If you’ve got responsive ready template and web hosting, then this tool is all you need to see what most of your visitors will see when they visit your site.
Another great tool for checking your website for responsiveness is the Responsive Design Testing Tool from CSS Chopper. This tool shows you how your website will look in 10 different display sizes. It’s easy to use as well, simply enter your sites URL and select your desired screen size to get started.
This tool is very comprehensive, offering 10 screen sizes ranging from 320 x 480 to 1024 x 600. The tool gives a brief description of which devices display at each set of dimensions, but doesn’t list exact device models. For example, the 515 x 295 display size is listed as “Nicer Android Device.” This is a great tool for checking general results on a variety of devices.
Am I Responsive is an excellent choice for testing your site or blog for responsive design. This tool differs from the others in that you can see how your site looks on four popular display sizes at once. This tool is also designed to let you share your results with other users. To do this enter your sites url after the tools URL, for example http://ami.responsivedesign.is/?url=http://google.com. This will let you share results with coworkers, or project supervisors without technical training. To check your site with the the Am I Responsive Tool as you make updates, simply bookmark this extended URL for one-click testing.
Another feature that makes this tool unique is that you can use it to test websites hosted on your local machine. This is great for making sure your website is fully responsive before uploading it to the web. One reason to do this is so that users never see your site with unintended scrolling, and it ensures your site won’t be captured or snapshotted by web caching services in its improper form. To test your local website simply enable your local web server and enter “localhost/” in the URL bar of the Am I Responsive tool.
If your website isn’t showing as you want then it’s time to investigate what’s throwing your responsive design off track. The first place to start is to check with your web hosting and make sure there’s no compatibility issue. If your host allows your chosen CMS and coding, then you need to make sure your layout or template is fully responsive. If everything checks out with your layout, then inspect your navigation bar and plugins for responsiveness. If you’re still having issues then chances are a plugin or widget is the cause.
Using these powerful online tools to check your website for responsiveness will ensure your site displays well on all user devices. You should test your website with these tools anytime you change templates or themes, or even when you add a new element to your sites front end. Most web traffic is mobile now, so it’s becoming increasingly important to make sure your website or blog has responsive design.