#DIGITALBREAKFAST
Face aux apps,
quelles opportunités en Web Mobile ?
Conférence NiceToMeetYou + La Revanche des Sites
Par...
Tendances d’usages
Mobile Web Design
Possibilités techniques
Mobile SEO
Email Responsive
Let’s talk about...
NiceToMeetYou est une agence
digitale full-services dotée d’une
forte sensibilité utilisateur / client.
Nous concentrons l...
La Revanche des Sites est une agence
experte en référencement naturel,
avec une vision internationale.
L’agence propose se...
Les intervenants
Ange POZZO DI BORGO
Planneur Digital – Associé
Agence NiceToMeetYou
Chargé de cours Skema BS / Iscom
Oliv...
STATE OF
WEB MOBILE
Où en est-on en France ?
2014 2015 2016 2017
1H20
1H40
1H50
2H10
UNE QUESTION DE TEMPS D’USAGE
Soit environ 15 minutes par jour
dans le navigateur...
FAIBLE ?
En termes de croissance,
NON.
PROPORTIONNELLEMENT, OUI.
+400%
de trafic mobile
Sans oublier les préférences
liées au contexte !
Et de l’âge
dépend aussi l’usage
« Mobile UX will be a
ranking signal »
SearchEngine Land, 11/14
Des utilisateurs qui privilégient forcément
une expérience...
Dans un écosystème fragmenté
et en évolution constante...
Source : Kerensen (2015)
Le Web Mobile est la voie du bon sens
pour une large majorité de marques !
Coût de déploiement mutualisé
Code universel
Le...
EN BREF
1. Jetez d’abord un œil à vos analytics sur la partie mobile
2. Réfléchissez bien à votre valeur ajoutée pour l’ut...
WEB MOBILE
Le futur est dans nos mains
DESIGN
Est-ce une app ?
Un site web ?
Superman ?
Applification
http://www.transpole.fr
Context is king
Un site web qui
ressemble à une app
http://www.my7up.com/
Un site web qui s’adapte
http://www.citedeleconomie.fr/
http://www.sauve-qui-pique.fr/
Serious Gaming
https://youtube10.withgoogle.com/
Drag n drop + Touch
Mais jusqu’où ?
Allons un peu plus loin…
Can I (really) use ?
Hardware + Software
Scalable Vector Graphics
Dessin vectoriel dans le navigateur
Svg
Software
https://awwapp.com/
Touch + SVG
Capteur qui permet de mesurer l’angle d’inclinaison (x,y,z)
Le gyroscope donne la position angulaire (selon un, deux ou le...
http://graphics.wsj.com/3d-nasdaq/
Web GL + Gyroscope
http://hexgl.bkcore.com/
Web GL + Drag
Communication bidirectionnelle
WebSocket est une technologie évoluée qui permet d'ouvrir un canal de communication interac...
http://flight.iberia.com/desktop/
Web Socket + Web GL
Capteur qui permet de mesurer l'accélération linéaire de ce dernier.
On parle encore d'accéléromètre même s'il s'agit en f...
http://branlettedenoel.com/
Accéléromètre + Web Socket
Chiche !
Et si on mélange tout ?
http://www.mountainsofmouthness.com/
Web GL + Gyroscope +
Twitter + Voice Synth
http://sakuradream.lux.co.jp/
Web GL + Gyroscope + Geolocation
+ Google Street View
https://www.chrome.com/racer
WebSockets + Chrome + Canvas +
Paper.js + Web Audio API
Full Screen API :
Pas de barre d’URL. API qui autorise le contenu (video ou canvas) à prendre l'intégralité de l'écran
Fil...
Quelques ressources
Chrome to
Phone
Must have
http://uiohmy.com/
Comparatif d’apps par OS
http://capptivate.co/category/patterns/instructional/
UI Motion Galerie
https://fr.pinterest.com/pausegraphik/ui-motion/
Share the love, merci Jérôme
http://1000.chromeexperiments.com/
History of Web Experiences
EN BREF
1. Selon les cas : pensez App, produisez web
2. Identifiez les « instants de mobilité » entre votre public cible e...
A vivre uniquement sur
tablette ou mobile !
Petit bonus
WEB MOBILE
Mobilegeddon Google
SEO
Ce qu’il faut savoir :
• Algorithme fonctionnant page par page
• La compatibilité mobile n’est qu’un des nombreux critères...
• Pas de révolution mais juste un ajustement
• Forte corrélation entre l’impact et la compatibilité mobile des concurrents...
Bing = follower
•Un site est considéré MOBILE-FRIENDLY par Google lorsque :
• Le contenu peut être intégralement affiché sur un téléphone
...
RESPONSIVE WEB DESIGN : même URL, même code HTML, affichage différent en fonction de
la taille de l’écran
DYNAMIC SERVING ...
Temps de
chargement
réduit : pas de
redirection pour
accéder aux
contenus
optimisés
Evite la possibilité de
duplicate cont...
• Compresser le contenu
• Prioriser le contenu au-dessus de la ligne
de flottaison
• Mettre en cache le contenu
• Éviter l...
EN BREF
1. Ne plus négliger la version mobile (si ce n’est déjà fait)
2. Privilégier le Responsive, dans la plupart des ca...
EMAIL
ET MOBILE
Une update bien utile ;)
En France, l’email est lu sur mobile
dans plus de 36% des cas...
Source : ReturnPath (2014)
Source : Litmus (mai 2015)
#1 Apple iPhone 28% +0.55
#2 Gmail 18% +1.28
#3 Apple iPad 11% -0.21
#4 Apple Mail 8% -0.29
#5 ...
Mais de nombreux clients mail
ne supportent toujours pas
les media queries !
Source : Litmus (2014)
2012
2015
Tri Consultation et action
Consultation et action
Dream land
Dans la réalité…
Responsive ?
Context is king
Success !
Source : http://blog.movableink.com/clients-corner-best-western/
Device Targeting
+143%
App Download
Geolocation...
Solution #1 : CSS
Solution #2 : One Column
Solution #3 : Get Help
Et vos clients dans tout ça ?
Source : http://zurb.com/playground/responsive-email-templates
Welcome
Inspiration
EN BREF
1. Vous DEVEZ avoir une vision mobile
2. La technologie n’évolue presque pas, à l’inverse des usages
3. Vérifiez l...
Merci :)
NiceToMeetYou / Agence Digitale « Full-Services »
www.ntmy.fr & @ntmy_fr
La Revanche des Sites / Agence SEO
www.l...
Web Mobile : quelles opportunités face aux apps ?
Prochain SlideShare
Chargement dans…5
×

