How to make cool modern SharePoint Intranets Part 2 – Design #makespintranetcoolagain

In the previous blog here, we looked at how to strategize (Scope and Plan) a Modern SharePoint Intranet Implementation. In this blog, we will look at some of the design principles for the Intranet.

Before we start building the Intranet, we need to have a usable design so that we could plan for a good user experience. User experience, as most UX guys would say, is not only about a beautiful design but also about easy accessibility and simplicity. In other words, it means we need to plan for a good usable intranet instead of only a beautiful looking intranet.

Note : The reason I stress on usable designs is because we spend most time finding workarounds to make SharePoint Intranet aesthetically beautiful. But instead if we understand the constraints at the UI level and focus on how to make it usable, then it works so smooth.

So, let’s look at some of the key highlights and limitations that the SharePoint Modern Sites present to us and how to tackle them to create a good design. We will look at the most important page sections and then the content part where we could do mostly everything.

Top Header Section

The first major limitation that throws most of my customers off is the fixed banner section at the top. Microsoft recommends not to remove this as it gives the quick way to reach your apps, services settings and personal profile. In future, Microsoft might be providing us with Page Designs that will help arrange this section better.

Now to overcome this limitation, there is a way, but not recommended as any changes on Office 365 layout could break it. So if you are tech savvy, dev and know your way around with CSS, then the below process could work for you.

1. Create an App customiser SharePoint extension.

2. Include your CSS to hide the section as per requirement. Note : not all sections are accessible via CSS overrides

3. Deploy it to the Site Collection App catalog of Intranet. For Site Collection App catalog enablement steps, check here.

Navigation

With the introduction of modern mega menu navigation, it is now possible to set a better content navigation on SharePoint sites. This could be enabled from the SharePoint site from the “Change the look” option in Site settings. An example is shown below.

Left Hand Navigation

Modern Team Sites have a left hand navigation that provide quick access to the common locations such as Site OneNote, Conversations, Site Contents.

Note: The left hand navigation becomes the top navigation in Communication sites. Hence updating the left hand navigation updates the top navigation.

Hack tip: Please check this blog if you would like to find a way to set layout types for pages in Modern Sites

 

Footer

SharePoint by default doesn’t provide a footer, so we could freely add footer to the pages. However, there are two floating footer components on the modern page as shown in the screenshot below that might be of interest. The two buttons are for Microsoft Feedback and cannot be adjusted as per custom requirements.

The footer can be customised using an Application customiser as discussed above.

Content Section

This section of the page is where the content owners have access to change or add information or components. This is where most of the design layouts are possible, so try to plan/design in this area.

For communication sites, we get a full width layout and team sites we get an article page layout.

For customisation, we have the following options

1. Add an existing Out of Box web part to the page. Some of the noted web parts for modern sites are below. We will look at more details about the below in the upcoming blog but below are few highlights of Out of box web parts.
   • Hero Web part – This web part displays content in a metro layout with options to change/update
   • Highlighted content web part – This web part is one of the best web parts in SharePoint site. This allows to filter data in the site using various filtering options such as SharePoint search, or SharePoint list columns or content types or file types etc. Hence this web part can be used at multiple pages
   • Text Web Part – Add any text using Rich text control using this web part
   • Quick Links Web Part – This is another helpful webpart that allows to add quick links to pages or web sites.
2. Add a custom SharePoint Framework web part
   We could add our own custom web parts using SharePoint Framework. SharePoint Framework allows us to create custom component as per our requirement and add it to the SharePoint site. We are going to discuss more about this in the next blog. For more dev information, please check the blogs here.

Conclusion

In this blog, we saw some of the tips for planning a usable design for Modern Intranets. However, this is not the end, there are more steps after the design is ready, reviewed and accepted. In the upcoming blogs, we will look at how to achieve the design using a functional solution.