In this article, I will list down 3 ways to test responsive websites in Google Chrome. This post is specifically useful to web designers who use Google Chrome browser in developing sites and apps. Why Google Chrome? The answer is simple, Chrome is the most used browser in the world and one of the reason is the developer tools. That’s why many designers and developers love it. And it is my favorite browser too.
Nowadays, almost every developer or web designer must use some sort of responsive web design techniques because every client these days wants a mobile version of their sites. It is very practical to have a website that responds to different screen sizes, platforms, and orientations.
But how would a web designer test his website to all devices? It is not reasonable to acquire those devices just to test your design. It is not only time-consuming, it’s also costly. Well, if you’re a seasoned web designer, you probably had used several premium services to test your websites like the popular browserstack.com. But there are several ways to test the responsiveness of your site for free. The following are my favorite ways to test my site on Google Chrome.
Here are the 3 ways to Test Responsive Websites in Google Chrome.
01. Chrome DevTools’ Device Mode
Device Mode is built-in to Google Chrome. It is designed to help developers and designers to test websites on different resolutions. It has different resolutions available for testing a website but it doesn’t have many options you can choose. Google only included the popular resolutions like the iPhones, iPads, and nexus. However, Device mode allows developers to edit and set your own resolution so that you can test your design to your target device. One feature that I like on Device Mode is the animation on the cursor if you drag and scroll inside the resolution you have selected. It behaves as if you are using the actual device. To access Chrome DevTools’ Device Mode, you have to right-click a page and click ‘inspect element’ and click to the mobile device icon located on the top left corner of DevTools.
02. Window Resizer Plugin
Window Resizer Plugin is a very handy plugin to test your website’s responsiveness. It will adjust your browser according to what resolution you have selected. It may adjust the viewport only or the browser window. What I like about this plugin is that you can switch to different window easily because the plugin has an icon beside the URL bar. You can add your resolution as presets. This plugin has useful features like opening the plugin’s toolbar together with the site you are testing like a popup window so that your other tabs on chrome won’t resize.
03. Responsive Web Design Tester Plugin
Responsive Web Design Tester Plugin is another tool you can use to test your websites. It is similar to Window Resizer plugin in the concept of resizing the Chrome window but also has a different approach to testing a website. Responsive Web Design Tester lets you select a certain device and it will render the website into a popup Chrome window. It also allows you to add a device and its resolution and you can also add a category of devices you want.
These tools can help designers to build websites and apps that bring better user experience to the users. I know there are other tools and plugins that can be used to test a website but these 3 tools are the best I’ve found for chrome and is available for free. Responsive Web Design is truly a must-have skill for web designers today and it’s a good thing there are tools that help increase design productivity.