SharePoint 2013 Responsive Web Design

April 24, 2017

Blogger Image

Chaitra B C

Technical Lead - Sharepoint

A SharePoint site that is accessible on devices of varied screen sizes without any compromise in functionality or performance can be achieved by SharePoint 2013 responsive design. SharePoint responsive site makes it easy to be accessed on any device like Desktop, Laptop, Smartphone, and Tablet on any browser. Responsive design will take care of what content should be displayed and in what format across different screen resolutions.

SharePoint business on the fly, will have its real utility when it is made accessible at any time, in any browser, on any device. Today people are more inclined to use Laptop, Mobile or Tab rather than the traditional means of desktop, and so SharePoint 2013 responsive design can make your website device-agnostic.

What defines SharePoint 2013 responsive design?

  • Easy site navigation on any device
  • Easy content readability on any device
  • Device specific rendering of images/videos

Based on business needs, we can choose to have:

  • Entire SharePoint site to be responsive
  • Custom page to be responsive excluding the SharePoint default pages
  • Only the SharePoint site landing page to be responsive

SharePoint 2013 responsive design should work well in the basic standard display resolution width, which are:

  • 1200×1900 (for Desktop/Laptop, portrait orientation)
  • 768×1366 (for Tablet, portrait orientation)
  • 480×800 (Smartphone, portrait orientation)

SharePoint 2013 Consultants agree that, SharePoint responsive design does not demand any additional infrastructure cost. SharePoint responsive design can be achieved by implementing CSS styling and JQuery that match the screen resolution of the device it is accessed from. For this, the set of styles is applied to the content which is displayed in the given space.

Most dependable means of implementing responsive design in SharePoint is by using PnP Responsive UI, which is an open source framework provided by Microsoft. This solution consists of a CSS file with media query and a JavaScript file which takes care of applying CSS definition. These files can be customized too. PnP Responsive UI can be added to your site by executing a single line of PowerShell script and does not require any additional pre-requisites.

In case, we want to implement the SharePoint 2013 responsive design of a particular custom page, we can write custom CSS using media query too. We can also make use of certain 3rd party tools such as Bootstrap etc.

SharePoint 2016 has in-built responsive design feature whereas for SharePoint 2013, one can achieve it by implementing custom responsiveness design or by availing readily available responsive design frameworks. For more details, please visit the link below
https://dev.office.com/blogs/announcing-responsive-ui-package-for-sharepoint-on-premises-2013-2016

If you would like to know more about our SharePoint Consulting Services, then do get in touch with us.

Join the conversation

What are your thoughts on this blog? Drop us a line below. We’d love to hear from you.

© 2017 Nous Infosystems Pvt. Ltd. All rights reserved.