As sophisticated smartphones and faster internet connections gain greater market share, accessing the Web via mobile devices is becoming standard practice. 45% of all consumers use Smartphone for in-store product research and browsing, 72% of tablet owners make purchases from their devices on a weekly basis, 60+% US accessing mobile Internet. Mobile is exploding, and it's no longer the future of search, it is the now of search.

1. R
MOBILE SEO
CONSIDERATIONS
Presented by: Reva McEachern
Principal, Reva Digital Media
We live in a world where everything is mobile, thus the
best mobile strategy is to be mobile by design.
R E VA D I G I TA L . C O M

2. R
EVERYTHING IS MOBILE
It’s a sociological shift in how users relate with both
the digital and physical world.
Mobile Changes Everything.
Mobility IS Everything.
Everything is MOBILE.
R E VA D I G I TA L . C O M

3. R
MOBILE INTERNET USE
Failing to develop a mobile strategy means you’re ignoring a
large part of your users.
2011-2012 Statistics
45% of all consumers use
Smartphone for in-store product
research and browsing
72% of tablet owners make
purchases from their devices on
a weekly basis
60+% US accessing mobile
Internet
Gartner, Google, Cisco
R E VA D I G I TA L . C O M

4. R
MOBILE WEBSITE OPTIMIZATION VIEWS
“Good mobile user experience requires a different design
than what’s needed to satisfy desktop users. Two
designs, two sites, and cross-linking to make it all work.”
- Jakob Nielsen, Web usability guru
“All that we can really know about
mobile users is that they’re on a
small screen, and we can’t divine
user intent from that.”
- Josh Clarke, Web developer
and mobile specialist
R E VA D I G I TA L . C O M

5. R
SEPARATE DESKTOP / MOBILE SITE
When using separate desktop and mobile URLs, implement a two-way
annotation that helps Google discover your content and understand the
relationship between your desktop and mobile pages.
Pros
• Mobile-specific content
• Mobile-specific interface
Cons
• Multiple URLs
• More work updating content
Remember
• Ensure that annotations are
bidirectional
Avoid
• Creating a site that is not a
true desktop alternate
R E VA D I G I TA L . C O M

6. R
DESKTOP / MOBILE SITE ANNOTATIONS
Google also supports the rel=“alternate” annotation for the desktop pages in
Sitemaps. Note the required rel="canonical" tag on the mobile URL should still be
added to the mobile page's HTML.
<link rel="alternate"
media="only screen and (max-
width: 640px)"
href="http://m.jcrew.com" >
<link rel="canonical"
href="http://www.jcrew.com" >
<?XML VERSION="1.0" ENCODING="UTF-8"?>
<URLSET
XMLNS="HTTP://WWW.SITEMAPS.ORG/SCHEMAS/SITEMAP
/0.9"
XMLNS:XHTML="HTTP://WWW.W3.ORG/1999/XHTML">
<URL>
<LOC>HTTP://WWW.JCREW.COM</LOC>
<XHTML:LINK
REL="ALTERNATE"
MEDIA="ONLY SCREEN AND (MAX-WIDTH:
640PX)"HREF="HTTP://M.JCREW.COM" />
</URL>
</urlset>
desktop
mobile
sitemap
R E VA D I G I TA L . C O M

7. R
RESPONSIVE DESIGN
Responsive design utilizes CSS media queries to scale and adapt a website to
any device it’s viewed on. The typical media query used to resize for a
smartphone:
@media only screen and (max-width: 640px)
Pros
• Single URL, better for SEO
• Easier to maintain content
Cons
• Requires mobile-first redesign
• Too much info for mobile user
Remember
• Be sure not to block Googlebot
from crawling page assets
R E VA D I G I TA L . C O M

8. R
MEDIA QUERY MATH
Media queries consist of a media type and one or more expressions, involving
features, that resolve to either true or false. The result of the query is true if the
media query matches the type of device the document is being displayed on and
all expressions in the media query are true.
Media type
Media
expression
True/False
R E VA D I G I TA L . C O M

