Google Resizer: Responsive Web Design Mobile Testing Tool

2 Minute Read

Google is helping mobile web designers and web developers create better UI with an interactive viewer that tests how digital products respond to material design breakpoints on desktop, mobile and tablet devices.

How Do I Use Google Resizer?

The basic process of Resizer is as follows:

  • Input Custom URL
  • Preview Website
  • Select Desired Breakpoints
  • Test UI Patterns

There are currently two demo’s that users can explore from Google including the Pesto Demo, and the Shrine Demo. Each demo demonstrates different responsive UI patterns and can be adjusted with different actions from Resizer. You can see how the UI transform from a large window to a small window or mobile device.

Additional Material Design Tools For Web Design

Google also has a large library of over 900 Material System icons for web designers and developers to use. You can find even more tools to help with web design for desktop and mobile on the Google Design Resources website. The entire library of tools was created by Google with the goal of making Material Design easier for content creators everywhere.

 

google-icons-black-on-yellow-2-rowsAlthough other tools that perform similar functions were already available before Resizer it’s great to get something right from the source. Developing a set standard for these types of design, UI and UX rules will help web users more easily access the content they are looking for. Whether you decide to use Resizer in your work flow or not we recommend giving it a try and keeping an eye out for future updates that could help you down the road. Material design is here to stay at least for a while. It’s up to all of us to make these experiences as simple and intuitive as possible for the user and Resizer can help!

Try Resizer for yourself, or learn more about Resizer from Google

story written by Sam Jeanes