When you create any page content it’s good practice to confirm visually the page layout is appropriate for your audience and the devices they use to view your content.
When your page content is created the layout of the page, elements on the page and even the widgets on the page.
It’s now more important than ever to make sure your website is optimised to display on desktop, table and mobile devices.
Tools
When you are editing a page you can select the responsive mode to change the viewport between Desktop, Tablet or Mobile.
In these modes, you then can modify some elements on the page to make the content appropriate for the devices.
Content Editor
When editing content you can preview live what the page will look like on these devices, and you can control which elements on the page display, are shown differently or are hidden from mobile or tablet views. This is an important feature to consider when creating and writing content.
Mobile users don’t want a lot of information, just the important information generally.
In this example
Step 1 – select your image
From the Edit Image Palette you see the is a small icon showing next to alignment.
This shows us that a responsive setting can be made to change this item per device.
I can set the image to be Aligned Left, Middle or Right based on the device viewing this page.
Step 2 – selecting the Alignment for a Responsive mode (mobile)
The mobile view has been set in responsive mode.
The image has now had the Align Left attribute set for mobile.
Done – Now the image will display centered on a desktop, but when viewed on a mobile will be aligned left.
Other responsive controls
Most elements on a page will have responsive controls under the Content, Style or Advanced Tabs in the Editor.
In this example we have decided that this image is not relevant on the mobile view, it uses too much space on the page.
Step1 – we select the image
Step 2 – we navigate to the Advanced tab
The Responsive setting we select Hide On Mobile
Done – This allows us to hide this image on mobile – and the preview shows the image greyed out.
