When news first started trickling out about the new Design Manager in SharePoint 2013, for most it generated more questions than answers. Would standard Web designers be able to brand for SharePoint now without any knowledge of SharePoint? For that matter, would end users be able to create SharePoint branding through a simple no-code interface? What did all this mean for the specialized SharePoint brander?
Now that SharePoint 2013 has been out in production for a little while, we have had a chance to kick the tires on the Design Manager and learn about what it can do and can’t do, what it’s really good at and where it falls short. Still, though, the question I hear time and time again when anyone starts a SharePoint 2013 branding project is, “Should I use the Design Manager, or can I do it the way I am used to with SharePoint 2010?” In this article, I will try to answer that question, and lay out the pros and cons of both choices.
In SharePoint 2010, the most popular way to do a SharePoint 2010 branding project was to download a starter master page (such as the one created by Randy Drisgill) and create a design that was still fully functional in SharePoint. A separate style sheet to be used by the starter master page, any assets such as images or scripts would be uploaded to the Style Library and, if need be, custom page layouts were created. At this point, everything would be packaged as a solution in Visual Studio, and the .wsp would be deployed to the SharePoint farm.
Of course, for smaller branding projects, there were other valuable options such as themes, SharePoint Designer, and alternative CSS, but for any major branding project that would be used on multiple site collections, the starter master page method as described above became the de facto standard.
Using a starter master page
The good news in SharePoint 2013 is that, even with the Design Manager, you can still create a SharePoint 2013 design the same way you did in SharePoint 2010, and everything will function just the same. In fact, Randy Drisgill already has a SharePoint 2013 starter master page available for download. So if you are more comfortable with doing things the SharePoint 2010 way, then by all means continue to do so. You will still need to learn about the new branding techniques in SharePoint 2013 like composed looks, preview files, device channels and display templates, but you are by no means forced to create your SharePoint 2013 master pages from the Design Manager.
But should you decide to stay the course and do your branding like you have always done, one change I recommend you make is embracing mapping your master page gallery to a network drive and working from there instead of using SharePoint Designer like you may be used to. By enabling the Design Manager on a site collection, you open up the ability to map a network drive to the master page gallery. From here you can upload files and edit your master pages, page layouts and style sheets with the text editor of your choice instead of being limited to the text editor in SharePoint Designer. Also, keeping all your branding assets in the master page gallery instead of spread out between the master page gallery and the style library is a much cleaner approach.
The one “gotcha” is that, when just using a starter master page that is not associated with an HTML file like with the Design Manager, you will not be able to use Adobe Dreamweaver to work with your master pages.
Using the Design Manager
The Design Manager most definitely addressed the issue it was trying to fix; that is, not everyone is comfortable creating SharePoint brands from a starter master page. Designers that come from a more traditional Web-design background often get frustrated that SharePoint doesn’t behave like other content management systems, and some may not be aware of things like content placeholders that are required in a master page for SharePoint to function.
The Design Manager opens the door for more designers that aren’t as familiar with SharePoint to still be able to create SharePoint brands. The idea is you can create a mockup of your site in standard HTML and CSS and then upload the mockup to the Design Manager. At this point, the Design Manager will take the mockup and create a fully functional master page using your design.
Once finished, you have a master page that SharePoint uses but also an HTML file that is associated with the master page that you use to make edits to the site. You never have to even open up the master page file, and better yet, you can use programs like Adobe Dreamweaver to edit the associated HTML file. When you make an edit to the HTML file, SharePoint will automatically sync that same change to the SharePoint master page.
However, make no mistake: Design Manager does not remove the need to know SharePoint and how branding works with it. Once you have your converted master page, it will for the most part be static with no functionality. You must add this functionality using the Snippet Gallery, and while the Snippet Gallery does make the process easier than working with content placeholders, a basic understanding of what you are adding, where you adding it, and why is still needed.
The best piece of advice I can give you if you use the Design Manager for your branding projects is to build your HTML mockups around how SharePoint works. What I mean by this is to create a laid-out page structure around what will be required for a fully functional SharePoint site. Create divs for where your search box will be, your navigation, and your actual page content. This will make life easier when you add your snippets as you will know exactly where these snippets should be placed. Also realize that once you have an associated HTML file, the branding work is just starting. You will still need to move, add and cut code to have a functional SharePoint site.
Finally, when using the Design Manager, there are some caveats you should be aware of. First, accessing the Design Manager requires that you enable the publishing features on your site collection. So if you have SharePoint Foundation (or for some reason cannot enable the publishing features), you’re going to be forced to use SharePoint Designer 2013 for your branding. Also, be careful when using the Design Package feature. The idea behind Design Packages is a good one. It allows you to take your newly minted SharePoint brand and turn it into a .wsp that can be transferred anywhere without the need for Visual Studio.
However, there are some issues: The Design Manager was created around the idea that it would be used to brand the site the Design Manager is enabled on. So things like relative paths will not work with a design package unless you disassociate the HTML file from the master page prior to the packaging. There are duplication issues when you use a design package on a site that also has custom composed looks, and you can’t uninstall or deactivate a design package without causing problems to your site collection. Basically, while the Design Package feature is an interesting one, at this time it is no replacement for packaging up your branding solutions using Visual Studio.
As you can see, SharePoint 2013 has brought some huge improvements and new ideas to SharePoint 2013 branding. Still, this doesn’t mean you have to abandon all the branding methods you used in SharePoint 2010, and in all honesty, a combination of SharePoint 2010 branding techniques (along with using some of the new features in the Design Manager to make life easier) will most likely become the preferred method for SharePoint branders going forward.
Mark Watts is a SharePoint designer with Rackspace.