Top tips for SharePoint branding

In the wonderful world of SharePoint, people often ask me for advice on changing the look and feel of the user interface. Of course, one of the great features in the current version of SharePoint is the Design Manager option that allows freedom to create a totally new interface design. For most clients, this is a must as a clean, responsive interface that brings together their corporate branding is often the best way for a SharePoint project to gain traction and really drive a high rate of user adoption.

And so, I bring you these ‘Top tips for SharePoint branding’.

1. Technical provision

As I’m sure that some of you are aware, undertaking development on SharePoint is no small venture and having a good understanding of SharePoint is essential to successfully complete your bespoke SharePoint branding project. Additionally a good understanding of general web design and HTML, CSS and Javascript are also well recommended.

2. Design considerations

One of the key requirements we find in demand in the current market place is responsive design. As the proliferation of different devices with different form factors and screen resolutions continues to grow, responsive design is critical to the success of any SharePoint branding project. When considering your design, three key points: Bootstrap, Bootstrap, Bootstrap! For anyone who has used the bootstrap framework for any kind of web design previously, you will be aware of the frameworks flexibility and core design principles that can provide a huge kick-start to your SharePoint branding design. For anyone coming to it for the first time, it’s well documented and simple to work with. Using bootstrap in SharePoint has provided us with some fantastic results, one thing to be aware of is potential clashes with SharePoint CSS classes.

3. Homepage content

Planning the content for the homepage is often one of the more difficult aspects to achieve, not from a technical perspective, but ensuring that the relevant people within the company have been consulted and their relevant input assessed and used as appropriate. Everyone has an idea of what they want to see on the homepage of any SharePoint Intranet, App, or other project but here are a couple of simple rules to keep in mind. Keep it simple. Bear in mind that this is an overview of content, don’t clutter the screen with too much information. My top tip for homepage content and corporate branding is to ensure that you have a good mix of corporate information bringing the essential updates/comms etc, as well as good use of personalised content for the user such as recent documents, current tasks and other targeted content.

4. Design files

Once you have put the hard work and effort into creating your nice responsive web design and it works wonderfully in the browser from your masterfully crafted HTML, CSS and Javascript, it’s time to begin moving your design into the realm of SharePoint. The first step is ensuring that your assets are correctly uploaded. Step 3 of the design manager will provide you with a hyperlink to your masterpage gallery to allow you to upload and transfer your assets to SharePoint. A key tip here is to ensure that you keep any file and folder structure as is to preserve any links to CSS and Javascript used in your design.

5. Convert your design to a SharePoint Masterpage

Once you have uploaded your assets which should include your html file, the next step is to convert this into a SharePoint Masterpage. This can be done from step 4 in Design Manager. Simply select the option to convert a html file to a SharePoint master page and browse and select your uploaded html from above. This process will automatically generate an associated ASPX page that will be bonded to your original design. This gives the flexibility to edit only the html file and let SharePoint take care of the rest. Be sure at this stage to remove any content from your design and strip it down to the required essentials for the masterpage. As part of this process, I recommend ensuring that you use the Snippet Gallery for key elements such as Search that you will keep on every page of your design.

6. Create required page layouts

Once you have a working masterpage, you need to ensure that your design also incorporates relevant page layouts for your solution. One of the key parts of the branding / design process is ensuring that your business users have provided input and been part of the wire-framing or other prototype techniques used during the early stages of design. Creating the right page layouts is often a critical success factor for your SharePoint branding project as this will not only ensure that content conforms to the design but in addition contributes to the user experience when selecting relevant layouts. This is achieved from step 6 in Design manager. Select the option to create a new Page Layout and ensure that you select your newly established masterpage. Similar to the above process, this will create a html file and bonded ASPX file allowing you to easily manipulate the design. The key part here is also the use of the snippet gallery and ensuring that you create Web Part Zones as relevant to allow users to create and manage their content once the design is published. A key pitfall here to avoid is that when inserting multiple Web Part Zones into your page layout design, ensure that you re-select the Web Part Zone option to avoid inserting code containing the same ID as this will lead to problems when publishing your design.

7. Some final points

Once you have completed your page layouts, be sure to thoroughly test them by adding the required webparts to pages and ensuring that they conform to the design. One of the great reasons for using bootstrap is that you will find your design is fully responsive for all pages created even if content is driven by usual troublesome webparts that can cause design headache’s such as embedded Excel services etc. One final pitfall to ensure you avoid is to check, re-check and then check again to ensure that all of your design files and assets are checked in and published to prevent problems with users seeing the final design.

And there you have it, some top tips to ensure that you achieve bespoke SharePoint branding simply and using the power of SharePoint’s features to drive and deliver customised portals and applications, fully responsive to any screen size.