Sitecore and Responsive Web Design for Mobile Rendering

Every client I’ve worked with has assumed that Sitecore will magically transform a website into a mobile or tablet friendly site out-of-the-box. Unfortunately, that’s not true. What Sitecore actually does is allows a developer to implement layouts and sublayouts that specifically target a  smartphone or a tablet. This approach can be expensive and time-consuming because you are creating multiple sites that use the same information. The site that gets displayed is determined by a device identification database (like WURFL) that detects the visitor’s device and queries Sitecore for the correct layouts and sublayouts to use.

Until recently, this approach has been standard – for Sitecore and any other CMS or web development/design project.

But now, ladies and gentlemen… welcome to the party (drum roll, please)… Responsive Web Design (RWD) … something I like to refer to as “the game changer.”

I learned about RWD from a client who schooled me on the topic after she attended a marketing conference  (shout out to Connie at PPL Electric Utilities for not pointing out that I was supposed to be her expert on these matters not the other way around). At first I didn’t think much of it. I assumed it was just a fancy term for the traditional approach to mobile website design… until I started reading… and suddenly the light went on and I realized RWD is the real deal and Ethan Marcotte (who coined the term and breathed life into the concept) became my new hero.

In a nutshell, RWD means planning your design up-front to accommodate different screen sizes and screen resolutions – not particular devices. We have gotten so caught up in categorizing web visitors by the Operating System, the hardware or the type of browser they use that we’ve missed the big picture. Who cares if a visitor accesses my site using a PC running Windows 7 and Chrome? What really matters is that my web visitor’s screen size is 480 pixels wide or 1024 pixels wide and their experience should be tailored to their current viewing environment.

If you look at an RWD site on your computer with the browser at full width you see the site optimized for a full width view. Re-size your browser window to be skinnier and the site will respond by fluidly resizing itself as you re-size your browser window. So the site isn’t just responding to the operating system, device or browser you’re using, it’s responding to the size of your screen!!!! A browser on a PC can just as easily be re-sized to the same size as a smartphone – doesn’t it make sense to display the site optimized for whatever size the user is viewing it in regardless of the device? And the simplicity is awesome – no device detection, no complicated logic to determine which site to show and no costly development to produce multiple sites for multiple targets. Now that’s cool – in a geeky, never-quite-fit-into-the-cool-crowd kind of way.

I could go on and on about what a website using RWD can do, but to really understand it, you need to see it. The best example of good RWD principles in action is the go-to site for all things web design, Smashing Magazine. The following images display the site in a browser re-sized to three different widths – notice the experience is different in each version. As the browser window gets smaller, the navigation, font sizes and layouts change to optimize the site for the new viewing size.

Full Width

Half Width (similar to a tablet)

Third Width (similar to a mobile phone)

The Technical Stuff

Let me preface this section by admitting that I am not a front-end developer or a designer. I am a boring programmer more interested in making things function than making them pretty, slick or intuitive. RWD implementation falls into the realm of the creative genius of designers who have the foresight to imagine your website as it will look in different sizes and resolutions and front end developers who have the CSS, HTML, and JQuery skills to bring those designs to life. My explanation of how RWD works will be rudimentary but you can find plenty of in-depth articles like the ones on this page:

http://designwoop.com/2012/03/15-detailed-responsive-web-design-tutorials/

There are two concepts that underly RWD:

  1. Fluid grids
  2. Media Queries

Fluid grids take the more recent concept of grid frameworks (like my personal favorite, the 960 grid) combined with the older idea of liquid layouts to create a flexible framework that will scale to any size. The size of a column in a fluid grid is not a set number of pixels, but rather a percentage determined by dividing the width of a column in the maximum view of a site by the maximum width of the site. For instance, if your site is designed at a maximum of 960px wide and you have a column that is 500 pixels wide when the site is 960px wide, the fluid percentage of the column is (500/960)*100 = 52.0833333. Don’t round your percentages – your design will thank you for it.

Media queries use css conditional rendering to determine which css styles to apply to a site in different widths. The following css instructs the browser to hide the utility navigation if the visitor’s screen size is 320 pixels:

@media screen and (min-width: 320px)
{
#utilityNavigation {
display: none;
}
}

Now imagine all of the things you can do with font sizes, image sizes, colors, backgrounds, etc using media queries. Life is good.

The Next Step

If you’ve read this far I’m assuming that my powerful and persuasive argument has convinced you that RWD is the way, the truth and the light. The next step in your journey to RWD bliss is to find a good design company with solid front end developers that can assess your site to determine how to apply RWD principles to it. The number of companies fitting that criteria will grow by leaps and bounds over the coming months.

The key to RWD is planning. Plan from the beginning to accommodate different screen sizes using RWD and you won’t get stuck trying to shoehorn a beautiful newly designed site into a mobile experience at the end of your project when patience and budget are at their lowest.

If you’d rather not spend the money on a custom design, RWD templates are popping up all over the place on sites like TemplateMonster.com and ThemeForest.com.

7 Comments Add yours

  1. tarrc says:

    Great introduction to RWD. Any plans to follow this up with implementation tecnniques?

  2. So what is your reco for combing front end screen size javascript detection scripts with device/machine detection in Sitecore? Sounds like a hybrid approach is needed to leverage the best of both worlds.

    1. Hi Frank,
      Like everything, this depends on your particular implementation, but in my opinion and if at all possible, I don’t rely on or use different Sitecore devices or javascript for detection anymore… see this post on the percentage of browsers that support responsive design:

      http://gabesumner.com/how-many-web-browsers-support-responsive-design

      While IE 8 and lower browsers do NOT support responsive design, that doesn’t really matter. To people using those browsers, your site will just render as a regular website and the content won’t resize when the user resizes his browser window.

      The most important statistic is that 90%+ of mobile browsers support it. That’s the audience you’re targeting when you do js device detection and device switching inside of Sitecore.

      I do find that as the complexity of the site and its functionality increases, I am more inclined to use Sitecore devices rather than responsive design. Sites that have true application components, use a lot of tables, have complex menuing or navigation are good candidates for traditional Sitecore devices and mobile detection over responsive design.

  3. Noted. I agree however I also feel that with the advent of new tech devices, its becoming increasingly important to focus on user experience and simplicity. Look what happened to Blackberry… Id be interested to see what you think about the upcoming VR technology from Apple.

  4. Great post. Responsive web design really is becoming a hugely popular solution for mobile devices. I think last time I checked, roughly 70% of web traffic is now mobile. In fact, many of my clients are seeing huge gains from changing to a more responsive template. The benefits for a CMS are huge. Educate the masses, my friend.

  5. As important as responsive web design is, I think the next big step in website design is VR design… I mean come on, mobile is huge but VR is the next big thing. Id be interested to learn your thoughts on combining tech like mobile web with a virtual environment.

  6. I designed websites for a long time that were not responsive. huge mistake. Im glad I finally decided to go responsive. my clients benefit from 45% lower bounce rates. The only thing that gets me is all the screen sizes, i mean, designing for all of the phones and tablets available is a tad intense. What programs do you recommend?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s