🕰️ Recap (from Part 1) - Dan's SharePoint Online New Years resolution

Ok, so for those of you who are reading this but have yet to read Part 1, the greater context here is that we were looking at a HR employee named Dan (a totally fictitious person 🤥) who was made responsible for news within his Department on the company Intranet. Long story short, he decided he wanted to get structured in his approach to managing it all and decided to do a couple of things as a New Year's resolution...

• STEP 1
  He's going to create a place where he can capture new news post ideas and track them.
• STEP 2
  He will make a conscious effort to produce top-quality, engaging news posts.

Step 1 is covered in Part 1 of this blog series, so check that out here if you want to nerd out on SharePoint lists and how to manage a process with one. The rest of this post is going to be about how Dan will address Step 2. Oh, the excitement! 😁

Ok, I'm actually going to drop the 'Dan - HR Employee' example, as it's getting too confusing to write this post and be consistent in my tenses! I think it served its purpose in Part 1.

So let's come back to the real world, shall we...

Hi, I'm Dan 👋 and I build SharePoint-based Intranets and help companies design and build communication and collaboration solutions within M365.

Now that we have that out of the way let's talk about producing these news posts.

Where do you start? Well, how about standing on the shoulders of giants?

👀 Researching popular news websites to see what's across them in terms of news article structure...

A while ago, I carried out a bit of light research, where I visited ten well-known news sites and looked at how they structure their news articles. (I may as well get the benefit of their UX research dollars, right?!)

To be honest, there was nothing mind-blowing in terms of innovation. However, they were all pretty consistent with each other in structure and layout, which was encouraging and suggests that they all somewhat agree on what works best for online news consumption.

Below is a summary of my key takeaways:

1. ✅ Big title with an image, author and published date: This is an obvious one, but calling it out all the same. We can definitely support this in SharePoint through the Header Layout templates (finally, a use for the colour block header layout! 🥳). The ability to include the Author and the Published Date is there already out of the box, so happy days!
2. ✅ Provide a short introduction upfront and a summary at the end: Most of the news posts I looked at provided a one or two sentence summary ahead of the body text. Always kept extremely concise but accurately conveying the purpose of the news post. Similarly, a short summary included at the end of the article with the key takeaway points is a great idea. Especially for longer news posts. If ever there was a use-case for summarisation within Chat-GPT! 😉
3. ✅ Short Paragraphs with short line lengths: Short paragraphs with short line lengths is a well-understood UX technique and just feels easier when reading an article. Full-page width text boxes and sentences do tend to feel tiring to read if used for large blocks of text. We can use multiple-column section layouts to reduce the width of our text boxes and keep things easy to read.
4. ✅ Include a way for users to discover more news from within the news post: Providing users with a way to discover other news articles without having to jump back to the site landing page is something that also just makes sense from a UX perspective. It is used universally in every news post I've ever seen, and it's something I recommend every time I build an Intranet site.
5. ✅ Be consistent!: I mentioned above that the news sites I researched were very consistent with each other, and I recommend you are too when publishing news on your site. You can create news templates or create new news posts as a copy from an existing news post within SharePoint which makes this super easy. Consistency in structure and layout will make your life easy as a publisher and also for your readers, as they will become familiar with how news is presented within your company. Win-win situation!

💡 A great way to structure your SharePoint news post pages to provide a great user experience...

So with the above takeaways in mind and what I have seen work well through iteration, let's look at how we can structure our news post pages for maximum effect! Lets's start conceptually first. The below image shows the main sections or elements that our news posts should contain:

Fig. 1 News Post Conceptual Page Model

Now let's see this as an actual SharePoint news post...

Fig. 2 Example New Post Based on the Conceptual Page Model

In my experience, this layout is a winner in providing users with a well-structured news post where they can easily identify its purpose, consume the information comfortably and clearly see the key takeaways. All the important features and functionality! All while having additional news posts promoted to encourage discovery.

Let's create one!

🎓 Step-by-step tutorial on building this example SharePoint page news post

This section will show you exactly how I built the above news post page. So roll up your sleeves, and let's get stuck in!

Note: This tutorial is applicable regardless if your site is a Communication site or a Team site. Once you are using the modern experience, you're all good!

1. Configuring the Page Title Area (the top of the page)

Fig. 3 News Post Page Title Area

With your page in edit mode (click 'Edit' at the top right of the page), select the pencil icon on the left-hand side of the Title Area to access its settings (which will then appear on the right-hand side of the screen). Let's review our options and what I have chosen to create the page title area in the image above.

👉 Layout setting

The layout setting is the main setting for determining the look and feel of the title area. You have four options available:

Fig. 4 Title Area Layout Settings

Let's take an example of each:

1. Image and title - Great for standard pages where your page title will be displayed on top of your chosen background image. See below:

Fig. 5 Image and Title Layout Example

2. Plain - This option will remove the background image altogether from the header. Good for site pages where you want to get straight into the page content without any distracting eye candy. Not the best option for news posts though. See below:

Fig. 6 Plain Layout Example

