Optimize your brand standards for viewers on tablet and mobile devices.

In this guide:

Overview

Mobile optimization is the process of altering settings to enhance a site for viewers on smaller-than-desktop screens. Often optimizations are required for mobile devices, and are encouraged for tablets. All Standards projects start with a desktop breakpoint by default. Tablet and mobile breakpoints can be added which will display optimized settings at those sizes.

Fundamentals

All visual assets and written content match between breakpoints by default
Settings can differ between breakpoints, such as text size and media aspect ratio
Columns wrap within layouts, for instance content in a layout on desktop with columns displaying horizontally can display vertically at the other breakpoints

Breakpoints

Desktop

Default breakpoint, optimized for larger monitors and laptops over 1020 pixels wide.

Tablet

Optimized for screen widths 1020px to 600px.

Mobile

Optimized for screen widths 600px and under.

<aside> 💡

Tip: Breakpoints can be deactivated/activated from the breakpoint dropdown in the editor top bar

</aside>

Adding a breakpoint

There are two primary ways to add breakpoints to your Standards projects.

Top bar

Within the project editor, select the breakpoint dropdown from the top bar
From the dropdown, select the + button beside the new breakpoint you would like to add
Once added, toggle between the breakpoints by selecting them from the top bar, or with the R keyboard hotkey

Setup

When starting a new project, select the breakpoints you would like to include from setup
They will automatically be added to your project

Editing a breakpoint

Editing individual breakpoints is as simple as selecting the breakpoint from the breakpoint dropdown in the top bar or by pressing the R keyboard hotkey. Then select elements to modify and edit their settings.

Most settings in tablet and mobile breakpoints can be modified to differ from desktop. Settings that differ will display a blue dot beside them for easy recognition. These can be reset by selecting the blue rotating arrows icon that appears beside the settings group title.

Most common optimizations

Related guides