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.

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.

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.