Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Emily Grossman "The New Mobile" - SearchLove 2017

737 vues

Publié le

Learn about the future of mobile and SEO and mobile development.

Publié dans : Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Emily Grossman "The New Mobile" - SearchLove 2017

  1. 1. #SearchLove @goutaste The NEW Mobile: Proac&ve Strategies for the Next Wave
  2. 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 compeBtors are already using it and are geCng those customers instead. Jamie Turner, 60SecondMarketer The adopBon rate of mobile is twice that of the internet. Emma Crowe, Somo The smartphone is the key markeBng baEleground of 2016. Andrew Smith, Director at Escherman
  3. 3. #SearchLove @goutaste “The trend has been ‘mobile was winning.’ It's now won.” -- Eric Schmidt, Google
  4. 4. #SearchLove @goutaste Time Performance & AdopBon New InnovaBon Scaling Mature Technology Frenzy Tech Improvements The Technology ‘S Curve’
  5. 5. #SearchLove @goutaste @benedictevans Mobile S-Curve Moving from CreaBon to Deployment
  6. 6. #SearchLove @goutaste @benedictevans WE ARE HERE Mobile S-Curve Moving from CreaBon to Deployment
  7. 7. #SearchLove @goutaste Developing PROacIve VS. REacIve Mobile Strategies
  8. 8. #SearchLove @goutaste Understanding The NEW (Pro-AcBve) Mobile QuesBons For… PLATFORM PERFORMANCE ANALYTICS
  9. 9. #SearchLove @goutaste Understanding The NEW (Pro-AcBve) Mobile QuesBons For… PLATFORM PERFORMANCE ANALYTICS FUTURE NEW OLD
  10. 10. #SearchLove @goutaste MOBILE PLATFORM FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps
  11. 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. 12. #SearchLove @goutaste OLD: Web vs. Apps Engaging, Immersive Experiences PotenIal Reach APPS WEB NaBve Features Made Apps More Engaging Web Features Made Sites More Discoverable
  13. 13. #SearchLove @goutaste A Web of Apps – App Indexing NEW: Web of Apps & App-Like Web OLD: Web vs. Apps firebase.google.com/docs/app-indexing/ *App Icons Only on Android
  14. 14. #SearchLove @goutaste NEW: Web of Apps & App-Like Web OLD: Web vs. Apps hXp://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. 15. #SearchLove @goutaste NEW: Web of Apps & App-Like Web OLD: Web vs. Apps A Web of Apps – ‘Instant Apps’ developer.android.com/topic/instant-apps/index.html
  16. 16. #SearchLove @goutaste New: A Web of Apps & App-Like Websites NEW: Web of Apps & App-Like Web OLD: Web vs. Apps Engaging, Immersive Experiences PotenIal Reach APPS Deep Links WEB
  17. 17. #SearchLove @goutaste NEW: Web of Apps & App-Like Web OLD: Web vs. Apps Meanwhile… bit.ly/website-push-noIficaIons
  18. 18. #SearchLove @goutaste NEW: Web of Apps & App-Like Web OLD: Web vs. Apps Meanwhile… bit.ly/website-push-noIficaIons
  19. 19. #SearchLove @goutaste NEW: Web of Apps & App-Like Web OLD: Web vs. Apps Meanwhile… bit.ly/PWA-install
  20. 20. #SearchLove @goutaste NEW: Web of Apps & App-Like Web OLD: Web vs. Apps Meanwhile… bit.ly/PWA-install
  21. 21. #SearchLove @goutaste The App-Like Web: Progressive Web Apps NEW: Web of Apps & App-Like Web OLD: Web vs. Apps @suzzicks bit.ly/cindy-mozcon-2016
  22. 22. #SearchLove @goutaste
  23. 23. #SearchLove @goutaste The App-Like Web: What is a ‘PWA’? NEW: Web of Apps & App-Like Web OLD: Web vs. Apps @suzzicks HTTPS Mobile Friendly Website Service Worker Web App Manifest =+ Progressive Web App bit.ly/cindy-mozcon-2016
  24. 24. #SearchLove @goutaste “Service Workers can give users the best of both [app & web] worlds: A middle ground le6ng you choose how and when the site should be integrated deeper into the device.” NEW: Web of Apps & App-Like Web OLD: Web vs. Apps @paul_kinlan paul.kinlan.me/slice-the-web/
  25. 25. #SearchLove @goutaste The App-Like Web – Service Workers NEW: Web of Apps & App-Like Web OLD: Web vs. Apps Service Workers are so powerful, that browsers wont let you use it without encrypBon HTTPS REQUIRED
  26. 26. #SearchLove @goutaste New: A Web of Apps & App-Like Websites NEW: Web of Apps & App-Like Web OLD: Web vs. Apps @paul_kinlan paul.kinlan.me/the-headless-web/
  27. 27. #SearchLove @goutaste New: A Web of Apps & App-Like Websites NEW: Web of Apps & App-Like Web OLD: Web vs. Apps Engaging, Immersive Experiences PotenIal Reach APPS Deep Links WEB PWA
  28. 28. #SearchLove @goutaste “Prepare for a 6me when no one ever visits your website. Awareness, research, and conversion will all happen in the search results…” -- David Mihm FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps bit.ly/david-mihm-2017
  29. 29. #SearchLove @goutaste FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps Search is Already Becoming the UI
  30. 30. #SearchLove @goutaste FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps This is NOT the Only Measure of Success
  31. 31. #SearchLove @goutaste FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps Success Also Looks Like THIS
  32. 32. #SearchLove @goutaste Get Be]er at Being a Data Source: Structured Data (Schema) FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps
  33. 33. #SearchLove @goutaste Get Be]er at Being a Data Source: Structured Data Forma^ng FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps moz.com/blog/json-ld-for-beginners
  34. 34. #SearchLove @goutaste Structured Data Immediate SEO Benefits FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps developers.google.com/search/docs/data-types/books
  35. 35. #SearchLove @goutaste Get Be]er at Being a Data Source: APIs FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps
  36. 36. #SearchLove @goutaste FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps What is Ly`?
  37. 37. #SearchLove @goutaste APIs: MobileMoxie is Doing It, Too FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps MobileMoxie’s beta API lets you pull our tools into YOUR exisIng dashboard
  38. 38. #SearchLove @goutaste MOBILE PERFORMANCE FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon
  39. 39. #SearchLove @goutaste Performance MaXers, Mobile Performance MaXers More bit.ly/google-speed-stats
  40. 40. #SearchLove @goutaste ‘RAIL’ Performance Framework OLD: Loading OpBmizaBon developers.google.com/web/fundamentals/performance/rail
  41. 41. #SearchLove @goutaste Check Your Loading OpBmizaBon OLD: Loading OpBmizaBon developers.google.com/speed/pagespeed/insights/
  42. 42. #SearchLove @goutaste Check Your Loading OpBmizaBon OLD: Loading OpBmizaBon testmysite.thinkwithgoogle.com
  43. 43. #SearchLove @goutaste Check Your Loading OpBmizaBon OLD: Loading OpBmizaBon testmysite.thinkwithgoogle.com These are the basics we all sBll get wrong
  44. 44. #SearchLove @goutaste Loading OpBmizaBon OLD: Loading OpBmizaBon bit.ly/wordpress-performance-fail “Hi, I’m a Wordpress Theme with 23 JS libraries and 20 stylesheets!”
  45. 45. #SearchLove @goutaste Loading OpBmizaBon OLD: Loading OpBmizaBon “Hi, I’m a Wordpress Theme with 23 JS libraries and 20 stylesheets!” bit.ly/wordpress-performance-fail
  46. 46. #SearchLove @goutaste OLD: Loading OpBmizaBon bit.ly/mobile-speed2 from We Want Faster Sites, But We’re Also Shipping More JS Than Ever @samccone bit.ly/rel-preload-demo
  47. 47. #SearchLove @goutaste Check Your Loading OpBmizaBon OLD: Loading OpBmizaBon testmysite.thinkwithgoogle.com
  48. 48. #SearchLove @goutaste Tools That Help With CriBcal Path Rendering OLD: Loading OpBmizaBon webpagetest.org WebPageTest
  49. 49. #SearchLove @goutaste OLD: Loading OpBmizaBon Tools That Help With CriBcal Path Rendering @ipullrank moz.com/blog/the-technical-seo-renaissance Chrome Dev Tools
  50. 50. #SearchLove @goutaste NEW: Progressive Enhancement OLD: Loading OpBmizaBon Progressive Enhancement
  51. 51. #SearchLove @goutaste Progressive Enhancement NEW: Progressive Enhancement OLD: Loading OpBmizaBon Not this ‘progressive’…
  52. 52. #SearchLove @goutaste NEW: Progressive Enhancement OLD: Loading OpBmizaBon 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
  53. 53. #SearchLove @goutaste How Service Workers Can Help OpBmize Repeat Visits NEW: Progressive Enhancement OLD: Loading OpBmizaBon medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline- support-and-network-resilience-c84db889162c#.jtl0ooqu2
  54. 54. #SearchLove @goutaste Service Workers Wont Help Everywhere… But Remember They’re Enhancements NEW: Progressive Enhancement OLD: Loading OpBmizaBon
  55. 55. #SearchLove @goutaste Service Workers Wont Help Everywhere… But Remember They’re Enhancements NEW: Progressive Enhancement OLD: Loading OpBmizaBon ‘Progressive Web App Temporarily FuncKonal Website on Safari. Sorry for the convenience.’
  56. 56. #SearchLove @goutaste Browser Assists NEW: Progressive Enhancement OLD: Loading OpBmizaBon @ipullrank moz.com/blog/the-technical-seo-renaissance
  57. 57. #SearchLove @goutaste NEW: Progressive Enhancement OLD: Loading OpBmizaBon 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 baXery and bandwidth from your mobile users. Good use cases (near certainty on click): •  Next page in paginated arIcle •  “Logged in” page from Login Page Browser Assists <link rel="prerender" href="hXp://example.com/page"> <link rel=”prerender prefetch” href=”hXp://www.example.com/page”>
  58. 58. #SearchLove @goutaste @benedictevans FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon We’re Halfway to ConnecIng Everyone 5.5bn people over 14 years old, close to 5bn with mobile phones, ~2.5bn smartphones Future: Network OpBmizaBon & Offline FuncBonality
  59. 59. #SearchLove @goutaste The average mobile user is not on a $600+ phone & over half of acIve Android users have 1 GB or less in Ram FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon Future: Network OpBmizaBon & Offline FuncBonality WATCH: bit.ly/progressive-performance
  60. 60. #SearchLove @goutaste FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon Image: kinsta.com/learn/what-is-hXp2/#goal_of_creaIng_hXp2 WE ARE HERE YOUR AUDIENCE MAY BE HERE Understanding Network ConnecBon Variability Treat the Network as an Enhancement
  61. 61. #SearchLove @goutaste Understand Network ConnecBon Variability FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon Read: bit.ly/hXp2-intro Image: kinsta.com/learn/what-is-hXp2/#goal_of_creaIng_hXp2 HTTP/2 enables full request & response mulBplexing HTTP/2 will be criBcal in connec&ng the next billion
  62. 62. #SearchLove @goutaste •  Prefetch & Prerender speed up your next navigaIon •  Preload speeds up the current one FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon Pre-load is like saying, “Hey, browser! Here’s a resource you’re going to need later on, so start loading it now.” •  Pre-load can specify the download “as” = •  "script", •  "style", •  "image", •  "media", •  "document” bit.ly/what-is-rel-preload OpBmize Network Requests HTTP/2 + PreLoad = Moves the ‘start download’ Bme of a criBcal asset closer to iniBal request
  63. 63. #SearchLove @goutaste FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon bit.ly/rel-preload-demo @samccone
  64. 64. #SearchLove @goutaste FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon bit.ly/rel-preload-demo @samccone
  65. 65. #SearchLove @goutaste Understand Network ConnecBon Variability Service Workers Help Op&mize for Network Connec&vity FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon @pierrefar deliberatedigital.com/mobile-seo
  66. 66. #SearchLove @goutaste Service Workers Can Even Give Websites Offline FuncBonality FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon
  67. 67. #SearchLove @goutaste Service Workers Can Even Give Websites Offline FuncBonality FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon
  68. 68. #SearchLove @goutaste FUTURE: Beyond the Browser NEW: Recovering Dark Data OLD: Mobile-specific Data MOBILE ANALYTICS
  69. 69. #SearchLove @goutaste OLD: Mobile-specific Data “Where Are We Best Targe&ng Mobile Queries in Search Results?”
  70. 70. #SearchLove @goutaste OLD: Mobile-specific Data Google AnalyBcs - Default Google AnalyBcs - Devices Google AnalyBcs - Browsers Usually social app browsers “How Are We Serving Our Mobile Users When They Land Here?”
  71. 71. #SearchLove @goutaste SEMRUSH “Mobile ReporBng” OLD: Mobile-specific Data
  72. 72. #SearchLove @goutaste OLD: Mobile-specific Data @aleyda bit.ly/keyword-tools-matrix
  73. 73. #SearchLove @goutaste OLD: Mobile-specific Data @aleyda bit.ly/keyword-tools-matrix
  74. 74. #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
  75. 75. #SearchLove @goutaste NEW: Recovering Dark Data OLD: Mobile-specific Data Newer: Recover Dark Data & Get a More RealisBc View of User Behavior
  76. 76. #SearchLove @goutaste NEW: Recovering Dark Data OLD: Mobile-specific Data Recovering Dark (Mobile) Traffic @mdsimmonds bit.ly/dark-traffic-slides
  77. 77. #SearchLove @goutaste NEW: Recovering Dark Data OLD: Mobile-specific Data Another One For The “Direct” Bucket
  78. 78. #SearchLove @goutaste NEW: Recovering Dark Data OLD: Mobile-specific Data Cross-Browser A]ribuBon is Ge^ng More RealisBc… arstechnica.com/security/2017/02/now-sites-can-fingerprint-you-online-even-when- you-use-mulIple-browsers/ “Now sites can fingerprint you online even when you use mulBple browsers”
  79. 79. #SearchLove @goutaste NEW: Recovering Dark Data OLD: Mobile-specific Data …But Cross-Device A]ribuBon is SBll Crazy Hard (Especially Between NaBve Apps & Web) Signed-In Users are usually our best shot at accurate aEribuBon here
  80. 80. #SearchLove @goutaste NEW: Recovering Dark Data OLD: Mobile-specific Data Rankings Tracking on Mobile Today Is Near Pointless @ipullrank moz.com/blog/the-technical-seo-renaissance
  81. 81. #SearchLove @goutaste FUTURE: Beyond the Browser NEW: Recovering Dark Data OLD: Mobile-specific Data How Do You Record Offline “Traffic”? bit.ly/track-offline
  82. 82. #SearchLove @goutaste FUTURE: Beyond the Browser NEW: Recovering Dark Data OLD: Mobile-specific Data What About Push NoBficaBon Behaviors? bit.ly/GA-push-tracking
  83. 83. #SearchLove @goutaste ü  Track your mobile segments… Yes, sIll do the basics… ü  pass the Mobile Friendly Test ü  Compress and minify your resources (images, JS…)
  84. 84. #SearchLove @goutaste ü  Pay aEenBon to Service Workers and new performance techniques …but also start to build the foundaIons for what’s coming next. ü  HTTPS is tables stakes for a lot of the future ü  Build out your plajorm & prepare to be UI-AgnosBc ü  Track your mobile segments… Yes, sIll 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 tradiBonal browser
  85. 85. #SearchLove @goutaste ü  Pay aEenBon to Service Workers and new performance techniques …but also start to build the foundaIons for what’s coming next. ü  HTTPS is tables stakes for a lot of the future ü  Build out your plajorm & prepare to be UI-AgnosBc Be less REacIve – be more PROacIve, and think about how you can make the mobile world a beXer place. ü  Track your mobile segments… Yes, sIll 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 tradiBonal browser
  86. 86. #SearchLove @goutaste Emily Grossman @goutaste @mobilemoxie www.mobilemoxie.com Thank You!
  87. 87. #SearchLove @goutaste Bonus Slides Next!
  88. 88. #SearchLove @goutaste @benedictevans Mobile People You Should Follow @mdsimmonds @ipullrank @aleyda @samccone @pierrefar @paul_kinlan @suzzicks @davidmihm @slightlylate @malteubl @marcustober Mobile trends Performance/ SEO SEO Trends/ SEO Web Trends/ PWAs Dark Traffic Mobile/ Local Mobile SEO Performance PWAs AMP Data/ Tools
  89. 89. #SearchLove @goutaste @benedictevans The Mobile S-Curve is Passing the PC S-Curve
  90. 90. #SearchLove @goutaste NEW: Web of Apps & App-Like Web OLD: Web vs. Apps pwa.rocks
  91. 91. #SearchLove @goutaste NEW: Web of Apps & App-Like Web OLD: Web vs. Apps theguardian.com/info/developer-blog/2016/aug/19/how-we-made-the-riorun- progressive-web-app
  92. 92. #SearchLove @goutaste Structured Data TesBng FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps search.google.com/structured-data/tesIng-tool/u/0/
  93. 93. #SearchLove @goutaste Structured Data ReporBng (Search Console) FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps
  94. 94. #SearchLove @goutaste PRPL Performance Framework for Web Apps Push, Render, Pre-Cache, Lazy-Load FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon developers.google.com/web/fundamentals/performance/prpl-paXern/

×