Great Resource: Responsive SharePoint from Eric Overfield

2015-03-20_10-55-33This 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:

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.

 

6 Comments

  1. Hi, Marc. Great summary of approaches for SharePoint design! SP Blueprint is actually a bit outdated at the moment. I haven’t updated it since I started Old River Creative last year.

    Just yesterday, however, I did launch a new template called SPBones (https://github.com/oldrivercreative/SPBones), which is a similarly simplified SharePoint interface template. It’s even more minified/simplified than before, so it’s certainly not a good fit for everyone, but if you want to start from scratch (like I often do), it might do the trick.

    Reply
  2. I have worked with Eric masterpage before and its awesome, in addition I would say that commercial tools can help you too in minutes, for a client we used bindtuning, the masterpage are responsive and they are installed in minutes, all we had to do is to tweak somo CSS classes and thats it. Highly recommended

    Reply
  3. I never understood this.. SharePoint was sold to be as the best new Mustang and then they told me it needs to be attacked with a blow torch because its design is not good.. I wonder what Foose would make of SP

    Reply
  4. Hey Marc , Absolutely the package is very useful, however I am really facing an unexpected issue – specified in msdn forum on below link and I am still not able to see the resolution on this :(

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/bf5b23d8-a069-4ac8-8fd8-2f66356cc06f/unable-to-see-pagecontent-control-filed-in-subsite-level-for-responsive-sharepoint-site-?forum=sharepointdevelopment

    would you please help me on this ?

    Thanks and Regards,
    Dipti

    Reply
    • Dipti:

      You should consider solution offerings like this starting points. They may well not cover all of your use cases and will almost definitely require adjustments. In your case, you should dig into the affected elements to see what the issue with the CSS is.

      M.

      Reply

Have a thought or opinion?