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.
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.
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!