Responsive SharePoint Design and Branding

As more and more people use their mobile and tablet devices to access the Internet, and as Google has started to favor mobile and tablet friendly websites in their search ranking, the need for websites to be responsive is greater than ever. Keeping this fact in mind and considering the pivotal role SharePoint plays in an organization for communication and collaboration, the need for a responsive SharePoint experience becomes obvious.

To provide a responsive SharePoint experience, follow one of these two options:

1. Device Channels
2. Responsive Master Page

Device channels is a new feature in SharePoint 2013 which allows you to design different custom master pages for different devices. Although the Microsoft SharePoint team has provided this new feature to cater for the mobile experience in SharePoint, our firsthand experience is that the level of effort required in implementing and maintaining multiple custom master pages is far from ideal.

The other option is to have one custom master page which is responsive so that it adjusts itself according to the height, width and resolution of the device on which it is being viewed. This option is much more manageable in terms of both implementation and maintenance. It is highly recommended to use an existing responsive CSS framework such as Zurb Foundation, Skeleton, Twitter Bootstrap, etc.

It is important to accommodate the need for responsiveness as early in the design process as possible. This means that all wire frames and proceeding mockups should be prepared while keeping the desired responsive experience and chosen CSS framework in mind. Once that is done the final mockup should be sliced by implementing the chosen CSS framework.

A few things to keep in mind:  the out-of-the-box SharePoint page layouts are not responsive. You will either have to make them responsive, which is not recommended, or create new responsive page layouts using the CSS framework. Also, system pages will not be responsive unless you make them so.

At  FMT we have considerable experience with responsive design and branding for SharePoint. Please contact us if you need assistance with- or have questions in regards to responsive SharePoint design and branding.

Written by:
Bilal Amjad, SharePoint Consultant, FMT

Posted by: Jakob Bechgaard