Introducing Resizer
An interactive viewer to see and test how digital products respond to Material Design breakpoints
What is Resizer?
As designers and developers of digital products, one of our greatest challenges is figuring out how to serve the right UI to our users at the right time. No matter how they’re using an application, be it a phone or through VR, manipulating it with gesture or a mouse, on the latest and greatest tech or a hand-me-down 2G, it is our responsibility to make our products accessible to everyone—and that’s a pretty tall order. There’s no simple design solution to fit every need.
We’ve started to offer Material Design guidance around breakpoints, responsive grids, surface behaviors, and user interface patterns. Now with Resizer, we have a dynamic way to test out that guidance and help spur meaningful conversations between designers, developers, and stakeholders about responsive UI.
With Resizer you can input a custom URL, or preview selected websites and demos. Using the action icons, you can view a site across Material Design breakpoints for desktop and mobile.
Exploring UI patterns
There are so many potential patterns to follow when a screen size changes the position of specific components—revealing, transforming, dividing, reflowing, expanding, etc. Resizer helps designers and developers visualize which patterns will work best for them. To showcase some of these patterns, we designed a few demos that can be found in the Resizer menu.
Shrine demo
Shrine emphasizes the importance of actually changing navigation patterns as opposed to simply scaling components based on screen size or device. Shrine uses a different type of responsive grid list to create a seamless shopping experience. The tabs demonstrate how one component can transform into another. Using Resizer, take a look at how they transform from window large to window small, and tablet to mobile.
Shrine: A shopping app geared toward the young, DIY-maker and -shopper interested in independent, small-batch retail. Demonstrating material responsive UI patterns.
What’s next
Developing sound guidelines around responsive UI is an ongoing process, one that we are consistently trying to address in our Material Design guidance. Resizer is a dynamic visual resource for showcasing these solutions, so, paste your URLs in there, and see how your products work across screen sizes.
Also take a look at our other interactive resources available through design.google.com/resources. Visit our library of over 900 system icons and learn more about our icon font. Check out Device Metrics, a comprehensive resource for sizing, resolution, and more across multiple devices. And find the right component by browsing through the frameworks linked from the resources page. All of these resources were created with the aim of making it a little easier to make things with Material.
Note: The Pesto and Shrine demos included in the Resizer menu were built in Angular, check out the same demos built with Polymer here.