Optimizing the user experience for mobile devices is no longer a luxury—it's a must. Businesses have the option of building dedicated mobile sites for smartphones and tablets, or implementing responsive design techniques to serve all screen sizes. But how do the different options affect the user experience and SEO? How do you determine which is right for your company? In this webinar, you’ll find out: - What is responsive design? - Google's recommendations for building mobile-optimized websites. - What you need to understand before going responsive. - Lessons learned and results from companies who have gone responsive. This webinar is brought to you in collaboration with Elastic Path.

1. Is Responsive Web Design Right for Your Business?
#RWDwebinar | July 30th, 2013
+

2. Join the conversation at #RWDwebinar
Igor Faletski
CEO & Co-Founder
@igorskee @mobify | mobify.com
Linda Bustos
Director of E-Commerce Research
@elasticpath | getelastic.com
Meet Our Hosts

3. In today’s webinar
1. Mobile Web: The Big Picture
2. What is Responsive Web Design
3. PROs & CONs of Different Approaches
4. How to Build a Google-Friendly Mobile Site
5. What You Need to Consider
6. Q&A with Igor and Linda
#RWDwebinar

4. We provide the fastest, most secure way of optimizing
your website for mobile experiences on a global scale.
Adapt your website for smartphones, tablets and more
with our open platform and services, and speed up your
responsive or mobile website with our automated
performance optimization features.
Mobify is used by leading Fortune 500 companies and
drives hundreds of millions of dollars in mobile revenue:
#RWDwebinar

5. Commerce Everywhere
We provide ecommerce software that powers the next generation
of digital experience and allows you to bring the combined power
of all of your technology to websites, apps, and other touchpoints
for the ultimate customer buying experience.
#1 ecommerce blog www.getelastic.com
Market leaders depend on Elastic Path to drive billions of dollars in
digital commerce annually:
#RWDwebinar

6. +
We work together to help businesses deliver amazing
mobile and digital commerce experiences that drive
conversions and maximize revenues.

7. MOBILE WEB:
THE BIG PICTURE

8. #RWDwebinar

9. #RWDwebinar

10. #RWDwebinar

11. #RWDwebinar

12. Mobile as a Percentage of Retail Sales
#RWDwebinar
2012 2013 2016

13. Retail Sales
#RWDwebinar

14. #RWDwebinar
BEFORE AFTER

15. WHAT IS
RESPONSIVE
WEB DESIGN?

16. #RWDwebinar

17. ONE URL
CSS OR
JAVASCRIPT
SAME HTML
Google says RWD is 3 configurations
#RWDwebinar

18. Ethan Marcotte says RWD is
3 front-end techniques
FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIA
Image Credit: Luke Wroblewski, CSS-Tricks
#RWDwebinar

19. RWD is understanding users and breakpoints
#RWDwebinar

20. PROS & CONS IN
DIFFERENT
APPROACHES

21. Three approaches to
mobile web development
1. Device-specific sites
(aka m-dot or proxy)
2. Server-side solutions
3. Responsive web design
#RWDwebinar

22. Device-Specific Approach
With a device-specific approach (aka m-dot or proxy
solution), you develop separate versions of their site
for each type of device, each with a separate URL.
#RWDwebinar

23. Server-Side Adaptive
In this setup, the server responds with
different HTML (and CSS) on the same
URL depending on the user agent
requesting the page.
#RWDwebinar

24. Responsive Web Design
Rather than building separate sites for each
device, responsive design uses a single
website that intelligently adjusts its layout and
features based on breakpoints.
#RWDwebinar

25. Device-Specific Approach
Your site is found at different URLs, based on device:
Desktop: www.example.com
Mobile: m.example.com
Tablet: t.example.com
Watch: w.example.com?
Redirects are done through proxy.
#RWDwebinar

26. You can customize per device
PRO: Device-Specific Approach
#RWDwebinar

27. Light code = fast to load
(but you have to maintain several code bases)
PRO: Device-Specific Approach
#RWDwebinar

28. Fast to market
(but this isn’t a future-friendly solution)
PRO: Device-Specific Approach
#RWDwebinar

