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.

VN:F [1.9.22_1171]
Rating: 5.0/10 (14 votes cast)

About Crew

Our business is centered on bringing enterprise-class strategy, support, and security to your hosted or managed platforms no matter where you choose to deploy your environment. We specialize in providing managed services, cyber security, and expert, USA-based, 24/7 Absolute Support® on-premises, or in any cloud.
This entry was posted in SharePoint Tips & Tricks and tagged , , , , , , . Bookmark the permalink.

5 Responses to Implementing Responsive Design into SharePoint 2013

  1. Jordan says:

    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. Pingback: SharePoint Development Material(Links) | @Coding BlackHole

  3. Pingback: SharePoint 2013 Responsive Design | Pankaj Salunkhe SharePoint Knowledge

  4. Pingback: Sitecore Vs Sharepoint | Home

  5. Dan Henderson says:

    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 Reply

Your email address will not be published. Required fields are marked *

Let's make sure you're human first: *