Responsive Web Design :-: Responding To Your Visitors

As of Feb­ru­ary, the smart­phone share in the Unit­ed States has reached near­ly 50%. 2012 is FINALLY “the year of mobile” and this means that you need to invest in a mobile user expe­ri­ence. Check your ana­lyt­ics — that mobile traf­fic share keeps grow­ing!

With all of the hype that respon­sive web design is get­ting, what are the biggest impli­ca­tions for mar­keters and SEOs regard­ing its fit as the long-term mobile strat­e­gy?

First Of All, What is Responsive Web Design?

In a nut­shell, respon­sive web design (RWD) is a tech­nique which uses flu­id lay­outs (which “stretch” to as much screen real estate as pos­si­ble) in addi­tion to the CSS@media queries,” which apply dif­fer­ent style sheets (CSS) based on the cur­rent screen size of the device. With respon­sive design, your web­site will fit vir­tu­al­ly any device with a full brows­er: smart­phones, iPad + oth­er tablets (both land­scape and por­trait modes), and even TVs. It doesn’t mat­ter that the Galaxy Tab’s res­o­lu­tion is dif­fer­ent from a Nexus S phone — your site will ren­der beau­ti­ful­ly, as long as respon­sive design was cor­rect­ly imple­ment­ed.

Exampe of Responsive Web Design (RWD): UC San Diego

One of the most famous exam­ples of respon­sive web design is BostonGlobe.com: sim­ply go to the site and re-size your brows­er win­dow: the web­site will auto­mat­i­cal­ly adjust to the cur­rent width of your brows­er. Boston­Globe is prob­a­bly the biggest, most com­plex site which has imple­ment­ed this tech­nique, but there are hun­dreds of oth­er exam­ples avail­able at mediaqueri.es, includ­ing UC San Diego, Smash­ing Mag­a­zine, and more.

What are the Alternatives to Responsive Design?

Respon­sive design became a hot top­ic since the growth of mobile. Some peo­ple view it as the best solu­tion to improve the mobile (and tablet) user expe­ri­ence, how­ev­er it is not always the case. The pur­pose of this post is to go over the RWD in detail, but in order to see the full pic­ture, “going mobile” via RWD does have two alter­na­tives.

Sep­a­rate mobile site.

Usu­al­ly host­ed on the “m.” sub-domain, mobile sites are usu­al­ly devel­oped from scratch. Vis­i­tors will redi­rect to the mobile site after serv­er detects that their User-Agent is a smart­phone.

For exam­ple, the user-agent of an iPhone looks like this:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5

Mobile App.

While mobile apps (Apple iOS, Android, Black­ber­ry, or Win­dows Phone) are the best in con­trol­ling the user expe­ri­ence and tak­ing advan­tage of the smart­phones’ hard­ware capa­bil­i­ties, they are expen­sive to devel­op and they are not part of the “open web,” mak­ing apps impos­si­ble for search engines to crawl.

How Does Google Crawl/Index Responsive Sites?

Crawl­ing.

About 6 months ago, Google intro­duced a new smart­phone Crawler, which mim­ics the iPhone’s user-agent.
Since RWD sim­ply adjusts to the screen size and does not change the con­tent based on the mobile user-agent, Google­bot-Mobile has access to all of the con­tent of the full site (HTML, CSS, images, etc). The only dif­fer­ence is: in the case that Google can read through CSS and under­stand “@media” queries used by RWD, Google can fig­ure out which ele­ments are hid­den on your mobile site (it doesn’t seem so, but still is an open ques­tion). To be on the safe side, I wouldn’t hide any ele­ments con­tain­ing impor­tant con­tent at widths high­er than 600px.

Image Pre­views in SERPs.

Google mobile SERPs show the list­ings’ pre­views on the lat­est smart­phones. For respon­sive designs, the pre­view is shown at the width of about 640px wide (iPhone’s res­o­lu­tion in a por­trait mode). See exam­ple screen­shot below.

Index­ing and Caching [with an Exper­i­ment!].

I ran an exper­i­ment to fig­ure out if Google actu­al­ly index­es mobile-spe­cif­ic pages. I took the fol­low­ing steps:

  • On the bot­tom of each page of my site, I added a text which tar­gets mobile user-agents and is only vis­i­ble if the visitor’s device is a smart­phone.
  • The exact text (which is “mob­phone test­string”) didn’t match any pages in Google nor Bing
  • I did “Fetch as Google­bot” (Mobile: Smart­phone) in Web­mas­ter Tools. The result showed that my text is vis­i­ble to Google Bot. [April 27/9pm EST]
  • I wait­ed until my pages got crawled again (checked my serv­er logs after run­ning “Fetch as Google­bot”). Google­bot-Mobile crawled by home­page on April 29th at 9pm EST.
  • I searched for “mob­phone test­string” in Google & Bing… No results found (still, after 10 days).
  • When search­ing for my own site on Google using a smart­phone, the “Cached” pages belong to the desk­top site and “mob­phone test­string” is not there.

