How to create responsive / mobile friendly content in Pages

What is responsive content in responsive web design?

As content managers that create and manage the content of company intranet,  It is practically essential to create one content for all range of devices with various screen sizes from mobile phones, tablet, or desktop.

Claromentis is designed by following responsive design principles, but it is still important to check if the content you've created in Pages or Publish is also working on various screen sizes.


How do you test your pages in various screen size?

1. Change the size of Browser Windows

You can simply drag and change the size of the browser such as Chrome, Safari or Firefox to simulate how it looks in a narrow screen.

2. Google Chrome: Using the Developer tool to simulate different device sizes

You can use Google Chrome's developer tools to request mobile version of a website, here is how:

  • Open Chrome's Developer tools with F12
  • Click the 'Toggle device toolbar' button to turn Device mode on or off
  • Select which mobile device you want to simulate with the 'Viewport controls'


What are things to consider when creating content to ensure it is responsive on mobile?


1. Avoid specifying the width of the table in pixels 

Using percentage on table width hen creating a table rather than hard-code the width in pixels, for example applying Width 100% meaning the table width will be adjusted automatically to 100% space available on the screen or its container (size of the tile in Pages)


2. Embedding Video or Map

When embedding content such as video or map, use 100% instead of size in pixels, this will ensure the video is going to fit the width of the screen or its container.


3. Inserting a banner image within the Text area.

When adding a banner image within a text area such as for example below:


Set width to 100% and remove the height value.


Do you know other tips? please leave a comment below.



Created on 7 October 2019 by Michael Christian. Last modified on 8 October 2019

Was this helpful?  

1 Like