Design Review: Page layout and typography of communication sites
This time we take a look at the fundamentals on the page and text layout on modern SharePoint pages in communication sites. The text layout is the essential design element on web sites and the intranet. 95% of a current information system is base on just text.
First, let us define some basics on typography on the web to have a better understanding later on the available layout options we currently have.
Typography on the web
Before we can review the typography and text structure options on SharePoint, there are some core rules user should be aware of creating content for the web. I focus here on the basic rules, there are more design-related rules, but they are harder to spot for the end-user.
Line length and the ideal measurements
How long a line of your text content decides a lot about the success of the pages provides. It might be surprising, but the perfect length is only somewhere between 45 and 75 characters.
This guideline originates from a book from 1971 “Design with Type” by James Craig that states:
Reading, a long line of type, causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line — Too short a line breaks up words or phrases that are generally read as a unit.
Even though many have large screens nowadays, the visual appearance for text content only consumes a small amount of the available space.
Other rules of thumbs
The line-height or line spacing should be optimal between 120% — 145%, but it highly depends on the font.
Font size should not be smaller than 16 pixels and is the default size in every browser. Larger fonts affect the line length positive while smaller fonts could be harder to read and of course, create longer lines. It also comes down to the device the page gets consumed. A modern way is to use responsive typography that adjusts the font size accordingly based on the screen size and other deciding factors.
SharePoint in case of text layout
Now we are equipped with some base understanding of typography on the web to see how well we can these apply to SharePoint.
Create new article page using basic text layout
Let’s start with the primary text layout setup that SharePoint provides. We get some content on a two-column layout.
Two column layout defined by basic text article layout
This setup offers the first two issues in the case of usability and design. The user is lost because the order the content should get consumed or read is not notable.
Reading the article like a newspaper
Should the content consider to be read in a newspaper like order, which most users are most familiar. So this design works well on paper but not on the web in this case.
Smaller desktop screens show only the first paragraph
That this base design not work becomes obvious on smaller screens. There might is content in the first column that does not show and only uncovers on scrolling. In the worst-case scenario; the user needs to scroll up and down on the page.
Where this layout partially works are on overview pages but also the use with pure text content is limited here.
Another option would be to read row by row.
Row by Row reading flow
It makes more sense in this case, but the second column has too much whitespace between the first and the second row. This way, it does not provide a harmonic reading experience.
On a small screen, the first paragraph on the page has a maximum with of 72 characters, which false in the range of optimal content.
The to column layout uses an optimal line length as shown with the red overlay
An even on large screens because of the off-the-grid layout it has a maximum with of 1236px.
The font size for the paragraph is 18px with a line-height of 140%. It is on first look fine and falls into an acceptable range from these values.
The only issue here is that effective line-height result in 25.2 pixels, which might cause some readability and render subject on older screens and non-retina displays.
More article like reading experience
Full width layout option
To have span, the text content across the whole screen is not a good option.
Text in full width column
The line length is suddenly now 150 character at max and exhausts the user.
One-third right or one third left
Two third / One third layout option
The line length is now 99 characters and makes the content a little bit better, but far from optimal.
It also makes it glued to the left or right side of the page. You could argue that there might be content to the right or left side, but in many cases, there is simply none. Crowding the space to make the layout look more balanced is also maybe not a good option.
Three equal columns
Last but not least, the only option left is the three-column layout.
Three column layout option
Now the text length is at 45 characters and on the lower limit of the optimal line length. Technically it seems ok, but visually the content is too narrow and a not standard set up for an article page.
The optimal experience
The optimal solution for a communication page in SharePoint looks like shown in the following screenshot.
The optimal solution for an article page layout
It has two columns with 25% spacing on the left and the right, leaving a centre column of 50% in the middle. The text length now is 72 pixel, which gives a great reading experience for the intranet user.
Form a tablet view the experience also needs to be optimised to a centre column, for example, 66% and two 16.5% wide columns, the left and right of the content.
The page layouts of a communication site, as the name suggests, has its purpose of communicating information inside an organisation.
This layout is well capable of presentation or demonstration pages, crafted by a designer. With the given options seems to be its primary purpose the designer of communication sites had in mind.
Communication sites do not enable news and information creation based on article pages so that they are usable and accessible consumable. Which, as shown in the optimal solution is not yet an option.
Not every author on the intranet is a designer, which should not be the target audience, beside of course the consumer. From my point of view, it should enable anyone who can create a word document to create content on the intranet too.
Classic experience pages allowed designers to define fail-safe layouts custom to their users need and enabled users to fill those layouts with content quickly. Through predefined page layouts, it was possible to optimise the usage also for authors. An option that is highly missed and not in sight yet.
Communication sites do not offer a base article pages layout and having been considered during its design. The available flexibility is great for various use cases, yet the base text content option is missing.