Adapting the publication format to Mobile devices

 

Available_in Bronze Silver Gold ENT

 



The biggest difference between viewing publications on a laptop or desktop and viewing the same content on a mobile device is, of course, the size of the screen. For the past couple of years, we have seen an upward trend in online shopping on mobile devices. In 2020, mobile web traffic accounted for 70% of all online sales, with 30% coming from desktops (read more).

This article will help you adapt your publications to this trend and change the way your pages are displayed on mobile displays. 

In this article:

 

How publications are displayed on mobile

There are two different types of layouts you can select for your online publications: Single-page and booklet. By default, the publication will use the selected layout on both desktop and mobile devices.

For single-page publications, each page is displayed individually. Booklet publications will first show a cover page on mobile where all consecutive pages are 'spreads,' finishing with a separate back page. On mobile, a swiping gesture is used to navigate from one page to the other or from the cover page to the first spread.

Because the spreads in booklet publications consist of two pages, the reader will automatically snap to one side of the spread in case the mobile device is in the portrait orientation. With a pinching gesture, you can zoom out to see the entire spread. This can also be achieved by rotating the device to its landscape orientation.

Having pages fit the mobile screen

By default, the reader will make the content of a single page fit onto the mobile screen. If this is not the case for your publications (e.g., the setting has been changed in the past), we recommend selecting the Fit content option in the Display & Formatting tab of the Publication Reader menu. 

Locating the Page layout setting:

d

The alternative 'Fill content' option will always fill the screen from top to bottom, which case results in pages being partially visible. Even though the user can drag the page or zoom out to see the rest of the page, it is not a recommended option.

Showing single pages on mobile for booklet publications


CleanShot 2023-12-18 at 08.52.52

A booklet publication closely resembles a traditional
book that you read from left to right or vice versa. For
the best experience, you, therefore, need a wide screen
that allows you to view the entire spread as soon as it
comes on screen. Although mobile devices can rotate
sideways, most users prefer the upright position as
most mobile activities happen during the orientation, and it
allows for single-handed operation. 

In the portrait orientation, two kinds of swiping
interactions are used by the reader. One that will take
you to the next spread and another to slide between
the two sides of a spread. The latter is necessary
in case you have content that covers the entire spread.

If both sides of a spread can also be used individually, we recommend activating the single-page layout, which only uses one type of navigation effect, making the mobile experience more consistent.  Look at the two examples below and compare the user experience. 

If you look closely at the examples below, you'll notice that in the left example, some pages snap into place in an instant (i.e., navigating to the next spread) whereas the other pages slowly settle into place (i.e., navigating to the second page of a spread). In the single-page experience on the right, all pages snap into place immediately, creating a more consistent user experience.


CleanShot 2023-12-18 at 10.59.15

You can update the mobile experience in the Display & Formatting tab of the group's Publication Reader menu or the publication's Settings menu. On desktop, the publication will still be displayed using the booklet layout.

Enabling single pages on mobile for booklet publications:
e

Enabling vertical scroll on mobile

EARLY ACCESS: If you're interested in using this feature and you're on the Enterprise plan,
feel free to reach out to your success manager, who will activate this for you.

In this digital age, we spend a good portion of our time scrolling through online content. The majority of the media, like news sites and social media, use vertical scrolling to present its content. In Publitas, you can enable mobile vertical scrolling for online publication as well.

                                                    Using Vertical Scroll on mobilef
       


You can enable the setting on group-level in the Display & Formatting tab of the Publication Reader menu, which will enable it for all publications within that group. You can also apply the setting per publication, which can be done through the publication's Settings menu under the Display & Formatting tab. 

CleanShot 2023-12-18 at 11.07.32
NOTE: To enable this for booklet publications, you will first need to enable the single-page layout on mobile, which will split up the spreads into two separate pages.