How to Test Content for Mobile Responsive?

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, tablet 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 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 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 centred 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.

Step 1 – Select the image

Step 2 – Navigate to the Advanced tab

For 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.

Powered by BetterDocs