How has mobile marketing changed in the past year and how should your business react to best prepare for 2017 and beyond? Emily will discuss the what future holds for mobile optimization and how to rise above the rest of the pack in a mobile-first world.

1. #SearchLove @goutaste
The NEW Mobile:
Proactive Strategies for the Next Wave

2. #SearchLove @goutaste
If your plans don’t
include mobile, your
plans are not finished.
Wendy Clark, Coca-Cola
Meet your customers
in the environment
of their choice, not
where it's convenient
for you.
Cyndie Shaffstall
Mobile is becoming not only the
new digital hub but also the bridge
to the physical world.
Thomas Husson, Forrester
Mobile is the enabling
centerpiece of digital
convergence.
Tomi T Ahonen
More Google
searches take place
on mobile devices
than on computers.
Google
If you’re not using
mobile…don’t worry -
your competitors are
already using it and are
getting those customers
instead.
Jamie Turner,
60SecondMarketer
The adoption rate of mobile is twice
that of the internet.
Emma Crowe, Somo
The smartphone is
the key marketing
battleground of
2016.
Andrew Smith,
Director at Escherman

3. #SearchLove @goutaste
“The trend has been
‘mobile was winning.’
It's now won.”
-- Eric Schmidt, Google

4. #SearchLove @goutaste
Time
Performance&Adoption
New Innovation
Scaling
Mature Technology
Frenzy
Tech Improvements
The Technology ‘S Curve’

5. #SearchLove @goutaste@benedictevans
Mobile S-Curve Moving from Creation
to Deployment

6. #SearchLove @goutaste@benedictevans
WE ARE HERE
Mobile S-Curve Moving from Creation
to Deployment

7. #SearchLove @goutaste
Developing
PROactive
VS.
REactive
Mobile
Strategies

8. #SearchLove @goutaste
Understanding The NEW (Pro-Active)
Mobile Questions For…
PLATFORM PERFORMANCE ANALYTICS

9. #SearchLove @goutaste
Understanding The NEW (Pro-Active)
Mobile Questions For…
PLATFORM PERFORMANCE ANALYTICS
FUTURENEWOLD

10. #SearchLove @goutaste
MOBILE PLATFORM
FUTURE: UI-Agnostic ContentNEW: Web of Apps & App-Like WebOLD: Web vs. Apps

11. #SearchLove @goutaste
Old Model of
Thinking:
“Web VS. Apps”
OLD: Web vs. Apps
@paul_kinlan paul.kinlan.me/the-headless-web/
“Should I build
an app or a
website?”

12. #SearchLove @goutaste
OLD: Web vs. Apps
Engaging,ImmersiveExperiences
Potential Reach
APPS
WEB
Native Features Made Apps More Engaging
Web Features Made Sites More Discoverable

13. #SearchLove @goutaste
A Web of Apps – App Indexing
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
firebase.google.com/docs/app-indexing/ *App Icons Only on Android

14. #SearchLove @goutaste
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
http://www.cc.com/shows/the-daily-
show-with-trevor-noah
comedy-central://example-deep-link-to-
daily-show
Example deep links:
A Web of Apps – Deep Linking

15. #SearchLove @goutaste
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
A Web of Apps – ‘Instant Apps’
developer.android.com/topic/instant-apps/index.html

16. #SearchLove @goutaste
New: A Web of Apps & App-Like Websites
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
Engaging,ImmersiveExperiences
Potential Reach
APPS Deep
Links
WEB

17. #SearchLove @goutaste
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
Meanwhile…
bit.ly/website-push-notifications

18. #SearchLove @goutaste
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
Meanwhile…
bit.ly/website-push-notifications

19. #SearchLove @goutaste
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
Meanwhile…
bit.ly/PWA-install

20. #SearchLove @goutaste
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
Meanwhile…
bit.ly/PWA-install

21. #SearchLove @goutaste
The App-Like Web: Progressive Web Apps
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
@suzzicks bit.ly/cindy-mozcon-2016

22. #SearchLove @goutaste

23. #SearchLove @goutaste
The App-Like Web: What is a ‘PWA’?
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
@suzzicks
HTTPS Mobile
Friendly
Website
Service
Worker
Web App
Manifest
=+
Progressive Web
App
bit.ly/cindy-mozcon-2016

24. #SearchLove @goutaste
“Service Workers can give
users the best of both [app &
web] worlds:
A middle ground letting you
choose how and when the site
should be integrated deeper into
the device.”
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
@paul_kinlan paul.kinlan.me/slice-the-web/