1. Color Block - This is the option I have chosen. It allows for the biggest background image to be displayed with the news post title in a colour block that matches your chosen site theme. This is especially good for news posts (or site pages in general) with long titles. See below:

   

   Fig. 7 Color Block Layout Example

2. Overlap - This option is very similar to the 'Image and title' option, with the main difference being that the title will be displayed as if it is part of the body of the page but slightly extending up above the background image. See below:

   

   Fig. 8 Overlap Layout Example

👉 Alignment setting

This setting is pretty straightforward and provides you with two options.

Fig. 9 Title Area Alignment Settings

1. Left - This is the option I have chosen. If selected, the content which is displayed within the Title Area (excluding the background image) will be aligned to the left. I generally choose 'Left' for news posts like this as it seems to flow better when viewed with the rest of the page content. Also, sometimes it depends on the background image. See below:

Fig. 10 Title Area Aligned Left

2. Center - Surprise surprise, if you choose 'Center', the content displayed within the Title Area will be centre aligned. See below:

Fig. 11 Title Area Aligned Center

👉 Text Above Title

I have mixed feelings about this one. This setting allows you to display some text above the page title. As far as I can tell, it is a way to categorise your pages and display this category within the Title Area. There is a hidden metadata column within the site pages library called 'Topic Header', which will be populated with whatever you type into this box which, in theory, would allow for filtering or grouping.

However, this is a 'Single line of text' column, so if you do use this filtering or grouping within the site pages library, it is not managed in any way, which leaves it wide open to inconsistency. There are much better options for categorising pages and news posts, so I personally don't bother with this one.

The 'Show text block above title' toggle option just allows you to hide the text box if populated. Yeah... not too sure about the usefulness of this one 🤔. Happy to be educated though, if anyone has any thoughts!

Fig. 12 Text Ablove Title Settings

