Responsive Web Design for SharePoint 2013 and SharePoint 2010

Recently I was interviewed by David Rubinstein of BZ Media regarding Responsive Web Design and SharePoint. If you do not know David, he is a great guy who you should meet at the next SPTechCon as he is the Event Organizer for SPTechCon held annually in San Francisco and Boston. Side note: PixelMill and I will be at SPTechCon this March 3rd-6th in San Francisco. Sign up before January 18th and save $400 and use the code “pixelmill” to save an additional $200.

Anyhow, back to the interview. David wanted to know more about Responsive Web Design and SharePoint. The conclusion he came to in his article, Going Mobile with SharePoint – Not so Fast was that SharePoint is not quite ready for mobile. I cannot disagree with David’s position and SharePoint 2010 and mobile had some major issues and although SharePoint 2013 includes Devices Channels, there are still holes that can be filled. In that regard, I and a few others are trying to help shore up certain aspects of SharePoint 2010 and SharePoint 2013 in regards to mobile.

Over the last few quarters I have been a big proponent of Responsive Web Design, and its parent theory Adaptive Design, to help provide an interface to SharePoint that is mobile friendly. With the release of the SharePoint 2013 Preview back in the middle of 2012 and then the subsequent release of SharePoint 2013 RTM a few months later we had the opportunity to see a new feature added to SharePoint 2013 to help with mobile interfaces, Device Channels. Device Channels look very promising for many users of SharePoint but with the need to create and maintain multiple interfaces for Device Channels to work well, and the fact that there are new mobile devices every month with different screen resolutions, Responsive Design still leads the pack in my opinion.

When I talked to David, I mentioned that Responsive Design and SharePoint (2010 and 2013) do not mix very well. There have been a few excellent examples of Responsive Design and SharePoint 2010 though including www.its.ms.gov, ariensco.com and www.gse.it/en/, but in general I see that Responsive Design principles will be difficult for many developers to implement in SharePoint.

I am happy to announce my latest CodePlex project that I started with D’arce Hess (@DarceHess and Gilda Spencer (@gildaspencer) to help solve this problem of Responsive Design and SharePoint! We just launched Responsive SharePoint (responsivesharepoint.codeplex.com) which has the aim of converting popular responsive frameworks such as Twitter Bootstrap and Zurp Foundation 3 to SharePoint 2010 and SharePoint 2013. By converting I do not mean just adding links to the frameworks within SharePoint, rather as complete an integration as we can so that SharePoint components such as the ribbon, navigation (metadata driven navigation in SharePoint 2013), page layouts, etc work in a Responsive manner. We also provide sample page layouts that already include responsive containers and web part zones as well. The documentation we have provided is pretty intensive as well. The idea is that any developer could take one of these converted frameworks and begin building a Responsive site in SharePoint 2013 or SharePoint 2010 today. Not bad huh?

As of now we have released Twitter Bootstrap with SharePoint 2013 and we are about to release Bootstrap for SharePoint 2010. We are halfway through Foundation 3 and SharePoint 2013 as well, you can expect that in a few weeks. We are also looking for more developers that want to help us out. I know there are pluses and minuses to each framework so if you have another framework that you want to convert to SharePoint, we would like to work with you so as to increase the CodePlex offering.

Download the CodePlex package and tell me what you think!

Comments

  1. Wow, I have been looking for something like this for a while. Started down the path of creating something like this myself, but really never could devote enough time to it. Very, very nice start here. Thanks so much for the foundation you have all put together!

  2. I’m really impressed with what I am seeing so far, this is the best responsive implementation into SharePoint I’ve seen to date.

    Out of curiosity, are you “not” recommending folks use the responsive framework for Intranet solutions?

    I’m asking because of the known issues with IE8, people picker, web part drag/drop not working etc.

    Great job guys, keep it up!

  3. Eric,

    Thanks for the mention regarding AriensCo.com. Envano is proud of our work on the Ariens and Gravely sites practicing responsive web design in SharePoint; a lot of success hinges on good relationships and collaboration with our partners. I’m curious to know your thoughts on responsive SharePoint site performance. Since SharePoint adds to file sizes and load time, are there any strategies, aside from caching, that can help to lessen that impact?

    - Bill
    Envano

    • Hi Bill,

      General file optimization is a must and I am a big fan of mobile first and Bootstrap 3.0. Recently Kyle Shaeffer wrote a great article on minifying core files that I thought was interesting.

      Minifying SharePoint 2013

      Although this article was written about 2013, the general principles are sound for 2010 as well.

      Also, watch you image sizes as that can slow down many sites. Mobile first can help here.

      Eric

  4. I have installed the Bootstrap for Sharepoint 2010. It responds (re-adjusts content) well when I resize browsers on my desktop. But it only shrinks to screen size when viewing via mobile devices (tablets too). Any ideas? Thanks.

    • Hi,

      It sounds as though the meta tag that tells mobile browsers not to zoom by default:

      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      has not been included. I would check that out first.

      Eric

  5. Hi Eric,

    Great info here and very helpful.

    I wanna try this responsive sharepoint without the twitter framework. I have Sharepoint 2013 installed in my machine.

    So do i need to download and install both the Twitter Bootstrap with SharePoint 2013 and the Responsive SharePoint (2013) WSP Edition v1.0.0? Or just the Responsive SharePoint (2013) WSP will work?

    • Eric Overfield says:

      The frameworks at Responsive SharePoint are SP 2013 Master Pages that have already been updated to work with either the Twitter Bootstrap or Zurb Foundation frameworks. You would not need to download bootstrap or foundation as they are already included in the packages.

Speak Your Mind

*


four + 9 =