Skip to content
LOG IN
  • There are no suggestions because the search field is empty.

Make your pages mobile-friendly

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.

UserGuideDocumentCreationFullyEditableMobileLayoutGoodBad-v2

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.

UserGuideDocumentCreationFullyEditableMobileLayoutFonts-GoodBad-v2

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.