The Intelligent Intranet - Build an intranet landing page in real time

hi i'm deep jani mitra i'm a program manager on the sharepoint team and today i'm really excited to show you how you can build your best internet landing with modern sharepoint so in this scenario i'm responsible for building out contoso electronics intranet landing you can see i've already gotten started and added two news web parts here and though this might not look like much now i promise you in a matter of minutes this is going to be a thing of beauty now the landing is built on a sharepoint communication site in modern sharepoint it's really easy to spin up your own sites and first we'll just take a quick detour so i can show you how when you go to the sharepoint start page you can see there is an option right here to create sites and when i click on it there's two kinds of sites you can create you can create a team site or a communication site the team site as the name suggests is intended for teamwork and collaboration whereas communication sites are intended for broad communication so it's typically built and then maintained by a small handful of people but then a lot of people come to it to get information the internet landing for example is maintained and built by a small team but all employees of the company come to it okay let's now go back to the landing and get to work first i'm going to show you how these two news web parts were configured this is the top most web part on the page employees coming to the site are necessarily going to see the content that's in it so the corporate communications team really wants to curate the news posts that show up here and they do that by leveraging our news organization capability that you can see right here that allows you to pin specific news posts to specific locations in that web part and you can imagine somebody from corp comms comes in every week and updates the content that's in here below we have another news webpart now this as you can see is pulling news from five important sites in the intranet and if i scroll down you'll notice that this news web part has audience targeting enabled this means that when an employee is looking at this news webpart they see news that is targeted to the groups that they are a part of and these groups could be their geographic location their level at the company their business role etc etc i'll also take this opportunity to point out the visual distinction between this news post from leadership connection and this news post from the consumer retail site now the difference arises because the leadership connection news post is an organization news post let me explain news in your organization can come from many different sites but an admin is able to specify that some of those sites are authoritative sources of news when they do so when a news post is published to one of these sites it is distributed broadly to all employees in their sharepoint start page and the news feed of their sharepoint mobile apps and no matter where that news post rolls up in the start page in the mobile app in any news web part across the internet just like here it has that special visual treatment behind the site name that indicates that it is authoritative news okay now to continue building out this page i'm going to add a three column section and here the corporate communications team wants to highlight three resources for employees and we want to make it really visual so i'm going to use images for each of those resources these images are in my file browser and you can see i can just drag and drop them easily to the page and as i drag and drop them these images generate image webparts for themselves now for each of these images i am going to go in and turn the overlay text on so this is for the benefits porter and you can imagine i can put in a link to the portal here but for now i'm just going to say test this is for training and finally this is for hr web and because i want each of these resources to really stand out and i want this section to visually break up the page i'm going to give it a section background so you can see i have a number of options here currently we have none selected but you can also select neutral soft or strong i'm going to go with soft and these colors by the way are derived from the site theme so keep that in mind because we'll come back to site theme in just a few minutes next i'm going to add a one-third right column section and on the left i want to add a yammer webpart so to do that i can just click on plus this pulls up our web part picker and as i scroll down you can see that sharepoint provides over 40 out of the box web parts and if you want you can also create custom web parts for your organization that can show up in here so i'm just going to search for yammer and select conversations and we're going to configure this web part to connect to the leadership connection community in yammer this is a place where there is great two-way conversation between employees and their leadership people ask questions respond to polls get involved in ongoing conversations and more let's limit this to four conversations the yammer conversations web part is an excellent web part to add to your intranet landing because it creates conversation on the landing and really helps drive up that employee engagement factor also notice that the look in this web part is exactly aligned with the new and improved yammer in this remaining column we are going to add the twitter webpart and we'll point it to controso's official handle which is at contoso inc and actually let's pull up the six most recent tweets from the company great now contoso also has a hackathon that's coming up and we want all employees to sign up so we're going to add a call to action here so i add another column another section here and i can go in and pull up the call to action web part and now let's configure it so first i'm going to say contoso hackathon is the place to be and we want to give it a background image so let's go in there and click on change now i do want you to notice that sharepoint provides a number of different sources from where you can pull your images in fact a big advantages of advantage of using sharepoint is that you can tell your story in a really visual way you can get your images from stock images microsoft has recently acquired thousands of beautiful high quality images for you to use across your internet entirely royalty free you can use web search of course you can have organization assets these are approved assets from your organization that authors of sites and pages and news can use you can upload from one drive from the site assets from your computer or from a link so we'll go with stock images today because this is a hackathon i'm going to search for a computer number of great images i like this abstract one so let's select that and i'm also going to give it a button label let's say sign up great so this is shaping up really well but when we talk to customers about what makes for a truly compelling intranet landing we learned that in addition to news and resources and conversations and some content even audience targeted to groups of employees customers really want content that's highly personalized to every employee also on their intranet lending so what we've built here so far is a wii space content that's relevant for all employees and what we are now going to build on here is a me space content that's highly relevant to every individual employee so your internet landing has this great interplay between a wee space and a me space and to do that i'm excited to show you a new design element in sharepoint called the vertical section so i can go here and say add section and i have the option to add a vertical section now this adds a column that spans the entire length of the page as you can see here and we're actually going to go ahead and give it a section background so it visually stands out from the page and now let's add some personalized web parts here the first one we'll add is news now notice this is the third news web byte i'm adding on this page but news is such a versatile web part that you can configure it in different ways to serve different purposes so in this case this is going to be a my news web part and i'm going to configure it to pull the recommended news for the current user and let's actually show eight news posts next i'm going to add the sites webpart and we're going to configure this some more as well let's make it a grid layout and also let's show the frequent sites for the current user so your intranet of course is made up of many different sites and it's be fitting then that the landing is sort of the gateway into the rest of the sites that you frequent and i'm going to give this a header my sites great i'm going to add another web part here which is saved for later this pulls in content from across the intranet that i have personally saved for later for myself and finally here i'm going to add the my recent documents web part and we'll configure that a little bit as well by showing eight of the most recent documents in it in the vertical section you can also add the my feed web part which pulls in your content from across microsoft's apps and experiences helping you sift through the clutter and showcasing news and documents that should be top of mind for you well at this point i'm really happy with the body of this landing so i'm going to go ahead and publish great let's now spend a little bit of time talking about navigation as you can see i've already gone ahead and set this up it was super easy to do but frankly no fun watching me do it but i will go into edit mode to show you that you have the option here to enable audience targeting for navigation now when you do that for any of these navigation nodes you can specify audiences that it is relevant for thus creating a really personalized navigation experience on the landing for a site like the landing site branding is also really important and now let me show you how you can really make the look and feel of this site your own so when you go to the gear you see here you have the option to change the look and there's a number of things you can change about this site let's take a look at each of these the first is theme so sharepoint has nine out of the box themes but for a site like the landing you might actually want to have a custom company theme and that's super easy to do with the fluent ui theme designer so we're in this tool now i won't spend a whole lot of time here but let me give you a quick overview here you provide the three top line colors this results in a few derived colors each of which you can individually update as well and up here you can see the impact of that theme in various on various elements in sharepoint now what i love the most about this tool is that front and center you have this section that tells you about the accessibility status of that theme when you're finally ready you can go ahead and export that theme into sharepoint using any one of these three handy methods so back to the landing you can see that contoso electronics has already imported a number of custom themes i'm going to go ahead and select the controlso corporate theme for this site okay next is the header so here we have the standard header if you'd like to save space you can use the compact header as well we go back to standard you can give it a site logo including a non-square logo which is exactly what we're going to do now and that looks great and then finally you can give it a background emphasis that's derived from the theme so i'm going to go ahead and give it the strong emphasis next we have navigation so here we have mega menu navigation selected and this sort of helps your employees see the full information architecture of your intranet at a glance but if you'd like a more click-through experience you can select cascading as well and that is what it looks like i'm going to go back to mega menu for our landing and then finally we also have a footer so let me scroll down to show it to you by the way as i was scrolling notice that the header became shy to save you space on the page now here is our footer we have an extended footer here but if you just want to have a single layer of navigation you can have a simple footer as well you can give it a logo a display name and a emphasis and of course if you don't want a footer you can toggle this off but we'd like to keep ours in so i can go ahead now and save the theme so this i think is a really compelling intranet landing but there's one thing you can do to make it even better and that is by making this site a sharepoint home site so what is a sharepoint home site a home site is a communication site on which you have run a powershell command to make it particularly useful as the landing for your intranet so in other words a home site is a communication site with some added superpowers let's take a quick look at what these superpowers are the first is searched so when you designate a communication site to be a home site the search scope expands to the entire organization now when an employee comes to the home site and searches for something they get results from the entire tenant which is exactly what they'd expect from the landing to their intranet and when i click in the search bar i get great zero query suggestions from sites i frequent files i've recently used people i work with and news that's relevant to me second the home site is automatically designated a source of organization news as a reminder this means that when a news post is published directly to the home site it is distributed broadly across the internet to all employees and no matter where that news post rolls up it has that special visual treatment just like the one you see here with behind the site name that indicates that this is authoritative news the home site also has easy access in the sharepoint mobile app when you launch the app there is an icon that takes you directly to the home site thus helping employees stay connected with the organization even as they are on the go and speaking of easy access there is one thing that we highly recommend you do which is configure a branded link in the suite nav like this one that points directly to the home site now this is quite easy to do you can just go to the admin center and search for custom theme and here you have the option to provide the image provide a link to the site that that image points to and after you've hit save no matter where an employee is whether they are in sharepoint in outlook in onedrive and any one of the office apps they can just click on that link and be brought right back to the intranet landing be grounded and situated in this top level intranet experience if you'd like to learn more about information architecture governance or even how to train folks in your organization about sharepoint you can go to docs.microsoft.com sharepoint to learn more

Channel: Microsoft 365 Community

Views: 3,276

Rating: 5 out of 5

Keywords: SharePoint, PnP, Dev, community, open-source, Microsoft, Teams

Id: R8ECur2hOqc

Length: 17min 21sec (1041 seconds)

Published: Thu Nov 05 2020