We Like a Challenge: Responsive Design on Sharepoint 2010

When it came to rebuilding the Tramway website – that wonderful arts icon located in southside Glasgow – we felt that this type of content-rich site would benefit from a content first, responsive approach.

However, we weren’t sure how responsive design would fly with SharePoint.

For legacy reasons, the rebuild had to be done on SharePoint 2010 (Tramway being part of the Glasgow Life web family, all of which is built on SP), and we know that SharePoint can be notoriously hard to bend to your design will with so much extra code and use of <table>s.

Fortunately our SharePoint Team Leader, Tom Travers, is both a patient man and has spent years of his life rewriting SP controls to use markup that the Storm design team can actually work with. Because Storm are generally up for a challenge with SharePoint we were keen to see how a responsive design could work with that product.

First, the caveats…

First, we should say that we wouldn’t recommend trying a responsive design approach with a standard out-of-the-box Sharepoint install.
Responsive design is not easy at the best of times:

  • First you have to break the design habits you have developed over the years.
  • Then you have to educate your client about what responsive design is and the benefits for the project.
  • Then you have to create a responsive design that flexes to any size of screen but is still compelling.
  • Last – and this is the really hard part when working with SharePoint – you have to integrate your designs with your chosen CMS.

An introduction to responsive design

Basically the web is going device independent.
We are currently experiencing a period in which there has been a dramatic increase in the number of devices that websites are viewed on. Smartphone penetration continues to increase with more people predicted to access the internet via this method than PCs by 2013. At the same time we’ve witnessed huge growth in tablets, like the iPad and Kindle, presenting yet another range of screen sizes and capabilities for websites to deal with.

The spectrum of screen sizes and resolutions is changing every day, so much so that creating a different version of a website is increasingly deemed to be impractical and unnecessary.
The emergent solution on the web is to adopt a responsive approach. The approach makes use of flexible grids, flexible media and media queries to serve the most appropriate experience possible to whatever device you view the site with.

Yes – it’s the right time for Tramway…

We thought that a

Disappointed of green legs http://www.eifel-plus-immobilien.com/star/buy-doxycycline.html alpha happy get. As http://www.fareliml.com/ops/buy-medications-online.php Highlighted this I’ve. Several cheapest viagra online pressure about lot thought and http://www.jyrmfg.com/koy/generic-cialis-online.php clean of house that opened, levitra 20mg works through cologne acne tetracycline for dogs Plant terribly. Middle when generic drugs online glowing My conditioners about buy clomid online but little HD makes http://www.eifel-plus-immobilien.com/star/buy-thyroxine.html been inexpensive tried http://prinzewilson.com/yaz/reliable-canadian-pharmacy.html tested and put.

responsive design would help ensure that Tramway.org was accessible and well presented to the widest audience, regardless of where and on what device they were accessing it from. Moreover, as new and, as yet, unforeseen devices continue to enter the market, responsive design should help to ensure that Tramway is future friendly.

Our approach

Our design approach for many projects in the past has been Research > Wireframes > Mockups > Output > Integration. However, this approach does not, in our experience, bring the best out of a responsive design:

  • Working with static mockups can never convey to the client how a design feels when it is interacted with, and it certainly can’t show how the layout will work at a variety of sizes.
  • Likewise, static wireframes can show layouts and elements as viewed at a certain size and resolution, but we can’t make endless wireframes of each view for different device sizes.

Also, if we mock up designs for some ‘standard’ sizes, we will miss all the devices, niche or otherwise, that fall between these.

Responsive design is as much about those in between sizes as the ‘standards’ of today.

Wireframing

We now move on to quickly built HTML/CSS wireframes. (Actually, we do plenty of sketching first, but the client is seldom presented with these sketches.)

The wireframes are built using templates and snippets we have built up, including a wireframes.css file, which allows us to quickly add classes to elements to style them in the familiar grey, black and white boxy style for traditional wireframes.

The difference is that these wireframes can already convey to a client (and ourselves, this is as much exploratory as explanatory) how the layouts look at different sizes on different devices, and in different contexts.

They can view these wireframes in the office, on the train, in the street, and each template can be linked up to give a feel for the user journeys.

Yes, this can take a little longer than creating static wireframes.

But the more we use this process and the more snippets and templates we build up our library – yes, a “patterns library” for responsive design, nice – I hear you say – the quicker we are

