9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

Randy Drisgill
SharePoint Branding & Design About Me Contact Me

SharePoint Top 6 New Features for Designers in SharePoint 2013

 

« SharePoint Saturday Orlando Registrations are Open

SharePoint 2013 Starter Master Pages – Beta Release »
Blog Search

Top 6 New Features for Designers in Recent Posts

SharePoint 2013 12 ›   Starter Master Pages – SharePoint 2016

›   SharePoint Online Doc Lib UI Update April

17 Jul 2012   | SharePoint 2016 – Impact on Custom Branding?

As you probably know the SharePoint 2013 Public Preview was released this week and I’m ›   A Look at the PnP Responsive UI Package
sure all the designers out there want to know what’s new for branding? Well, you will be for SharePoint On‐Premises
interested to know that making SharePoint design easier was a key goal for this version of
SharePoint. Does that mean that all my professional branding peers are out of work now? ›   What’s new for UI in the SharePoint Server
Let’s check out what’s new and then revisit that question. Be sure to scan down the page, I 2016 IT Preview
save the most interesting for last ﴾sort of like a David Letterman Top 10 list!﴿.
›   Results: SharePoint Branding /
6 – Managed Navigation – SharePoint navigation now has two different options: the old Customization Survey
way, now known as Structured Navigation and the new way which is known as Managed
Navigation.

http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 1/12
9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

This new method of navigation uses a Managed Metadata term set to populate the
navigation control with items. The new method is more flexible and allows for some
interesting new uses as you will see including allowing you to make friendly URL’s. Another
interesting side benefit of Managed Navigation is you get a nifty Edit button next to the
both the Global and Current navigation that lets you add, remove, and edit navigation
from anywhere without visiting the Navigation option in the Site Settings.

 Subscribe in a reader

Side Note: Styling this edit mode is going to be a bit of a pain on sites with highly stylized
navigation… but that’s a good topic for a future post!  Follow me on Twitter

5 – Composed Looks – I’m thinking of Composed Looks as evolution of SharePoint 2010

themes… I imagine the product team was trying to make something a little closer to how
Word Press themes work﴾though without changing the underlying SharePoint My Books
technologies that make up the look and feel﴿.

http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 2/12
9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

M T W T F S S

Archives
Select Month

JULY 2012
M T W T F S S
  1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
The first big difference is you don’t make the themes with the Office client anymore.
30 31  
Instead you configure elements and add them to a Composed Looks Gallery ﴾Site Settings
> Composed looks﴿. The composed look consists of several things: « May   Oct »

Name – Fairly obviously the name of the Composed Look

Master Page – To arrange the elements of the page and do other master page‐y stuff Professio…
Theme URL – Points to an XML file that defines all of the colors you want to apply to Like Page
different CSS. This works similarly to 2010 except you make your own theme id’s
instead of using Accent1, Accent2, etc.
Image URL – Points to an image that can be used to replace a background image in
the CSS ﴾I know… sweet… a background image!﴿
Font Scheme URL – Points to an XML file which defines the fonts that can be applied
to CSS
Meta
Display Order – Helps you arrange the available composed looks
›  Log in ›  Entries RSS

http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 3/12
9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

The idea here is that you put all this together with a preview file and you can provide ›  Comments RSS ›  WordPress.org
configurable “composed looks” for your clients and users to select from and configure to
their liking. You can apply Composed looks from Site Settings > Change the look.

4 – Device Channels – Don’t be fooled by the name, this has nothing to do with channels
as you may know them… we are talking mobile / device specific page rendering here!

You setup Device Channels from Site Settings > Device channels, which allows you to give
the channel an Alias ﴾for referencing in the UI and in code﴿ and then “Device Inclusion
Rules”. These rules are substrings that SharePoint will look for in the browser’s User Agent.
You can have certain master pages apply to certain device channels ﴾for example: have a
specific master page just for iPhones or Surface Tablets﴿. This is a pretty cool feature, you
can even use the Alias in your master page and page layouts to have different individual
pieces of the page render differently based on the channel. It’s kind of like Media Queries
in CSS3 only Device Channels don’t look at device capabilities ﴾like width and height﴿ they
look for keywords in the browser’s User Agent.

