Webinar: How to Build a Responsive Website that Converts

1,134 views

Published on

Learn how top ranking e-commerce, publishing and enterprise websites are tackling current mobile web development challenges, and see which approach will allow you to meet your business needs while creating the best experience for your users — and ultimately drive conversions.

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

  • Be the first to like this

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

No notes for slide

Webinar: How to Build a Responsive Website that Converts

  1. 1. How to Build a ResponsiveWebsite that Converts#ResponsiveROI | May 14th, 2013
  2. 2. Igor FaletskiCEO at Mobify@igorskeePeter McLachlanChief Architect at Mobify@b1tr0t#ResponsiveROI | @mobify
  3. 3. 1. GOING MOBILE IN 20132. RESPONSIVE & ADAPTIVE SHOWCASE3. UX DESIGN FOR CONVERSIONS4. PERFORMANCE FOR CONVERSIONS5. WHICH APPROACH IS RIGHT FOR YOU?6. Q&AIN TODAY’S WEBINAR#ResponsiveROI
  4. 4. GOINGMOBILEIN 2013
  5. 5. Responsive Web DesignAdaptive Web DesignOne Web, One URLWHAT DOES “GOING MOBILE”MEAN TODAY?#ResponsiveROI
  6. 6. WHAT IS RESPONSIVE WEB DESIGN?FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIAImage Credit: Luke Wroblewski, CSS-Tricks...are the 3 technical ingredients for responsive web design.- Ethan Marcotte#ResponsiveROI
  7. 7. Image Credit: Brad FrostWHAT IS ADAPTIVE WEB DESIGN?#ResponsiveROI
  8. 8. RESPONSIVE& ADAPTIVESHOWCASE
  9. 9. skinnyties.com#ResponsiveROI
  10. 10. indochino.com#ResponsiveROI
  11. 11. aritzia.com#ResponsiveROI
  12. 12. garmin.com#ResponsiveROI
  13. 13. time.com#ResponsiveROI
  14. 14. ReSS | nd.edu#ResponsiveROI
  15. 15. Adaptive | brides.com#ResponsiveROI
  16. 16. Adaptive | ctshirts.co.uk#ResponsiveROI
  17. 17. UX DESIGN FORCONVERSIONS
  18. 18. Simplify your formsImage Credit: Smashing Magazine#ResponsiveROI
  19. 19. Optimize for touch across devicesImage Credit: Luke Wroblewski#ResponsiveROI
  20. 20. Bigger is (usually) betterFont sizeMinimum: 14pxButtons & touch targetsMinimum: 45px by 45pxMarginsMinimum: 10px#ResponsiveROI
  21. 21. Hint and reveal (aka progressivedisclosure)Common Iconsm Menus Searchg Settingsu Profile#ResponsiveROI
  22. 22. Consider the interactionHover | Fly out Touch | Accordion#ResponsiveROI
  23. 23. Create image carouselsthat can be swiped#ResponsiveROI
  24. 24. Adapt for portrait andlandscape viewing#ResponsiveROI
  25. 25. PERFORMANCE FORCONVERSIONS
  26. 26. 1. BLOCKING JAVASCRIPT2. BANDWIDTH & LATENCY3. OVERSIZED OR POORLY COMPRESSED IMAGES4. JAVASCRIPT EXECUTION5. BROWSER RENDER OPERATIONS6. CSS PARSINGMost wanted performanceoffenders#ResponsiveROI
  27. 27. Blocking JavaScript#ResponsiveROI
  28. 28. Non-blocking resources#ResponsiveROI
  29. 29. Bandwidth - seems ok, right?#ResponsiveROI
  30. 30. LatencySource: Ilya Grigorik (Google)#ResponsiveROI
  31. 31. Latency#ResponsiveROI
  32. 32. What does this mean?0%#10%#20%#30%#40%#50%#60%#70%#80%#90%#100%#100ms# 1s# 2s# 3s# 4s# 5s# 6s# 7s# 8s# 9s# 10s#eCommercesaleslostduetoload.meSource: Amazon web team (1% conversion loss per 100ms)#ResponsiveROI
  33. 33. Oversized images#ResponsiveROI
  34. 34. Large JavaScript - still slow#ResponsiveROI
  35. 35. Parsing, tree building, layout & painting#ResponsiveROI
  36. 36. Layout reflow + Painting#ResponsiveROI
  37. 37. Repaint (redo layout+paint)#ResponsiveROI
  38. 38. CSS Complexity#ResponsiveROI
  39. 39. What can you do about thesechallenges?#ResponsiveROI
  40. 40. Remove unneeded resources#ResponsiveROI
  41. 41. Conditional JS loading#ResponsiveROI
  42. 42. Compress assets#ResponsiveROI
  43. 43. Pre-fetching#ResponsiveROI
  44. 44. Pre-fetching#ResponsiveROI
  45. 45. Other optimizationsMake use of localStorage and “smart” cachingIntelligent radio warmupCDNReduce number of DNS lookupsSet good caching headersCookie-less domains#ResponsiveROI
  46. 46. WHICHAPPROACHIS RIGHTFOR YOU?
  47. 47. Achieving One Web, One URLBuild from scratchReSSAdaptive TemplatingGet crafty#ResponsiveROI
  48. 48. Adapt any website for mobile devices—smartphones,tablets and more—with our open platform, tools, andservices that enable amazingly fastand responsive websites.WHAT IS MOBIFY?#ResponsiveROI
  49. 49. #ResponsiveROI
  50. 50. ADAPTIVE TEMPLATING• Customize your site uniquely for a specific device• One URL on desktops, smartphones and tablets alike• All CMS supported - simply paste a Mobify tag into your HTML• Keep your workflows the same• Maintain control - build it yourself, engage in co-developmentor get full service#ResponsiveROI
  51. 51. FAST, RESPONSIVE IMAGES• Dramatically reduce page load time andincrease user engagement• Accelerate performance of asset rendering inresponsive websites• Reduce bandwidth costs result in a betterbottom line for your business#ResponsiveROI
  52. 52. PERFORMANCEOPTIMIZATIONJavaScript and CSS Acceleration• Improve mobile load times byreducing the number of HTTPrequests• Use the Mobify API to specifywhich resources are optimized#ResponsiveROI
  53. 53. @mobify | mobify.com | hello@mobify.com#ResponsiveROI | Any Questions?
  54. 54. On Responsive, Adaptive and One WEbhttp://alistapart.com/article/responsive-web-designhttp://bradfrostweb.com/blog/post/beyond-squishy-the-principles-of-adaptive-design/http://www.w3.org/TR/mobile-bp/#OneWebOn UX Designhttp://www.mobify.com/blog/mobile-design-tip-hint-reveal/http://www.lukew.com/ff/entry.asp?1691http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brandhttp://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-designhttp://www.mobify.com/blog/mobile-web-design-for-content-heavy-websites/On Performancehttps://developers.google.com/speed/http://www.igvita.com/ (Gregorik Ilya, Google Performance team)http://stevesouders.com/ (Author of "High Performance Websites, Oreilly & Associates" ) (author of YSlow)MOREhttp://www.google.com/think/perspectives/make-website-work-across-multiple-devices.htmlhttp://mobify.comRESOURCES#ResponsiveROI
  55. 55. 1. How are your visitors using your site?2. What is your current mobile experience like?3. What kind of content are you serving up?4. What resources do you have available?5. How much is not being optimized on mobile costing you?6. What will happen to your SEO and social sharing?7. Is your solution secure?8. What about A/B testing and web tracking?9. How much control do you want over development andmaintenance?10. Is your solution future-proof?Top 10 Questions: Going Responsive#ResponsiveROI

×