Responsive UI with AngularJS Material 1.x

Michael Prentice
Jun 28, 2016

Feb 3, 2020

When I presented this material in 2015, the Google Design team was calling it Adaptive UI. It has since been renamed in the Material Design Specification to Responsive UI. Note that, while the phrase uses the word "responsive", this is different from the Responsive Design from the recent past.

Google defines Responsive UI as:

Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.

Similar to Responsive Design, the system uses breakpoints which match up with the screen width of various devices.

Responsive Breakpoints Visualized

The Material Design site has some great examples of the UI grid. They include animated images to demonstrate how the grid reacts to changes in screen width.

For me, the most interesting and powerful part of Responsive UI with Material Design are the UI Patterns. They demonstrate how to apply the breakpoints, grid, and surface behaviors to real-world UI design challenges.

These patterns include

  • Reveal
  • Transform
  • Reflow
  • Expand
  • Position

I've taken some time to update my slides from November to fix some of the broken links and add links to previously unavailable tools. One of these tools, the exciting "Resizer", was previewed at the Polymer Summit in 2015.

Video here:

Since then it has finally been made available for use. Please do check it out!

For more in depth details, discussion, and links, please check out the slides from this presentation.

Michael Prentice
Jun 28, 2016

Feb 3, 2020