All about responsive design

Your audience will read your content on all kinds of devices, ranging from a 5" mobile phone to a 23" monitor — and everything in between. Foleon Docs are responsive out-of-the-box, which means that they adjust automatically to various screen sizes. This article shows you how to make the most of this functionality.

🎥 Learn the basics in our video (3 minutes)

What is responsiveness?

One of Foleons’ most praised qualities is the fact that all the content you create is responsive and out-of-the-box. This means that it automatically adapts to the screen resolution of a particular device.

We have registered over 15,000(!) different screen sizes that were used to view Foleon Docs, which highlights the importance of responsiveness.

The most used screen sizes can be branched into desktop view, mobile view, and tablet view. We have analyzed the screens on which Foleon Docs have been opened. Desktop (55%) visits take the lead, while mobile visits (40%) keep gaining ground. Tablet visits (5%) continue to decrease year over year.

The different view modes

Your audience views your Foleon Docs in two ways: landscape (horizontal) and portrait (vertical). Content on a desktop screen always displays in the landscape orientation. Content on mobile phones and tablets can switch its orientation from landscape to portrait.

The view modes are located in the top bar of the editor. From there, you can fine-tune your content for different screen sizes — desktop, tablet, and mobile.

• Desktop

  In the desktop view mode, your content will display in landscape orientation. As you can see in the image below, columns will be placed next to each other.

  If you change the order of the columns in the desktop view mode, the order will also change in the tablet and mobile view modes.

  

   

• Tablet

  In the tablet view mode, your content will display in portrait orientation. As you can see in the image below, columns will be placed below each other.

  If you change the order of the columns in the tablet view mode, the order will also change in the mobile view mode.

  💡 You can see in the example that the white dot of the background image is no longer visible. To prevent this from happening, we recommend optimizing your images for each view mode. Read on to learn all about it.

  

   

• Mobile

  In the mobile view mode, your content will display in portrait orientation. As you can see in the image below, columns will be placed below each other.

  If you change the order of the columns in the mobile view mode, the order won't change in the other view modes.

  💡 You can see in the example that the white dot of the background image is no longer visible. To prevent this from happening, we recommend optimizing your images for each view mode. Read on to learn all about it.

  

Optimizing your images

You've now learned how you display your content in the different view modes. If you've set a background image in the desktop view mode (landscape), parts of it will not display in the tablet and mobile view modes (portrait). Let's go over how to optimize your images so they display in an optimal way.

• Replacing background images

  In the example below, the white dot disappears as we switch view modes. If you have an image with a person on it, it can happen that they are visible on the desktop view mode but invisible on the mobile view mode.

  

  By default, the background images in the tablet and mobile view modes will inherit the image from the desktop view mode. If it's important for you to show this to your audience, you'll have to replace the background image for this block.

  You can replace the background image in the tablet and mobile view modes by clicking replace background image in the purple block settings bar.

  ⚠️ It's not possible to set a separate column background image for tablet and mobile. It will inherit the background image of the desktop view mode, but you can't replace it. This means you might have to hide the column on these view modes.

  

   

  • Tablet — Replacing the background image will set this new image for both tablet and mobile. The ideal dimensions for a tablet background image are 768 x 1024 px.

    

     

  • Mobile — Replacing the background image will set this new image only for the mobile view mode. The ideal dimensions for a tablet background image are 523 x 934 px.

    💡 Once you have replaced a background image on a specific view mode, it's not possible to delete it. You can only replace it.

    

     

   

• Ideal background image dimensions

  Even though there are a lot of different screen sizes, we have recommendations for background image dimensions that create the best results. We recommend the following ideal dimensions for each view mode:

   

  

   

  • Desktop — 1920x1080px

  • Tablet — 768x1024px

  • Mobile — 525x934px

  If you create or crop your images with these dimensions in mind, you'll get the best results on their corresponding screens.

• Changing the focus

  You can change the focus point of the background images of your blocks and columns.

  In the desktop view mode, go to the settings of your column or block. In the Background tab, you'll see the Background focus section. Change the focus point and check how this affects your background image on the different view modes.

  ⚠️ Setting the focus will affect all devices. Even when you change your image for tablet and/or mobile, it will be locked on the focus point you select.

  

• Background videos

  Some mobile providers don’t allow autoplay for videos on web pages. For that reason, the fallback image will show by default on tablet and mobile.

  If you want your videos to show on mobile, you can create an overlay with the video as an element. Follow these steps to make this work:

  1. From elements, place a button into your column, name it "Watch the video"

  2. Link the button to an existing overlay, or create a new one

  3. In the overlay, add a video element to a block and style your overlay

  4. Rename the button, for example, to “Watch the video”

  5. Hide the button on the desktop view mode, by going to Button settings Visibility Hide on desktop.

  💡 Want to learn more about background videos? Check out our article Working with background videos.

  

Arranging your content

To design your Foleon Docs in the best way possible for every screen, we have a few additional features that will help you do that.

• Text

  You can resize text in each view mode so it looks best on a specific device, such as a mobile phone.

  

  
  You can simply select the text in a view mode and resize the text by using the styling bar that appears on top of the page. It’s also possible to give your text a different color, which 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 modes.

  💡 You can also fine-tune your text settings globally, by setting your theme for tablet and mobile. Learn more in our article All about the Theme settings.

• Alignment

  A new Doc always 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.

  

• Spacing

  After setting the alignment, the position of the elements in that column can be fine-tuned by using spacing.

  You can use spacing to create space in both blocks and columns. Spacing allows you to position the content on your page, to make sure that the layout of your design looks great on every screen.

  💡 The content of your Foleon Doc will grow according to the screen size of your audience. Don't be afraid to apply plenty of spacing, as it allows you to give the content you worked on enough room to breathe.

  

  We only recommend using spacing to fine-tune. To have more control over your block, it's better to create another column to push an element to — for instance — to the right.

  ❌ In the example below, you see how you can use spacing to align text. This method is not recommended. Instead, we recommend adding an extra column or using alignment.

   

  

   

  ✅ In the example below, we have created a second (empty) column to have more control over how the text is being displayed in the block.

   

  

  
  On a portrait device, you'll place this empty column above the first one. You can then hide it in that specific view mode. Read on to learn more about hiding columns, with the visibility options.

  Because the left and right spacing change according to your screen size, we recommend always using the same browser window size when creating your Foleon Doc. Using the same browser size every time you adjust spacing, will make your designs more consistent.

  To enable this, we recommend installing the Google Chrome plugin Window Resizer. This plugin allows you to quickly alter your browser screen to adapt to different sizes, making it easier to adapt your design to a variety of screens.

   

  

   

• Visibility

  When there is an element or 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 desktop block settings and in the tablet and mobile view modes, where it’s called hide from this view mode. After clicking on the eye icon, you'll hide that element on the view mode you're on.

  

  With hide from this viewport, you can choose to not display a block in that view mode. This can be particularly useful when you want to create custom content for specific screen sizes.

  💡 You can also create a block specifically for tablet or mobile and hide it on the desktop view. In the desktop view mode, go to block settings > visibility > toggle on hide on desktop.

  

Previewing your content

You can preview your Foleon Doc to see what it looks like outside our editor. If you’ve already published your Doc, the preview feature also allows you to preview your changes before setting them live.

You can also open up the preview on different devices, to see what your content looks like on your tablet or mobile phone. Simply share the preview URL with your device and check if it aligns with your expectations.