AI Content Chat (Beta) logo

Best Practices for a Mobile Version Experience

5 minute read


Familiarize yourself with the principles of mobile-first design, emphasizing clear layouts, large touch targets, and fast loading times. This will help when creating a PDF that showcase your beautiful content!

Design for Mobile Screens

Most mobile devices are held vertically, so design your PDF accordingly. We recommend using smartphone dimensions, such as iphone 13: 2532x1170 pixels.

Click here to view the experience on the example.

 

Create Large Buttons

Buttons and links should be easily tappable with fingers.

  • Maintain Padding: Add padding around button text to create a larger touch target area. This prevents users from accidentally tapping outside the intended button area.
  • Clear Distinction: Use contrasting colors and clear borders to differentiate buttons from surrounding elements. This improves visual identification and avoids accidental clicks.

Click here to view the experience on the example.

 

Use Big Fonts

Large fonts are essential for mobile readability. They improve user experience by reducing eye strain and making content easier to consume on smaller screens.

  • Headings and Subheadings: Use even larger font sizes for headings and subheadings to create visual hierarchy and improve navigation.
  • Line Spacing: Increase line spacing (leading) to improve legibility and prevent text from appearing crowded.

Click here to view the experience on the example.

 

Optimize Images

Reduce file size without compromising quality using image compression tools and resize images to fit the mobile screen without unnecessary scaling. 

💡Tips: 
Use formats like JPEG for photographs and PNG for graphics with transparency. 

Click here to view the experience on the example.

 

Choose the Right View

We recommend using page scroll or pageless scroll view on mobile experiences, since it'll be easier for the user to navigate by scrolling the page. Avoid views such as flipbook, cards and carousel, since they're designed for desktop.

Click here to view the experience on the example.

 

Related Articles:

 

Thank you for joining us in this tutorial! If you have any questions or need help, feel free to email us at [email protected] or book a call here.