Design & Layout
Position panels for impact
- Avoid placing panels across the centre of a double-page spread, as this will split when viewed in single-page mode on a mobile device.
- Ensure panels stack vertically and flow naturally.
- Ensure clickable areas such as buttons and links are large enough to tap.
- Leave plenty of spacing between clickable areas to avoid accidental taps.
- Mobile users scan rather than read, so make key information easy to spot.
- Multi-column layouts don’t work well on smaller screens - a stacked, single-column design ensures content flows naturally on mobile.
- Consider adding a contents page for long documents.
Text
Small screen, big results
- 16px is the minimum readable size for body text on most mobile devices.
- Anything smaller risks users needing to zoom in to read.
- Avoid giant headings on mobile - they can crowd the screen.
Line height and spacing matters!
- Line height should be around 1.4–1.6 times the font size.
- Add plenty of margin between blocks of text so it doesn't feel cramped.
- Keep paragraphs short (2–3 sentences max).
Stick to web-safe, readable fonts
- Choose clean, sans-serif fonts like Arial, Roboto, Open Sans, or Helvetica.
- Avoid decorative or script fonts on mobile - they’re hard to read at small sizes.
Avoid all-caps and long paragraphs
- ALL-CAPS IS HARD TO READ ON SMALL SCREENS.
- Break content into short, scannable chunks with clear headings.
Consider panel position and type
- Use multiple Text or Story panels to separate content visually.
- Always use Text or Story panels for written content, not text saved in an image.
Images
Use images effectively
- Avoid full-page background images or large decorative visuals that don’t add value.
- Text in images won’t scale well, can't be readable by screen readers, and might appear blurry on small screens.
Document Style
Choose mobile-friendly Style settings
- Set ‘Single Page Stretch to Fit’ to ‘Stretch to Width and Height’ for full-page responsiveness.
-
In mobile view settings, select ‘Single Pages’ and choose ‘Scrolling’ as the page animation for a smoother experience.
-
Make sure the clickable area is set to display, so readers can easily see where to tap for interactivity.
Testing
Make testing part of your process
- Test on real devices, such as a mobile phone or tablet.
- Simulators are good, but real devices (especially different screen sizes) will show you true usability.
- Check for readability, spacing, and clickable areas.