Google Resizer

Google new ‪Resizer‬ tool helps ‪designers‬ and ‪developers‬ test any URL

The new Resizer Tool of Google is an interactive viewer.

Google Resizer Tool

What does the Resizer do?

  • It helps designers and developers to see and test any URL.

  • It shows how your site looks on different screen sizes

Using the Resizer Tool you can find how different digital products respond to material design across desktop, mobile, and tablet.

As designers and developers working on UI know that their biggest challenges is to serve the right UI of any application to users on different devices. No matter how they are using the relevant application, the designers and developers are the people responsible to make digital products accessible to everyone. Actually till now there is no simple design solution to fit every needs and standards.

As many of you know Google offers Material Design guidance with amazing tips about UI patterns, surface behavior, responsive grids, colors and etc. And now we have the Resizer, that provide the designers and developers with the key tool to test the material design stick the work activities between designers, developers and owners of the required responsive UI.

Resizer allows to input any custom URL, or preview any websites or local demos, and pushing “action” button you can see how your user interface will look like on different devices (desktop or mobile). To do it just t visit Resizer and paste your website URL into the box on the upper-mid side of the page.

Useful UI Patterns and demos

Google Material Design Guideline provide lots of variations of potential patterns that can be used as a base to follow the right screen size changes and position of specific components of your UI. You can use any of these patterns in Resizer and visualize them to see which one is the best for your work. Some of these patterns can be found in the “demos” included in the Resizer in Angular (Pesto Demo or Shrine Demo) and other demos built with Polymer. You can choose from these available best practices by clicking on the address input box. While testing you can change the screen resolution and can use other many resolution options you can find on the ribbon.
But if you use completely separate template for mobile devices, the Resizer will not be your best friend. Maybe Google wanted to focus on a single template?

Google provides also other free interesting tools and resources on design.google.com/resources. You can find about 900 system icons library free to use, Device Metrics – reach comprehensive resource for multiple devices

Lets start using Resizer and exchange our experience.