1. Home
  2. CMS Publishing
  3. Layout and structure

Layout and structure

Your page will look different depending on the user’s screen size. Smaller screens on mobile devices mean users have to scroll for longer to view the same amount of content as on a desktop. When choosing components, consider how they will affect the amount of content that can be seen on screen at once and how users will interact with them.

Page Layout

Text layout

Imagery

Alternative text

to go in left navigation bar:

1. Page layout

You can create balanced webpages by considering the layout and spacing of paragraphs, columns, text, images, and other components on the page. Below is some guidance on how to use columns and separator and spacing blocks to organise information so it is easy to read and navigate.

  • column layout
  • separator and spacing blocks

2. Text layout

Headers, paragraphs, and lists are tools you can use to structure your text. Breaking up text and giving it logical structure helps users scan, read, and navigate content that is most relevant to them, including those who use screen readers. These tools also help search engines understand the content of your page, making sure users find the information they need.

  • Header
  • Paragraph
  • Lists

3. Imagery

Aspect ratio

Make sure the standard aspect ratios are set to 3:2 to maintain consistency in how images are displayed across desktops, tablets and mobile phones. This rule does not apply to hero banners.

Image quality

  • Use high-resolution images to ensure clarity and sharpness on all devices
  • Don’t compress the image too much as you will loose the image quality and will look pixelated especially on larger screens
  • Avoid text in images as this is hard to read, especially when using screen readers or other assistive technologies
  • Always include surrounding text that gives sufficient context for the image

Formats

  • Be descriptive and relevant when naming the files
  • Do not use spaces, special characters or underscores
  • Hyphens act as word separators, making filenames easier to read in SEO and URLs

File size

File name

  • Be descriptive and relevant when naming the files
  • Consider SEO, search engines can read relevant filenames which helps improve search rankings
  • Do not use spaces, special characters or underscores
  • Hyphens act as word separators, making filenames easier to read in SEO and URLs
  • For example, when uploading a file ‘IMG_1234.jpg‘ you need to rename with a descriptive meaning ‘summer-campaign-banner.jpg‘

4. Alternative text

Back to top