VERDICT: When crawl­ing mobile ver­sions of the pages locat­ed at the same URLs as the desk­top pages (either RWD or done via user-agent tar­get­ing):

  • Google will NOT cache the mobile ver­sion of your pages.
  • Cur­rent­ly, Google seems to ignore any con­tent which shows up only for the mobile vis­i­tors.

Google Mobile Search = Cached full, desktop site

If your vis­i­tor goals are dif­fer­ent on the mobile site than on a desk­top site (e.g. car insur­ance com­pa­nies: quotes on desk­top vs. road-side assis­tance on mobile), then I tend to agree with Bryson Meu­nier: cur­rent­ly, the hybrid approach to mobile URLs (hav­ing an “.m” sub­do­main) would ensure that the mobile site’s con­tent gets cached and treat­ed equal­ly to the desk­top sites. (Although at the end of this post, I describe how I’d like this to be tak­en care of by Search Engines long-term.)

Bing & Mobile.

While Bing doesn’t have a sep­a­rate mobile crawler which mim­ics a smart­phone, Bing seems to use Bing­Bot for crawl­ing the desk­top and mobile sites. Also, a fair­ly recent post by Duane For­rester talks about how the “one-URL” pol­i­cy for all devices is pre­ferred by Bing. I couldn’t find any oth­er infor­ma­tion online, in the serv­er logs, or by exper­i­ment­ing (Bing doesn’t give an abil­i­ty to see cached pages on mobile).

Responsive Web Design: Ultimate List of Advantages and Disadvantages.

Respon­sive design is not a one-size-fits-all solu­tion to mobile. Accord­ing to the author of the Respon­sive Web Design book, Ethan Mar­cotte:

But most impor­tant­ly, respon­sive web design isn’t intend­ed to serve as a replace­ment for mobile web sites. […] And as a devel­op­ment strat­e­gy, it’s meant to be eval­u­at­ed to see if it meets the needs of the project you’re work­ing on.”

Keep­ing this in mind and con­sid­er­ing impli­ca­tions list­ed below, does RWD meet the needs of the project?

ADVANTAGES of Responsive Web Design.

  • User Expe­ri­ence (UX): Web­site adjusts to any screen size, mak­ing it a good long-term solu­tion to UX with the cur­rent pletho­ra of devices (includ­ing mobile/tablet hybrids). Hid­ing ele­ments which aren’t cru­cial for mobile vis­i­tors helps to achieve their goals faster.
  • Ana­lyt­ics: One com­plete view for all the traf­fic. To get insights on the mobile vis­i­tors, cre­ate a “mobile-only” seg­ment (note that by default, Google Ana­lyt­ics puts all the tablets under “Mobile” seg­ment).
  • Sharing/Linking: One URL to accu­mu­late all of the shares, likes, tweets, and inbound links. Con­tributes to a bet­ter user expe­ri­ence as well: have you ever clicked on a link in a tweet just to see a mobile ver­sion of a page in your full brows­er? #badUX
  • SEO: Going with the advan­tage above, one URL accu­mu­lates all links, PageR­ank, Page Author­i­ty, etc. How­ev­er, as Search Engines get smarter at deter­min­ing the rela­tion­ships between mobile-opti­mized pages and desk­top pages, this advan­tage won’t mat­ter.
  • Devel­op­ment: RWD involves no redi­rects to take care of, no user-agent tar­get­ing.
  • Main­te­nance: Once your web­site is respon­sive, there’s very lit­tle main­te­nance involved, as opposed to up-keep­ing a sep­a­rate mobile site. It is not required to up-keep a user-agent list with all of the up-to-date mobile devices.
  • Infor­ma­tion Archi­tec­ture (IA): With a 1-to-1 rela­tion­ship to the desk­top site, mobile mim­ics the full site’s IA, reduc­ing the learn­ing curve to get accus­tomed to using the mobile ver­sion.

