Great layout designs for SharePoint pages 

We should avoid publishing ‘walls of text’ and we must stop publishing full-width text blocks.

You and your intranet publishers can publish news posts and reference pages in SharePoint that are more readable and pleasant to use. Don’t use the default page templates ‘as is’, always add sections and columns, or deploy your own custom templates across every site that makes up your intranet.

Skip to the webinar recording

The solution

Ideally, you would speak to IT about designing a few page templates for the ‘SharePoint site template’ that is used to create new SharePoint communication sites. (A SharePoint intranet is made up of several / many SharePoint communication sites, each dealing with a specific topic, department, or audience.) Then, the new page templates would be automatically available to every new site that is ever created. For existing sites, you’d need to hand build each page template within it, as below.

Larger organisations really must follow the ideal path! Yes, it will be a bit of an IT project, but it’s the sustainable and scalable way to provide consistent templates to every communication site owner.

Good looking layouts 

Here are three examples to show pleasant, usable, and readable page layouts. 

First, a simple multi-use layout – useful for both a news post and a simple reference page within a topic / department site. 

Notice the square image has real text upon it; done by SharePoint, the text is readable and editable. (I now think the square image should be a bit bigger.) 

Notice the big ‘quote-like’ text going right across the middle of the page. Arresting and effective. 

Second, and third, take a look at a design for a regularly long reference page (opens in new tab) and then a ridiculously long page layout (opens in new tab) that showcases many of SharePoint’s web parts. You may need to click to show each image at full size, and if the image is too big for your browser you can right-click and save it to your computer.  

Top to bottom SharePoint page layout tips 

Designing for SharePoint is a ‘top to bottom’ matter. You don’t want to miss a feature by scrolling down too quickly and forgetting the basics. So be sure to choose your heading, and check ‘Page details’ at the top of the page. 

You and your publishers can change the header as you like. While the ‘colour block’ header design is very nice, it takes up a lot of space, so I always suggest the ‘Image and title’ or ‘Overlap’ designs. 

The key to a more readable, useable SharePoint intranet page (or news post) is to make use of multiple sections down the page. Each section must use the ‘One-third right’ layout option, except when there’s an exceptional reason not to. For example,  a full-width photo / screenshot or perhaps to display an essential one-sentence instruction or to present a “quote” from a manager or customer. 

For a long page, such as for an internal service explanation, it might be fun and useful to occasionally reverse a section and use a ‘One-third left’ layout. Alternating right and left down the page may be effective. 

Text

The wide column is for text. This includes subheadings (styled as Heading 2). 

I sometimes suggest that the very first sentence or short paragraph can be in a larger font size (size 20). Just so long as nobody abuses this style suggestion; regular body text must consistently be size 18. 

Image

The smaller second column (right-hand side) in each section is where we add different web parts to present ancillary information – content that supports the main text and purpose of your page. 

So in the first section, the right-hand column should likely display a photo that illustrates or thematically matches the topic of the page. It may even be identical to (but cropped) the image used in the header. In our template, you’ll just add an empty ‘Image’ web part or an inoffensive dummy image. I personally use square images here, as I think square looks bold, allows you to crop to the photo’s subject nicely, and offers a consistent look n feel across the intranet. 

Button links 

The second or third section’s right-hand column could offer button-links to relevant intranet pages, and especially relevant document files. (It’s fine and normal to put links directly into body text in the main content, but many non-expect publishers don’t really know how to link to a document file, and many intranet users don’t expect document files in the main body of the text.) 

To prepare the template to present button-links to documents and such, place the ‘Quick links’ web part into the right-side column. Now style the whole web part as the ‘Button’ layout option and in the ‘Button appearance’ field, make sure ‘Outline’ is selected. You can allow icons too, but remember you’ll want to set style guidance; should all Word documents use a Word icon? Or is it OK, or better, for every link to a document to have a unique icon to express the topic? 

In use, the intranet publisher can quickly link to existing or recently uploaded document files, or delete the whole web part if it’s not needed. 

People 

Consider using the ‘People’ web part to display exactly who to contact if the reader has queries. 

Text 

Consider using a regular ol’ text box for important standalone instructions or explanations. You could even set the text to size 20 so that it’s larger than body text. 

Very dull instructions (such as obvious instructions that are often repeated across the intranet) can be presented in smaller text size. 

Background colour 

