An example of SharePoint responsive design

We recently went live with a responsive retrofit of a complex SharePoint site: the website of Tennant Company.

Their site looks like this at desktop resolution (click the image for a larger view):

It looks like this on a small screen:

You can see the responsive styles in action by resizing the site in your desktop browser: As the browser window shrinks, the page changes.

The conversion used a bunch of techniques I've discussed before. For instance, their service-plan grid uses faux tables in place of real tables. On their product category pages, category tiles collapse down to just their titles in mobile view, but the whole thing remains clickable thanks to clickable divs.

Complicating things was that the website is pretty complex, with more than a dozen language variations, including some with their own branding. We had to first make the overall site responsive, then make each individual web application on the site responsive, then make sure the language variations were responsive as well.

One thing we didn't want to do was "dumb down" the mobile version: we wanted it to have all the same functionality as the full-size site. So we built an alternative navigation control for the mobile view and added a "Links" button to give users access to functionality that would otherwise have gone away on the smaller screens:

One takeaway from this project is that SharePoint itself is surprisingly responsive-ready. You only have to change a few styles to make it fully responsive. Most of our time was spent making the branding and web apps responsive. I'll have a separate post on that a little later, but just know that when it comes to responsive design you'll have more trouble with your branding than you will with the underlying SharePoint structure.

Looking ahead, I'm currently working on a site that has the curious requirement of needing to be both responsive *and* able to display reasonably well in IE6 (no, that's not a typo; I said IE6. Our client has a significant share of users in places like China, where IE6 is still a factor). Since IE6 has issues with percentages and doesn't support some crucial CSS properties like max-width and min-width -- all things that get used heavily in responsive design -- that has been interesting to say the least. But it's turning out to be doable.

Anyway, enjoy the site and let me know what you think!