If you do use it for nothing else other as some additional context signposting, here is what it looks like when populated (I've populated it with 'HR Comms'):

Fig. 13 Text Above Title Example

👉 Show published date

This one is self-explanatory. If you toggle it to 'Yes' (which I have, based on my super scientific research 🥸), the most recent published date will be displayed. Yes, I said "most recent". If you first publish your news post on January 1st and then edit and republish on January 7th, the date displayed will be the 7th.

If you set the toggle to 'No', the published date will not be displayed.

Fig. 14 Show Published Date Setting

👉 Alternative text

It's just good practice to populate this box. It won't alter the display of the Title Area, but it does help with screen readers and accessibility.

Fig. 15 Alternative Text Setting

👉 Banner Image

The Banner Image is the background image displayed in the Title Area if you have chosen any Layout options other than 'Plain'. You can change it by selecting the 'Change Image' option on the RHS of the page when you click anywhere within the Title Area.

Fig. 16 Change Title Area Background Image

Once you click 'Change Image', you will be presented with lots of options to source an image. The 'Stock Images' option is often very handy if you aren't too precious about having a company-specific image. 'Stock Images' provides a good selection of quality images which are totally free to use.

One word of advice, though, is not to include any text within it if you upload your own image. The text will most likely come out a bit... fuzzy (technical term!) and will be competing with your page title. 99 times out of 100, it looks messy and illegible. On top of that, your SharePoint site will take this image and crop it multiple ways depending on what feed it will ultimately appear in. Keep it simple (but beautiful!). No joke, first impressions count. If I had to choose between a high-quality abstract image and a low-quality hyper-relevant image, I would always choose high-quality abstract!

2. Create the body section (our actual news post content)

The page body in our example will contain the introduction, body content (the actual news post content) and summary. This is where you should get creative! I'll walk you through how I created the body section from my example article (shown below).

Fig. 17 New Post Body Section Example

Structuring any site page, whether it is a news post or not, is the same. In brief, we create page sections which contain column layouts. We can then place content into these column layouts with web parts.

The structure of the news article above is as follows:

Section 1 - Introduction

This section uses a 'One-third right' layout with a 'Text' webpart used within the larger section column. I took this approach to reduce the sentence length. I've left the smaller section column blank but this can be a good place to embed any relevant links or documents if you need to.

Fig. 18 News Post Introduction Section Example

(in case you are wondering, that pink line between the heading and the introduction text is just three underscores with the theme colour applied. I think it's just a nice little flourish 😁).

I've also applied the 'Neutral' Section background shading to differentiate the Introduction from the main part of the body content. These settings are shown below:

Fig. 19 Page Section Settings

Section 2 - News post body content

The news post body content is comprised of two two-column sections stacked, one on top of the other. The idea is that we put a text web part on one side, which allows us to keep the sentence length nice and short, and then we fill the other half of the section with a supporting image (more of that eye candy!). You could always replace the image with a relevant document link, embedded document library, call to action, etc. Whatever you feel is most appropriate to your situation.

In the section beneath, the second of the stacked two-column layout sections, I have just flipped the text and image web parts to the opposite sides to mix it up.

I am also using nice short paragraphs within the text web parts to allow the reader to take a mental breath as they read. This approach tends to work quite nicely and if you have a larger news post, you can always just duplicate the sections and effectively build your news post like a stack of Lego bricks. Now who doesn't like Lego!?

Fig. 20 Page Body Content Sections

Section 3 - Summary Section

The Summary section is created exactly the same as the Introduction section outlined above. Obviously, the only difference is what we say in this section. I'll leave that to you! 😁

3. Page Sidebar

Adding a page sidebar allows us to create a section on the news post page that acts independently of the main body section. So while the 'main stage' is where our news post content lives, we can use the sidebar to promote other news posts on our site (we could actually promote news from any combination of SharePoint sites if we wanted to, but we'll get to that!).

Using the sidebar for this purpose is a great way to allow your users to discover more news posts without heavily imposing on the current news post.

Fig. 21 Discover More/ Recent Updates Sidebar News Feed

How to add a sidebar to a site page or news post

So you want to have your page in 'Edit' mode, and then you want to select any of the 'Add a new section' buttons on the right-hand side of the screen. Then select 'Vertical section'.

You will now have a blank sidebar on the page ready to be populated with any web parts your heart desires!

Fig. 22 Adding a Page Sidebar Section

How to add a news feed to the sidebar with the News Web Part

Adding a news feed to the sidebar is super easy and is done by using one of my favourite web parts, the 'News' web part (yes, I actually do have a selection of favourite web parts but that's a whole blog post in itself!).

Hover over the top centre of your new sidebar until you see the '+' icon. Click it and then add the 'News' web part.

Fig. 23 Adding the News Web Part

Configuring the news web part

The 'News' web part is effectively a content aggregator. Essentially, it will pull new posts from one or many SharePoint sites based on your instructions. It has loads of configuration options to let you tailor it to your needs.

Microsoft actually provides some pretty good instruction on the news web part. So rather than me repeating it, I recommend you check out their documentation on it Here

While that link is great for understanding what options you have, I'll briefly explain what options I have chosen for my example and why I have chosen them.

• News Source - I have left it set to 'This site' in my scenario. The reason is that my news post is posted within a specific HR Department Intranet site, so I'm being super selfish and only promoting news posts published on my site. If I were placing this web part on the Intranet Hompage or within a dedicated 'News Centre' site, I would be setting this to 'Selected sites' and choosing relevant sites to aggregate news from.

Fig. 24 News Source Setting

• Layout
  • Show title and commands - I have left 'Show title and commands' set to 'On' as I want to display a title above the web part providing context to the feed to help users understand what the feed contains, i.e. 'Recent Updates'.
  • Display - As for the display of the webpart itself, for a sidebar, I usually choose the 'List' option. The format of the news webpart, when set to 'list', works well within a narrow sidebar (or section column).
  • Number of news posts to show - I have set the 'Number of news posts to show' at 4. What you choose may depend on how often you plan to publish your news. Setting it to say 8 (the max for the 'List' layout) when you rarely publish news will mean that it will eventually fill up with very old news. So, in that case, I'd personally keep it at a low number. If you publish frequently, then I'd put it to the maximum allowed.
  • Show compact view - I have set this to 'Off'. If you set it to 'On', the feed won't display any thumbnail images or descriptions, which is super boring (I never use this option!).
  • Show number of views - In my example, I have set this to 'No' but in a real-world scenario, it would honestly depend on how much engagement I am getting with articles and I'll adjust my decision to suit. If news posts are getting very few views, I tend to leave it at 'No' until news starts to get more eyeballs. Otherwise, I find it can give the perception to some people that the post is not important or interesting as nobody is reading it!
  • Show author, Show first published date - I have both of these set to 'No'. My reasoning here is a bit more solid in that if you set either to 'Yes', then the web part will seriously reduce the number of words shown in the preview description within the feed. From an end-user perspective, I find they would rather get an idea of what the article is about before clicking into it rather than see who published it and when (as the author will usually be one of only a few people and the published date will hopefully have been quite recent).

Fig. 25 News Web Part Layout Settings

• Filter - I haven't added any specific filter to the web part as I want to keep the scope of the web part open to any news published on my site. You can of course, narrow this scope if you need to. (Check out Microsoft's documentation on this to learn more)
• Enable audience targeting - Again, my scenario is quite simple so I haven't enabled this but suffice to say, you do have the option to enable this and be very specific about what user group sees what news within the news feed. This is a very useful feature that is often requested. (Check out Microsoft's documentation on this to learn more)
• Organize - This section lets you create 'Sticky' news posts that won't be "bumped" by more recent news posts. This is often used on Intranet Homepages to keep very important news front and centre no matter what is published after it. In our scenario, I wouldn't want to have to come back and maintain this news feed, so I would just leave this set to 'Automatic', which is the default anyway.

👋 😎 And that's it

So there you have my thoughts on how to structure your news post pages within SharePoint to provide a user experience that goes beyond what most people will typically create. All while taking advantage of the learnings from how the big news outlets structure their news.

• Keep it consistent
• Make it pretty
• Provide a short summary
• Make your copy easy to read
• Provide key takeaways
• Promote your other news

Now... there's no getting away from the fact that the actual words and editorial part will matter the most, but unfortunately, I can't tell you what to write (sorry!), but I'm sure you have that covered!

Chat Soon, Dan