3 – Web Content Management enhancements – There are probably several

enhancements that are new to SharePoint 2013 WCM but the two that stand out to me
are: Content Search Web Part and Catalogs.

Content Search Web Part – A new Web Part that supersedes the old Content Query
Web Part. As the name implies the new Web Part uses the search functionality in 2013
to query and filter information from around SharePoint. Unlike the CQWP, the Content
Search Web Part is styled with HTML and JavaScript instead of XSLT.
Catalogs – In SharePoint 2013 WCM you can create a catalog of products and use this
catalog to create a robust product web site without creating pages for every item.
Imagine having product categories, sub categories, and product detail pages all
centrally managed!

I could probably fill an entire blog post on the new WCM features, but I’ll let someone else

take that charge

2 – No more SharePoint Designer for creating SharePoint branding! – Sure SharePoint

Designer was updated for 2013 but you don’t have to use it to edit your branding
anymore ﴾I’m thinking the name SharePoint “Designer” is no longer appropriate!﴿. In fact
http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 4/12
9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

you can use any tool you want, including Visual Studio, Notepad++, Dreamweaver…
ANYTHING. This feature works because the Master Page Gallery was updated to work
seamlessly over a WebDAV mapping. So now, in Windows you can map a network drive
directly to your Master Page Gallery and then edit away. Truth be told you could do this to
some degree in previous versions of SharePoint, but back then Microsoft locked
SharePoint from allowing you to work with master pages and page layouts.

In 2013 the Master Page Gallery is the place where you can put ALL your branding assets
including CSS and images. This is a pretty interesting change that takes a little getting
used to… but it really is a lot nicer than being forced to use SharePoint Designer or a
plugin to Visual Studio to work with your branding files directly on the Site Collection.

Note: I’ve noticed that sometimes WebDAV can be slow. There is a strange but easy fix to
this, see the following post: http://oddballupdate.com/2009/12/18/fix‐slow‐webdav‐
performance‐in‐windows‐7/ After making this change my mapped drive to SharePoint is
super‐fast!

1 – Design Manager – I saved the most interesting for last! This new feature is so
important that Microsoft even added it as a top level selection under Site Actions in
Publishing sites! It includes links to a lot of common design tasks including some of the
previous topics I’ve discussed but it also includes the following new features:

http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 5/12
9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

Create and Edit Master Pages – This is probably the biggest change for SharePoint
branding folks. From here you can create a minimal master page or convert an existing
HTML design. Did that get your attention? Yes, you can actually add an HTML design
with CSS and images to the Master Page Gallery and then use this feature to convert it
to a functioning master page. You also get a preview of the new master page and a
snippet gallery that allows you to copy and paste SharePoint functionality ﴾like
navigation, search, web parts, etc.﴿ right into your HTML based design.

http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 6/12
9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

You no longer have to edit .master files; you can continue editing your HTML file in
whatever editor you like and every time you hit save SharePoint will notice the changes
and update the corresponding .master file.

Does this mean that SharePoint branding is so easy now that anyone can do it? Yes and
no, if you need to make a branded SharePoint site you probably can do it all from the
Design Manager with converting an HTML design and using snippets. However to make a
fully branded portal or web site you will still need to understand a lot of SharePoint CSS
and you still need to understand how Content Placeholders and a variety of other
SharePoint specific technology works.

http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 7/12
9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

I’ll be very curious to see how the SharePoint branding community reacts to this feature
and see where we land with what newcomers can do with SharePoint branding on their
own. I tend to think the Design Manager is a great starting point that changes things so
that there is no middle level effort branding… either there is branding that anyone can do
with the Design Manager or there is advanced branding that you need to understand the
underpinnings in order to make things work the way you want.

