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.