Designing in Experios results in responsive publications, meaning that they will adapt to whatever viewport (or screen) size they are being viewed in. While this happens automatically, and should suit the needs of most users, you may find that you need more granular control of how elements are presented on smaller screens.
There are several ways in which this can be achieved:
Font Sizes
If, when previewing your publication, you find that you would prefer for a particular piece of text to be larger/smaller than it displays by default, you can use the Mobile Font Size Coefficient property to make the adjustment. To do so, select the text element, and open the Properties panel on the right hand side of the screen. In the Settings section of the Properties panel, you’ll find the Mobile Font Size Coefficient property. Your font size will be multiplied by the value of this property when displayed on mobile devices, while leaving it unchanged on larger screens. So, for example, entering 0.5 will half the font size, and entering 1.5 will increase it by 50%.
Using Percentage Values for Dimensions
Experios allows you to define dimensions in either absolute or relative units. Pixels are an absolute unit – a dimension defined in pixels will appear as that number of pixels, regardless of viewport size. Dimensions that are defined as percentages, however, will resize based on the size of their parent element. This means that, by using percentage values, elements can be forced to scale continuously dependent on viewport size.
Hiding/Showing Elements Depending on Context
If the above methods don’t provide you with as much control as you need, it is possible to create a second element, and display one or other depending on context. For example, you might want to display one video to mobile device users, and a different one to users of laptop/desktop computers.
To do so, create the element intended for desktop display, and use the Properties panel to set it up for desktop display. Finally, select the ‘Hide on mobile’ option in the Settings section of the Properties panel. You can now duplicate the element using the Duplicate icon on the element label. With this second element selected, deselect ‘Hide on mobile’ and select ‘Hide on desktop’, before making the changes required for mobile users. Once published, only one of your two elements will display at a time, depending on how your publication is being viewed.