of 57 /57
Is Responsive Web Design Right for Your Business? #RWDwebinar | July 30th, 2013 +

Webinar: Is Responsive Web Design Right for Your Business?

  • Author

  • View

  • Download

Embed Size (px)


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.

Text of Webinar: Is Responsive Web Design Right for Your Business?

  • 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 todays 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 isnt 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: ONeill #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 Googles 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