Description
Spatial markup defines how content adapts to device sizes, orientations, and safe areas.
Applying it delivers consistent layouts across Mobile and Tablet devices by ensuring responsive behavior, predictable spacing, and good readability.
Screen sizes
Design for standard screen sizes in both portrait and landscape.
Start with the most common size — 390 x 844pt should be the minimum supported viewport.
Accounting apps are often used on larger devices (such as tablets), so layouts must scale on bigger screens.
Vertical space
Screen height affects what users see first and how they interact with the page, even when they can scroll. Designing for common device heights helps ensure that you:
- Focus on the areas that get the most attention
- Keep important content (like CTAs) visible
- Avoid false bottoms that reduce scrolling
- Account for space taken by sticky headers and footers
Horizontal space
Horizontal space can be controlled by the user by:
- changing their device orientation
- using slide over or split view
- manually dragging the app window
When screens are scrollable, content and controls can move vertically out of view. However, content and controls must always remain within the horizontal safe area, defined by horizontal margins.
Safe area
Safe area defines the minimum protected screen space where essential interface elements can be placed without risk of obstruction, clipping, or conflict with system UI components.
- Top safe area varies depending on the type of status bar, notch (camera area at the top), or dynamic island.
- Bottom safe area is defined by the home indicator (the little bar at the bottom)
- With scrolling, screens will extend vertically behind the top and bottom safe areas, but content (text, buttons, forms) must always remain within the horizontal margins.
Portrait
Landscape
Regular vs Compact
On iOS, we don’t design based on the device (like iPhone or iPad) or how you hold it (portrait or landscape). Instead, we look at how much space is available on the screen.
Sometimes a big device, like an iPad, can have a small space if you split the screen. So we can’t rely on the device size.
That’s why we use something called Size Classes:
- Regular = more space
- Compact = less space
For example:
- An iPhone in landscape might have compact space → the button stretches full width
- A bigger iPhone in landscape might have regular space → the button has a fixed width
So even if two phones are in landscape, they might look a bit different.
Example of compact and regular size classes
Spacing scale
iOS uses points (pt) for spacing, and each point equals a different number of pixels depending on the screen.
8 px grid
4 px grid
Layout in practice
| Examples of Form spacing | Examples of List spacing |
|---|
Touch targets
Provide sufficient touch targets for interactive elements. Use a minimum tappable area of 44 x 44px for all controls.
