As of February, the smartphone share in the United States has reached nearly 50%. 2012 is FINALLY "the year of mobile" and this means that you need to invest in a mobile user experience. Check your analytics — that mobile traffic share keeps growing!
With all of the hype that responsive web design is getting, what are the biggest implications for marketers and SEOs regarding its fit as the long-term mobile strategy?
First Of All, What is Responsive Web Design?
In a nutshell, responsive web design (RWD) is a technique which uses fluid layouts (which "stretch" to as much screen real estate as possible) in addition to the CSS "@media queries," which apply different style sheets (CSS) based on the current screen size of the device. With responsive design, your website will fit virtually any device with a full browser: smartphones, iPad + other tablets (both landscape and portrait modes), and even TVs. It doesn’t matter that thr Galaxy Tab’s resolution is different from a Nexus S phone — your site will render beautifully, as long as responsive design was correctly implemented.
One of the most famous examples of responsive web design is BostonGlobe.com: simply go to the site and re-size your browser window: the website will automatically adjust to the current width of your browser. BostonGlobe is probably the biggest, most complex site which has implemented this technique, but there are hundreds of other examples available at mediaqueri.es, including UC San Diego, Smashing Magazine, and more.
What are the Alternatives to Responsive Design?
Responsive design became a hot topic since the growth of mobile. Some people view it as the best solution to improve the mobile (and tablet) user experience, however it is not always the case. The purpose of this post is to go over the RWD in detail, but in order to see the full picture, "going mobile" via RWD does have two alternatives.
Separate mobile site.
Usually hosted on the "m." sub-domain, mobile sites are usually developed from scratch. Visitors will redirect to the mobile site after server detects that their User-Agent is a smartphone.
For example, 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, Blackberry, or Windows Phone) are the best in controlling the user experience and taking advantage of the smartphones' hardware capabilities, they are expensive to develop and they are not part of the "open web," making apps impossible for search engines to crawl.
How Does Google Crawl/Index Responsive Sites?
Crawling.
About 6 months ago, Google introduced a new smartphone Crawler, which mimics the iPhone's user-agent.
Since RWD simply adjusts to the screen size and does not change the content based on the mobile user-agent, Googlebot-Mobile has access to all of the content of the full site (HTML, CSS, images, etc). The only difference is: in the case that Google can read through CSS and understand "@media" queries used by RWD, Google can figure out which elements are hidden on your mobile site (it doesn't seem so, but still is an open question). To be on the safe side, I wouldn't hide any elements containing important content at widths higher than 600px.
Image Previews in SERPs.
Google mobile SERPs show the listings' previews on the latest smartphones. For responsive designs, the preview is shown at the width of about 640px wide (iPhone's resolution in a portrait mode). See example screenshot below.
Indexing and Caching [with an Experiment!].
I ran an experiment to figure out if Google actually indexes mobile-specific pages. I took the following steps:
- On the bottom of each page of my site, I added a text which targets mobile user-agents and is only visible if the visitor's device is a smartphone.
- The exact text (which is "mobphone teststring") didn't match any pages in Google nor Bing
- I did "Fetch as Googlebot" (Mobile: Smartphone) in Webmaster Tools. The result showed that my text is visible to Google Bot. [April 27/9pm EST]
- I waited until my pages got crawled again (checked my server logs after running "Fetch as Googlebot"). Googlebot-Mobile crawled by homepage on April 29th at 9pm EST.
- I searched for "mobphone teststring" in Google & Bing... No results found (still, after 10 days).
- When searching for my own site on Google using a smartphone, the "Cached" pages belong to the desktop site and "mobphone teststring" is not there.
VERDICT: When crawling mobile versions of the pages located at the same URLs as the desktop pages (either RWD or done via user-agent targeting):
- Google will NOT cache the mobile version of your pages.
- Currently, Google seems to ignore any content which shows up only for the mobile visitors.
If your visitor goals are different on the mobile site than on a desktop site (e.g. car insurance companies: quotes on desktop vs. road-side assistance on mobile), then I tend to agree with Bryson Meunier: currently, the hybrid approach to mobile URLs (having an ".m" subdomain) would ensure that the mobile site's content gets cached and treated equally to the desktop sites. (Although at the end of this post, I describe how I'd like this to be taken care of by Search Engines long-term.)
Bing & Mobile.
While Bing doesn't have a separate mobile crawler which mimics a smartphone, Bing seems to use BingBot for crawling the desktop and mobile sites. Also, a fairly recent post by Duane Forrester talks about how the "one-URL" policy for all devices is preferred by Bing. I couldn't find any other information online, in the server logs, or by experimenting (Bing doesn't give an ability to see cached pages on mobile).
Responsive Web Design: Ultimate List of Advantages and Disadvantages.
Responsive design is not a one-size-fits-all solution to mobile. According to the author of the Responsive Web Design book, Ethan Marcotte:
"But most importantly, responsive web design isn't intended to serve as a replacement for mobile web sites. [...] And as a development strategy, it's meant to be evaluated to see if it meets the needs of the project you're working on."
Keeping this in mind and considering implications listed below, does RWD meet the needs of the project?
ADVANTAGES of Responsive Web Design.
- User Experience (UX): Website adjusts to any screen size, making it a good long-term solution to UX with the current plethora of devices (including mobile/tablet hybrids). Hiding elements which aren't crucial for mobile visitors helps to achieve their goals faster.
- Analytics: One complete view for all the traffic. To get insights on the mobile visitors, create a "mobile-only" segment (note that by default, Google Analytics puts all the tablets under "Mobile" segment).
- Sharing/Linking: One URL to accumulate all of the shares, likes, tweets, and inbound links. Contributes to a better user experience as well: have you ever clicked on a link in a tweet just to see a mobile version of a page in your full browser? #badUX
- SEO: Going with the advantage above, one URL accumulates all links, PageRank, Page Authority, etc. However, as Search Engines get smarter at determining the relationships between mobile-optimized pages and desktop pages, this advantage won't matter.
- Development: RWD involves no redirects to take care of, no user-agent targeting.
- Maintenance: Once your website is responsive, there's very little maintenance involved, as opposed to up-keeping a separate mobile site. It is not required to up-keep a user-agent list with all of the up-to-date mobile devices.
- Information Architecture (IA): With a 1-to-1 relationship to the desktop site, mobile mimics the full site's IA, reducing the learning curve to get accustomed to using the mobile version.
DISADVANTAGES of Responsive Web Design.
- User Experience/Load Time: Users need to download unnecessary HTML/CSS code (not a huge deal) and most of the time, images are simply scaled down, NOT resized — negatively impacting the load-time (bigger issue).
- SEO: With RWD, you cannot easily adjust Titles, Descriptions, and Content for the mobile users. Mobile users use different keywords, more likely to use voice search and for some verticals, there can be significant variation (use Google's Keyword Tool, which separates mobile searches from the desktop).
- SEO: As determined by my experiment, Google doesn't rank sites based on the mobile-only content located at the same URLs. If your responsive site targets user-agents to serve certain mobile-only content, it will not be indexed nor used to rank your website.
- Development: The initial development of responsive web design takes more time. It is usually much easier to create RWD from scratch than to convert an existing site.
- Design: Since layouts of RWD are "fluid" (other than two extremes: mobile and a full desktop site), there's less control over how the "in-between" layouts will look and it is time-consuming for designers to show all the possible mockups beforehand. Instead, designers usually show wireframes & mockups of the desktop + mobile layouts. When both are approved, RWD is implemented and designers can then show operational layouts of the site in all screen sizes.
I tried to keep the list above as straight-forward as possible. I will offer some generalizations in the section below, but by all means, it is ultimately up to you to decide if RWD is the best solution for your mobile strategy.
When Using Responsive Web Design Makes Sense (And Doesn't).
As mentioned earlier, RWD is not a cookie-cutter solution; therefore, it works for some sites better than others. Below are some generalizations, but make sure to go through the full list of pros/cons above if you haven't done so already.
- If your website contains fewer than 50 pages, does not include advanced functionality, and user intent is not significantly different on the mobile devices, chances are, RWD would be a great solution to improve the mobile users' experience.
- If your website is fairly simple, without too many different page "types" (e.g. article pages, category pages, browse by pages, etc.), and the user intent is not significantly different on the mobile devices, RWD can be a good solution to improve mobile UX.
- If you have a complex site with a lot of page types, user intent is not significantly different on the mobile and you're planning a redesign, you should at least consider RWD.
- If people have significantly different goals when using your site from mobile devices, chances are, RWD is not for you.
Undoubtedly, mobile visits keep growing fast, but despite the latest reports that only 9% of the top 1 million websites are "mobile-ready" (by Mongoose Metrics), the absolute majority of websites actually ARE smartphone-ready — since 2007, when Apple introduced the ability to browse any website on the iPhone. In fact, Apple believes that it delivered such a great product (full browser which made phones "smart") that there's no need for mobile sites: Apple.com on a smartphone is their full website.
Like any other project, set goals and realistic expectations for the mobile site ("increase conversion rate of mobile segment by X%" or "increase satisfaction rate of customers accessing mobile site by X%") and determine if this is enough to justify the investment with your current mobile user base, accounting for the growth.
Where I'd Like to See Mobile Search.
As far as search engines go, IMHO, it is in their interest to determine the intent of the users depending on the device they use. Cindy Krum of MobileMoxie has blogged about SERPs differences depending on a device, and I think we will see more of these improvements going forward. We really cannot expect Bob, a restaurant owner, to do keyword research to determine that mobile searchers want to view menu and directions more than the "about the restaurant" section on the homepage. Search engines need to develop further and offer mobile visitors pages which are more likely to be clicked on (nothing new), but adapt this functionality for mobile.
Update:
Just yesterday, Google took an official stand on building smartphone-optimized websites and says that responsive web design is Google's recommended configuration. With that said, advantages/disadvantages of RWD listed in this post are still the same.
Good one Slavik thanks for updating its pros and cons too...
Responsive web design is important. With so many different devices capable of reaching the web, it is imperative we use the best techniques for our sites.
When it rains it pours Slavik !
Right on the money - no coincidence that today I spent 2 hours with a client of mine going over the exact background of info you shared here today!
Great stuff -
The mobile app jazz is picking up as well!
Thanks Chenzo! Yes, timing was great with the Google' announcement :)
I have been marketing the benefits of RWD to my clients as well, it will be the way of the web in the VERY near future.
Great timing on this article (even if it's unplanned). RWD is one of the most interesting new technologies that i've seen in a long time. Your article really gives some great insights on how Google responds to the new media queries.
I think there will be a lot more information in the near future on RWD readily availible. Even in the last few months i've seen the amount of quality resources AT LEAST tripple.
I'm glad you enjoyed the post, Zachary! I'm definitely excited about RWD and the related technologies.
Thanks for commenting!
Slavik, that was a great post! Responsive web design is the way to go forward with so many mobile platforms and media popping up, it will be difficult for a web designer to design separate versions for each medium. Thus it makes perfect sense to create one design that fits all according to the width of the screen rather than the medium used.
However from my personal experience, it is difficult to convince local clients or small business owners to invest in a responsive design if their target audience is primarily accessing their site from desktops unless their website is built on wordpress since there are a lot responsive wp themes that can be used as a starting point.
very nice and comprehensive responsive web design guide Slavik. I what other ways is responsive web design impacting and effecting on line marketers would you say other than what you mention in the article?
We cover a few of these topics at our Blog if you want to check it our www.ResponsiveWebDesignBlog.com
In my opinion, I'm not sure that responsive web design is on the mind of true on-line and affiliate marketers- what are your thoughts on this as well
please advise thanks!
Chris
Thank you so much! This would be a good addition too https://responsivedeck.com for inspiration of responsive sites and hand-picked collection nice looking wp themes!
We've just added a new responsive site for a client at https://www.cliphair.co.uk - interesting to note than using Google webmaster tools to fetch the mobile/smartphone version actually shows the desktop version.
The current switching uses the supplied browser screen resolution to control the different page views. Does anyone know what screen resolution the mobile googlebot would identify itself as?
Very good article about responsive web design. Now on it will be easy for me to convince my client to go for responsive web design. It cost bit more but it has got some permanent advantages and I will send them this article link to convince them.
A really good read with some excellent points throughout. I recently posted Embracing the Mobile Web with Responsive Design and highly recommended your article as a source for further reading on the positive impacts responsive design can have on SEO. Thanks for taking the time to share!
So basically if a site is about car side assistance.. an emergency service which will most likely be searched by phone it's better having a .m version of the site because it gets indexed.
From an SEO point of view for a emergency service like a flat tire, will a seprate mobile site get better pacement? faster load times more user friendly. Or will using a RWD be better? same URL's better for sharing etc...
If a website is about a road-side assistance ONLY, then you do not need a separate mobile site of an "m." subdomain & RWD done correctly would work well.
I would only recommend having a separate mobile site (hosted on an "m." subdomain) if your users' tasks are different on a mobile site comparing to the desktop site (like described in Bryson's post on SEL). If that's the case, you'll want to have a different content on your mobile site and a best way to make sure your users will get to it (and have it indexed by SEs) is m. subdomain.
Great article.
One of your issues with RWD is that assets are being downloaded on mobile devices that are really meant for desktop versions. The trend (for people in the "know") is to now start building sites with Mobile devices as default site designs. A "Mobile First approach" is the lingo. What happens is we design the site with the intention that the base design of the site is for mobile and therefore only the assets (images, etc) intended for Mobile get loaded and no other. THEN, using Media Queries and other technique we ADD or REPLACE assets that are longer load times for desktops and TVs who presumably have faster internet access. This avoids the slower page loads that make for bad user experience in mobile browsing. As you pointed out, even with the slow page loads, this is not a reason not to use RWD, but building sites with a Mobile First philosophy really just handles this as much as possible anyway.
Additionally, there are techniques now available to optimize the images for mobile and tablet users so that we make the process of serving the lowest size images to the user and therefore avoided weird image presentation and extra bandwidth usage.
RWD is unfortunately being pigeon holed as a solution for only Mobile browsing but a complete discussion includes designing higher resolution and browser size sites as well. Many sites are visited by a significant percentage of users who have larger monitor resolutions. Providing a 960px wide website is tragic as there is so much real-estate being wasted which designers can really take advantage of and give these users a better experience. The trend of higher resolution monitors is going to increase as much as, or more so than mobile (based on my analytic logs) - but of course it depends on the market - with TVs, and just larger resolution monitors. Ignoring this is seemingly unwise and somehow sad.
Where you are right on, but a little skimpy on the info, is determining the needs of the mobile device user versus the desktop user. Considerations include the fact that often people are using one hand, walking or otherwise using "one eye" to view the site. In the hotel business, we know that most users going to the the mobile version ALREADY know about the hotel and are either looking to book the room, call a phone number or get directions. With RWD we can easily provide this data upfront and center. Whereas on a desktop, the user intent is less so, and they want to see pictures, reviews, etc...
The last point, which I expected you to go into more, is the fact that RWD is the only method of web design that takes into account future device widths and resolutions that we may not even be using in present time. For example, wall sized displays, billboard displays, watches, in the car, gaming and other consoles, airplane monitors, etc... I even know that in Germany there is a company selling web served advertising in buses! (Testing phase).
Actually, the real last point, is that RWD is perhaps THE technology which saves Web Designing as an industry. With theming, cookie cutter web site platforms, the Facebooks and Google Plus pages of the world, etc... Web design had the real danger of becoming just another commodity. With RWD there is an art (which you allude to) and as such it behooves the industry as a whole to communicate well with the clients how beneficial RWD is and why this solution is for most sites - the way to go. Thanks to people like Ethan Marcotte, Chris Coyier and others the advancement of HOW to do RWD is assured. In time, many issues like asset loading with be developed and standardized but the basic theory of designing RWD sites will not change.
Anyway, happy you covered RWD, makes it possible for the discussion to go "mainstream"!
-DK
You have a lot of very good points (and YES, I love the "mobile first" approach) and I'm looking forward to newer techniques to really optimize the bandwidth for the mobile users.
Thank you for reading and for a thorough comment!
Thanks Slavik – really interesting post.
I have to admit that I was a bit of a sceptic about RWD - as a content strategist I'm conscious that mobile users and desktop users often have different content needs. But you’re right to make the distinction between simple websites whose mobile and desktop visitors don’t have significantly different goals, and more complex websites with advanced functionality.
Definitely food for thought!
Nice post Slavik! I like your conclusions on when it makes sense to apply RWD techniques to a site. The <50 page rule seems right on target too.
Thank you very much!
VERY timely post with google's announcement yesterday.
I'm running "SAME URL, DIFFERENT HTML". Googlebot and regular browsers picks up my desktop version, while Googlebot mobile and mobile visitors pick up my mobile version.
I'm at a loss as to what Google means by the "Vary HTTP header". Anbody has any idea what code do i need to add and where do I put it ?
P.S. I'm running two wordpress themes and W3 Total Cache for user-agent detection and serving of the right theme.
Kester, "Vary HTTP header" is a response which your server will send with every element, whether it is a php page, image, or CSS file.
If you are on Apache/PHP, simply add the following to your .htaccess file:
#Vary User-Agent, since different HTML is served based on Mobile/Desktop user-agents
Header append Vary User-Agent
Got it, Thanks!
Edit:
looks like W3T handles this correctly.It adds:
Header append Vary User-Agent env=!dont-vary
SEOmoz doesnt support mobile phones well! Someone should take care!
responsive web designing means your website will get fit in all the screens. Like moblie or tablet pc you must have to design your website according to that. Livepro softech pvt ltd will provide you website with full customization in a very reasonable price. For more details visit https://livepro.in/
Great POST!! IMO, Responsive Web Design is def the way to go!
Appreciate it, Dubs! Most of the times, yes :)