Responsive Design in SharePoint 2013

Responsive Design in SharePoint 2013

Look out people, SharePoint is joining the responsive sphere!

Since SharePoint first launched in 2001 and all the way through to the 2010 version, SharePoint developers have been one step, perhaps two, behind the rest of the world in the use of web standards and technologies.

With the coming of SharePoint 2013 and its new take on client-side rendering, better front-end capabilities, and the ability to use CSS3 and HTML5, it enables us to use modern tools and techniques. This gives us the opportunity to deliver a better user experience.

Responsive design in SharePoint

In our latest intranet project on the SharePoint platform, we chose a responsive design with a mobile first approach.

When deciding to build a responsive site, there is a myriad of different responsive frameworks you can choose. Some of these frameworks are feature-packed with ready to use components and functionality; others give you a more lightweight foundation to build upon. In other cases, it might be more logical to build a custom framework from scratch.

In our project, we have been developing the intranet on a framework based on (Twitter) Bootstrap, converted to co-exist with the SharePoint framework. With Bootstrap, we gain access to a 12-column grid from which we can create flexible page layouts. We get an out of the box navigation designed for different screen sizes and many other useful features. All of this makes development fast and time saving.

Our responsive site contains one masterpage and several different custom page layouts. We tried to reuse as much as possible of the already existing components to save development time. Some components worked pretty much out of the box without major tweaking but others needed some redoing to fit into the responsive framework. Some very important components that we have used a lot is the “Content By Search” and “Core Search Results” web part with custom Display Templates.

Although SharePoint 2013’s exposes new, more flexible front-end capabilities, we still need to account for it being a massive platform where not all aspects are out of the box or well fitted for a responsive design. Intranets based on the publishing site templates are more suited in comparison to an intranet that is based on team sites. The editor mode is also more user friendly on a desktop environment. Other areas where we needed to do some changes to get SharePoint to work great on different devices were the built in Ribbon functionality and some standard components often used is a SharePoint site.

After these considerations and changes, we find ourselves looking upon an intranet adapting to different devices and screen sizes, giving users access to the powerful features a SharePoint 2013 site can offer.

Optional approach – Device channels

If you use SharePoint publishing sites or just make use of the publishing infrastructure in SharePoint 2013, it is possible to make use of a new feature named Device Channels.

Device Channels will give you the possibility to provide your end users with different optimized type of views (masterpages) and CSS depending of the kind of device used to access the solution. A Device Channel is mapped up to a specific masterpage with help of user agent match or custom logic.

With the publishing sites in SharePoint you work with Page Layouts to add content into your solution. Using a Device Channel can also be a good alternative if you have the need to display different content or controls for different kind of devices. Inside a PageLayout there is a possibility to control what kind of content that will be displayed for a specific DeviceChannel. This is done with help of a Device channel panel.

You can read more about SharePoint Device Channels and how they work at MSDN.


Building a responsive site on the SharePoint platform was not even possible with the previous version. Now, with SharePoint 2013, we should reset our minds and take advantage of these new opportunities. As my colleague Alexander Haneng stated in his blog post on 5 essensielle nettsideråd (in Norwegian), responsive design is mandatory in 2014. Just because it is not public, in my opinion, the same rules should apply for any new intranet.



If you prefer reading in Norwegian, here is our Norwegian blog.