Google web designer

Google tools for Web developers

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.

Pesto Demo

Pesto is a recipe app demonstrating a few responsive patterns. It uses a grid list that reflows based on screen size. The logo in the app bar transforms based on the height of the toolbar. The FAB changes position based on whether you’re viewing the app on desktop or mobile—see what I did there? Another feature of Resizer is that you can link to a specific site being viewed at a specific size.

When looking at the details of a recipe, try clicking the overflow icon on the top right. On mobile, this calls a bottom sheet, while the same action on desktop calls a 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 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.

Source: design.google.com
RELATED VIDEO
Google Developers
Google Developers
Google GPals Day for Developers - Google Web Toolkit
Google GPals Day for Developers - Google Web Toolkit
Google Web Developer Tools
Google Web Developer Tools
RELATED FACTS
Share this Post

Related posts

Choosing BI Solution: Tibco Spotfire or Tableau?

Choosing BI Solution: Tibco Spotfire or Tableau?

JUNE 29, 2017

Recently Business Intelligence (BI) is gaining increasing importance among successful companies. Business Intelligence allows…

Read More
Best Chrome Extensions for Web Developers

Best Chrome Extensions for Web Developers

JUNE 29, 2017

I love Google Chrome. Its simplicity, speed and performance are top notch, undoubtedly. But sometimes, being too simple is…

Read More