Trying to make SharePoint 2010 Responsive? You need to read this…

When it comes to making SharePoint 2010 “Responsive”, there are a number of hurdles to overcome, but it is possible to make both Intranet, and Public facing sites ‘mostly’ responsive.

 I say mostly because inevitably there are instances where code is generated by SharePoint which is not mobile friendly.  An example of this would be “columns” on lists/libraries.  If you have a lot of columns in your view, it’s going to give you horizontal scroll.  The cost/time to work around every instance of this would not likely be feasible for most and hence I say “mostly” responsive.

It’s a tangled web of cascading effects which resolve down to the following root issues:

  • IE8 doesn’t work well with CSS3, or HTML5 (which responsive designs usually rely on).
  • IE9 doesn’t work well with SharePoint 2010 (yes, you heard it right).  There are issues with the people picker, remembering the placement of drag/dropped web parts etc.  Because of this SharePoint forces IE8 compatibility mode, and well, see the first bullet.

Enough about that, I know you are anxious to dig into the real issues and how to work around them.

IE8 Compatibility Mode:

  • Overview
    • By default, SharePoint 2010 master pages have a Meta tag: <metahttp-equiv=”X-UA-Compatible”content=”IE=8″/> which forces IE into IE8 compatibility mode.  So, even if you are using IE9, you are forced down to IE8 compatibility mode. The problem with that of course is most responsive solutions rely on CSS3 media queries which respond to the size of the viewport and IE8 doesn’t play well with CSS3.
  • Solution
    • Many try to overcome this by changing IE=8 to IE=9 or to IE=Edge (which uses the most recent).  Unfortunately, there are issues with SP2010 and IE9 (people picker, drag/drop web parts).  Because of this I don’t recommend this approach.
    • I have had the most success by keeping the IE8 tag, and referencing “Respond.JS” in my master page.  Respond.JS is a fast and lightweight polyfill for mix/max-width CSS3 Media Queries in IE 6-8, and more…).  You can get respond.js here: https://github.com/scottjehl/Respond – simply reference it in your master page, craft your media queries as you normally would, and voila.

IE8 and HTML5

  • Overview
    •  Though there are varying reports on IE8’s supportability of HTML5, I have not seen the two play overly well together without a little help.  Important to note is that you really only need this is you want to use HTML5 tags like <article> <header> <section>
  • Solution
    • The simple solution to using HTML5 declaration and tags in IE8 and below is to use “SHIMS”.
    • The fastest and easiest way to do this is to include this in your master page.  This assumes your site can access the outside world, if you are inside a firewall you will want to download the JS and reference it in your master page.
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
    • You can alternatively add some JS to your master page to create the elements for you.  I have not tried this approach personally but I’ve read about it a few times so I figured I’d include it.

<script language=”javascript”>
document.createElement(‘header’);
document.createElement(‘section’);
document.createElement(‘article’);
document.createElement(‘aside’);
document.createElement(‘nav’);
 document.createElement(‘footer’);
</script>

These are fairly standard issues that will pop up when making a SharePoint site responsive.  Now that you have an idea on how to work around them, you are ready to get started.  Having ported a couple of responsive/grid frameworks to 2010, I can say that it is a very cumbersome task.

Lucky for you, there is a great community offering which has ported “Bootstrap” , a well known responsive grid framework from former Twitter employees  (@fat and @mdo). 

There is a tremendous amount of effort involved to port a framework, so hats off to the gang involved.  Bootstrap has been ported for both SharePoint 2010 and SharePoint 2013 and ZURP Foundation – Bootstraps rival framework is also in the works. 

Bootstrap allows you to do “FLUID” responsive GRIDS as well as FIXED width which in my opinion makes it a great choice choice, particularly within SharePoint and Intranets which are by default, full-screen.

I’ve leveraged Bootstrap recently and highly recommend it as a starting point.   You can download Bootstrap here: http://responsivesharepoint.codeplex.com/releases/view/99472

Happy Customizing,

Shane

Shane Perran Responsive Design, User Experience and SharePoint SME

You may also like...

I would love to hear from you.

%d bloggers like this: