Is Responsive Web Design Right for Your Business?
#RWDwebinar | July 30th, 2013
+
Join the conversation at #RWDwebinar
Igor Faletski
CEO & Co-Founder
@igorskee @mobify | mobify.com
Linda Bustos
Director o...
In today’s webinar
1. Mobile Web: The Big Picture
2. What is Responsive Web Design
3. PROs & CONs of Different Approaches
...
We provide the fastest, most secure way of optimizing
your website for mobile experiences on a global scale.
Adapt your we...
Commerce Everywhere
We provide ecommerce software that powers the next generation
of digital experience and allows you to ...
+
We work together to help businesses deliver amazing
mobile and digital commerce experiences that drive
conversions and m...
MOBILE WEB:
THE BIG PICTURE
#RWDwebinar
#RWDwebinar
#RWDwebinar
#RWDwebinar
Mobile as a Percentage of Retail Sales
#RWDwebinar
2012 2013 2016
Retail Sales
#RWDwebinar
#RWDwebinar
BEFORE AFTER
WHAT IS
RESPONSIVE
WEB DESIGN?
#RWDwebinar
ONE URL
CSS OR
JAVASCRIPT
SAME HTML
Google says RWD is 3 configurations
#RWDwebinar
Ethan Marcotte says RWD is
3 front-end techniques
FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIA
Image Credit: Luke Wroblewski, C...
RWD is understanding users and breakpoints
#RWDwebinar
PROS & CONS IN
DIFFERENT
APPROACHES
Three approaches to
mobile web development
1. Device-specific sites
(aka m-dot or proxy)
2. Server-side solutions
3. Respo...
Device-Specific Approach
With a device-specific approach (aka m-dot or proxy
solution), you develop separate versions of t...
Server-Side Adaptive
In this setup, the server responds with
different HTML (and CSS) on the same
URL depending on the use...
Responsive Web Design
Rather than building separate sites for each
device, responsive design uses a single
website that in...
Device-Specific Approach
Your site is found at different URLs, based on device:
Desktop: www.example.com
Mobile: m.example...
You can customize per device
PRO: Device-Specific Approach
#RWDwebinar
Light code = fast to load
(but you have to maintain several code bases)
PRO: Device-Specific Approach
#RWDwebinar
Fast to market
(but this isn’t a future-friendly solution)
PRO: Device-Specific Approach
#RWDwebinar
You must redirect your users, which is bad for
conversions, social sharing, SEO, scalability...
#RWDwebinar
CON: Device-Sp...
Multiple code bases to maintain
#RWDwebinar
CON: Device-Specific Approach
Duplicate content
#RWDwebinar
CON: Device-Specific Approach
Extra work is required in order for mobile
content to be discovered and properly indexed
by Google (more on this later)
#R...
Server-Side Approach
Your site is always found at one URL:
www.example.com
on desktop, mobile, tablet, etc.
#RWDwebinar
PRO: Server-Side Approach
One URL
#RWDwebinar
PRO: Server-Side Approach
Gain development control
#RWDwebinar
CON: Server-Side Approach
Multiple code bases to maintain
#RWDwebinar
CON: Server-Side Approach
Higher risk in servers
#RWDwebinar
CON: Server-Side Approach
Strong developer skills needed
#RWDwebinar
Responsive Web Design
Your site is always found at one URL:
www.example.com
on desktop, mobile, tablet, etc.
#RWDwebinar
Responsive Web Design
Image Credit: Peter Sheldon, Forrester Research
#RWDwebinar
Google is happy (SEO best practice)
PRO: Responsive Web Design
#RWDwebinar
Performance is not guaranteed
CON: Responsive Web Design
#RWDwebinar
A lot of labour, money, testing and risk
is required to build a responsive
website from scratch
CON: Responsive Web Design...
Conversions
+66% Apple, +400% Android
Transactions
+113% Apple, +333% Android
Revenue
+100% Apple, +590% Android
Non-mobil...
Responsive Results: Time Magazine
#RWDwebinar
Homepage unique visits
increased 15%
Time spent on site
increased 7.5%
Mobil...
Garmin worked with Mobify to
get all the benefits and none of
the drawbacks of RWD.
Mobile sales performance
+ 55% month-o...
HOW TO BUILD A
GOOGLE-FRIENDLY
MOBILE SITE
#RWDwebinar
Use a device-specific or server-side solution
but beware:
• Google ranks these sites lower
• Extra work is needed in order...
Use responsive web design
Google recommends this approach.
Responsive sites built from scratch or adapted
by Mobify are au...
Google: how to fix your mobile SEO
Responsive
Configurations
Device-Specific
Server-Side
Adaptive
Adaptive (Mobify)
One UR...
Mobify is the only enterprise-ready multi-screen
platform vendor that is officially recommended
by Google and fully compli...
WHAT YOU NEED
TO CONSIDER
Business considerations
1. Time to market
2. $$$
3. Marketing ROI
4. Branding
5. Organizational structure
6. Risk and secu...
Technology considerations
1. Development resources and skill
2. Development and maintenance process
3. Technology stack an...
User considerations
1. User experience
2. Context
3. Layout and functionality
4. Localization and personalization
5. Perfo...
Any questions?
Igor Faletski
CEO & Co-Founder
@igorskee @mobify | mobify.com
Linda Bustos
Director of E-Commerce Research
...
Upcoming SlideShare
Loading in …5
×

Webinar: Is Responsive Web Design Right for Your Business?

1,253 views

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,253
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Webinar: Is Responsive Web Design Right for Your Business?

  1. 1. Is Responsive Web Design Right for Your Business? #RWDwebinar | July 30th, 2013 +
  2. 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. 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. 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. 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. 6. + We work together to help businesses deliver amazing mobile and digital commerce experiences that drive conversions and maximize revenues.
  7. 7. MOBILE WEB: THE BIG PICTURE
  8. 8. #RWDwebinar
  9. 9. #RWDwebinar
  10. 10. #RWDwebinar
  11. 11. #RWDwebinar
  12. 12. Mobile as a Percentage of Retail Sales #RWDwebinar 2012 2013 2016
  13. 13. Retail Sales #RWDwebinar
  14. 14. #RWDwebinar BEFORE AFTER
  15. 15. WHAT IS RESPONSIVE WEB DESIGN?
  16. 16. #RWDwebinar
  17. 17. ONE URL CSS OR JAVASCRIPT SAME HTML Google says RWD is 3 configurations #RWDwebinar
  18. 18. Ethan Marcotte says RWD is 3 front-end techniques FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIA Image Credit: Luke Wroblewski, CSS-Tricks #RWDwebinar
  19. 19. RWD is understanding users and breakpoints #RWDwebinar
  20. 20. PROS & CONS IN DIFFERENT APPROACHES
  21. 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. 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. 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. 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. 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. 26. You can customize per device PRO: Device-Specific Approach #RWDwebinar
  27. 27. Light code = fast to load (but you have to maintain several code bases) PRO: Device-Specific Approach #RWDwebinar
  28. 28. Fast to market (but this isn’t a future-friendly solution) PRO: Device-Specific Approach #RWDwebinar
  29. 29. You must redirect your users, which is bad for conversions, social sharing, SEO, scalability... #RWDwebinar CON: Device-Specific Approach
  30. 30. Multiple code bases to maintain #RWDwebinar CON: Device-Specific Approach
  31. 31. Duplicate content #RWDwebinar CON: Device-Specific Approach
  32. 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. 33. Server-Side Approach Your site is always found at one URL: www.example.com on desktop, mobile, tablet, etc. #RWDwebinar
  34. 34. PRO: Server-Side Approach One URL #RWDwebinar
  35. 35. PRO: Server-Side Approach Gain development control #RWDwebinar
  36. 36. CON: Server-Side Approach Multiple code bases to maintain #RWDwebinar
  37. 37. CON: Server-Side Approach Higher risk in servers #RWDwebinar
  38. 38. CON: Server-Side Approach Strong developer skills needed #RWDwebinar
  39. 39. Responsive Web Design Your site is always found at one URL: www.example.com on desktop, mobile, tablet, etc. #RWDwebinar
  40. 40. Responsive Web Design Image Credit: Peter Sheldon, Forrester Research #RWDwebinar
  41. 41. Google is happy (SEO best practice) PRO: Responsive Web Design #RWDwebinar
  42. 42. Performance is not guaranteed CON: Responsive Web Design #RWDwebinar
  43. 43. A lot of labour, money, testing and risk is required to build a responsive website from scratch CON: Responsive Web Design #RWDwebinar
  44. 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. 45. Responsive Results: Time Magazine #RWDwebinar Homepage unique visits increased 15% Time spent on site increased 7.5% Mobile bounce rate decreased 26%
  46. 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. 47. HOW TO BUILD A GOOGLE-FRIENDLY MOBILE SITE
  48. 48. #RWDwebinar
  49. 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. 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. 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. 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. 53. WHAT YOU NEED TO CONSIDER
  54. 54. Business considerations 1. Time to market 2. $$$ 3. Marketing ROI 4. Branding 5. Organizational structure 6. Risk and security 7. Scalability #RWDwebinar
  55. 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. 56. User considerations 1. User experience 2. Context 3. Layout and functionality 4. Localization and personalization 5. Performance #RWDwebinar
  57. 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

×