Device Styles

For granular level control over how content is displayed across different device types, Device Styles can be easily incorporated.

What is a Device Style?

When designing content, text components such as Headlines and Subtitles can sometimes appear either too small on Desktop, or too large on Mobile and it may not be possible to get the perfect result by using a single style.

Device Styles address this problem by enabling additional ‘device’ styles to be created that will be used to override specific properties when being viewed on a particular device. For example, it is possible to create a ‘Desktop’ device style that increases the size of the ‘Headline’ and ‘Subtitle’ components by 15%, but only when content is viewed on a desktop.

While a more advanced use case, it’s also possible to create multiple device styles and associate them to different article styles, resulting in even more control over how each style renders.

Creating a Device Style:

Create a ‘New Style’ via the ‘Style Manager’
Enter a name for the Style. Its recommended to include either ‘Desktop’ or ‘Tablet’ in the name, e.g. “Modern-Desktop”
Select the Scope of the style (Publication or Global)
Choose the source type (normally this should be set to ‘New’)
Select ‘Device’ from the ‘Type’ menu.
Create ‘Create’. The Device style will be created and appear at the bottom of the Style Manager

Editing a Device Style

Device styles can be customized in exactly the same way as an article style, but remember that any changes only apply when viewed on an appropriate device.

For example, if you want to reduce the paragraph font size on mobile, select the paragraph text component and set the correct font size for mobile. Then save and exit the style.

Applying / Associating a Device Style

Once a device style has been created (and customised), it must be associated to one or more article styles for it to take effect.

Open the ‘Style Manager’
Select the ‘Article Style’ you want to associate with a ‘Device style’ and click ‘Edit Details’.
At the bottom of the model window you will see two options related to Device Styles:
1. Tablet Style: Specify the ‘Device Style’ to be used on Tablets
2. Desktop Style: Specify the ‘Device Style’ to be used on Desktops
Apply the appropriate Device style(s)
Click ‘Update’ to apply the change
Publish the article or issue to ensure the change is reflected

Disconnecting a Device Style

Device styles can be disconnected from an ‘Article Style’ at any time.

To disconnect a Device Style:

Open the ‘Style Manager’
Select the ‘Article Style’ you want to disconnect the ‘Device style’ from and click ‘Edit Details’.
At the bottom of the model window two options will display related to ‘Device Styles’. From the appropriate ‘Device Style’ menu (Tablet or Desktop) set the Style to ‘None’ for the Device Style you want to disconnect;
Click ‘Update’ to apply the change
Publish the article or issue to ensure the change is reflected

Deleting a Device Style

Device styles can be deleted at any time, as long as they've been disconnected from all 'Article Styles'.

To delete a Device Style:

Open the 'Style Manager'
Select the 'Edit' spanner icon next to the Device Style you want to delete
Select the 'Delete' option