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.
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:
There are two concepts that underly RWD:
- Fluid grids
- 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)
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.