You can apply a background colour to each section. This allows you to highlight a single section. Be aware that you cannot add a background colour to only a column within a section. Microsoft will roll out a new aesthetic to SharePoint in 2024 so your options may expand considerably. 

When you apply a colour to a section, SharePoint will automatically change the colour of text and other content, such as buttons, for the sake of readability and accessibility. You can further play with text and button colours to a certain extent. 

Watch my SharePoint page design video 

Just over half an hour, showing you these tips in practice.

Save as template 

So if you have two or three sections in your nascent template and each section uses the ‘One-third right’ layout option, you’ve basically done well enough. Save your template with a descriptive name (as below). 

It’s easy for anyone to delete unwanted web parts, even sections, when they use the template. It’s easy to drag n drop web parts around the page, and new sections, new web parts, and they can duplicate sections and web parts with a click. 

As an aside; as you build your template, you can actually put instructive text in. For example, you might state “Opening sentence may be set to size 20, while regular body text must be left at size 18” or such. Your intranet publishers just need to make sure never to publish with such instructions left in. Such instructions may be helpful to new publishers and slightly annoying to confident ones. All intranet publishers and content owners deserve and need a comms style guide and SharePoint use guidance. 

How to save a SharePoint page layout as a template 

1. Create a new page using whichever existing template seems close to what you want. 

2. Amend the sections and web parts as per my guidance. 

3. Instead of clicking ‘Save’, at the top-left of the page, click the arrow and now click ‘Save as template’. 

It’s also possible to use an existing page as a template, by clicking its ‘Promote’ button and then clicking ‘Save as template’. 

That’s easy isn’t it? But this new template is only for this one site that you’re in. To roll out templates to existing SharePoint communication sites, you have to hand-build each template in each intranet site. 

Custom templates are offered to publishers within the ‘Saved on this site’ tab of the page creation process. The first tab is called ‘From Microsoft’ for the default templates. When custom templates are available, you should tell the site owners and members (the publishers). 

The problem 

The three current default page templates are mostly wrong for news and reference content: 

1. Blank – just a full-width text box 

2. Visual – starts with perfect columns then offers a full-width text box and detritus you’ll need to delete 

3. Basic text – a half-and-half two-column layout reminiscent of print-ready PDFs that cause uncertainty as to when to scroll down or back up to the top. Can be abused to create a readability nightmare. 

Microsoft will provide new templates in 2024, many of which will sadly be designed to ‘email out to your teammates’ and will continue to be mostly wrong for intranet readability. 

To be clear: Full-page-width text is too wide for comfortable reading (the line length is too long) and not something you see your favourite websites do. 

Two columns that are half-and-half is a holdover layout from printed pages, where the eye can easily jump from the bottom of the page to the top of the second column, which can’t be done without scrolling on a slightly long intranet page. Think about PDFs that use two columns; you often have to scroll down to read the first column and then whizz to the top of the page to continue reading in the second column. Maddening. The only time to use a half-and-half two-column layout is for short content blocks, especially when they don’t have to be read in linear sequence. 

My best advice 

A template is a tactical solution to building consistent or more readable pages. Templates become a strategic advantage when they are well designed and tested, properly rolled out, and managed over the long term. Note well the following: 

• Start with a custom template like my short template, then amend to suit your content as you lay out your news article or page content. 
• Only use SharePoint’s default templates if you amend them to use the ‘One-third right’ section layout each and every time. 
• Templates are per site – an intranet is often 20 to 100+ sites. 
• If you update a template, only that single template is affected; there’s no further affect across your intranet pages. 
• Site or topic landing pages can be radically different from content pages. 
• If you stray from consistency because you think your topic is unique, you give tacit permission for others to stray. In a year you’ll have a messy intranet.  
• Support the use of this template with a simple style guide – that sets out that text must not be coloured, that bold must be used sparingly et cetera et cetera. 

Resources 

Brand new page layout features are coming to SharePoint in 2024. You’ll notice nice rounded-corner ‘content cards’ and page background colours / images. Jeff Teper, President – Microsoft 365 Collaborative Apps and Platforms, said “SharePoint is getting a major aesthetic update. You’ll be able to create visually stunning sites and pages…” bringing a much needed facelift to your intranet.  

• IC style guide advice 
• Line length – reading width advice 
• How to publish and promote a resource 
• Content design webinar video (YouTube). 

If I can help you design and save templates, or revamp specific sites within your intranet – or indeed, the home page – get in touch and let’s chat about your (intranet) hopes and dreams.