29. You must redirect your users, which is bad for
conversions, social sharing, SEO, scalability...
#RWDwebinar
CON: Device-Specific Approach

30. Multiple code bases to maintain
#RWDwebinar
CON: Device-Specific Approach

31. Duplicate content
#RWDwebinar
CON: Device-Specific Approach

32. Extra work is required in order for mobile
content to be discovered and properly indexed
by Google (more on this later)
#RWDwebinar
CON: Device-Specific Approach

33. Server-Side Approach
Your site is always found at one URL:
www.example.com
on desktop, mobile, tablet, etc.
#RWDwebinar

34. PRO: Server-Side Approach
One URL
#RWDwebinar

35. PRO: Server-Side Approach
Gain development control
#RWDwebinar

36. CON: Server-Side Approach
Multiple code bases to maintain
#RWDwebinar

37. CON: Server-Side Approach
Higher risk in servers
#RWDwebinar

38. CON: Server-Side Approach
Strong developer skills needed
#RWDwebinar

39. Responsive Web Design
Your site is always found at one URL:
www.example.com
on desktop, mobile, tablet, etc.
#RWDwebinar

40. Responsive Web Design
Image Credit: Peter Sheldon, Forrester Research
#RWDwebinar

41. Google is happy (SEO best practice)
PRO: Responsive Web Design
#RWDwebinar

42. Performance is not guaranteed
CON: Responsive Web Design
#RWDwebinar

43. A lot of labour, money, testing and risk
is required to build a responsive
website from scratch
CON: Responsive Web Design
#RWDwebinar

44. Conversions
+66% Apple, +400% Android
Transactions
+113% Apple, +333% Android
Revenue
+100% Apple, +590% Android
Non-mobile
conversion +20.3%, revenue +41%
Responsive Test Results: O’Neill
#RWDwebinar

45. Responsive Results: Time Magazine
#RWDwebinar
Homepage unique visits
increased 15%
Time spent on site
increased 7.5%
Mobile bounce rate
decreased 26%

46. Garmin worked with Mobify to
get all the benefits and none of
the drawbacks of RWD.
Mobile sales performance
+ 55% month-over-month
+391% year-over-year
Average order value
+ 16% month-over-month
+ 70% year-over-year
Responsive Results: Garmin
#RWDwebinar

47. HOW TO BUILD A
GOOGLE-FRIENDLY
MOBILE SITE

48. #RWDwebinar

49. Use a device-specific or server-side solution
but beware:
• Google ranks these sites lower
• Extra work is needed in order for mobile
content to be detected by Google
• Most vendors provide partial or no
implementation of the required annotations
#RWDwebinar

50. Use responsive web design
Google recommends this approach.
Responsive sites built from scratch or adapted
by Mobify are automatically crawled and
indexed, and preferentially ranked by Google.
#RWDwebinar

51. Google: how to fix your mobile SEO
Responsive
Configurations
Device-Specific
Server-Side
Adaptive
Adaptive (Mobify)
One URL No (Separate Sites) One URL One URL
Same HTML No No (Different HTML) Same HTML
CSS for
Adaptations
No No
CSS + JavaScript for
Adaptations
Additional
Configurations
Canonical and
Alternate Tags
Vary HTTP Header
Not needed (100%
Compliant)
#RWDwebinar

52. Mobify is the only enterprise-ready multi-screen
platform vendor that is officially recommended
by Google and fully compliant with all of Google’s
SEO and responsive web design best practices.
#RWDwebinar

53. WHAT YOU NEED
TO CONSIDER

54. Business considerations
1. Time to market
2. $$$
3. Marketing ROI
4. Branding
5. Organizational structure
6. Risk and security
7. Scalability
#RWDwebinar

55. Technology considerations
1. Development resources and skill
2. Development and maintenance process
3. Technology stack and vendors
4. Risk and security
5. Scalability
#RWDwebinar

56. User considerations
1. User experience
2. Context
3. Layout and functionality
4. Localization and personalization
5. Performance
#RWDwebinar

57. Any questions?
Igor Faletski
CEO & Co-Founder
@igorskee @mobify | mobify.com
Linda Bustos
Director of E-Commerce Research
@elasticpath | getelastic.com
Thanks for joining us for #RWDwebinar