I was recently in the unfor­tu­nate posi­tion of need­ing to buy a new washer and dryer. If you’ve ever shopped for a major appli­ance, you know how ago­niz­ing it can be. I was immers­ing myself in tech­ni­cal spec­i­fi­ca­tions, spin speeds, energy effi­ciency, child locks, motor war­ranty, col­ors, and more. It felt like I was going to night school for wash­ing machine repair. Replac­ing a major appli­ance is not like replac­ing your favorite worn-out pair of shoes. It involves exten­sive com­par­i­son shop­ping (and mean­while the dirty laun­dry is pil­ing up).

I would do a search on my lap­top and then keep research­ing with my tablet over lunch and on my smart­phone between meet­ings and through­out the day. Jump­ing from site to site on var­i­ous devices was an eye-opening expe­ri­ence in respon­sive Web design (RWD). Few sites were opti­mized for mobile, mak­ing it dif­fi­cult to find the infor­ma­tion I needed on the go. I kept hit­ting walls and aban­don­ing sites until I found one built for the mobile browser.

In the end? My dol­lars went to a local store that matched the price I found on a big appli­ance retailer’s mobile site. The big guy’s mobile expe­ri­ence lacked a smooth search and com­par­i­son process. Had the site been eas­ier to nav­i­gate, and more respon­sive, I would not have gone out of my way to visit the local shop.

Think Behav­ior, Not Only Devices

Much of the con­ver­sa­tion around respon­sive design has been lim­ited to screen size, plat­form, and ori­en­ta­tion. Opti­miz­ing sites for mul­ti­ple devices is essen­tial, espe­cially as peo­ple increas­ingly rely on phones and tablets for brows­ing and social net­work­ing. But flex­i­ble image dimen­sions are just the begin­ning. The full poten­tial for respon­sive design is vast and exciting.

What if your site could move and change with the visitor’s behav­ior? Using vis­i­tor data, geolo­ca­tion, cus­tomer pro­files, and more, we tune our con­tent and design to the indi­vid­ual. Imag­ine a mom try­ing to read a recipe off her tablet while five kids scream in the liv­ing room. How about a bach­e­lor watch­ing TV and surf­ing his phone alone, a col­lege stu­dent research­ing a term paper in his or her dorm, or a grandma down­load­ing audio books from her recliner. The opti­mal Web expe­ri­ence will be dif­fer­ent for each of these indi­vid­u­als. There is no one-size-fits-all approach, and even respon­sive design doesn’t always go far enough.

Vis­i­tor Intent Matters

Behavior-driven respon­sive design seeks to under­stand the visitor’s needs and intent and to use this infor­ma­tion to influ­ence the order and empha­sis of con­tent, nav­i­ga­tion, and design aes­thetic. In her post on this topic, Valle Hansen gives an excel­lent illus­tra­tion of why vis­i­tor intent matters:

Prac­ti­cally speak­ing, if I go to Gap​.com on my desk­top, I’m prob­a­bly brows­ing for new jeans, and I’m prob­a­bly buy­ing them too. If I go to Gap​.com on my smart­phone, I’m likely try­ing to find the bricks-and-mortar store that’s clos­est to me, or access my store’s hours. In that case, I don’t want to sift through all of Gap.com’s con­tent to get to the store loca­tor on my smart­phone; I want my smart­phone to assume the store loca­tor is one of my main goals, and make that a pri­or­ity over other things like brows­ing for jeans.”

Like­wise, when I was shop­ping for a washer and dryer on my tablet and smart­phone, I wanted a quick-loading overview of the product’s descrip­tion, key spec­i­fi­ca­tions, and aggre­gated reviews. A snap­shot of the most impor­tant prod­uct infor­ma­tion is much bet­ter suited to hand­held screens than a full spread of prod­uct images, like I might want on a 27-inch desk­top mon­i­tor. Show me a sim­ple col­umn of easy-to-read con­tent on my phone, then let me have the full brows­ing and check­out expe­ri­ence when I whip out the lap­top. I also wanted to feel at ease mak­ing such a sig­nif­i­cant pur­chase through my smart­phone. On a deeper level, respon­sive design can engen­der trust: if you take care of me and respond to my needs as I shop, I come to expect the same in pur­chase and delivery.

Resiz­ing con­tent isn’t a panacea, and it doesn’t elim­i­nate the demand for a deeper level of cus­tomer per­son­al­iza­tion. As always, your audi­ence should shape your con­tent and design, how­ever they hap­pen to be access­ing your site.

Whole Per­son Design

As Car­rie Cousins points out in her “Ten Things You Need to Know about Respon­sive Design,” RWD is not merely mobile design. It is “whole Web design.” I’d like to take this one step fur­ther and think of it as whole per­son design. Most of us lead busy lives, and strive to be flex­i­ble and adapt­able as we tran­si­tion between fam­ily life, work, the class­room, social time, the gym, and more. Respon­sive design should have the same aims that peo­ple do.

Truly respon­sive design can’t be achieved with a one-and-done cas­cad­ing style sheets (CSS) over­haul. It is an evolv­ing process based on cus­tomer inter­ac­tion and robust vis­i­tor data. Design­ers, dig­i­tal mar­keters, and con­ver­sion rate opti­miz­ers (CROs) must focus on lever­ag­ing the data to deliver enhanced per­son­al­iza­tion. If your site can speak to the individual’s needs and desires, while putting the most valu­able infor­ma­tion up-front in a read­able for­mat, vis­i­tors will quickly become loyal cus­tomers. And isn’t that the point of RWD: to be so con­ve­nient and use­ful vis­i­tors won’t bother look­ing any­where else?

Let’s Rev­o­lu­tion­ize RWD

Respon­sive design is still a fairly young con­cept, and we are sure to see rapid growth in the com­ing year. Let’s focus our growth with insight into users’ device-specific goals and behav­iors. Think about what your vis­i­tors are look­ing for and hop­ing to accom­plish with each site entry. I’m con­fi­dent a behavior-driven, whole per­son approach can rev­o­lu­tion­ize the already rev­o­lu­tion­ary strate­gies of respon­sive design, lead­ing to hap­pier cus­tomers and higher con­ver­sion rates.

1 comments