What’s bet­ter, a respon­sive or a ded­i­cated site?

This is the kind of ques­tion that has been pop­ping up in my inbox lately. Its not sur­pris­ing con­sid­er­ing that Respon­sive Web Design (RWD) is a very hot topic right now.  Being a Sr. Prod­uct Man­ager for Adobe CQ, I thought it was time I chimed in on the issue of RWD, ded­i­cated web sites and how they relate to the enterprise.

Per­son­ally, I don’t like the adver­sar­ial con­text that RWD vs. ded­i­cated sites sets up. Both meth­ods have their mer­its and a hybrid approach is def­i­nitely pos­si­ble.  I think before decid­ing on what approach is best, you have to answer some sim­ple questions.

What’s the point?

It sounds inane, but you have to ask your­self what is the fun­da­men­tal rea­son that vis­i­tors will use your site(s).  Don’t gloss over this ques­tion with some­thing like “users are look­ing for infor­ma­tion”.  Deeply under­stand­ing what your vis­i­tors are doing should be the main dri­ver for the expe­ri­ence and thus the site design.

Con­sider how the con­tent relates, how vis­i­tors will nav­i­gate, com­mu­ni­cate, etc. Ask your­self (or bet­ter yet some real users): what is the first thing a user wants to do when the hit the site? What’s the sec­ond thing? Then what?

It doesn’t mat­ter how quickly you devel­oped it, how ele­gant the code is or what cool tricks you are using; if it doesn’t work for the vis­i­tor it is a fail.  This leads to the next question:

Are mobile and desk­top users the same?

To pro­vide a good expe­ri­ence, you must acknowl­edge the mobile­ness of the visitor.

Many users (myself included) expect a dif­fer­ent expe­ri­ence from the mobile site than from the desk­top version.

It’s more than just a lim­i­ta­tion in screen real estate (although that is impor­tant).  Often vis­i­tors on a mobile device are fol­low­ing a dif­fer­ent use case than the desk­top user.  They may be try­ing to find a store, share expe­ri­ences or get more info on some­thing they just saw.  Geo-location, cam­era access, QRC read­ers, and ges­tures are part of the mobile expe­ri­ence, but not the desktop.

Con­sider also how they will use the site.  Brows­ing infor­ma­tion while in the com­fort of my office is very dif­fer­ent from stand­ing in a depart­ment store while the kids have a melt­down because they are sold out of this year’s hot toy.

Build­ing a sin­gle site that has com­pletely dif­fer­ent uses is extremely dif­fi­cult, even with RWD.

What about performance?

This relates directly to usabil­ity.  In its most basic con­fig­u­ra­tion an RWD site sends all of the con­tent to every device.  The device browser then dis­plays the appro­pri­ate lay­out.  This means that all of the HTML, JavaScript, images etc. are pushed to every vis­i­tor regard­less of whether they can use it.

Also, image resiz­ing on the client side can be CPU and mem­ory inten­sive – some­thing that is in lim­ited sup­ply on most mobile devices. This can result in a long wait and a frus­trated vis­i­tor. I’ve seen sites that bor­der on user abuse when accessed through 3G.

This is where approaches such as “mobile first” come in.  This phi­los­o­phy (pio­neered by Luke Wrob­lewski) starts with the design for the most basic mobile expe­ri­ence.  Addi­tional func­tion­al­ity is added in opti­mized lay­ers that enhance the foun­da­tion.  When fol­lowed closely, this leads to a very sat­is­fy­ing expe­ri­ence; how­ever, it requires a lot of care­ful plan­ning and dis­ci­pline.  In my opin­ion, it doesn’t address prob­lems that arise when desk­top and mobile use cases are different.

How will the site be built and maintained?

Finally lets look at the cre­ation and upkeep of the site.  In my expe­ri­ence this is the first real con­sid­er­a­tion of a web devel­op­ment project, no mat­ter how lofty the talk about vis­i­tor experience.

In the­ory, this is also where we get the biggest gain from a RWD strat­egy.  There is only one site to build and one set of con­tent to main­tain.   This is can be true, but the site can get very com­plex when con­sid­er­ing mul­ti­ple dis­play sizes, rota­tions, etc.

There is a line of thought that RWD sites are cheaper.  This may be true for a new site.  How­ever, if the project is a retro­fit of an exist­ing site with lots of con­tent adding RWD gets tricky.  This often leads to poor per­form­ing sites and bad mobile expe­ri­ences (mobile first assumes you are start­ing from scratch).

On the server side, ded­i­cated sites may hold some addi­tional advan­tages.  Because there are two pub­lished instances it is pos­si­ble to man­age the traf­fic at a more fine-grained level. One clus­ter can be set up for the desk­top site and another for mobile.  If you have a wide dis­par­ity in the num­ber of vis­i­tors com­ing to one site you can allo­cate more resources to that area.

A Hybrid Approach

Okay, so it sounds like I’m anti-RWD.  I’m really not – RWD can pro­vide some very valu­able tools for improv­ing a web site’s mobile expe­ri­ence.  My point is that it is not a mir­a­cle cure.  RWD brings its own issues and com­plex­i­ties that must be con­sid­ered when com­ing up with a mobile strat­egy.  At the same time, main­tain­ing com­pletely dif­fer­ent web­sites, with dif­fer­ent con­tent is just not practical.

For­tu­nately it doesn’t have to be all or noth­ing.  There is a mid­dle ground — a way to have dif­fer­ent (but great) mobile and desk­top expe­ri­ences and not have to main­tain two sets of con­tent.  It’s a hybrid approach that can com­bine the best of both worlds.

The first thing to address is the dif­fer­ent use cases between mobile and desk­top users. This involves using sep­a­rate tem­plates that are cre­ated for the each expe­ri­ence.  Both sites are designed using RWD con­cepts to com­pen­sate for dif­fer­ent screen sizes, res­o­lu­tions and native features.

The mobile site is built to be use­ful 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 dif­fer­ent nav­i­ga­tion styles depend­ing on the size and lay­out of the screen.  A sep­a­rate design can also address per­for­mance issues that are spe­cific to mobile.

The desk­top site can be a very dif­fer­ent expe­ri­ence. It can take advan­tage of higher band­width and capa­bil­i­ties that most mobile devices don’t have (more mem­ory, local stor­age, etc.)

By using device detec­tion and redi­rec­tion fea­tures you can point both your mobile and desk­top vis­i­tors to a sin­gle loca­tion.  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 con­tent?  No.  The use of enter­prise grade web con­tent man­age­ment tools such as Adobe CQ WCM and Adobe CQ Mobile can help man­age mul­ti­ple sites by tak­ing advan­tage of multi-site roll­out and con­tent inheritance.

The major­ity of the con­tent may be shared between the sites. Inher­i­tance links the con­tent across the sites so updates to one are rolled out to the other. Not all con­tent needs to be inher­ited, so you can add addi­tional fea­tures to either of the sites.  This allows spe­cific con­tent when appropriate.

As a bonus ana­lyt­ics can be tai­lored to each of the sites giv­ing much more accu­rate data.  It will let us improve each of the expe­ri­ences with­out the risk of affect­ing the other.

As you can see there are a lot of options.  But, some care­ful plan­ning will yield great results and keep mobile vis­i­tors engaged with your content.