9. R
CSS MEDIA QUERIES
Media queries do not prevent CSS downloads. Separate CSS per media can
mean a lot of CSS and a lot of unnecessary resources being downloaded if not
properly optimized. Avoid too many requests for images and image rescaling
through CSS.
Avoid
• Download and hide
• Download and shrink
• Excess CSS downloads
Do
• Use responsive media
@media screen and (min-width : 640px) {
/* let's do somethin' */
}
stylesheet
<link rel="stylesheet" media="screen and (
max-width: 640px)" href="small.css" />
link to stylesheet
R E VA D I G I TA L . C O M

10. R
OPTIMIZING IMAGES FOR MOBILE
For decorative images, use background images rather than img tags. Combining
background images and media queries makes it easy to swap out large desktop
for small mobile images. Android devices request all background images.
Avoid
• Too many server requests
• Using large sprites >520K
Do
• Use image sprites
sprite
R E VA D I G I TA L . C O M

11. R
ADAPTIVE DESIGN
In adaptive design, dynamic serving is a setup where the server responds with
different HTML (and CSS) on the same URL depending on the user agent
requesting the page.
Pros
• Loads only what is needed
• Easier to maintain content
Cons
• Requires browser detection
Remember
• Use vary HTTP header
• Make redirection consistent w/
rel="alternate" tag and Sitemap
R E VA D I G I TA L . C O M

12. R
REDIRECTS & USER AGENT DETECTION
GET /page-1 HTTP/1.1 Host: www.example.com
User-Agent: Mozilla/5.0 (Linux; Android
4.0.4; Galaxy Nexus Build/IMM76B)
AppleWebKit/535.19 (KHTML, like Gecko)
Chrome/18.0.1025.133 Mobile Safari/535.19
(...rest of HTTP request headers...)
HTTP/1.1 200 OK Content-Type: text/html
Vary: User-Agent Content-Length: 5710 (...
rest of HTTP response headers...)
Avoid
• Irrelevant redirects
• Incomplete lists of user-agents
• JavaScript redirects
Do
• Use HTTP redirection
JavaScript can also be used to redirect users to the URLs pointed to by the link
rel="alternate" tag. But the client side needs to first download the page,
then parse and execute the JavaScript before triggering the redirect.
vary http header
R E VA D I G I TA L . C O M

13. R
FINAL THOUGHTS
There's a world of change already
playing out with how websites are
made. For the purposes of
search, this comes down to
microdata and adaptive design.
Microdata means that your website becomes a giant explicit data feed
of products, locations, and a growing list of things as defined at schema.org.
Adaptive design means that, eventually, you can unify your
mobile, tablet and desktop versions of your sites, meaning fewer targets for
search, less dilution, and therefore better positions.
R E VA D I G I TA L . C O M

14. R
RECOMMENDATIONS
If a client is starting from scratch or considering a redesign, recommend
Responsive Design to ensure a mobile-first strategy
If Adaptive Design is used, recommend that user-agent strings are up to date and
the site provides users a way to override the redirect policy for an optimal
experience
If Separate Desktop and Mobile URLs are already used, evaluate whether the
mobile site is a true desktop alternate and recommend the proper annotations
be implemented to avoid PageRank split
Remember that numerous factors must be considered when developing a mobile
strategy, many of which extend beyond the wheelhouse of SEO alone
Stay abreast of advances in Microdata and Adaptive Design. These things will
drastically alter the mobile search experience in the near future
R E VA D I G I TA L . C O M

15. R
RESOURCES
Media Queries: https://developer.mozilla.org/en-US/docs/CSS/Media_queries
Building Smartphone Optimized Websites:
https://developers.google.com/webmasters/smartphone-sites/details
Designing for the mobile web: Special considerations:
http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web-
special-considerations.php
10 key considerations for your mobile Web design strategy:
http://mashable.com/2011/03/24/mobile-web-design-tips/
Guidelines for mobile Web development:
http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
Considerations for mobile design 3 part series:
http://www.uxbooth.com/blog/considerations-for-mobile-design-part-1-speed/
Contact Me: Reva McEachern, reva@revadigital.com
R E VA D I G I TA L . C O M