Mobile

When you’re designing for small screens, you’ll want your designs to fit the space available. You might create special content to create a tailored experience. But that content might get lost on larger screens.

In such cases, you can use Mobile components to show your content for small screens only where it makes sense.

If you want content only on larger screens, use a Desktop component. To vary content based on screen size, you can also use Hide components.

Component status

Guidelines

Offer similar content to everyone

Users approach their interactions with your content similarly no matter their device. They are looking for information or to accomplish a task. If a user can’t find that information or feature on your mobile site or app, they’ll assume you don’t have it.

Make sure your content is available everywhere. Change its form so it fits best in the space available and fits user expectations for the device. But keep it present.

Don’t hide anything essential

Even with differently sized screens, users still have the same basic needs. Make sure that even if you hide things, users can still accomplish their main tasks.

Use progressive disclosure to keep content available, but initially out of sight. In this way you hide content on specific screens but offer clear alternatives to get to it.

Related components

Desktop

For content only on large screens, use a Desktop component.

Hide

For more control over what appears on different screen sizes, see the Hide component.