BigDesign 2014 - What's Before Mobile First?

What’s Before Mobile First?

@KenTabor

bit.ly/KenSlideShare

I figure you already have permission for a mobile

first design

What’s before your mobile site goes live for the entire world to see?

¿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 Ways of hammering your design into shape

1:Google Analytics 2:iOS Simulator

3:Chrome Emulation 4:Safari Remote Debug

5:Chrome Remote Debug 6:GhostLab

7:PageSpeed Insights

What thinking happens before mobile first?





#1: What’s a way that you can learn about your

mobile users?

Google Analytics Reporting

Avoid “vanity metrics” like page counts

The following stats are from my personal blog: blog.katworksgames.com

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

Device Info


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

iOS Versions


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

Android Versions


768x1024 768x1024 768x1024

320x568 320x568 320x568

320x480 320x480 320x480

720x1280 360x640 360x640

800x1280 720x1280 360x592

Mobile Screen Resolution


United States United States United States

India India India

United Kingdom United Kingdom United Kingdom

Germany Germany Canada

Japan Canada Germany

Country

Bounce Rate

75

80

85

90

95

100



Desktop 92% Desktop 94% Desktop 93%

Mobile 5% Mobile 4% Mobile 5%

Tablet 3% Tablet 2% Tablet 3%

Visitor Type

Produce quarterly charts capturing trends

What if you don’t have G/A results?

Chocolate Coffee

Bribe Zone

Find a Friend Who Knows Stuff

Default G/A dashboard is big data overload

Build a custom dashboard reporting

your mobile stats

My mobile first dashboard is shared here

https://www.google.com/analytics/web/template?

uid=iLTPIL89SP-RVF-A59HhWA

Alternatives: Kissmetrics, Piwik, ChartBeat, Clicky, MixPanel, gaug.es

1:Google Analytics

2:iOS Simulator 3:Chrome Emulation

4:Safari Remote Debug 5:Chrome Remote Debug

6:GhostLab 7:PageSpeed Insights

#2: What’s a way you can develop without mobile

devices?

Apple iOS Simulator

Installed as part of Xcode on OS X

• Run Xcode • Xcode menu • Open Developer Tool • iOS Simulator

Alternatives: Android emulator

What’s up with this guy? Who is Ken Tabor?

I’m a product engineer at Sabre building TripCase

Burin Asavesna Designing for Time Travel

Sean Moubry Huxley and the Flying Robot

Monkeys





#3: What’s a way you can develop without mobile

devices?

Chrome browser emulation

• Run Chrome • View menu • Developer option • Developer tools

• Emulation tab • Pick a phone or tablet

Chrome Canary is a best kept secret


3:Chrome Emulation

4:Safari Remote Debug 5:Chrome Remote Debug


#4: What’s a way you can debug a website on iOS?

Safari Remote Debug

iPhone/iPad (once) • Run Settings app • Safari choice • Advanced option • Web inspector on

Laptop (once) • Run Safari • Safari menu • Preferences option • Advanced tab • Develop menu on

iPhone/iPad • USB connected • Run Safari app • Browse a website

Laptop • Run Safari • Develop menu • Choose iOS device





#5: What’s a way you can debug a website on

Android?

Chrome Remote Debug

Phone/Tablet (once) • Run Settings app • About menu • Tap “Build Number” 7

times • Opens dev mode

Phone/Tablet (once) • Run Settings app • Developer options • USB debugging on

Phone/Tablet • USB connect • Run Chrome app • Browse a website

Laptop • Chrome • about://inspect • Discover USB devices • Choose you device

Screencast

WebView App?

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); }



5:Chrome Remote Debug


#6: What’s a way you can test on lots of

mobile devices at once?

GhostLab

Synchronizes Scrolling

Page Navigation User Input

Alternatives: Adobe Edge Inspect, Remote Preview, Live Reload





#7: What’s a way you can measure your site’s speed on mobile?

PageSpeed Insights

developers.google.com/speed/pagespeed/insights

webpagetest.org





Improving your tool chain means

turbo boosting your creative workflow

Let’s do something awesome today!

bit.ly/KenSlideShare

@KenTabor