Sitecore and Responsive Design

I just went through a pretty cool re-design project of our new website, and of course, we're doing it in HTML5 and Responsive design - as any new web initiative should do these days. I hadn't done a full blown responsive solution in Sitecore before this, but realized quickly that Responsive and Sitecore goes hand in hand. The basic principles of Responsive design in my mind are:

  • Support multiple devices with the same HTML code base
  • Dynamically shift objects position/size based on predefined CSS rules
  • Define a skeleton of columns
  • Integrate the components of the site into the page(s) being aware of the column structure
  • Dynamically resize Images.

The general idea is that you think about how your page should react as different devices (and subsequently different resolution screens) render the site. Important questions to ask yourself when you start your Responsive discovery: What is important information to the user when they visit your site?  What is important information to the user when the user is using that specific device? How should the navigation work, specifically when in mobile mode (size) vs. in tablet or larger? How many screen sizes do you actively support (and thus change the behavior based on that size)? I found that Sitecore sites actually become MUCH EASIER to develop from a front end perspective, when Responsive is thought into the original HTML and CSS Design. And components become more "swap-able" with each other! I would advise any new Sitecore site, or any new site in general, to be built using responsive design - it really doesn't add that much more complexity to the project - and in the case of Sitecore, I think it actually helps the overall implementation. Just my 5 cents :-)