Nov 02, 2012

Pragmatic Responsive Design

Posted by Mike Hodgson

What’s better, a responsive or a dedicated site?

This is the kind of question that has been popping up in my inbox lately. Its not surprising considering that Responsive Web Design (RWD) is a very hot topic right now.  Being a Sr. Product Manager for Adobe CQ, I thought it was time I chimed in on the issue of RWD, dedicated web sites and how they relate to the enterprise.

Personally, I don’t like the adversarial context that RWD vs. dedicated sites sets up. Both methods have their merits and a hybrid approach is definitely possible.  I think before deciding on what approach is best, you have to answer some simple questions.

What’s the point?

It sounds inane, but you have to ask yourself what is the fundamental reason that visitors will use your site(s).  Don’t gloss over this question with something like “users are looking for information”.  Deeply understanding what your visitors are doing should be the main driver for the experience and thus the site design. 

Consider how the content relates, how visitors will navigate, communicate, etc. Ask yourself (or better yet some real users): what is the first thing a user wants to do when the hit the site? What’s the second thing? Then what?

It doesn’t matter how quickly you developed it, how elegant the code is or what cool tricks you are using; if it doesn’t work for the visitor it is a fail.  This leads to the next question:

Are mobile and desktop users the same?

To provide a good experience, you must acknowledge the mobileness of the visitor.

Many users (myself included) expect a different experience from the mobile site than from the desktop version. 

It’s more than just a limitation in screen real estate (although that is important).  Often visitors on a mobile device are following a different use case than the desktop user.  They may be trying to find a store, share experiences or get more info on something they just saw.  Geo-location, camera access, QRC readers, and gestures are part of the mobile experience, but not the desktop.

Consider also how they will use the site.  Browsing information while in the comfort of my office is very different from standing in a department store while the kids have a meltdown because they are sold out of this year’s hot toy.

Building a single site that has completely different uses is extremely difficult, even with RWD. 

What about performance?

This relates directly to usability.  In its most basic configuration an RWD site sends all of the content to every device.  The device browser then displays the appropriate layout.  This means that all of the HTML, JavaScript, images etc. are pushed to every visitor regardless of whether they can use it. 

Also, image resizing on the client side can be CPU and memory intensive – something that is in limited supply on most mobile devices. This can result in a long wait and a frustrated visitor. I’ve seen sites that border on user abuse when accessed through 3G. 

This is where approaches such as “mobile first” come in.  This philosophy (pioneered by Luke Wroblewski) starts with the design for the most basic mobile experience.  Additional functionality is added in optimized layers that enhance the foundation.  When followed closely, this leads to a very satisfying experience; however, it requires a lot of careful planning and discipline.  In my opinion, it doesn’t address problems that arise when desktop and mobile use cases are different.

How will the site be built and maintained?

Finally lets look at the creation and upkeep of the site.  In my experience this is the first real consideration of a web development project, no matter how lofty the talk about visitor experience.  

In theory, this is also where we get the biggest gain from a RWD strategy.  There is only one site to build and one set of content to maintain.   This is can be true, but the site can get very complex when considering multiple display sizes, rotations, etc.

There is a line of thought that RWD sites are cheaper.  This may be true for a new site.  However, if the project is a retrofit of an existing site with lots of content adding RWD gets tricky.  This often leads to poor performing sites and bad mobile experiences (mobile first assumes you are starting from scratch).

On the server side, dedicated sites may hold some additional advantages.  Because there are two published instances it is possible to manage the traffic at a more fine-grained level. One cluster can be set up for the desktop site and another for mobile.  If you have a wide disparity in the number of visitors coming to one site you can allocate more resources to that area.

A Hybrid Approach

Okay, so it sounds like I’m anti-RWD.  I’m really not – RWD can provide some very valuable tools for improving a web site’s mobile experience.  My point is that it is not a miracle cure.  RWD brings its own issues and complexities that must be considered when coming up with a mobile strategy.  At the same time, maintaining completely different websites, with different content is just not practical.

Fortunately it doesn’t have to be all or nothing.  There is a middle ground - a way to have different (but great) mobile and desktop experiences and not have to maintain two sets of content.  It’s a hybrid approach that can combine the best of both worlds.

The first thing to address is the different use cases between mobile and desktop users. This involves using separate templates that are created for the each experience.  Both sites are designed using RWD concepts to compensate for different screen sizes, resolutions and native features. 

The mobile site is built to be useful for phone as well as tablet users and it must take into account how they will use the site.  Using RWD allows us to have very different navigation styles depending on the size and layout of the screen.  A separate design can also address performance issues that are specific to mobile.

The desktop site can be a very different experience. It can take advantage of higher bandwidth and capabilities that most mobile devices don’t have (more memory, local storage, etc.)

By using device detection and redirection features you can point both your mobile and desktop visitors to a single location.  That means you don’t have to give out weird mobile only URLs.  At the same time it saves SEO costs.

So does that mean there is now two sets of content?  No.  The use of enterprise grade web content management tools such as Adobe CQ WCM and Adobe CQ Mobile can help manage multiple sites by taking advantage of multi-site rollout and content inheritance.  

The majority of the content may be shared between the sites. Inheritance links the content across the sites so updates to one are rolled out to the other. Not all content needs to be inherited, so you can add additional features to either of the sites.  This allows specific content when appropriate.

As a bonus analytics can be tailored to each of the sites giving much more accurate data.  It will let us improve each of the experiences without the risk of affecting the other.

As you can see there are a lot of options.  But, some careful planning will yield great results and keep mobile visitors engaged with your content.