Using view modes

One of our favorite Foleon features is that every piece of content you create is responsive out of the box. However, you can use the view modes to fine-tune your content for different screen sizes. In this article, we show you how to make the most of this functionality.

Why you should design for different screen sizes

Your audience will read your content on all kinds of devices, ranging from a 5" mobile to a 23" monitor (and everything in between). We have registered over 15,000 (!) different screen sizes that were used to view Foleon Docs so far.

Our data shows an impressive average of 50% of visitors who view Foleon Docs on a desktop device, 38% on mobile devices, and 12% on tablet devices. It’s worth mentioning that the percentage of desktop and tablet visitors decreases every year while mobile devices keep gaining ground.

Keeping this information in mind, you can imagine how important it is to design your content for different screen sizes. Using the view modes feature enables this.

How to change view modes

The view modes are located at the center of the top bar in the editor. From there, you can fine-tune your content for different screen sizes (desktop, tablet, and mobile), determine what you see in the editor, and access the preview.

When you click on a different icon, you will notice how the setup of the editor changes. In the example below, you can see what the mobile view mode looks like.

When creating your Foleon Doc, check the different view modes regularly to ensure your content is showing properly in different screen sizes.

Block settings for tablet and mobile

When you navigate to either the tablet or mobile view mode, you will notice that the purple block settings bar will be different than in the desktop view mode. We will go over the 4 different functionalities below.

• Move
  With the move functionality, you can change the order of the blocks on your page. It's important to know how your changes affect your content in each view mode.

  • Tablet - Moving blocks (or columns) will affect the order on both tablet and mobile.

  • Mobile - Moving blocks (or columns) will only affect the order for the mobile view mode.

    

     

• Replace background image
  This functionality allows you to replace the background image. It's important to know how your changes affect your content in each view mode.

  • 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 mobile 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. Also, once you set a custom image in the tablet or mobile view modes, the desktop view mode will be disconnected. This means if you then change the desktop image, the tablet and mobile view modes keep their custom images. 

    

     

• Add column
  Here you can add a column to your block. Keep in mind that this column will be added to each view mode.

  💡 When you're working with the Content Builder, you can't add a column to a block. Columns are fixed in the block templates you select.

  

   

   

Visibility options

When there's an element or block 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.

If you want to hide a block from the desktop view mode, go to the block settings and select visibility. Enable hide on desktop. In this window, you can also choose to hide the block in the tablet or mobile view modes.

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

In the tablet and mobile view modes, you can also hide elements with the hide from this view mode functionality. After clicking on the eye icon, you'll hide that element on the view mode you're on.

Which changes affect which view mode?

It's good to be mindful of which changes affect which view mode. If you're adding new content (block, column, or element) to your page, this will always be visible on the three view modes. Next to that, changing the text in a text element will also show on desktop, tablet, and mobile.

However, other changes (such as brand, images, block order, etc.) follow a hierarchy. Below you can find an overview of the hierarchy of these changes for each view mode.

• Desktop
  Changes that affect desktop, mobile, and tablet view:
  • The brand settings
  • The order of blocks and columns
  • Spacing
  • Background images

• Tablet
  The tablet view displays how your content will show on the average tablet device (in portrait mode). 
  • The brand settings
  • The order of blocks and columns
  • Spacing
  • Background images
    
    
• Mobile 
  The mobile view displays how your content will show on the average mobile device (in portrait mode).
  • The brand settings
  • The order of blocks and columns
  • Spacing
  • Background images

Even if you’ve already published your Doc, you can use the preview mode to see what your changes look like before you republish.