SharePoint UI Style Evolution
First let’s take a look at the evolution of SharePoint UI Style from 2010 to 2016.
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
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.
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.
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.
Modern Responsive UI
You would enable the SharePoint UI Responsive solution into your Team Site using PowerShell and not Visual Studio as shown below.
The result is a Team Site which response to the screen resolution just as customers expect.
|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.