Create and Edit Page Layouts – When you create a page layout from the Design
Manager you get an HTML file that contains a minimal page layout and all the fields
that come from the content type that you base the page layout on. When you make
changes to this HTML file the corresponding .ASPX page layout is updated behind the
scenes
Create a Design Package – Export your entire design from one place to another ﴾even
a completely different server﴿. You can then import the design package to another site
collection or server from Site Actions > Import Design Package.

Well, that’s the end of the Top 6 list. I invite you to discuss these features as you start to
play with them. Do you think the Design Manager is an end‐to‐end branding solution or
are is it more like a really great kick start to the SharePoint branding process? Let me know
in the comments!

You can bet I’ll be back with more SharePoint 2013 content in the near future but I wanted
to get this list up now that the public beta was released.

For more information about some of these features, check out Microsoft’s article:
What’s new in web content management for SharePoint 2013 Preview publishing
sites http://technet.microsoft.com/en‐
us/library/jj219688﴾v=office.15﴿#BKMK_contentsearch

12 thoughts on “Top 6 New Features for Designers in SharePoint

2013”

http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html Jul 17, 2012 3:44 pm 8/12

9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill
Jul 17, 2012 3:44 pm
Erik Swenson

Reply Randy, Thanks for putting this together so quickly. I think as SharePoint
Designers this is one of the most significant changes since 2007 when
we first got master pages and page layouts. Keep up the posts! I will be
adding some posts shortly as well.

Jul 18, 2012 12:39 am

Fadi Ahmad Abdulwahab

Reply Thanks for this nice post , these features eliminate the gap between the
developer and designer.

Jul 18, 2012 11:19 am

Erica Toelle

Reply Thanks, Randy!

Jul 18, 2012 11:39 am

Matt Huber

Reply Great post, thanks Randy!

Jul 18, 2012 4:54 pm

Steven Fowler

Reply These new capabilities will accelerate branding efforts for organizations
but will not replace branding experts.

Jul 21, 2012 2:57 pm

Tracey Nolte
http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 9/12
9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

Reply Great post Randy!

Jul 22, 2012 1:28 pm

Lee Surgeoner

Reply Thanks Randy

Another game changer from the guys at Microsoft. It will be interesting

to see how the use of SharePoint for front facing sites grows now any
development tools can be used.

Jul 23, 2012 1:18 am

ashrafhossain

Reply Nice post, with design manager it will be more easy to brand
sharepoint sites. thanks

Jul 23, 2012 6:40 am

Talib Ali Khan

Reply For sure , it’s gonna help a lot of folks out there !
Thank you !

Jul 24, 2012 3:51 am

Youdhbir Singh

Reply Thanks for sharing your analysis Randy. Great Post!

Jul 24, 2012 7:10 am

Moutasem al‐awa

Reply
http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 10/12
9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

Thanks for sharing all nice topics. I am really inlove with this new
version and excited about the lovely UI. Can’t wait for my first 2013
implementation

Sep 11, 2012 2:35 am

Salman Hashimi

Reply Hello Randy thanks for sharing.

Quick question.. Can we Import pages from SP2010 to SP2013 ??
When I tried to do that got the following error message..
“The version of the package 14.0.0.0 is different from the current
version this program supports,15.0.0.0 at line:1 char:1″

Any suggestions???

Leave a Reply
  Author ﴾required﴿

  Email ﴾will not be published﴿﴾required﴿

  Website

b i link b­quote code close tags

http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 11/12
9/24/2016 Top 6 New Features for Designers in SharePoint 2013 ← Randy Drisgill

Post Comment

« SharePoint Saturday Orlando Registrations are Open

SharePoint 2013 Starter Master Pages – Beta Release »

© 2016 Randy Drisgill — All Rights Reserved.

http://blog.drisgill.com/2012/07/top­6­new­features­for­designers­in.html 12/12