Mobile Considerations

Flattened Columns

Columns layouts are flattened into a single column on phones and small tablets.

Make sure that your design doesn’t only make sense when certain fields are placed next to each other.

Flattened Buttons

When using the iOS or Android mobile app, button layouts are flattened into a single column on phones, with primary buttons appearing above secondary buttons.

Make sure that the button order makes sense in this alternate layout.

Wrapping & Scrolling

While concise labels and instructions are always recommended, it's particularly important to reduce clutter, wrapping, and scrolling on mobile screens.

Certain components, by definition, may be configured to require a lot of screen real estate (e.g. milestones with many steps, grids with many columns). Avoid these situations if you're targeting narrow screens.

Logical Consistency

Avoid design patterns that assume a very specific rendering behavior, like images laid out in a particular way to simulate tabs.

Each mobile platform renders components differently and SAIL only guarantees logical consistency, not an exact replica on every client.

Sites Tabs

Use concise titles for multi-page sites. Keep in mind that there is even less horizontal space on a mobile device.

DO

DON'T

17.2

On This Page

FEEDBACK