Great Resource: Responsive SharePoint from Eric Overfield

This week I was working on moving a design into SharePoint 2010. The design was made up of the standard sorts of things: HTML mockups with graphics, CSS, etc. The mockups are using Twitter Bootstrap as the styling framework.

I’ve done this sort of branding implementation many times, and it’s always interesting because what I get to start from is different every single time, even if it comes from the same designer. Over time we all change our approaches and styles because we learn better ways of doing things. That’s a good thing, but it means that every design implementation is like a new experience, albeit with many common components.

When I’m implementing a design in SharePoint, I find that there are use one of three basic approaches, regardless which version of SharePoint it is:

• From the top down – In this case, I’m changing SharePoint’s master pages very little. We might want to change some colors, fonts, and basic functionality, but it still will look like SharePoint from a structural standpoint: banner across the top, Quick Launch down the left, etc. Here I just make a copy of default.master, v4.master, or seattle.master – depending on the version – and add some CSS and script references.
• From the bottom up – This is the most extreme branding, where I start with a minimal master page and build things from the ground up. This is most common with Internet-facing sites, but can also be the case for an Intranet. Everything is customized in the master page: the HTML markup, the content placeholders and their placement, etc.
• Something in between – This was the case with the current project. Even though the end goal is a site that look little like SharePoint, it doesn’t require a total disemboweling of the master page.

For the latter two bullets, we have some excellent choices available to us which have been created by the SharePoint community. To me, the shining lights here are Randy Drisgill (@drisgill), Eric Overfield (@EricOverfield), and Kyle Schaffer (@kyleschaeffer). (That’s an alphabetical list by last name; they are all equally awesome.)

All three of these brilliant guys have free starter solutions on Codeplex:

• Kyle has a responsive master page called SP Blueprint
• Randy has a set of master pages at Starter Master Pages
• Eric has Responsive SharePoint

Adapted the great #Responsive #SharePoint work from @EricOverfield for a client project today. Solid stuff! http://t.co/7rMxkfGoM6 #UX

— Marc D Anderson (@sympmarc) March 18, 2015

In this particular project, Eric’s master pages seemed to be the best match. As I was struggling to get the ribbon to behave with Bootstrap, I realized that I didn’t need to fight the battle again myself and that Eric’s master page would probably be just the tickets. Indeed it was! After grabbing his project, I was able to get the design up and running in just a matter of hours.

If you’re even considering coming up with a responsive and/or Bootstrap-driven design, save yourself a lot of trouble and look at Kyle or Eric’s work It probably won’t be exactly what you want out of the box, but they have solved a huge majority of the problems you’ll run into already. This is what makes the SharePoint community so awesome. This is really deep capability and work that is out there for you to use – for free.