Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are a lot of changes in the design features in SharePoint 2013 that web designers have been asking for from the very beginning. So there's a lot here to engage your web designers. First, there is a new Design Manager that's used to create and edit master pages, and a task list that allows you to complete your site design. Now the Design Manager is only available on sites that are publishing sites or have publishing enabled. But, let's go take a look at it real quickly so you can see what it looks like.
Here we are in a publishing sandbox that I've set up just a site so we could see how these things work. And it assumes that you might be pointing someone towards this Design Manager who really doesn't even use SharePoint, but they're your Dreamweaver designer or they're your SharePoint designer. Whatever they're using, if they have an HTML editor, they're welcome to be in this space. It says, if you're not creating your own design, you can import a complete design package. And so, if you have a design package, you can just go grab it.
But if not, you can pick one of the preinstalled looks. We actually saw these much earlier. These are created page designs, created--what are called--composed looks. These aren't themes; they include pieces of what we would recognize as a theme. But, each of these is an entire package, and it's saved in the gallery. So, if you wished, if you were designing for a client for example some alternative sites, or if in your organization you have some people who need to approve a site design and you wanted to show them what it would look like, you can actually create these design packages and apply them to the site very, very easily simply using "Change the look." So, this is a gallery that you can add to.
We can edit the Display Templates. And here are templates for every single item we would want to display. We can edit the page layouts. Right now there are none, but we can create a new one. We can publish and apply our design and finally when we're all done, we can create a design package that does not include any of the built-in items, but will only include the new items that we created. So we can take that design package, and apply it to other site collections.
This is how the Design Manager works. So assuming that you're already using some other tool to create your HTML pages, this is a great place. But, even if you're not, you have the ability to start with what's here and to modify it. As I said, we have open branding in SharePoint 2013. You don't need to use SharePoint designer and you don't need to use Visual Studio, you can use whatever HTML editor you're comfortable with. We also have something new called Managed Navigation that's an interesting departure from the traditional navigation that we had.
The traditional navigation that we used to use is called Structured Navigation, so there was a navigational structure. With Managed Navigation, we are able to edit the links for navigation. Now, you can switch back to Structural Navigation in a site. One of the issues though is in Structural Navigation, a lot of not just designers but developers chose to build the navigation each time without any inheritance. Managed Navigation actually allows you to have a metadata set managing your navigation.
So, let's take a look at where we see that. For example, we can edit the links here because we're on a publishing site. Our ability to go in and to edit these links is part of our Managed Navigation. It's just a side benefit, but it's a good benefit, because it means that we can drag and drop links here if we're working in the browser on the desktop, we can add other links, we can test them, and we can build this navigation really on-the-fly. But, we can also use Managed Metadata to create the navigation which is how it's built to begin with.
Device Channels are mobile device-specific page renderings that you can create. You do these on a per site basis. So if we're looking at our site and we choose Site Settings--I am going to go ahead and leave this page because we didn't really have any changes here. And under Look and Feel, we'll choose Device Channels. And there's already a default channel, but you can create new device channels, and activate them, or inactivate them as you wish.
So, if we create a new item, we can give it a name, we can give it an alias so we can refer to it in code, and then we can build Inclusion Rules. And the Inclusion Rules allow us to be very specific. For example, with the Inclusion Rules, we can say that a specific Master Page is going to be used for iPhones, another Master Page is going to be used for the new Microsoft Surface Tablet, another one for iPads. So, this is one way to customize the user experience particularly for mobile users.
The other feature here is Composed Looks, and I talked about them a bit earlier but I'd like to drill down a little bit here because they replace the themes. You create composed looks under Site Settings. And the Composed Looks are those looks that we saw when we got to choose a look for our site. So they're composed of a Master Page, a theme URL for that small color palette, an image URL that points to a background image if you wish one, a font scheme URL that points to fonts, a name for all of these items, so you could call it "My composed look", or "Thanks for looking" or whatever.
And the display order is the display order of those items in the actual gallery that users see. So when a user chooses to change the look of a site and they go to "Change the look", the display order is the order in which these items are presented to them. So we're going to create a composed look, and save it under a name, and then we have the ability to use that anywhere in our site. It's a way to relatively quickly assemble different looks for our site.
So, if we go to Site Settings, under Web Designer Galleries, we saw the Master Pages here earlier; let's look at our composed looks. When we saw the composed looks earlier, each of them has a name below, but here are the attributes of each of these; the Master Page, the Theme, the Image, the Font Scheme, and the Display Order in which they will show up in the page. And notice that there's lots of room between these, so if you wanted to slide two or three things in between orange and sea monster, you can actually put nine of them in there.
If you wanted to create a new item, a new composed look, you'll need to know where you are keeping its Font, where you're keeping its Master Page, its Theme for colors, its Image for the background, and the Display Order that you want to provide. But, that's all the harder it is to create a Master Page. And as you might imagine, you could go in and say well, I really like to use the Seattle Master--which is the one we're using with this navigation set. I really prefer this set of theme colors.
Here is a background image I'd like, and so on. You can also simply create new Font Schemes, new Image URLs, and save them in the gallery. The Master Pages by the way, we have only two, Seattle and Oslo that determine the placement of placeholders on the screen. If you create another one, it needs to end in .master, but creating a new Master Page is a way to have a real different visual impact, because despite the different themes and images, there really are only the two masters that most sites will be using unless someone has taken the time to design them.
So, being able to create and store and apply composed looks and put them in a gallery for your users, as you might imagine, it's not that hard to go remove the composed looks you do not want to allow in your site collection. Here they all are. So if you wish to edit the list and remove some, this is how you customize the looks that are available to your users. With the combination of the new Design Manager, the ability to use any HTML editor we wish, Managed Navigation, and these composed looks, and the gallery of looks under Look and Feel or "Change the look of my site", it feels like we're beginning to assemble the toolkit that's necessary for designers to be able to implement powerful designs, and to be able to create them easily and model them for users.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 75401 Viewers
80 Video lessons · 130160 Viewers
52 Video lessons · 64266 Viewers
59 Video lessons · 50081 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.