Responsive Web Design done better with Sitecore Device detection

Responsive Web Design is the new black and there are a ton of ready frameworks and blog posts out there to help you on your way. Just as Lauren Hightower writes in this post the traditional way of doing mobile design in Sitecore is by developing roughly two sets of renderings and layouts and combining these in separate devices in Sitecore. This takes up a lot of time and it gets even harder when you create multiple devices for different smartphones, tablets and other screens. Responsive design targets all of this in a clean way letting you rely on one single layout for almost all devices.

Responsive design usually works by adding CSS and JavaScript to a page. These scripts will calculate the screen width and hide elements that are too big to fit according to the design rules. There are however some things to consider: Sending a full payload of images for a JQuery slider, that is not even shown on a small screen, might not be the best of ideas when the user is on a slow mobile connection . And that nice high resolution jpeg used as background image might take some time to download for anyone that is not on a laptop with a strong WiFi or cable connection. What if you need a separate menu structure for all mobile visitors targeting content more suited for mobile users on the run?

Sitecore off course has a solution to the above problems:

  • Sitecore rules on layouts
  • Dynamic image scaling

Setting rules on layouts

As I wrote above, the normal way of handling browsers with different screen sizes in Sitecore is by separating them using Devices. When developing with Responsive Design there is actually no need for this. Instead we can enhance the experience for the mobile user by setting rules on the renderings for the page.

Using the MobileDeviceDetector you can utilize the WURFL framework. The MDD add a set of rules to the Sitecore Rules Engine that let’s you personalize on the features of the visiting device. In the below screenshot we change the “HeroSlider” to a “HeroImage” for all visitors using mobile devices.

Change Rendering For Mobile Device

Set a different rendering when on a mobile device

Dynamic image scaling

As all Sitecore developers know, Sitecore automatically scales all images on demand. Add a querystring parameter to the image url depending on the screen width and this will make the Sitecore server scale the image to correct size before sending it to the client. More about Sitecore Image Parameters in this blog post by John West.

A couple of days ago Scott Mulligan (@scottmulligan) released his module Sitecore Adaptive Images available on the Sitecore Marketplace. Sitecore Adaptive Images is a cool add on that helps you deliver images to your visitors in a size that is adapted to their resolution.

By using responsive design, layout rules and dynamic image scaling your next Sitecore project will rock!