+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Bringing Responsive Web Design to Sitefinity CMS

by Gabe Sumner

Recently, the Boston Globe has received a lot of praise for their redesigned web site.  With this redesign they used a technique known as responsive web design.  This technique builds a single template/layout that dynamically adapts to any resolution or device.  If you haven’t already, I encourage you to give it a look.

Making Sitefinity’s Education Template Responsive

Jordan Angelov is an extremely talented designer who works on the Sitefinity team.  I was bragging about the Boston Globe’s web site internally and Jordan responded rapidly with a redesigned prototype of our Education Starter kit.Sitefinity Education Starter Kit using Responsive Web Design

Our plan is now to ship this new responsive template as part of our next Sitefinity SDK release.  However, for now you can download an early preview of this template here.  For anyone interested in a mobile-friendly adaptive layout, this will be a great resource.

How is this done?

At it’s core, responsive design relies on media queries to define different styles for different resolutions.  Media queries are supported by all WebKit-based browsers (Safari, Firefox, Chrome) and in IE via some jQuery plug-in’s. 

CSS styles using media queries to create responsive design

There is already a wonderful primer on responsive web design.  As well as a some reasons to be wary of it.  Be sure to give these a look if interested.

Testing these responsive web templates

As mentioned, these templates are still a work in progress.  They will be officially released through the next version of the Sitefinity SDK.  In the meantime, preview versions of this responsive design can be downloaded here.

Add the templates & themes to the Education Starter Kit found in the Sitefinity SDK. 

Education Starter Kit in the Sitefinity SDK

Once added to the project folder, the templates & themes also need added to Sitefinity (template docs, theme docs) and then populated with widgets.  Setup isn’t easy, so it might be better to simply use the downloaded stylesheets as a reference for your own responsive design.

As mentioned, this will come in a nicer package in the next release of the Sitefinity SDK.  For now, this is just a heads up.  This is a trend worth experimenting with and potentially a great solution for targeting mobile & tablet devices.

5 comments

Leave a comment
  1. David Sep 22, 2011
    "Media queries are supported by all WebKit-based browsers (Safari, Firefox, Chrome) and in IE via some jQuery plug-in’s."

    Quick FYI. Of the browsers you mentioned Safari and Chrome are Web-Kit browsers and Firefox is Gecko based.

    Keep up the good work!

  2. Robson Oct 05, 2011
    ...and by Opera, FWIW...
  3. Chris Mar 21, 2012
    Do we know what framework this "responsive" setup is based from? Twitter Bootstrap, HTML5 Boilerplate+320 & Up, etc, etc.  There are pros and cons with all of these frameworks, so knowing which one this is built from would be a huge help.
  4. Chris Mar 21, 2012
    Do we know what framework this "responsive" setup is based from? Twitter Bootstrap, HTML5 Boilerplate+320 & Up, etc, etc.  There are pros and cons with all of these frameworks, so knowing which one this is built from would be a huge help.
  5. will Dec 06, 2012
    i have the same question as Chris... what is  SF's responsive nature based on? if  nothing, where can we find documention/an overview/a description on the coding?

    Leave a comment