In today’s world, all modern and professional online publications should be responsive to properly support all devices, especially given how important is responsibility for ranking in Google. In this article, we’ll explain what responsiveness is for your Foleon publications and how you can use the view modes to fine-tune them for different screen sizes.
In this article
- Responsiveness explained
- Most used screen sizes
- Different views (landscape vs portrait)
- Photos and videos
- Fullscreen Background Video
- Margins and paddings
- Different views in the editor
- Fine-tune margins and paddings
- Fine-tune font settings
- Fine-tune background images
One of Foleons’ most praised qualities is the fact that all the content you create is responsive out-of-the-box. This means that it automatically adapts on the screen resolution of a particular device. Whether on tiny mobile screens or large desktop devices, it displays your content in a well-organized way. Foleon has registered over 15,000(!) different screen sizes that were used to view publications, which again highlights the importance of responsiveness.
Most used screen sizes
The most used screen sizes can be branched into desktop view, mobile view and tablet view. Almost 50% of the total visitors have viewed publications on a desktop device, 36% on mobile devices, and the remaining percentage on tablet devices. Please be aware that the number of mobile and desktop visitors grow the strongest.
Different views (landscape vs portrait)
Just as printed publications, digital publications have two different views: landscape (horizontal) and portrait (vertical). Desktop is always a landscape, while mobile phones and tablets can switch between portrait and landscape viewing. When using background photos and videos, they will always show differently in those views.
More info about the different views can be found in the article: Using view modes.
Important note: this only applies to background imagery and doesn’t apply to image and video elements, as they scale with the publication.
Photos and videos
In the schedule below you can see how imagery will act in different views. On a portrait device the landscape image will be cut off, and on a landscape device the portrait image will be cut off:
Please make sure that you’ll crop two versions of each background image: a landscape and a portrait one. If you have a photographer who you can give instructions, you can even ask her/him to shoot both versions.
Pro tip: Use visibility to set imagery for both views. More on that in the fourth chapter of this article.
Fullscreen Background Video
Two kind of videos can be added to your publication:
- A video element, which will start when you click on the play button
- A fullscreen background video, which will play automatically when you open a page
Fullscreen background videos don’t work on mobile phones (because the providers have blocked it) and on Tablets (a tablet doesn’t support Adobe Flash which is needed for the autoplay). To bypass this, a fallback image can be set. This mostly consists of a representable screenshot. More on setting a fallback image can be found in the article Using Background Videos.
Pro tip: When you have a full background video and still want to show the video on mobile phones and tablets, you can create an overlay with the video. In that overlay you’ll have to put the same video as an element. The button to that overlay for instance can be named ‘Watch the video’ and can be hidden on the desktop view using the visibility option. More on the visibility option in the next chapter of this article.
Point out the focus of a background image (videos don’t have this option) by using this. You can reach this option in Desktop view:
block settings > Background > Background focus
column settings > Background > Background focus
Note: this will affect all devices. Even when you change your image for tablet and/or mobile, it will be locked on the side you choose.
When creating a publication it’s best to take responsiveness into account as this will save you time when fine-tuning for mobile and tablet views.
A new publication starts with the desktop view. You can use the column alignment to position your text and images (horizontally and vertically). The elements in that column will then stay in this position, no matter the screen size.
Margins and paddings
After setting the alignment, the position of the elements in that column can be fine-tuned by using margins and paddings.
Note: Use margins and paddings to fine-tune. Margins and paddings are fixed, so on smaller devices the elements will show differently. It’s best to create another column to push an element to (for instance) the left. On a portrait device the empty column will be placed below the first one and you can then hide it. More information on hiding columns can be found in the subchapter Visibility:
On portrait devices like iPads and mobile phones all the columns will be placed below each other.
You can easily rearrange columns on mobile/tablet within one block, if columns fall into the wrong order.
When this is your desktop view: This will be your portrait view:
Hotspots can be tricky! On portrait devices they can fall off the page. Be sure to carefully check this in all view modes. The best option is to upload an alternative image for portrait view and reposition the hotspots on mobile view. More info about hotspots can be found in the article: All about Hotspots.
When there is an element or a block that you want to hide or show on a specific device, you can use the ‘visibility’ option. By using this option wisely you can create custom designs for the different views (portrait and landscape). This option is available in the settings (the most extensive option) and in the tablet/mobile views, where it’s called ‘Hide from view size’. When hovering over an element the ‘Hide this from view size’ option will appear. After clicking on that icon you will not see that element on the device you pre-selected.
Different views in the editor
Mobile and tablet views of your publication can be fine-tuned by clicking on the desktop icon on top of your publication and going to tablet or mobile. Here you can set different margins, paddings, font settings, background images and even different themes for each view.
Fine-tune with margins and paddings
Make adjustments in the different views by adding or decreasing some margins and paddings. You can push your content down, up, to the left and right, so background images, texts, hotspots etc. will be better in place and text will not cover important parts of the background.
Fine-tune font settings
You can resize fonts so it looks best on any particular device, even the smallest ones! You can do this by selecting the text in a text field and resizing the text in the styling bar that appears on top of the page. It’s also possible to give your font a different color. It will not affect the styling you have on the other two devices. However, editing the text or adding new elements will affect the other two view sizes.
Pro tip: fine-tuning font settings is also possible from within the theme of your publication. When, for example, font settings change in the theme of your mobile view, it will not impact the original theme settings in your desktop view. More info on how to use themes can be found in the article: Theme Settings.
Note: The mobile view in the editor is a general size. It’s wise to check a publication on your own (real) mobile phone as well. An iPhone 5 is overall the smallest device you can check. Words with many characters sometimes won’t fit on such a device, so then it’s wise to decrease the font size on mobile view. The desktop and tablet version will remain its set font size(s).
Fine-tune background images
When working in tablet or mobile view you can also replace the background image of a block.
This can be useful when having a landscape image like this:
Only one person will fit on a portrait device. Here you need an image where the two people are closer together. As mentioned earlier, please make sure you have two different options (landscape and portrait), so you have an alternative for mobile and tablet.