Responsive Web Design in SharePoint 2013

A website can be viewed from multiple devices rather than just the desktop computer. There are a plethora of devices around us; tablets, mobile phones, other hand held devices and now wearable devices. Any business would not want to maintain multiple websites for each device. Rather, they would want a single website to respond based on the device from which it is accessed. For example, if I have a website that has the typical left hand navigation or top navigation or a combination of both and the main area that has 3 columns, 2 rows. On mobile devices, smartphone screens, TV Screens, tablets, this layout will not work because the user will need to scroll horizontal and vertical. Navigation will become a headache and content readability will be impacted adversely.

So to understand what is meant by Responsive Web Design (RWD), in other words a web site that will adapt based on the device that it is being connected from, not only for resizing / scaling the site based on screen resolution, but also responsive in terms of easy navigation and easy content readability. Apart from primary functional availability, properties for responsive web design could be summarized as:
  1. Easy navigation
  2. Content readability
  3. Flexible Image Size
  4. Video Rendering
We will see how each of these properties can be implemented in SharePoint 2013 for a website.

1. Easy navigation: In SharePoint 2013, easy navigation can be implemented using media queries that were introduced in CSS 3.0. These queries will determine which style sheets need to be applied to the website. This means that the entire website template should be style-based and not table-based.  The media queries with get values of properties like width, height, aspect-ratio, orientation, color, resolution and so on. Based on the device that the request comes from (user-agent), an alternate designs is served from CSS files.
 
Alternatively, you can use the Device Channel feature of SharePoint 2013 to create device-specific designs. Specify one or more user agent substrings in the Device Inclusion Rules * box. When the user agent string of a visiting device contains any of the specified substrings, the channel will force site pages to display using that channel's optimizations, like a different Master Page or Device Channel Panel.  This special rendering can be triggered using query strings, cookies or custom code, in which case the substrings don't matter.  The only caveat is that this is a feature that is only available in the full SharePoint Server 2013 version.
 
2. Content readability: This is closely linked to the first point. The fluid layouts that are served by alternate CSS files or master pages help in serving the user to read content easily.
 
3. Flexible Image Size: Image renditions in SharePoint 2013 enable you to display versions of an image of various sizes on different pages in a site. When you create an image rendition, you specify the width and/or height for all images that use that image rendition. Publishing feature and BloB Caching should be enabled for this feature.
 
 
When you create content and insert an image on the page, you can choose renditions as shown below.
 
 
You can also automate image renditions, and define which image rendition is to be used in the Content Query and Content Search web parts. You can show smaller thumbnail images for search results or "latest news" based on height, width or RenditionID.
 
4. Video Rendering: Rendering of video should be based on bandwidth and device the video is being viewed. You can insert video into a SharePoint page and get the following options.
 
Click on "Manage Renditions"l you can then upload videos for various bandwidths and player sizes.
 
 
So we see that SharePoint 2013 is all geared up for RWD; you can have various channels defined for single devices or groups of devices, assign alternate “Master Pages” per channel and selectively include and exclude portions of Page Layouts per channel, render images and videos based on size and bandwidth and special controls to define mobile rendering areas in content.

Up Next
    Ebook Download
    View all
    Learn
    View all