Sitecore and Responsive Design

Someone asked me about Sitecore Devices and Responsive Design, so  I decided to write short post about my experience on it.

Sitecore has a concept of Devices where different piece of content can be shown in different UI.

Sitecore backend screenshot of an item (a page) and designs attached to the page.

It is very powerful of Sitecore and one of the core features that gave me huge impression back in a day when I started to work on the Sitecore CMS.

Devices are easy to explains and therefore they are usually as a first concept for customer to serve website in Mobile and Browser layout but reality at least on my case is different. In in the end,  I have not done many sites where I used dedicated and separate Mobile design as it usually comes as a feature request and by over the project project scope changes and stuff tends to come in and other less important features goes out. And yes… Mobile layout is something “let’s do it later after going live with main site…”  So, I end up to build the site to desktop browser only.

I am only using devices for RSS feed, Print layout and couple of times JSON for some AJAX love (talking about that,  take a detailed look in our own site how we load page when you click around in navigation, no page reload… cool eh? This is done in hashbang concept where I load only content and change url as it looks like I navigate site but I am not loading whole page ever.). In last year we have done all our sites in Responsive Design which means there is even less need for using separate device for mobile since HTML5/CSS3 does all the work for us. :) Also, I don’t really like separate print layouts either since we can simply do the same in CSS nowadays.
We made recently toolkit for trying to find Responsive Design for Sitecore. it is of course generic so it works for any site but it was a first toolkit for us to test sites with different window size to give an idea how page looks like on different resolution.