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.

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