Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Exploring new design features

From: SharePoint 2013 New Features

Video: Exploring new design features

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.

Exploring new design features

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.

These are the items that exist in it already. So, you could pick one of the preinstalled looks and work with it. Otherwise, you can go ahead and walk through all the steps of the Design Manager. You can manage different device channels, you can upload design files that you have including Master Pages, and CSS, and JavaScript files. You can edit Master Pages. There are two built-in. We saw those just a moment ago when we went to the preinstalled looks, is we had two different layout choices; one includes navigation on the left, the other includes top navigation.

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.

Show transcript

This video is part of

Image for SharePoint 2013 New Features
SharePoint 2013 New Features

28 video lessons · 10215 viewers

Gini Courter
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed SharePoint 2013 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.