May 14, 2021

Introducing Material Design Guidance for Large Screens

Designing and building for more devices

Posted by


Material Design has always been built to be adaptable. With today’s updates, Material Design is expanding its adaptive capabilities to help prepare your apps for all form factors, from phones to tablets, desktops, and beyond. Updated guidance and component behaviors will help your app scale and adapt, while maintaining consistent layouts using components optimized for each device.

As a system capability, layout and component responsiveness are now baked into our Material guidelines. Our layout guidance, along with components and their design documentation, have all been updated to describe a method of creating interfaces that can adapt to changes in screen size and shape.

Keep reading to see exactly what’s new, and check our session from I/O 2021: 5 things you can do to prepare your app for large screens.

New layout guidance defines responsive grid composition and behavior.
link
Copy link Link copied

New layout guidance

Understanding Layout

The Understanding layout article has been updated with new sections on Layout Anatomy and Composition.

  • Layout Anatomy outlines the three primary containers that make up app layouts in Material: body, navigation, and app bars. These containers form a framework for thinking about interfaces that scale across screen types and sizes. This section of the article describes each container and its baseline constraints and behaviors. This section also gives a brief introduction to Material’s responsive layout grid as it relates to the body container.
  • Composition provides guidance on composing information and components within a layout. As an app scales to larger screens, there’s more space available to display content and actions, making careful composition crucial to helping users perceive the additional information. This section of the article provides some techniques for creating a readable information hierarchy so users can understand and use your app faster.
  • A new Resources section points to our Material Design Community page on Figma for the latest downloads, including sample layout grid frames.

Responsive layout grid

The Responsive layout grid article has been updated with a streamlined breakpoint system and new guidance on grid behavior.

  • Breakpoints have been streamlined to cover devices from small to large, from phones to desktop screens and beyond. The updated table also provides guidance on body container sizes, margins, and column counts to provide specific references across device types and sizes.
  • Layout anatomy introduces the concept of layout regions described in depth in the Understanding Layout article, as they pertain to the responsive column grid.

Component behavior

The Component behavior article includes new terminology to keep your layouts bidirectional, as well as a section describing new adaptive behaviors.

  • Positioning Terminology now includes definitions for “leading edge” and “trailing edge,” allowing for discussion of bidirectional layout configurations. For example, the “leading edge,” where the content of the layout begins, is on the left in LTR languages, while in an RTL language it would be on the right.
  • Component width has been replaced by a Component adaptation section, which outlines general scaling, orientation, and swapping behavior for components as your layout scales across devices and screen sizes. This section also includes a handy reference for swappable component types.
  • The overlay behaviors has been moved to the Understanding layout article, as a distinct layout response.
  • The push behavior has been removed, to focus on preserving the context of the body region as a navigation component enters the screen.
Component updates define new scaling and adaptation behaviors for individual Material components.
link
Copy link Link copied

Component updates

Complementing updated layout guidance, components have been updated as well, providing more specific direction on how Material Design Components can be used in experiences that adapt across devices and screen sizes.

Design guidance

Individual component articles have been updated with a scaling & adaptation section under behavior. This section details unique scaling considerations not covered in the Component behavior article, and can answer questions about specific default adaptative behaviors. Components that have been updated include:

Code updates

Navigation rail

The navigation rail is currently available on the following platforms:

For more component updates, check out What’s New in Foldables, Tablets, and Large Screens at I/O.

link
Copy link Link copied

Resources

The Material Baseline Design Kit for Figma has also been updated, adding a series of sample layout grids as components.

To see layout grids that account for newly revised breakpoint, margin, and column behaviors, grab a template for your desired screen size from the Assets panel and toggle Show Layout Grids from the View menu in Figma. The Layout regions property can be toggled in the Design panel to reveal navigation regions and app bars.

Additionally, a bug affecting color mapping on the Material Theme page has been resolved, and we have more updates planned to make full use of Figma's capabilities.

Grab the Design Kit from the Material Design Figma Community Page.

link
Copy link Link copied

How to get started

Ready to become a pro at adapting to large screens and prepare your app to run on all types of devices? Check out our talk, 5 things you can do to prepare your app for large screens, and the accompanying blog post from Google I/O 2021.

In the meantime, check out the resources linked below and reach out to us with questions any time with #AskMaterial @MaterialDesign on Twitter.