Google introduced the design language called Material Design with Android Lollipop and ever since then, the company has been updating their apps to follow these guidelines. Guidelines which they have also shared with third-party developers to get a more cohesive experience not only in the Android operating system, but also in other platforms like web browsers or even VR headsets. This is quite challenging because the UI is controlled in different ways and there are several factors that affect how a website is rendered, such as internet speeds. Obviously, Material Design has always been about providing a similar experience across many devices disregarding other situations.
That’s why Google is now introducing Resizer, a web-based tool that allows website designers and developers to dynamically test the UI is responsive enough and that it follows the Material Design guidelines across devices, with different screen sizes and different resolutions. Designers and developers can explore different patterns for the elements displayed on the screen, there’s revealing, transforming, dividing, reflowing, expanding, among others. Resizer supports input for URLs, but there are also a few examples of the patterns, so designers can take some inspiration on how to create websites or web apps. The action icons in the top right corner will let them see the interface in a simulated desktop computer or mobile devices and websites are interactive and scrollable on these emulators.
Using the demo called Pesto, it can be seen how the grid list reflow based on the screen size, logos transform according to the height of the toolbar, floating action buttons change their position depending on the platform, and Resizer can show specific sites at specific sizes. Also, it can be noted that overflow icons work differently in desktop and mobile interfaces. The other demo is called Shrine, and it shows how it is sometimes important to make sure elements stay visible at all times and on every kind of screen to create a seamless experience across the variety of devices. It also shows the importance of transforming the functionality of some elements, rather than just scaling them to fit different sized screens.