Responsive Web Design for SharePoint 2013 & 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, and, 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 ( 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!

10 thoughts on “Responsive Web Design for SharePoint 2013 & SharePoint 2010

  1. Steve February 12, 2013

    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. Shane Perran March 19, 2013

    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. Bill May 10, 2013

    Thanks for the mention regarding 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

    1. Eric Overfield August 26, 2013

      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.

  4. Noris August 15, 2013

    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.

    1. Eric Overfield August 26, 2013

      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.

      1. Munish Gumber July 19, 2014

        Thanx Eric, its really helpful for me..

  5. Byock February 28, 2014

    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?

    1. Eric Overfield June 30, 2014

      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.

  6. Dickson October 19, 2014

    I have installed the responsive sharepoint framework on my 2013 sharepoint. What is have noticed is any changes you make to the navigation at the top affects the side too. Any help

Leave a Comment

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

Enter Code *

Filed Under


Get excited for SQL Saturday 2022! Join our Microsoft MVP speakers Rez and Eric to learn how you can use the Power Platform in conjunction with Dataverse for Teams to create apps and solve your business automation challenges. Register now:


During the next episode of the #PixelMillWebinars, our #UI/UX experts break down:

- #PowerApp UI/UX best practices & common pitfalls
- #Figma best practices for PowerApps
- Converting from Figma to PowerApps
- See a PowerApp design in action!

In the next episode of the #PixelMillWebinars, our #UI / #UX experts break down:

- #PowerApp #UI / #UX best practices & common pitfalls
- #Figma best practices for #PowerApps
- Converting from #Figma to #PowerApps
- See a #PowerApp design in action!

In the next episode of the #PixelMillWebinars, our branding and #UI/#UX experts will show you how to elevate your #PowerApp experience without #coding.

Join us on 9/29 at 11am PST to see how you can apply custom #UI to #PowerApps designed in #Figma.

Working in a hybrid environment allows us to collaborate with people from all over the world. Check out this quick video and learn how to navigate language barriers when using Teams! #workthewayyouwant

Subscribe to PixelMill's

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch