Mobile layouts

The Readz platform is making a lot of layout choices for you to create a mobile layout. Here is how the logic works and how you can change the mobile design.
How does the logic work?

By default, Readz will scale your content down to fit whatever device your readers are viewing the content on. And also, by default, the order of your content on the desktop is mirrored on all mobile devices. Whenever you change the order of content on desktop (or on mobile), the content on the other variant is re-flowed to reflect the new order of content.
Whenever you change the order of content on desktop (or on mobile), the content on the other variant is re-flowed to reflect the new order of content.
Readz will reflow any element you have on the canvas, whether it is text, images, other media, forms and so on. Here is an example of how a regular text/image layout will be automatically flowed on mobile.
Of course, your content will not always be stacked vertically on desktop. Often, on desktop, you will position content elements next to one another. Let's have a look at how Readz arranges this placement on mobile devices.

Whenever an element is on the left of another element on desktop, it will be arranged on mobile above that other content element.
Let's have a look at a more complex layout.

Here is an example where we see four elements on the desktop, and on the left, how they are arranged on mobile.

So in general, mobile stacking follows a simple rule to determine which element is placed on top:
- left to right
- top to bottom
We have found that this simple rule will correctly arrange your elements on mobile in most of the cases. However, there are instances when your layout might be a bit more complicated. Sometimes, this will cause the mobile design to be structured in a non-logical manner.

Below is an example of just such a situation. As you can see, the text under image A logically should be placed under image A on mobile. However, following the rule, as mentioned earlier, textbox A will be positioned under C. Read below how this can be easily remedied.
In the example below, we see the same case as above, but now the order on mobile is precisely how we want it. The textbox is positioned under image A.

This can be achieved with one single action: grouping. We will create a connection between image A and its textbox by simply grouping it. All elements of a group are positioned together on mobile. As a result, the textbox will be placed under image A.

What happens behind the screens is that within the group we just created, the same simple rule mentioned above (left to right, top to bottom) is applied to reflow your mobile variant. So the image which was on top within the group on desktop will be on top in the mobile view of that group on mobile.

As a rule of thumb, grouping content elements that logically belong together will make your layout on mobile correct.

To learn more about grouping, please read "Grouping & ungrouping elements".
© 2018 Readz All Rights Reserved
Get Demo
Readz Studio
How It Works
Flipbook Publisher
All Features

Terms & Conditions
Privacy Policy