Page layout and content guidance for editors working with SharePoint Online sites
SharePoint Online offers content editors many options for changing page layouts. It's so flexible that content editors may unintentionally create pages that are difficult to use. Some choices risk making the content inaccessible.
Content editors working on University websites and intranets should all be familiar with writing for the web techniques and our content standards. These apply regardless of your site's content management system (CMS).
Both the layout of a page and how the content is written to the user experience (UX).
This page covers:
- research-based principles for making content and page layout choices
- making your content accessible
- webparts to avoid
- getting support
Research-based principles for making content and page layout choices
Laws of UX describe the principles behind many website designs. They can help us make choices that help our users.
Research into how people read on screens shows that people scan to find what they want. Eye-tracking studies show that we typically scan in an F-shaped pattern. This means we pay more attention to headings, subheadings and text on the left of our screen.
This means we pay more attention to headings, subheadings and text on the left of our screen.
Less is more helpful
Several principles tell us that people find it unhelpful if too much information is presented at the same time. Remember that you are familiar with your content but your users are not.
Avoid making your page designs unusual where there is no need. A well-written page title, summary, explanation and link in a button is a great option.
Use writing for the web tactics and the University's content standards to format your content for reading on a screen.
Make it easy to see what to do. Use the 'button' webpart to make a link obvious, if the purpose of a page is to get your users to another page.
Page sections
SharePoint rearranges your page one 'section' at a time for mobile devices.
All of the content in one section will be stacked, taking columns from left to right as you see them on a desktop. Then comes content in the next section.
This is important for understanding the order in which users will see information. It may be different to other content management systems you have used.
Always check how your content appears on a mobile device.
Background colours
Consider how you use the background colours on different 'sections' of the page. Users may:
- perceive items with the same background as grouped together
- consider background colour that stands out as more a more important area of the page
If in doubt, use the same background, or no background, for the whole page.
Columns and alignment
Use the one-third right section format to make text easier to read than full-width. Avoid putting too much into the righthand side.
Only the three-column section layout for short, simple, similarly sized elements.
Left-align text and webparts for accessibility and ease of scanning.
Remember, SharePoint rearranges your page's content on a mobile device one 'section' at a time. All of the content in one section will be stacked, taking columns from left to right as you see them on a desktop. Then it will move on to the next section.
Always check how your content appears on a mobile device.
Long pages
On long pages, consider adding a list of contents at the top linked to headings or sections on the page. SharePoint automatically creates anchors for headings, including section headings.
Use page anchors (bookmarks) on Microsoft's support site
For very long pages, consider whether offering users the option to collapse sections will be helpful. Ensure section headings are descriptive if you choose to make them display as closed.
See an example of lots of collapsed sections on the content standards page.
Consistent pages are best
Use the publishing checklist to review your pages. Following the list will help you to write consistently.
Remember to edit the page description under ‘page details’. Users see the description when the page appears in search results.
Change the page description on Microsoft's support site
Style common webparts consistently across your site. People assume visually similar elements are related or work the same way.
Agree on conventions for your site if there are multiple content editors. Create page templates in your SharePoint site to help your editors if needed.
Page templates in SharePoint on Microsoft's support site
Making your content accessible
Some of these points, and others, are covered in the Content Community's introduction to accessible content.
Colour and contrast
Some colour combinations and lack of contrast between colours cause accessibility issues. Follow these rules:
- Avoid webparts that present text over an image without a solid background.
- Avoid editing fonts and colours that are otherwise set by your site's theme.
- Never convey meaning through colour alone.
Remember that you cannot control the way SharePoint will shift text and images to display on different screen sizes and devices. The part of the image behind the text on your screen may not be the same on others.
Text and format
Ensure your content is formatted correctly for screen readers by using SharePoint's editing toolbar for:
- bullet-pointed lists, also known as unordered lists
- numbered lists, also known as ordered lists
- headings
Avoid italicising text because it is difficult to read for people with dyslexia and some conditions affecting people's sight.
Use plain English wherever possible. Avoid metaphors or unusual idioms. These may not be understood by neurodiverse users and people who speak English as a foreign language.
Images
- Add descriptive alt text to images that convey meaning.
- Mark images that do not add meaning as decorative
- Avoid text in images - it may be too small to read on mobile devices.
- Set the focus point to reduce unfortunate cropping and resizing issues.
- Crop images before uploading them if needed.
Remember that you cannot control the way SharePoint will shift text and images to display on different screen sizes and devices.
The part of the image behind the text on your screen may not be the same on others'.
You can find out more about image sizing and scaling in SharePoint Online on Microsoft's support site
If the content doesn't need an image, you don't have to include one. Use the ‘plain’ page title area option if needed.
You do not have to use the image-heavy hero webpart on your homepage. Cambridge users sometimes tell us that they find this layout overwhelming.
Provide links using different webparts if the content doesn't have relevant images.
Webparts to avoid
Avoid webparts or options that place images directly behind text without a solid background colour.
Examples include:
- the page title area ‘image and title’ option - use the ‘overlap’ option instead
- the hero webpart where text is overlaid directly over an image - use the solid colour background option instead
- the countdown timer webpart with the background image option
- the image webpart with the ‘text overlay’ option - if you need to add text, use the text webpart as well instead
Avoid using the colour gradient background option on page sections. This causes variation in the amount of contrast between the text and background.
Be careful with the pull quote text style. It is automatically italicised and centre-aligned, both of which are more difficult to read.
If you must use it, only use short text. Ensure it is a true pull quote and not a block quotation:
- Pull quotes use text that appears in the body text of a page.
- Block quotations use text that does not appear elsewhere on the page.
These conventions come from print design and pre-date digital formats.
Create and use modern pages on a SharePoint site on Microsoft's support site
Get support
Sign up to join the Content Community, the network for content creators across the University. The Content Community run regular training events to help you improve your content.
Content editors and intranet owners around the University should sign up for the Optimise your content course.
This is a 6 session course run by the University's Content Community. It will help you improve your intranet content.