Thanks to the rapid rate at which technology advances and the emergence of connectivity trends such as the Internet of Things, web designers face an increasingly tough task. They must now create seamless online experiences that work on standard-size computer screens as well as any other web-enabled device.
But to help out, Google has developed something it calls Resizer, an interactive viewer “to see and test how digital products respond to material design breakpoints across desktop, mobile, and tablet.”
A closer look at 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,” notes Zach Gibson, Senior Designer at Google. “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.”
Until now, designers and developers could reference Google’s Material Design guidance, which provides insight into breakpoints, responsive grids, surface behaviours, and user interface patterns. However, the Resizer tool goes one step further by allowing developers to actually test this guidance. On top of that, Google hopes it will also encourage conversations about responsive UI among the digital design community.
The possibilities with Resizer
“There are so many potential patterns to follow when a screen size changes the position of specific components—revealing, transforming, dividing, reflowing, expanding, etc.,” adds Gibson. “Resizer helps designers and developers visualise which patterns will work best for them.”
Google admits that its Material Design guidance changes all the time, but Resizer is a dynamic visual resource that can showcase responsive UI solutions. All designers and developers need to do is enter a URL into Resizer to see how their sites work across different screen sizes.
In addition to Resizer, there are plenty of other Google resources for designers and developers to explore. These include a library of over 900 system icons and Device Metrics, a guide for sizing, resolution, and more across multiple devices.
Resizer in action
Before entering a URL into Resizer to see how your own site looks on different screen sizes, check out some of the demos that Google has provided, which includes recipe app Pesto and lifestyle store Shrine.
Pesto features a grid list that reflows based on each device’s screen size, while the logo in the app bar changes according to the height of the toolbar. To see how Resizer can help with different devices, click the overflow icon on the top right of a Pesto recipe. On desktop it calls a menu, but on mobile a bottom sheet will appear.
With Shrine, you can see how important it is to actively change navigation patterns rather than just scaling components based on screen size or device. Although Shrine uses a different kind of responsive grid list, the tabs show how one component can transform into another, thus creating a seamless shopping experience.