The following is a re-post of an article I wrote for the Amazon.com tech.book(store):
Because of SharePoint’s prominent role for both corporate intranets and public facing internet sites, there is often a strong push to have SharePoint serve information in a mobile friendly layout. There are several ways to approach this topic in SharePoint 2013. First, because SharePoint 2013 supports modern browsers, you could look at the modern techniques of responsive web design (RWD). Another option, is to use some of the new features that Microsoft has provided with SharePoint Server 2013, specifically device channels. In this post, we will look at some of the pros and cons to these options.
Responsive Web Design
RWD is the idea that one design can be applied to a web site and this design will respond to the device that is loading the page and adjust the layout to match various features of the browser like height, width, resolution, and orientation. Behind the scenes, RWD is made possible by modern web technologies, primarily CSS3 media queries. Because of this, RWD works best with modern web browsers; old browsers like IE8 and below require Javascript libraries known as polyfills to make RWD function properly.
SharePoint 2013 supports modern HTML techniques natively, and was built with modern browsers in mind; to this end, the lowest version of IE that is supported by SharePoint 2013 is IE8. Because of this, you can easily make a custom SharePoint UI (often known as SharePoint branding) that utilizes RWD. Behind the scenes this means creating a custom master page and referencing a CSS style sheet that uses CSS3 media queries. You can create master pages for SharePoint 2013 by hand or you can utilize the new SharePoint Server 2013 publishing feature known as the Design Manager. This feature allows you to upload and work with HTML and CSS directly and have SharePoint automatically convert this into a functioning master page every time you save the HTML.
So, we’ve established that you can use RWD with SharePoint 2013, but the question remains if you SHOULD use it for your SharePoint site. There are many pros to using RWD which are readily apparent, such as having to support only one codebase across platforms and the ability to have the layout adapt to many devices just by grouping them with media queries by similar functionality. That being said there are some important considerations before jumping head first into RWD:
- RWD takes more effort than standard web design – Beyond understanding how to create media queries in CSS3, RWD also requires a significant amount of testing across screen sizes and mobile devices. Just because your design looks great when you resize your desktop browser to 480 pixels wide, this doesn’t mean the site will look good on an iPhone 5 with a Retina display.
- Content management systems like SharePoint often make RWD difficult – Your site may have to support many owners or content authors that are creating many different kinds of content. Are all of them skilled with RWD? Are they willing to create content that will scale appropriate for devices?
- Collaboration in SharePoint does not lend itself well to RWD – RWD is probably a lot easier if you are making a communication focused site like a public facing internet site or an internal portal where employees only consume information. When you are using SharePoint for business collaboration, consider all of the functionality that your site will need to support. How will concepts like Gantt charts, calendars, data grids, and lists scale for small screens? Consider that Microsoft hasn’t really made these elements scalable to very small sizes like you would find on a phone.
- Consider download speeds and data usage on mobile devices – SharePoint is not a light weight download. There is a significant amount of CSS and Javascript that is sent to the client when a site is first requested. RWD only hides parts of the UI but it might be a better plan to remove some functionality not required for mobile users.
SharePoint 2013 Device Channels
SharePoint 2013 provides its own solution for displaying layouts for mobile devices, this feature is known as device channels. You can setup device channels to look for keywords in a browser’s user agent string (the mechanism web browsers use to identify themselves to a web server) and SharePoint can apply an entirely different master page for each device channel. You could create a device channel that looks for the keyword “iPad” and any browser that includes that string in the user agent would have your device channel master page applied to it. Not only can you use device channels to swap out an entire master page, but you can also use something known as Device Channel Panels inside master pages and page layouts to include or remove specific parts of the page.
The nice thing about SharePoint’s device channels is that you don’t have to decide between them and responsive web design. You could certainly use both techniques on your site, but you would have to manage them slightly different since device channels are configured in the SharePoint site settings and RWD uses media queries in CSS3 style sheets. If you wanted to use device channels by themselves without RWD for mobile UI, here are some things to consider:
- Device channels could require more assets to manage – If you are using device channels to swap out the entire master page, you would need to manage two or more master pages. Master pages can be complicated, unless you have a specific need, it would be better to use Device Channel Panels to just change parts of the UI rather than the whole master page.
- Device channels rely on user agent strings – This is great if you can target your devices specifically from their user agent strings but can at times be limiting. For instance there are many varieties of Android devices from cellphones to tablets and many times their user agent does not declare the screen size. In some cases media queries can be more useful for targeting browser features like this.
- Device channels require the publishing feature in SharePoint – This is a feature that is only available in the full SharePoint Server 2013 product, not SharePoint Foundation. Also, many SharePoint administrators prefer to only provide site owners with simple team sites; in these cases you wouldn’t have access to use device channels
Whichever method you choose, you should know that SharePoint 2013’s support for customized mobile UI is vastly superior to all of the prior versions. You can learn more about the topics in this article, including SharePoint branding, master pages, page layouts, device channels, and modern web design like RWD in our book SharePoint 2013 Branding and User Interface Design.