Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

BigDesign 2014 - What's Before Mobile First?

2,186 views

Published on

This session is dedicated to helping you test, debug, and confirm your web site on mobile devices before releasing it into the wild. We assume you already have permission, stakeholder approval, and even started building a website supporting phones and tablets. Now what? Ill share with you nuts-and-bolts approaches that have helped me navigate one of the most difficult things we tackle assuring our customers can best use our websites in a world of device sizes.

Published in: Mobile

BigDesign 2014 - What's Before Mobile First?

  1. 1. What’s Before Mobile First? @KenTabor
  2. 2. bit.ly/KenSlideShare
  3. 3. I figure you already have permission for a mobile first design
  4. 4. What’s before your mobile site goes live for the entire world to see?
  5. 5. ¿Why is M0biLeF1rst KrazY? How many mobile users visit? iOS? Android? How big? 4”/5”/7”/10”? Unified design? Phone && Tablet && Laptop? QA hardware $$$? Responsive? Adaptive? Simulate? Emulate? Performance? Big Data?
  6. 6. 7 Ways of hammering your design into shape
  7. 7. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
  8. 8. What thinking happens before mobile first?
  9. 9. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
  10. 10. #1: What’s a way that you can learn about your mobile users?
  11. 11. Google Analytics Reporting
  12. 12. Avoid “vanity metrics” like page counts
  13. 13. The following stats are from my personal blog: blog.katworksgames.com
  14. 14. Device Info 2013 1st Half 2013 2nd Half 2014 1st Half iPhone iPhone iPhone iPad iPad iPad Nexus 7 Nexus 7 Nexus 5 Galaxy Nexus GT-I9300 Nexus 7 Nexus 4 Nexus 4 Nexus 5
  15. 15. iOS Versions 2013 1st Half 2013 2nd Half 2014 1st Half 6.1.3 6.1.3 7.0.4 6.0.1 6.1.4 7.1 6.1.2 7 7.1.1 6.1 7.0.4 7.0.6 6.1.4 7.0.3 7.0.3
  16. 16. Android Versions 2013 1st Half 2013 2nd Half 2014 1st Half 4.2.2 4.1.2 4.4.2 4.2.1 4.2.2 4.3 4.1.1 4.3 4.1.2 4.1.2 4.0.4 4.2.2 4.0.4 4.03 4.2.1
  17. 17. Mobile Screen Resolution 2013 1st Half 2013 2nd Half 2014 1st Half 768x1024 768x1024 768x1024 320x568 320x568 320x568 320x480 320x480 320x480 720x1280 360x640 360x640 800x1280 720x1280 360x592
  18. 18. Country 2013 1st Half 2013 2nd Half 2014 1st Half United States United States United States India India India United Kingdom United Kingdom United Kingdom Germany Germany Canada Japan Canada Germany
  19. 19. Bounce Rate 100 95 90 85 80 75 2013 1st Half 2013 2nd Half 2014 1st Half
  20. 20. Visitor Type 2013 1st Half 2013 2nd Half 2014 1st Half Desktop 92% Desktop 94% Desktop 93% Mobile 5% Mobile 4% Mobile 5% Tablet 3% Tablet 2% Tablet 3%
  21. 21. Produce quarterly charts capturing trends
  22. 22. What if you don’t have G/A results?
  23. 23. Find a Friend Who Knows Stuff Chocolate Coffee Bribe Zone
  24. 24. Default G/A dashboard is big data overload
  25. 25. Build a custom dashboard reporting your mobile stats
  26. 26. My mobile first dashboard is shared here https://www.google.com/ analytics/web/template? uid=iLTPIL89SP-RVF-A59HhWA
  27. 27. Alternatives: Kissmetrics, Piwik, ChartBeat, Clicky, MixPanel, gaug.es
  28. 28. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
  29. 29. #2: What’s a way you can develop without mobile devices?
  30. 30. Apple iOS Simulator
  31. 31. Installed as part of Xcode on OS X
  32. 32. • Run Xcode • Xcode menu • Open Developer Tool • iOS Simulator
  33. 33. Alternatives: Android emulator
  34. 34. What’s up with this guy? Who is Ken Tabor?
  35. 35. I’m a product engineer at Sabre building TripCase
  36. 36. Burin Asavesna Designing for Time Travel Sean Moubry Huxley and the Flying Robot Monkeys
  37. 37. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
  38. 38. #3: What’s a way you can develop without mobile devices?
  39. 39. Chrome browser emulation
  40. 40. • Run Chrome • View menu • Developer option • Developer tools
  41. 41. • Emulation tab • Pick a phone or tablet
  42. 42. Chrome Canary is a best kept secret
  43. 43. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
  44. 44. #4: What’s a way you can debug a website on iOS?
  45. 45. Safari Remote Debug
  46. 46. iPhone/iPad (once) • Run Settings app • Safari choice • Advanced option • Web inspector on
  47. 47. Laptop (once) • Run Safari • Safari menu • Preferences option • Advanced tab • Develop menu on
  48. 48. iPhone/iPad • USB connected • Run Safari app • Browse a website
  49. 49. Laptop • Run Safari • Develop menu • Choose iOS device
  50. 50. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
  51. 51. #5: What’s a way you can debug a website on Android?
  52. 52. Chrome Remote Debug
  53. 53. Phone/Tablet (once) • Run Settings app • About menu • Tap “Build Number” 7 times • Opens dev mode
  54. 54. Phone/Tablet (once) • Run Settings app • Developer options • USB debugging on
  55. 55. Phone/Tablet • USB connect • Run Chrome app • Browse a website
  56. 56. Laptop • Chrome • about://inspect • Discover USB devices • Choose you device
  57. 57. Screencast
  58. 58. WebView App?
  59. 59. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); }
  60. 60. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
  61. 61. #6: What’s a way you can test on lots of mobile devices at once?
  62. 62. GhostLab
  63. 63. Synchronizes Scrolling Page Navigation User Input
  64. 64. Alternatives: Adobe Edge Inspect, Remote Preview, Live Reload
  65. 65. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
  66. 66. #7: What’s a way you can measure your site’s speed on mobile?
  67. 67. PageSpeed Insights
  68. 68. developers.google.com/ speed/pagespeed/insights
  69. 69. webpagetest.org
  70. 70. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
  71. 71. Improving your tool chain means turbo boosting your creative workflow
  72. 72. Let’s do something awesome today! bit.ly/KenSlideShare @KenTabor

×