What is responsive content in responsive web design?
As content managers that create and manage the content of the company intranet, It is practically essential to create content for a range of devices with various screen sizes from mobile phones, tablets, or desktops.
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 sizes?
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 on 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 a 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
Use a percentage in the table width field when creating a table rather than hard-coding this in pixels.
e.g applying Width 100% means the table width will be adjusted automatically to 100% of space available on the screen or its container (size of the tile in Pages)
Additionally, wrap the table in a <div> and add the table-responsive class to make it scrollable:
https://getbootstrap.com/docs/3.3/css/#tables-responsive
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. Insert 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.