25. #SearchLove @goutaste
The App-Like Web – Service Workers
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
Service Workers are so powerful, that browsers wont let you use it without encryption
HTTPS REQUIRED

26. #SearchLove @goutaste
New: A Web of Apps & App-Like Websites
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
@paul_kinlan paul.kinlan.me/the-headless-web/

27. #SearchLove @goutaste
New: A Web of Apps & App-Like Websites
NEW: Web of Apps & App-Like WebOLD: Web vs. Apps
Engaging,ImmersiveExperiences
Potential Reach
APPS Deep
Links
WEB
PWA

28. #SearchLove @goutaste
“Prepare for a time when no
one ever visits your website.
Awareness, research, and
conversion will all happen in
the search results…”
-- David Mihm
FUTURE: UI-Agnostic ContentNEW: Web of Apps & App-Like WebOLD: Web vs. Apps
bit.ly/david-mihm-2017

29. #SearchLove @goutaste
FUTURE: UI-Agnostic ContentNEW: Web of Apps & App-Like WebOLD: Web vs. Apps
Search is Already Becoming the UI

30. #SearchLove @goutaste
FUTURE: UI-Agnostic ContentNEW: Web of Apps & App-Like WebOLD: Web vs. Apps
This is NOT the Only Measure of Success

31. #SearchLove @goutaste
FUTURE: UI-Agnostic ContentNEW: Web of Apps & App-Like WebOLD: Web vs. Apps
Success Also Looks Like THIS

32. #SearchLove @goutaste
Get Better at Being a Data Source:
Structured Data (Schema)
FUTURE: UI-Agnostic ContentNEW: Web of Apps & App-Like WebOLD: Web vs. Apps

33. #SearchLove @goutaste
Get Better at Being a Data Source:
Structured Data Formatting
FUTURE: UI-Agnostic ContentNEW: Web of Apps & App-Like WebOLD: Web vs. Apps
moz.com/blog/json-ld-for-beginners

34. #SearchLove @goutaste
Structured Data Immediate SEO Benefits
FUTURE: UI-Agnostic ContentNEW: Web of Apps & App-Like WebOLD: Web vs. Apps
developers.google.com/search/docs/data-types/books

35. #SearchLove @goutaste
Get Better at Being a Data Source:
APIs
FUTURE: UI-Agnostic ContentNEW: Web of Apps & App-Like WebOLD: Web vs. Apps

36. #SearchLove @goutaste
FUTURE: UI-Agnostic ContentNEW: Web of Apps & App-Like WebOLD: Web vs. Apps
What is Lyft?

37. #SearchLove @goutaste
MOBILE PERFORMANCE
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization

38. #SearchLove @goutaste
Performance Matters,
Mobile Performance Matters More
bit.ly/google-speed-stats

39. #SearchLove @goutaste
‘RAIL’ Performance Framework
OLD: Loading Optimization
developers.google.com/web/fundamentals/performance/rail

40. #SearchLove @goutaste
Check Your Loading Optimization
OLD: Loading Optimization
developers.google.com/speed/pagespeed/insights/

41. #SearchLove @goutaste
Check Your Loading Optimization
OLD: Loading Optimization
testmysite.thinkwithgoogle.com

42. #SearchLove @goutaste
Check Your Loading Optimization
OLD: Loading Optimization
testmysite.thinkwithgoogle.com
These are
the basics
we all still
get wrong

43. #SearchLove @goutaste
Loading Optimization
OLD: Loading Optimization
bit.ly/wordpress-performance-fail
“Hi, I’m a Wordpress
Theme with 23 JS libraries
and 20 stylesheets!”

44. #SearchLove @goutaste
Loading Optimization
OLD: Loading Optimization
“Hi, I’m a Wordpress
Theme with 23 JS libraries
and 20 stylesheets!”
bit.ly/wordpress-performance-fail

45. #SearchLove @goutaste
OLD: Loading Optimization
bit.ly/mobile-speed2 from
We Want Faster Sites, But We’re Also
Shipping More JS Than Ever
@samccone bit.ly/rel-preload-demo

46. #SearchLove @goutaste
Check Your Loading Optimization
OLD: Loading Optimization
testmysite.thinkwithgoogle.com

47. #SearchLove @goutaste
Tools That Help With Critical Path Rendering
OLD: Loading Optimization
webpagetest.org
WebPageTest

