SharePoint Knowledge Base

One aspect of building a website, especially in SharePoint, that doesn't necessarily get a lot of thought is how the site will look on different devices. Almost everyone nowadays has a laptop and a phone and probably an iPad too. So what happens if they want to look at their SharePoint site to do something from a device that isn't a computer or laptop? How will the site look on the device? Will it just be the same computer browser version that will require the user to scroll all around the page and zoom in just to do anything?

With responsive branding, a SharePoint site can resize and look good on any device. Responsive branding eliminates the need to build multiple versions of the same page for different devices. With a few prebuilt pages that have custom branding in them, you'll barely have to worry about making the site look good on other devices.

What this boils down to is a design first approach to customizing SharePoint to be easy for users to use and navigate. In fact, SimpleSharepoint has developed many navigation add-ons for SharePoint to make it more user friendly, you can find them here.

This blog post provides design guidance for responsive design using a very popular framework called Bootstrap. You can use a number of different frameworks, but for SharePoint, we found this one to be most compatible and easy to maintain.

Each page type in the SharePoint authoring experience can have its own rules for how it applies the responsive grid. This is to ensure that each page looks great, regardless of what device it's designed for, and that the experience is optimized for that environment. The basic grid in the SharePoint desktop experience is a 12-column structure. The number of columns and gutter width adjust based on the screen width. The below illustration shows the layouts and how they are linked together in a heirachy:

• Masterpages + CSS
• Responsive layouts pages

Here are some quick pro-tips on using this framework on your SharePoint site:

1. Add vertical spacing - You can easily add vertical spacing to your columns with this code:
   [class*="col-"] {margin-bottom: 30px;}
   
2. How to disable responsiveness - There can be situations when you would prefer your page to behave as a non-responsive. These could be when preparing your web page for print or generating output for PDF. Basic steps to disable responsiveness:
   1. Omit a <meta name="viewport" ...>
   2. Set a fix width for your .container. E.g., .container {width: 1000px !important;}
      
3. How to use heading classes - You often face a problem when you need to have a visually small heading but it should be h2. To mimic the appearance of h4, just add .h4 to your h2. See the following example:
   <h2 class="h4">This heading will look like h4 but it is h2.</h2>
   

Ready to dig in? More info on this add-on can be found here: Bootstrap

We love helping with SharePoint and it's all we do so feel free to contact us!

Mention this post and we'll send you a white paper on all of the ways we can help you customize SharePoint for your needs!