BigDesign 2014 - What's Before Mobile First?
Sep. 4, 2014•0 likes•2,441 views
Download to read offline
Report
Mobile
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.
Ken TaborFollow
More Related Content
What's hot
How to Break your App - Workshop - Testbash 2015Daniel Knott
Six tips for better mobile ux designDenis Riftin
Casting Off Our Desktop ShacklesJason Grigsby
iOS 7 Beginner WorkshopChristopher Truman
打造你的第一個iPhone APP彼得潘 Pan
When responsive web design meets the real worldJason Grigsby
Similar to BigDesign 2014 - What's Before Mobile First?
UXPA Dallas - Google Analytics and What's Before Mobile FirstKen Tabor
Responsive Design Testing the Promet WayPromet Source
Responsive Testing the Promet WayPromet Source
Measure camp tools of the cro rabbleCraig Sullivan
001-Mobile Application.pptxAhmedDarre
Mobile html5 v2HunterLoftis
More from Ken Tabor
Introduction to Coding a WebpageKen Tabor
Making the Difficult, Simple(r)Ken Tabor
On Writing: What Best Selling Author David Baldacci Taught Me About Writing a...Ken Tabor
Demo Hard: Things Nobody Told an Introvert About Public SpeakingKen Tabor
Machine Learning: Understanding the Invisible Force Changing Our WorldKen Tabor
10 Things About Human UI that Will Change Forever in Self-Driving CarsKen Tabor
BigDesign 2014 - What's Before Mobile First?
- 1. What’s Before Mobile First? @KenTabor
- 2. bit.ly/KenSlideShare
- 3. I figure you already have permission for a mobile first design
- 4. What’s before your mobile site goes live for the entire world to see?
- 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?
- 7. 7 Ways of hammering your design into shape
- 8. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
- 9. What thinking happens before mobile first?
- 11. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
- 12. #1: What’s a way that you can learn about your mobile users?
- 13. Google Analytics Reporting
- 14. Avoid “vanity metrics” like page counts
- 15. The following stats are from my personal blog: blog.katworksgames.com
- 16. 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
- 17. 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
- 18. 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
- 19. 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
- 20. 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
- 21. Bounce Rate 100 95 90 85 80 75 2013 1st Half 2013 2nd Half 2014 1st Half
- 22. 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%
- 23. Produce quarterly charts capturing trends
- 24. What if you don’t have G/A results?
- 25. Find a Friend Who Knows Stuff Chocolate Coffee Bribe Zone
- 26. Default G/A dashboard is big data overload
- 28. Build a custom dashboard reporting your mobile stats
- 30. My mobile first dashboard is shared here https://www.google.com/ analytics/web/template? uid=iLTPIL89SP-RVF-A59HhWA
- 31. Alternatives: Kissmetrics, Piwik, ChartBeat, Clicky, MixPanel, gaug.es
- 32. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
- 33. #2: What’s a way you can develop without mobile devices?
- 34. Apple iOS Simulator
- 35. Installed as part of Xcode on OS X
- 36. • Run Xcode • Xcode menu • Open Developer Tool • iOS Simulator
- 38. Alternatives: Android emulator
- 39. What’s up with this guy? Who is Ken Tabor?
- 40. I’m a product engineer at Sabre building TripCase
- 42. Burin Asavesna Designing for Time Travel Sean Moubry Huxley and the Flying Robot Monkeys
- 43. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
- 44. #3: What’s a way you can develop without mobile devices?
- 45. Chrome browser emulation
- 46. • Run Chrome • View menu • Developer option • Developer tools
- 47. • Emulation tab • Pick a phone or tablet
- 49. Chrome Canary is a best kept secret
- 51. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
- 52. #4: What’s a way you can debug a website on iOS?
- 53. Safari Remote Debug
- 54. iPhone/iPad (once) • Run Settings app • Safari choice • Advanced option • Web inspector on
- 55. Laptop (once) • Run Safari • Safari menu • Preferences option • Advanced tab • Develop menu on
- 56. iPhone/iPad • USB connected • Run Safari app • Browse a website
- 57. Laptop • Run Safari • Develop menu • Choose iOS device
- 60. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
- 61. #5: What’s a way you can debug a website on Android?
- 62. Chrome Remote Debug
- 63. Phone/Tablet (once) • Run Settings app • About menu • Tap “Build Number” 7 times • Opens dev mode
- 64. Phone/Tablet (once) • Run Settings app • Developer options • USB debugging on
- 65. Phone/Tablet • USB connect • Run Chrome app • Browse a website
- 66. Laptop • Chrome • about://inspect • Discover USB devices • Choose you device
- 68. Screencast
- 70. WebView App?
- 72. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); }
- 73. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
- 74. #6: What’s a way you can test on lots of mobile devices at once?
- 75. GhostLab
- 77. Synchronizes Scrolling Page Navigation User Input
- 79. Alternatives: Adobe Edge Inspect, Remote Preview, Live Reload
- 80. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
- 81. #7: What’s a way you can measure your site’s speed on mobile?
- 82. PageSpeed Insights
- 83. developers.google.com/ speed/pagespeed/insights
- 85. webpagetest.org
- 87. 1:Google Analytics 2:iOS Simulator 3:Chrome Emulation 4:Safari Remote Debug 5:Chrome Remote Debug 6:GhostLab 7:PageSpeed Insights
- 88. Improving your tool chain means turbo boosting your creative workflow
- 90. Let’s do something awesome today! bit.ly/KenSlideShare @KenTabor