48. #SearchLove @goutaste
OLD: Loading Optimization
Tools That Help With Critical Path Rendering
@ipullrank moz.com/blog/the-technical-seo-renaissance
Chrome Dev Tools

49. #SearchLove @goutaste
NEW: Progressive EnhancementOLD: Loading Optimization
Progressive Enhancement

50. #SearchLove @goutaste
Progressive Enhancement
NEW: Progressive EnhancementOLD: Loading Optimization
Not this ‘progressive’…

51. #SearchLove @goutaste
NEW: Progressive EnhancementOLD: Loading Optimization
An escalator can never break, it
can only become stairs. There
would never be an ‘escalator
temporarily out of order’ sign, only
an ‘escalator temporarily stairs.
Sorry for the convenience.’-- Mitch Hedberg

52. #SearchLove @goutaste
How Service Workers Can Help Optimize Repeat Visits
NEW: Progressive EnhancementOLD: Loading Optimization
medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline-
support-and-network-resilience-c84db889162c#.jtl0ooqu2

53. #SearchLove @goutaste
Service Workers Wont Help Everywhere… But
Remember They’re Enhancements
NEW: Progressive EnhancementOLD: Loading Optimization

54. #SearchLove @goutaste
Service Workers Wont Help Everywhere… But
Remember They’re Enhancements
NEW: Progressive EnhancementOLD: Loading Optimization
‘Progressive Web App
Temporarily Functional Website
on Safari.
Sorry for the convenience.’

55. #SearchLove @goutaste
Browser Assists
NEW: Progressive EnhancementOLD: Loading Optimization
@ipullrank moz.com/blog/the-technical-seo-renaissance

56. #SearchLove @goutaste
NEW: Progressive EnhancementOLD: Loading Optimization
ipullrank.com/how-i-sped-up-my-site-68-percent-with-one-line-of-code/
Be 99% sure! Prerender will load ALL of
the assets for the page. If you are
wrong, this can waste battery and
bandwidth from your mobile users.
Good use cases (near certainty on click):
• Next page in paginated article
• “Logged in” page from Login Page
Browser Assists
<link rel="prerender" href="http://example.com/page">
<link rel=”prerender prefetch” href=”http://www.example.com/page”>

57. #SearchLove @goutaste@benedictevans
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization
We’re Halfway to Connecting Everyone
5.5bn people over 14 years old, close to 5bn with mobile phones, ~2.5bn smartphones
Future: Network Optimization &
Offline Functionality

58. #SearchLove @goutaste
The average mobile user is not on a $600+ phone & over
half of active Android users have 1 GB or less in Ram
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization
Future: Network Optimization &
Offline Functionality
WATCH: bit.ly/progressive-performance

59. #SearchLove @goutaste
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization
Image: kinsta.com/learn/what-is-http2/#goal_of_creating_http2
WE ARE HERE
YOUR AUDIENCE
MAY BE HERE
Understanding Network Connection Variability
Treat the Network as an Enhancement

60. #SearchLove @goutaste
Understand Network Connection Variability
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization
Read: bit.ly/http2-intro
Image: kinsta.com/learn/what-is-http2/#goal_of_creating_http2
HTTP/2 enables full request & response multiplexing
HTTP/2 will be critical in connecting the next billion

61. #SearchLove @goutaste
• Prefetch & Prerender speed up your next navigation
• Preload speeds up the current one
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization
• Pre-load can specify the download “as” =
• "script",
• "style",
• "image",
• "media",
• "document”
bit.ly/what-is-rel-preload
Optimize Network Requests
HTTP/2 + PreLoad = Moves the ‘start download’ time of a critical asset closer to initial request

62. #SearchLove @goutaste
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization
bit.ly/rel-preload-demo@samccone

63. #SearchLove @goutaste
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization
bit.ly/rel-preload-demo@samccone

64. #SearchLove @goutaste
Understand Network Connection Variability
Service Workers Help Optimize for Network Connectivity
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization
@pierrefar deliberatedigital.com/mobile-seo

65. #SearchLove @goutaste
Service Workers
Can Even Give
Websites Offline
Functionality
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization

66. #SearchLove @goutaste
Service Workers Can Even Give
Websites Offline Functionality
FUTURE: Network OptimizationNEW: Progressive EnhancementOLD: Loading Optimization