Web Mobile : quelles opportunités face aux apps ?

4 303 vues

Publié le

"It's an App World", nous disait Flurry (solution de mobile analytics) en 2014. Pourtant, les marques font face à des coûts de déploiement et de maintien des applications souvent élevés. Pire encore, selon Google, seules 3 applications - sur la moyenne de 15 qu'en compte un smartphone en France - seraient régulièrement utilisées par un mobinaute. Alors avec ses 20% de temps passé sur mobile, le navigateur web présente-t-il une alternative efficace aux stores ? Etat des lieux des usages, des solutions techniques, des expériences créatives et des enjeux marketing que le Mobile Web permet encore d'adresser. Avec beaucoup d'exemples concrets à la clé !

Publié dans : Mobile

Web Mobile : quelles opportunités face aux apps ?

  1. 1. #DIGITALBREAKFAST Face aux apps, quelles opportunités en Web Mobile ? Conférence NiceToMeetYou + La Revanche des Sites Paris, Palais de Tokyo + Lille, Hermitage Gantois – Juin 2015
  2. 2. Tendances d’usages Mobile Web Design Possibilités techniques Mobile SEO Email Responsive Let’s talk about...
  3. 3. NiceToMeetYou est une agence digitale full-services dotée d’une forte sensibilité utilisateur / client. Nous concentrons les expertises stratégiques, créatives et technologiques au service des principaux challenges digitaux des marques : + réinventer l’expérience de marque + développer une audience + booster la visibilité + maîtriser l’e-réputation + engager une clientèle + générer des leads ou des ventes STRATÉGIE CODE CRÉATION RELATION
  4. 4. La Revanche des Sites est une agence experte en référencement naturel, avec une vision internationale. L’agence propose ses expertises sur plusieurs leviers : + Audit SEO + Backlinks Building + Transfert SEO + Géolocalisation + Bombing Antidot + Ajax Optimization
  5. 5. Les intervenants Ange POZZO DI BORGO Planneur Digital – Associé Agence NiceToMeetYou Chargé de cours Skema BS / Iscom Olivier COULON DC Digital – Associé Agence NiceToMeetYou Benoît DUGAST Directeur Technique Agence NiceToMeetYou Sylvain GARIN Consultant SEO – Associé Agence LRDS Avec l’appui de Solon COSTOPOULOS Krystel ROBERT Directeur de Clientèle Directrice Commerciale
  6. 6. STATE OF WEB MOBILE Où en est-on en France ?
  7. 7. 2014 2015 2016 2017 1H20 1H40 1H50 2H10 UNE QUESTION DE TEMPS D’USAGE
  8. 8. Soit environ 15 minutes par jour dans le navigateur...
  9. 9. FAIBLE ? En termes de croissance, NON. PROPORTIONNELLEMENT, OUI.
  10. 10. +400% de trafic mobile
  11. 11. Sans oublier les préférences liées au contexte !
  12. 12. Et de l’âge dépend aussi l’usage
  13. 13. « Mobile UX will be a ranking signal » SearchEngine Land, 11/14 Des utilisateurs qui privilégient forcément une expérience mobile-friendly
  14. 14. Dans un écosystème fragmenté et en évolution constante... Source : Kerensen (2015)
  15. 15. Le Web Mobile est la voie du bon sens pour une large majorité de marques ! Coût de déploiement mutualisé Code universel Leviers de trafic habituels Responsive ou Adaptive Design Fonctionnalités « app-like »
  16. 16. EN BREF 1. Jetez d’abord un œil à vos analytics sur la partie mobile 2. Réfléchissez bien à votre valeur ajoutée pour l’utilisateur sur mobile 3. Tenez compte des usages, dans votre contexte 4. Comparez les coûts de production et d’évolution !
  17. 17. WEB MOBILE Le futur est dans nos mains DESIGN
  18. 18. Est-ce une app ? Un site web ? Superman ? Applification
  19. 19. http://www.transpole.fr Context is king
  20. 20. Un site web qui ressemble à une app http://www.my7up.com/
  21. 21. Un site web qui s’adapte http://www.citedeleconomie.fr/
  22. 22. http://www.sauve-qui-pique.fr/ Serious Gaming
  23. 23. https://youtube10.withgoogle.com/ Drag n drop + Touch
  24. 24. Mais jusqu’où ? Allons un peu plus loin…
  25. 25. Can I (really) use ?
  26. 26. Hardware + Software
  27. 27. Scalable Vector Graphics Dessin vectoriel dans le navigateur Svg Software
  28. 28. https://awwapp.com/ Touch + SVG
  29. 29. Capteur qui permet de mesurer l’angle d’inclinaison (x,y,z) Le gyroscope donne la position angulaire (selon un, deux ou les trois axes) Gyroscope Hardware
  30. 30. http://graphics.wsj.com/3d-nasdaq/ Web GL + Gyroscope
  31. 31. http://hexgl.bkcore.com/ Web GL + Drag
  32. 32. Communication bidirectionnelle WebSocket est une technologie évoluée qui permet d'ouvrir un canal de communication interactif entre un navigateur (côté client) et un serveur. Avec cette API vous pouvez - envoyer des messages à un serveur - recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse. Websocket
  33. 33. http://flight.iberia.com/desktop/ Web Socket + Web GL
  34. 34. Capteur qui permet de mesurer l'accélération linéaire de ce dernier. On parle encore d'accéléromètre même s'il s'agit en fait de 3 accéléromètres qui calculent les 3 accélérations linéaires selon 3 axes orthogonaux. Accéléromètre Hardware
  35. 35. http://branlettedenoel.com/ Accéléromètre + Web Socket
  36. 36. Chiche ! Et si on mélange tout ?
  37. 37. http://www.mountainsofmouthness.com/ Web GL + Gyroscope + Twitter + Voice Synth
  38. 38. http://sakuradream.lux.co.jp/ Web GL + Gyroscope + Geolocation + Google Street View
  39. 39. https://www.chrome.com/racer WebSockets + Chrome + Canvas + Paper.js + Web Audio API
  40. 40. Full Screen API : Pas de barre d’URL. API qui autorise le contenu (video ou canvas) à prendre l'intégralité de l'écran File Api : Permet d’uploader des fichier présents sur son mobile HTML Media Capture : Enregistrement de photo, video et son pour envoi au travers d’un input files (formulaire) Web Speech API : Reconnaissance vocale, permet a la page web d’écouter l’utilisateur. (ios) Autres fonctions créatives
  41. 41. Quelques ressources
  42. 42. Chrome to Phone Must have
  43. 43. http://uiohmy.com/ Comparatif d’apps par OS
  44. 44. http://capptivate.co/category/patterns/instructional/ UI Motion Galerie
  45. 45. https://fr.pinterest.com/pausegraphik/ui-motion/ Share the love, merci Jérôme
  46. 46. http://1000.chromeexperiments.com/ History of Web Experiences
  47. 47. EN BREF 1. Selon les cas : pensez App, produisez web 2. Identifiez les « instants de mobilité » entre votre public cible et votre projet 3. Explorez les features qui ont du sens pour votre site / marque / OP / communauté VS vos analytics 4. Profitez de l’impact de cette technologie facile à intégrer, et (encore) innovante 5. Le gaming : une première étape simple et rapide à mettre en place
  48. 48. A vivre uniquement sur tablette ou mobile ! Petit bonus
  49. 49. WEB MOBILE Mobilegeddon Google SEO
  50. 50. Ce qu’il faut savoir : • Algorithme fonctionnant page par page • La compatibilité mobile n’est qu’un des nombreux critères de l’algorithme • Plus la concurrence est mobile-friendly, plus le la perte est importante • L’impact dépend du taux de compatibilité (score entre 0 et 100) • En temps réel : remontée de la page presque « automatique » Avril 2015 Google change les résultats du SERP sur smartphones en privilégiant les sites dits « Mobile Friendly ».
  51. 51. • Pas de révolution mais juste un ajustement • Forte corrélation entre l’impact et la compatibilité mobile des concurrents • Impact uniquement sur les SERP mobile • En moyenne -5,3% de perte de visibilité sur mobile (sites non adaptés) Cas spécifique : sous domaine dédié mobile Pour quels impacts ?
  52. 52. Bing = follower
  53. 53. •Un site est considéré MOBILE-FRIENDLY par Google lorsque : • Le contenu peut être intégralement affiché sur un téléphone • Il n’est pas nécessaire de réduire ou zoomer pour afficher le site correctement • Le contenu est lisible sur des petits écrans • Il est possible de naviguer simplement avec un doigt • Bouton de 48px min • Écart de 32px entre 2 boutons • Le site est compréhensible par les robots Google Un peu de technique…
  54. 54. RESPONSIVE WEB DESIGN : même URL, même code HTML, affichage différent en fonction de la taille de l’écran DYNAMIC SERVING : L’URL est identique quelque soit le support mais une version spécifique du code HTML est chargée selon le type d’appareil URL DISTINCTES : les versions sont accessibles depuis des URL distinctes (m.monsite.fr/content-1 vs monsite.fr/content-1), le code est aussi différent sur chacune des versions. URL IDENTIQUES ? CODE SOURCE IDENTIQUE ? Mobile Friendly : 3 options
  55. 55. Temps de chargement réduit : pas de redirection pour accéder aux contenus optimisés Evite la possibilité de duplicate content entre site web et site mobile. Pas besoin d’utiliser de canonical ou de balises rel=alternate. Crawl plus efficace : Les bots ne crawl qu’un seul et unique site. Votre site est de ce fait mieux compris par les robots, l’indexation est plus pertinente et à jour. Vos utilisateurs partagent vos contenus plus facilement : URL unique Réduit les possibilités d’erreurs entre m-site et site web Google ♥ Responsive Moins de temps d’intégration pour les mises à jour >> 1 seul et unique
  56. 56. • Compresser le contenu • Prioriser le contenu au-dessus de la ligne de flottaison • Mettre en cache le contenu • Éviter les nombreuses redirections • Optimiser votre serveur Web La vitesse ça compte
  57. 57. EN BREF 1. Ne plus négliger la version mobile (si ce n’est déjà fait) 2. Privilégier le Responsive, dans la plupart des cas 3. Respectez quelques règles simples d’ergonomie 4. Ne négligez pas la technique 5. …jusqu’à la prochaine évolution
  58. 58. EMAIL ET MOBILE Une update bien utile ;)
  59. 59. En France, l’email est lu sur mobile dans plus de 36% des cas... Source : ReturnPath (2014)
  60. 60. Source : Litmus (mai 2015) #1 Apple iPhone 28% +0.55 #2 Gmail 18% +1.28 #3 Apple iPad 11% -0.21 #4 Apple Mail 8% -0.29 #5 Google Android 8% +0.16 #6 Outlook 8% -0.86 #7 Outlook.com 5% +0.41 #8 Yahoo! Mail 4% -0.28 #9 Windows Live Mail 2% -0.09 #10 AOL Mail 1% -0.11 Les clients mails les plus utilisés au monde sont...
  61. 61. Mais de nombreux clients mail ne supportent toujours pas les media queries ! Source : Litmus (2014)
  62. 62. 2012 2015 Tri Consultation et action Consultation et action
  63. 63. Dream land
  64. 64. Dans la réalité…
  65. 65. Responsive ?
  66. 66. Context is king
  67. 67. Success ! Source : http://blog.movableink.com/clients-corner-best-western/ Device Targeting +143% App Download Geolocation +12% Taux de clic
  68. 68. Solution #1 : CSS
  69. 69. Solution #2 : One Column
  70. 70. Solution #3 : Get Help
  71. 71. Et vos clients dans tout ça ? Source : http://zurb.com/playground/responsive-email-templates
  72. 72. Welcome
  73. 73. Inspiration
  74. 74. EN BREF 1. Vous DEVEZ avoir une vision mobile 2. La technologie n’évolue presque pas, à l’inverse des usages 3. Vérifiez la manière dont vos utilisateurs consomment vos emails (stats + parcours) 4. Concevez mobile first, ou profitez des outils aujourd’hui peu coûteux et performants 5. Adaptez (si possible) vos contenus au contexte de consultation
  75. 75. Merci :) NiceToMeetYou / Agence Digitale « Full-Services » www.ntmy.fr & @ntmy_fr La Revanche des Sites / Agence SEO www.la-revanche-des-sites.fr & @RevancheSites

×