image
imgae
20-02-2016 Hermes Designs

Google’s Resizer shows how your site looks on different screen sizes

Earlier today one of our designers, Masood Mohammad shared a news on our official messaging group. It’s about a new tool titled Resizer introduced by Google. It mainly focuses on developers who work with material design to show real time rendering of their websites/apps on different screen sizes.

Although Resizer is primarily meant for Google’s material design language, you can actually test any site with this tool. Just visit http://design.google.com/resizerand paste your website URL into the box found on the upper-mid side of the page. It will render the target site on three virtual device screens- desktop, tablet and mobile. Then you can choose a single device from the upper right corner.

image

There are a few preloaded URLs to show some best practices- Google Design, Material Design, Android, Pesto and Shrine. Just click the address input box in the top middle of the site and these saved URL list will appear.

While testing a site on a certain device environment, say on a desktop, you can change the screen resolution to check in depth. There is a ribbon under the top bar where you will get many resolution options to choose from.

If your site uses a responsive theme (or template), the Resizer tool will show it as if the site was being visited from the respective screens.

But here is a catch. The tool, so far doesn’t take into consideration if you use a different template for a mobile device. For example, many publishers use a completely separate template for mobile devices. A server side plugin at first detects the client device and then the appropriate site layout is sent to the device. If it is a desktop computer, the plugin sends the desktop version to the user. Similarly, if the plugin detects that the user is on a mobile device, it simply sends the mobile design to the browser. But I noticed, the Resizer tool just resizes a site for different screen sizes, rather than going deeper. Probably Google wanted to focus on a single template at a time, rather than on the site’s perspective. However, those who are using a single template for their sites, will definitely benefit from the new tool.