67. #SearchLove @goutaste
FUTURE: Beyond the BrowserNEW: Recovering Dark DataOLD: Mobile-specific Data
MOBILE ANALYTICS

68. #SearchLove @goutaste
OLD: Mobile-specific Data
“Where Are We Best Targeting
Mobile Queries in Search Results?”

69. #SearchLove @goutaste
OLD: Mobile-specific Data
Google
Analytics -
Default
Google
Analytics -
Devices
Google
Analytics -
Browsers
Usually
social app
browsers
“How Are We
Serving Our Mobile
Users When They
Land Here?”

70. #SearchLove @goutaste
SEMRUSH “Mobile Reporting”
OLD: Mobile-specific Data

71. #SearchLove @goutaste
OLD: Mobile-specific Data
@aleyda bit.ly/keyword-tools-matrix

72. #SearchLove @goutaste
OLD: Mobile-specific Data
@aleyda bit.ly/keyword-tools-matrix

73. #SearchLove @goutaste
Which of These Devices Are ‘Mobile’?
OLD: Mobile-specific Data
All of these have a big screen, keyboard, and roughly the same performance – What is
the difference between them?
Lumia
Screen +
Keyboard
iPad Pro
Surface
Pro
MacBook
@benedictevans

74. #SearchLove @goutaste
NEW: Recovering Dark DataOLD: Mobile-specific Data
Newer: Recover Dark Data & Get a
More Realistic View of User Behavior

75. #SearchLove @goutaste
NEW: Recovering Dark DataOLD: Mobile-specific Data
Recovering Dark (Mobile) Traffic
@mdsimmonds
bit.ly/dark-traffic-slides

76. #SearchLove @goutaste
NEW: Recovering Dark DataOLD: Mobile-specific Data
Another
One For
The
“Direct”
Bucket

77. #SearchLove @goutaste
NEW: Recovering Dark DataOLD: Mobile-specific Data
Cross-Browser Attribution is Getting
More Realistic…
arstechnica.com/security/2017/02/now-sites-can-fingerprint-you-online-even-when-
you-use-multiple-browsers/
“Now sites can
fingerprint you
online even
when you use
multiple
browsers”

78. #SearchLove @goutaste
NEW: Recovering Dark DataOLD: Mobile-specific Data
…But Cross-Device Attribution is Still Crazy
Hard (Especially Between Native Apps & Web)
Signed-In Users are usually our best shot at accurate attribution here

79. #SearchLove @goutaste
NEW: Recovering Dark DataOLD: Mobile-specific Data
Rankings Tracking on Mobile Today Is Near Pointless
@ipullrank moz.com/blog/the-technical-seo-renaissance

80. #SearchLove @goutaste
FUTURE: Beyond the BrowserNEW: Recovering Dark DataOLD: Mobile-specific Data
How Do You Record Offline “Traffic”?
bit.ly/track-offline

81. #SearchLove @goutaste
FUTURE: Beyond the BrowserNEW: Recovering Dark DataOLD: Mobile-specific Data
What About Push Notification Behaviors?
bit.ly/GA-push-tracking

82. #SearchLove @goutaste
 Track your mobile
segments…
Yes, still do the
basics…
 pass the Mobile
Friendly Test
 Compress and
minify your
resources
(images, JS…)

83. #SearchLove @goutaste
 Pay attention to
Service Workers
and new
performance
techniques
…but also start to build
the foundations for
what’s coming next.
 HTTPS is tables stakes
for a lot of the future
 Build out your
platform &
prepare to be
UI-Agnostic
 Track your mobile
segments…
Yes, still do the
basics…
 pass the Mobile
Friendly Test
 Compress and
minify your
resources
(images, JS…)
 Figure out how we’re going to track
it all outside a traditional browser

84. #SearchLove @goutaste
 Pay attention to
Service Workers
and new
performance
techniques
…but also start to build
the foundations for
what’s coming next.
 HTTPS is tables stakes
for a lot of the future
 Build out your
platform &
prepare to be
UI-Agnostic
Be less REactive – be more PROactive
& let’s make the mobile world a better
place!
 Track your mobile
segments…
Yes, still do the
basics…
 pass the Mobile
Friendly Test
 Compress and
minify your
resources
(images, JS…)
 Figure out how we’re going to track
it all outside a traditional browser

85. #SearchLove @goutaste
Emily Grossman
@goutaste
@mobilemoxie
www.mobilemoxie.com