Communication Sites and Modern UI

The recent release of the Communication Site is garnering some buzz lately. The new site template creates a site with new web parts designed to display content in a visually appealing way that is consistent with common, modern designs and is mobile ready. It does not automatically aggregate content like some of the search web parts do. This site should be managed by an individual who will update the links with featured content as needed. In this article, we’ll look at how to get started creating these sites, we’ll go over some of the gotchas, and we’ll walk through some of the settings for the Hero web part which is the focal point of these templates.

Getting Started:

I’m going to jump right in with the first “gotcha.” As of the time of this post, users who should be able to create the communications sites must have First Release access. It appears that they need to be specified as first release users and that granting everyone first release isn't enough. This may take a few hours to sync up before you'll have the ability to create a communication site. These settings can be set in the Admin Center under Settings > Organizational Profile > Release Preferences.

Create a Communication Site is simple:

  • Go to the SharePoint Homepage
  • Click the Create button
  • Choose Communication site


Next, you'll be asked to provide some details about the new site, including the site name, site description, and the type of design. You'll have a few designs to choose from.

There are 3 designs that are available, Topic, Showcase, and Blank. The Topic design comes with a responsive Hero web part that fills the width of the page. This web part should be used to display the most important content for your views and it comes with several layouts.

There are currently 5 tile views that determine how many tiles should be viewed at a time. As you can see in the image below, you can choose between 1-5 tiles. The tile view is used by default in the Topic design.

There are also layer views that provide content that is stacked vertically with content alternating from left to right. This view is used by default in the Showcase design.

I should mention that these designs are just starting points for your communication site. You can start with a Topic and configure it to function like a Showcase and you can make a Showcase function like a Topic. You can even start with a blank design and make it look like either one.

Going back to the Topic design, there are several other web parts setup on the page for you.

News

Events

Documents

Overall, the communication sites are great because they provide a modern design with little effort. I'm going to take this time to recreate the body of a page currently on the Anexinet web site, which was not created in SharePoint, and show how it can be easily recreated.

Here's the site that we're going to try to recreate using the Communication Site. These sites are new, and as I alluded to at the top, there are some limitations which we’ll see as we go through this.

Let's start with a blank Communication site

Click the Edit button on the right side of the page and add the Hero web part to the page.

Click the Edit icon on the web part. When the editor opens to the right, select "Layers" and choose "Three Layers"

Once you've made your selections, you can publish this page and it'll be ready to start displaying content. Content that we haven't created yet. To create content, click the New button on the left and select "Page".

Now, these aren't the old days of SharePoint where adding content to a page was unintuitive, cumbersome, and the results were usually ugly hack jobs. The modern UI has far superior editing capabilities. I won't go into the details since it's fairly simple to figure out, so instead, I'll show you that end result where I simply copied the text and provided an image. I could add a banner image if I choose, but for now, this is fine since our main purpose is to highlight the communication site.

Next, we'll go back to the communication site and tell the Hero web part to display our new page. Once you go back to the communication site, edit the page and click on the "Select link" button, in the Hero web part, where you want your content to appear. This will open a window where you can provide the link and I'll select the SharePoint page that I just created.

Once you click on Open, the web part will now have a reference to the page and it will try to pull in content to display. If I would've provided a header image, it would've appeared in the box on the left.

Now it's time to make it look presentable. The section that will display our content has a small pencil icon at the bottom, right hand side. When you click on the icon, the edit options for that item will appear. You can see the link to my SharePoint page is present and I can start providing details like a Title, Description, and more.

Here's the content that I'm filling in.

When I save my settings and publish my site, we get the following. This is the first release of these web parts so functionality is still limited but given the rapid release model that Microsoft follows, I wouldn't be surprised to see more functionality coming. For now, the text here doesn't allow me to change the font via the web part, and the image can't be resized.

Tip: You may have to play with the image's dimension. The image gets stretched vertically due to the following styles and as a result, my image gets cut off at the top.

.imageIsCover_16f289ab.imageIsPortrait_16f289ab {
width: 100%;
height: auto;
}

I'm going to add a simple Text web part next to add a heading.

Finally, I'm going to add the Highlighted Content web part to display some additional content at the bottom of the page. The web part is fairly straight forward, and I'm just configuring it to get any documents that are currently trending on any site. The Highlighted Content web part offers several options and I encourage you to play with it. It's a great way to surface content that is important to users without having to task someone with maintaining a list of "featured content".

So lets see what we've got! Overall, it's a good start if you want to display content in new ways. I mentioned above a few quirks like not being able to select which side you image/text appears in, not being able to format text, and the auto sizing of the image height. Hopefully, those features get tweaked for better control.

If you don't like this view, you can switch back over to the tiled view and the web part will format your content appropriately.

Remember, these web parts are meant to be a set of featured articles that you want to surface for the site visitors. If you're content is going to be more of a static site, like the Anexinet site that we modeled this demo from, then you have more flexibility using the standard Modern UI. Here's a sample of a Modern UI page fully developed. I simply created sections (rows) and columns and added my content where I wanted with the dimensions that I chose.

With the right images, you can create modern looking sites to communicate information throughout your organization… At the very least, you won’t be creating sites with huge calendars, announcements lists, and random “shared” documents!