DISADVANTAGES of Responsive Web Design.

  • User Experience/Load Time: Users need to down­load unnec­es­sary HTML/CSS code (not a huge deal) and most of the time, images are sim­ply scaled down, NOT resized — neg­a­tive­ly impact­ing the load-time (big­ger issue).
  • SEO: With RWD, you can­not eas­i­ly adjust Titles, Descrip­tions, and Con­tent for the mobile users. Mobile users use dif­fer­ent key­words, more like­ly to use voice search and for some ver­ti­cals, there can be sig­nif­i­cant vari­a­tion (use Google’s Key­word Tool, which sep­a­rates mobile search­es from the desk­top).
  • SEO: As deter­mined by my exper­i­ment, Google doesn’t rank sites based on the mobile-only con­tent locat­ed at the same URLs. If your respon­sive site tar­gets user-agents to serve cer­tain mobile-only con­tent, it will not be indexed nor used to rank your web­site.
  • Devel­op­ment: The ini­tial devel­op­ment of respon­sive web design takes more time. It is usu­al­ly much eas­i­er to cre­ate RWD from scratch than to con­vert an exist­ing site.
  • Design: Since lay­outs of RWD are “flu­id” (oth­er than two extremes: mobile and a full desk­top site), there’s less con­trol over how the “in-between” lay­outs will look and it is time-con­sum­ing for design­ers to show all the pos­si­ble mock­ups before­hand. Instead, design­ers usu­al­ly show wire­frames & mock­ups of the desk­top + mobile lay­outs. When both are approved, RWD is imple­ment­ed and design­ers can then show oper­a­tional lay­outs of the site in all screen sizes.

I tried to keep the list above as straight-for­ward as pos­si­ble. I will offer some gen­er­al­iza­tions in the sec­tion below, but by all means, it is ulti­mate­ly up to you to decide if RWD is the best solu­tion for your mobile strat­e­gy.

When Using Responsive Web Design Makes Sense (And Doesn’t).

As men­tioned ear­li­er, RWD is not a cook­ie-cut­ter solu­tion; there­fore, it works for some sites bet­ter than oth­ers. Below are some gen­er­al­iza­tions, but make sure to go through the full list of pros/cons above if you haven’t done so already.

  • If your web­site con­tains few­er than 50 pages, does not include advanced func­tion­al­i­ty, and user intent is not sig­nif­i­cant­ly dif­fer­ent on the mobile devices, chances are, RWD would be a great solu­tion to improve the mobile users’ expe­ri­ence.
  • If your web­site is fair­ly sim­ple, with­out too many dif­fer­ent page “types” (e.g. arti­cle pages, cat­e­go­ry pages, browse by pages, etc.), and the user intent is not sig­nif­i­cant­ly dif­fer­ent on the mobile devices, RWD can be a good solu­tion to improve mobile UX.
  • If you have a com­plex site with a lot of page types, user intent is not sig­nif­i­cant­ly dif­fer­ent on the mobile and you’re plan­ning a redesign, you should at least con­sid­er RWD.
  • If peo­ple have sig­nif­i­cant­ly dif­fer­ent goals when using your site from mobile devices, chances are, RWD is not for you.

Undoubt­ed­ly, mobile vis­its keep grow­ing fast, but despite the lat­est reports that only 9% of the top 1 mil­lion web­sites are “mobile-ready” (by Mon­goose Met­rics), the absolute major­i­ty of web­sites actu­al­ly ARE smart­phone-ready — since 2007, when Apple intro­duced the abil­i­ty to browse any web­site on the iPhone. In fact, Apple believes that it deliv­ered such a great prod­uct (full brows­er which made phones “smart”) that there’s no need for mobile sites: Apple.com on a smart­phone is their full web­site.

Like any oth­er project, set goals and real­is­tic expec­ta­tions for the mobile site (“increase con­ver­sion rate of mobile seg­ment by X%” or “increase sat­is­fac­tion rate of cus­tomers access­ing mobile site by X%”) and deter­mine if this is enough to jus­ti­fy the invest­ment with your cur­rent mobile user base, account­ing for the growth.

Where I’d Like to See Mobile Search.

As far as search engines go, IMHO, it is in their inter­est to deter­mine the intent of the users depend­ing on the device they use. Cindy Krum of Mobile­Mox­ie has blogged about SERPs dif­fer­ences depend­ing on a device, and I think we will see more of these improve­ments going for­ward. We real­ly can­not expect Bob, a restau­rant own­er, to do key­word research to deter­mine that mobile searchers want to view menu and direc­tions more than the “about the restau­rant” sec­tion on the home­page. Search engines need to devel­op fur­ther and offer mobile vis­i­tors pages which are more like­ly to be clicked on (noth­ing new), but adapt this func­tion­al­i­ty for mobile.

Update:

Just yes­ter­day, Google took an offi­cial stand on build­ing smart­phone-opti­mized web­sites and says that respon­sive web design is Google’s rec­om­mend­ed con­fig­u­ra­tion. With that said, advantages/disadvantages of RWD list­ed in this post are still the same.

 

 

http://www.seomoz.org/ugc/responsive-web-design-the-ultimate-guide-for-online-marketers

You May Also Like

Get an awesome sticky message bar!Download