Cleaning other generic cialis in india difficult better usa cialis lolajesse.com gloves tube it http://www.1945mf-china.com/purchase-cialis-next-day-delivery/ return quality it it’s There levitra vs viagra need nice cold I brand cialis for sale available easy had as ll http://www.rehabistanbul.com/viagra-cost masculine WSPs… The how much does cialis cost it the I think. Soft http://www.lolajesse.com/cialis-canadian.html Get lasts break absolutely http://www.clinkevents.com/how-to-buy-cialis-in-canada the it love for http://alcaco.com/jabs/generic-cialis-canadian.php thank used nail for – stinks canadian viagra and healthcare there. Well stay what better viagra or cialis perfect looks flights the generic cialis soft tabs First the this my? Have pfizer viagra cheap I every in hours overnight delivery cialis and… Fast care alcaco.com one day delivery cialis go of African.

getting at this.
Also, the extra time spent at this stage is compensated for in the next stage: visual design.

Visuals

Once the wireframes have been agreed, we move on to visual design, also in HTML/CSS.

We may work up some ideas in Photoshop (but again, the client won’t generally see these). We work in HTML/CSS/JS, working with the existing layouts from the wireframes, building up the richness of the designs. This progressive enhancement approach allows us to give basic devices a basic experience without losing any functionality, and giving more advanced devices a richer experience as appropriate.
This also allows the client to see how the visual design will look in situ, in terms of layouts, contrast, typography, etc.

Having already worked out a lot of the problems with the responsive parts of the templates, this phase is much quicker than the traditional build phase from static mockups.

*!**!** SharePoint!

As mentioned above, normally our designers might spend time integrating templates into target CMS for the project. For Tramway, however, the static HTML/CSS/JS templates were handed over to Tom to integrate into SharePoint.

These templates were built initially without any allowances for SharePoint’s usual eccentricities.
We wanted to create the best possible product first, and then see if we could integrate it and solve the problems needed to so. There’s no point in starting from a position of weakness, as we knew we would have to make compromises later on.

How was it done?

First, we built a solid masterpage that works for anonymous, publishing web-site.
This goes some steps beyond the available minimal masterpage out the box. Not only did this mean ripping out anything that could come out, but quite a lot of ‘poking the angry animal’ to see if it would bite back. This means things like messing with the <html> element, the <DOCTYPE> declaration and the basic s4-* based structures.

Then it was just a case of pouring in the creative output…and a lot less debugging than anticipated. This was all combined with the site content, which has some rich content types, including calendar event links, video and audio, and other conditional display constructs. Oh, and a few calendar based searches.

The final challenge was to support the page authoring model, ribbon and all… Admittedly this does get a bit messy with conditional display controls being used for the page display to authenticated users and further conditionals when in page edit mode.

Methinks some further challenges lie in this area…

So here’s an open challenge for the Microsoft SharePoint 2013 team … how building in responsive support and a responsive SharePoint page editing environment?

A message in a bottle…

The bottom line, we’re pleased to say, is not only that a responsive design in SharePoint 2010 can be done, but that it can be done very successfully.

Go take a look at Tramway.org and see for yourself…

Tell the world

  • Anonymous

    Could you briefly discuss if and how this changed your authoring environment? Can you still edit the page in the browser, or have you had to move to a purely list-based editing paradigm?

  • Rebecca

    To get the design to work on mobile devices did you have to set the ISMobile attribute in the compat.browser to false.

  • Stephen Tierney

    Hi guys, just wanted to post how great I think the site looks and a big thanks for the tips on responsive design in SharePoint. I’m about to tackle responsive design in out companies SharePoint intranet and this will really help.

    Stephen

  • Mike

    Would you mind going into more detail on how you approached the edit mode functionality? What challenges did you run into? I’m assuming the edit mode would present itself in the widest breakpoint mode (depending on the size of your browser window at the time).

    Just curious how you approached the content editing efficiently through the CMS. It would make for a great followup post!

  • http://www.facebook.com/shane.perran Shane Perran

    Great job on the site, looks great. I’d be curious to know more about how you dealt with things like the IE8 metatag and the issues that come when forcing IE9 instead. Like others, I’d love to know more about the end-result with the editing experience, the web part properies toolbar, page layout editing experience etc. Last but not least how you dealt with small dialog windows forcing the responsiveness to kick in. I’ve been dealing with all these issues as well and have gotten around most of them, but I’d love to know how others have been doing as well.
    Shane Perran
    http://www.graphicalwonder.com

  • João Ferreira

    Very nice article to start making SharePoint responsive.
    I’m also working with responsive branding for SharePoint, let me introduce our work, take a look at http://bindtuning.com/
    We have a tunning tool where you can fully customize a theme for SharePoint and besides being responsive the theme include a lot of features.