SharePoint 2016 Branding Revisit

With SharePoint 2016 looming in the horizon, it’s time to revisit some of the branding concepts in SharePoint. I describe SharePoint branding as the composite creation of an identity that expects an emotional reaction from its consumer. But wait, in SharePoint circle’s the word branding has been flagged as a dirty word, so therefore going forward I will be calling it “UI Style”. In my experience with SharePoint UI Style solutions, they are mostly composed of custom master pages, custom page layouts, tons of JavaScript, CSS and other UI assets. These UI Style solutions can bring state of the art site designs into SharePoint. However, they are custom and will require upkeep with each new version of SharePoint and in some cases completely re-built. So if custom UI Solutions are not future proof, what can you do about it? We will discuss this and other UI Style topics below.
SharePoint UI Style Evolution
First let’s take a look at the evolution of SharePoint UI Style from 2010 to 2016.
SharePoint_UI_Style_Evolution
Starting in SharePoint 2010, we can see the UI Style evolution with the introduction of the Ribbon menu, in 2014 we were introduced to the Seattle theme which was focused on removing chrome from the UI and now in 2016 we see the introduction of the “App Launcher” aka the “Waffle”. At this point the industry has a fairly good understanding of SharePoint UI Style designs and solutions. Here are the basics, the SharePoint UI Style is built on top of master pages, which include the outer layer composed of the header and footer. This is where you put your company logo, banner images and where the navigation control is displayed in your site. The center or what I call the “White Space” is where page layouts are loaded. Page Layouts are your home page, news articles, blog post and others. Note: that the concept of master pages and page layouts has been around since Asp.Net 2.0 and is stable. All other elements are called Web Parts, which gives you functionality like viewing documents, calendar, news feed, photo gallery and much more. While the out-of-the-box UI Style provides basic look and feel, if you want to change it you can either extend it or customize it, so let’s take a look at what a SharePoint Custom UI Style solution is.
Custom UI Style Solutions
Custom UI style solutions are normally built using this designer tools like Dreamweaver, Visual Studio and SharePoint Designer. Normally a designer would generate all of the images, CSS and HTML pages and then a SharePoint developer will take them and incorporate them into a SharePoint Visual Studio Project. Developers would then build a Visual Studio Custom UI Style solution that generates a file with the extension of WSP or Windows SharePoint. This file contains a CAB file with all of the DLLs, XML, CSS, XLT, JavaScript, Aspx and HTML files. Below is a very simple SharePoint Visual Studio project that contains master pages, page layout, CSS and JavaScript files. It is important to note, that you can build a custom UI solution without Visual Studio, you can perform the same action from SharePoint designer and Dreamweaver. Having said that, for large and complex UI Style Solutions you will benefit from the Visual Studio version control, and intellisense.

SharePoint UI <a href=SharePoint UI Style Custom Solution

Master Pages
When deciding on building a custom UI Style solution it is important to understand the impact specially when design custom Master pages. So let’s take a look at the master pages from 2010 to 2016, notice that the master page is are referencing specific versions of SharePoint libraries. When a new version of SharePoint arrives, these references will need to be updated. Which means that it requires you to re-deploy your solution and retest your site. For a smaller SharePoint implementation this should be no issue, however for larger and complex UI Style solutions this can be an expensive endeavor. So think and plan carefully when developing custom UI Style solutions.

Master Page References to SharePoint Version
On the bright Side
If you determine that you must have a custom UI Style Solution, then I encourage you to contact us or search the MS Partner Network and select a Partner nearest you for assistance. Also you can purchase a prebuilt UI Style solutions online from sites like bindtuning.com, pixelmill.com, topsharepoint.com and many others. If you like do it yourself, then I suggest you start at responsivesharepoint.codeplex.com it contains a simple to understand UI Style solution for SharePoint utilizing the latest bootstrap3 framework. I will warn you, these and most commercial pre-built UI Style Solution focus on Publishing Site and not Team Site.
Future Proof UI Style Solution
That’s right there is an alternative, a more future proof UI Style solution for SharePoint. It is nothing new, it has been recommended by Microsoft since SharePoint 2010 and with introduction off SharePoint 2016, it is even more important to a brace it. Let’s start with SharePoint as a service and not a platform. Choosing between the two can determine how future proof your solution is, if you decide to use SharePoint a service then you have full control of the UI Style design and implementation. Your site can be build using any Web technology including Asp.Net MVC, while SharePoint would provide all the services need to run by the site. When SharePoint is the platform, then you have less options for your UI Style solution. Having said that, recently Microsoft Pattern and Practices have release new tools to improve how you modify/extend the out of the box SharePoint UI Style. You can find more information on the tools at http://dev.office.com/patterns-and-practices. Below we will go over two examples how you can customize your SharePoint UI Style with no custom master pages or Visual Studio.
Themes
First let’s start with themes. Themes have been around SharePoint since 2010, they allow you to style elements without modifying master pages or page layouts. They get overlook by many developers but with patience and good CCS skills, you can create a theme that will operate in SharePoint with no custom development. Microsoft provides a SharePoint Color Palette Tool which allows you to set the background image, the font color, navigation background color, header footer and others elements. The tool is easy to use, and after you create your new theme you simply upload it into SharePoint and set your site to the new Theme as shown below. For more information on how to apply a new theme feel free to contact us.
SharePoint UI Style Theme
Modern Responsive UI
Modern web sites are now expected to support a variety of screen resolutions. Your SharePoint site is no different, it must have some level of support and one way is via Office PnP SharePoint UI Responsive solution. Recently Microsoft Pattern and Practice release a SP Responsive UI using a pure JavaScript Solution via there Pattern and Practice group. This SharePoint UI Responsive solution does not include any custom Master Pages or modified Page Layouts. It is simple JavaScript and CSS solution to Responsive UI solution prevents you from having conflicts when migrating to new version of SharePoint since it does not edit the Master Page. Another positive to this approach is that it works on Team Site while most Responsive solution focus on Publishing Sites.
You would enable the SharePoint UI Responsive solution into your Team Site using PowerShell and not Visual Studio as shown below.
SharePoint_UI_Style_Enabling_Responsive_Solution

The result is a Team Site which response to the screen resolution just as customers expect.

TeamSite SiteContent Responsive TeamSite Responsive
Team Site Responsive Site Content Responsive

This SharePoint UI Responsive solution is a great start for your development of a UI Style solution that does not have any dependency on the SharePoint infrastructure. With that and some create CSS design you can build any UI Style that means your need. Next step you would need to pick the right UI Style.

UI Style Conclusion
So far we talked about the evolution of SharePoint UI Style, how they are build and alternative future proof solutions. Now it is important to pick the right UI Style. Let’s first start by understanding what SharePoint means to you and your organization, what are the business use cases, and what is the organization strategy for the next 5 to 10 years. That’s right your organization vision and goals should drive the SharePoint UI Style and not the other way around. If your organization is an insurance company and you want to provide better care for your patience or if you are a none for profit organization and your SharePoint is focus on, bring awareness and driving donations. Each vision will result in a completely different UI Style with different implication for SharePoint. Perhaps one implementation displays the patient schedule, shows alerts, news announcements or videos. Or Perhaps the site, simply shares information on the latest donation events, and how visitors can make pledges. The bottom line is the right UI Style will help improve sales by keeping visitor engage when it clearing reflects your organization culture, vision and strategy. So how do you get there, start by reaching out to us and we will get you started on the right path.

Leave a Reply

Your email address will not be published. Required fields are marked *

ak5v aqkTAo p

Please type the text above: