What is responsive content in responsive web design?
As content managers who create and manage the content of the company intranet, it is 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 device with a smaller 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'
Considerations for images, video uploads and tables created:
- In any image components placed on pages, use the 'Fit' option
This option ensures the image will resize on smaller screens so that all of it can be seen.
In contrast, the 'Fill' option will not result in this responsiveness when viewed on smaller screens.
The alternative here is to use a text component to upload the image to instead and set its width to 100% to gain responsiveness, as further detailed below.
- Images uploaded to the Text component can be made responsive
When adding a banner image within a text component , such as for example below:
Set width to 100% and remove the height value.
For general images or images in the body, we would recommend using the image component, set to 'Fill' as this will respond to the size of the screen automatically.
However, responsiveness can also be achieved in the text component by giving the image 100% width and no value in the height field and saving the page:
- Avoid specifying the width of a table in pixels in text components
Use a percentage in the table width field in text components 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
- Embedding Video or Map
When embedding content such as video or map using the text component, use 100% instead of size in pixels, this will ensure the video is going to fit the width of the screen or its container.
