logo

Newsletter

Join our mailing list for intranet and digital workplace links from around the web.
Newsletter

We’re careful with your personal information. Read our privacy statement for more about how we manage your details, and your rights.

Get in touch

Make your intranet work harder for you. Contact us to see how we can help.
hello@clearbox.co.uk
+44 (0)1244 458746

Line length in SharePoint news pages

A tape measure in a spiral, against an intense blue background.

Line length in SharePoint news pages

If using the SharePoint page template ‘as it comes’ for news articles, I want you to move away from the single column to a two-column layout.

For the sake of readability, we’re supposed to present lines of text at a certain width. Ideally, a column of text should be around 50 to 70 characters [references], allowing the eye to skip along (saccade) the line while avoiding getting lost on the page. The single-column layout in SharePoint Online is too wide (150 characters per line) and is sub-optimal for reading.

Readability (something about ease of reading but also related to comprehension) is affected by font family, font size, line height, sentence length, number of three-syllable words, vocabulary, acronyms, and a whole host of things. We need our internal communications, our reference pages, and news articles to be easy to read and easy to understand. Controlling the page or column width is an effortless way to improve the readability, and look, of your SharePoint pages.

SharePoint section layouts and column widths

Here’s a SharePoint news article with a single column. The text stretches right across the page. I don’t imagine you consider it hard to read, but I hope you know that the text is presented in a far wider manner than the news and magazine websites that you personally frequent.

Screenshot of a SharePoint news page. Short header image, title, and then just parapraphs of text all across the page.
The default, single column, layout of a SharePoint page.

We can’t reduce the width of the single column, so we need to add a second column.

Now, we do not want to display our single article over two columns! That’s something that print media can do, as you don’t scroll on a paper magazine. On-screen, we don’t generally want to scroll down and then scroll back up for the next column (something PDF designers often forget).

My favoured layout approach is to use two columns, one wide, one thin, and use the thin, right-side column for ancillary information. The left (for people who read left to right) is naturally for the primary content. It’s around 90 characters wide at what SharePoint calls font-size “18”, so it’s not perfect but it’s a massive improvement.

Screenshot of SharePoint news page, short header image, then a title, then on the left there are paragraphs of text but now on the right side of the page there's an image, a person's face and name, and links to related sites.
The same news story but now the page uses two columns. Primary text is in the wide, left-side column, ancillary content (photos and links) in the thin, right-side column.

See how I’ve used the same image? Sure, it made a fair header, but you couldn’t see a lot of it. You could add a second (and third) photo if useful. Yes, you can design an empty layout and save it as a template so you and your teammates have something to start from next time.

Sections in SharePoint Online

A short article like this could be laid out using one or two sections (horizontal strips in SharePoint). Sections dictate the mobile experience, as content is reflowed on small screens. If we choose to use one section, the image and everything in that rightside column will be displayed at the bottom on mobile, after the primary content. If we use two sections, we can make it so that the image is displayed, on mobile, after the second or third paragraph. We can then ensure the named person (Adam, in my example) and the related sites, in the second section, are shown at the bottom. This may be more useful and pleasant for mobile users if the image is reasonabily important (i.e. not just decorative).

When laying out a longer article, like a reference page, I strongly recommend using multiple sections so that relevant images and ancillary information would always be right next to (or underneath on mobile) the appropriate primary content. It’s perfectly fine for some of the rightside column to be empty – you don’t have to fill space for the sake of filling it. You might see some additional whitespace between sections, and you’ll want to test on mobile to check that that content reflows as you expect.

As we know, short sentences (certainly below 25 words) help readability enormously, but the layout of text also matters. Please move away from single-column sections in SharePoint, unless you’re already using a custom page design, perhaps from an ‘in-a-box’ intranet solution.


Line length refererences

Guidelines for document designers [PDF; 600 KB], American Institutes for Research, page 74.

Wedge Black

I support ClearBox in everything we do online, and I assist clients that are considering redeveloping or replacing their intranet platform. I worked in global and regional organisations as the intranet manager as part of the comms team, before becoming an intranet consultant. I'm the founder of the Intranet Now annual conference. I’ve tweeted about intranets and comms for fifteen years now.

2 Comments
  • Posted at 11:15 am, 28 June, 2022

    Great concept, but you may want to consider a few additional guidelines. Unfortunately, your suggested layout is not going to work very well on a mobile device because the entire right column will show up at the bottom of the page. Instead, you can achieve your objectives and improve readability on screens of all sizes by adding multiple sections to your page. This way, you still have your columns and the images and ancillary text show up in context- on desktop and mobile. You can also use section backgrounds and dividers to make the content even more “scannable.”

Post a Comment

Comment
Name
Email
Website

This site uses Akismet to reduce spam. Learn how your comment data is processed.