Implementing Responsive Design into SharePoint 2013

SharePoint Responsive DesignIn my experience, most organizations (and certainly their end users) would like to see some flair and customization with their SharePoint 2013 website. To that end, let’s talk about a little thing called Responsive Web Design and how to implement a responsive layout in SharePoint 2013. Yes, it’s time to take another walk on the Styled Side

Responsive Design and its importance in modern websites

What is Responsive Design?

Pioneered by Ethan Marcotte, Responsive Design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). -As defined by Wikipedia

Why is Responsive Design important?

Since the invention of the first mobile browser, the landscape of the Interwebs has been rapidly evolving.  Users are now digesting information on the web using a growing variety of devices and screen sizes. Unfortunately, SharePoint isn’t built to support this wide array of resolutions out-of-the-box, but it doesn’t have to end there. Here’s a quick overview on how to make your SharePoint site, responsive:

Make Your SharePoint Site Responsive

Get to know Responsive Frameworks

Responsive Design Frameworks

Responsive frameworks are a great tool for jump starting your responsive design and can greatly reduce the time it takes to get your code to production. They offer code libraries built around a fluid grid system which rearranges and scales your web elements to size – relative to the device they’re being displayed on. There are a number of frameworks out there. Two of the most popular are Twitter Bootstrap and Zurb Foundation.

You’re probably thinking, “Sweet, these are amazing tools for creating a responsive web site, but what about a Responsive SharePoint site?” Good question! Fortunately for us, the folks over at Codeplex have taken care of the leg work and ported over the resources to implement these responsive frameworks into a SharePoint site. You can find those resources and related documentation here.

Within a few minutes of downloading and installing the Codeplex resources, your SharePoint site layouts will have the functionality to rearrange themselves to fit the current resolution of whatever device you are using to browse with!

How it’s Done: A Brief Intro to CSS Media Queries

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). -As defined by Wikipedia

The graphic below shows a few common devices and their screen resolutions:

Responsive Screen Resolutions

  • 1200×1900 (desktop, portrait orientation)
  • 768×1366 (tablet, portrait orientation)
  • 480×800 (smartphone, portrait orientation)

To add custom styling for the different displays, insert your CSS code between each media query block below:

Custom CSS code

Move Your SharePoint Sites Forward

As the web evolves, designers and developers are forced to keep up with the way we display web sites and information across it. This holds true for SharePoint web sites as well. Fortunately, with CSS Media Queries and Responsive Frameworks, we have an elegant solution for users to view our SharePoint sites on any device.

2015-01-12T09:30:44+00:00 January 12th, 2015|

5 Comments

  1. Jordan February 10, 2015 at 11:20 pm - Reply

    Implementing responsive web design into Sharepoint is the best way to enhance your website experience globally. Today there are majority of people looking for a responsive website designing which is flexible for all kinds of devices like mobile, tablets, desktop etc.

  2. […] Implementing Responsive Design into SharePoint 2013 […]

  3. Sitecore Vs Sharepoint | Home March 22, 2016 at 6:53 pm - Reply

    […] Implementing Responsive Design into SharePoint 2013 – Implementing responsive web design into Sharepoint is the best way to enhance your website experience globally. Today there are majority of people looking for a … […]

  4. Dan Henderson July 12, 2016 at 3:14 pm - Reply

    Your graphic showing common devices and their screen resolutions has an error. While the desktop resolution of 1200×1900 is indeed representative of a portrait orientation, the graphic shows a desktop display in a landscape orientation. To correct this, you would either want to alter the graphic to show a desktop monitor in portrait orientation (as described), or better yet, change all of the desktop resolution references to something like “1920×1080 (desktop, landscape orientation)”. The latter would be a far better choice, because the use of a desktop display in portrait orientation is relatively uncommon, and because it will take far less work to change the text label under the desktop display in the graphic, than to create a whole new picture of a desktop display in portrait orientation and insert it into the graphic, just to match the text.

Leave A Comment