Téléchargé parNiceToMeetYou
Web Mobile : quelles opportunités face aux apps ?
La conférence explore les opportunités du web mobile face aux applications, mettant en avant l'expertise de nicetomeetyou et la revanche des sites en matière de SEO et de design mobile. Avec une augmentation significative du trafic mobile, le web mobile est identifié comme essentiel pour les marques souhaitant optimiser leur visibilité et expérience utilisateur. Les participants proposent des stratégies innovantes et pratiques pour assurer une approche mobile-friendly et responsive dans un paysage numérique en constante évolution.
Contenu connexe
Similaire à Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
- 1. #DIGITALBREAKFAST Face aux apps, quellesopportunités en Web Mobile ? Conférence NiceToMeetYou + La Revanche des Sites Paris, Palais de Tokyo + Lille, Hermitage Gantois – Juin 2015
- 2. Tendances d’usages Mobile WebDesign Possibilités techniques Mobile SEO Email Responsive Let’s talk about...
- 3. NiceToMeetYou est uneagence 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. La Revanche desSites 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. Les intervenants Ange POZZODI 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. STATE OF WEB MOBILE Oùen est-on en France ?
- 7. 2014 2015 20162017 1H20 1H40 1H50 2H10 UNE QUESTION DE TEMPS D’USAGE
- 8. Soit environ 15minutes par jour dans le navigateur...
- 9. FAIBLE ? En termesde croissance, NON. PROPORTIONNELLEMENT, OUI.
- 10.
- 11. Sans oublier lespréférences liées au contexte !
- 12. Et de l’âge dépendaussi l’usage
- 13. « Mobile UXwill be a ranking signal » SearchEngine Land, 11/14 Des utilisateurs qui privilégient forcément une expérience mobile-friendly
- 14. Dans un écosystèmefragmenté et en évolution constante... Source : Kerensen (2015)
- 15. Le Web Mobileest 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. EN BREF 1. Jetezd’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. WEB MOBILE Le futurest dans nos mains DESIGN
- 18. Est-ce une app? Un site web ? Superman ? Applification
- 19.
- 20. Un site webqui ressemble à une app http://www.my7up.com/
- 21. Un site webqui s’adapte http://www.citedeleconomie.fr/
- 22.
- 23.
- 24. Mais jusqu’où ? Allonsun peu plus loin…
- 25. Can I (really)use ?
- 26.
- 27. Scalable Vector Graphics Dessinvectoriel dans le navigateur Svg Software
- 28.
- 29. Capteur qui permetde mesurer l’angle d’inclinaison (x,y,z) Le gyroscope donne la position angulaire (selon un, deux ou les trois axes) Gyroscope Hardware
- 30.
- 31.
- 32. Communication bidirectionnelle WebSocket estune 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.
- 34. Capteur qui permetde 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.
- 36. Chiche ! Et sion mélange tout ?
- 37. http://www.mountainsofmouthness.com/ Web GL +Gyroscope + Twitter + Voice Synth
- 38. http://sakuradream.lux.co.jp/ Web GL +Gyroscope + Geolocation + Google Street View
- 39. https://www.chrome.com/racer WebSockets + Chrome+ Canvas + Paper.js + Web Audio API
- 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.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47. EN BREF 1. Selonles 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. A vivre uniquementsur tablette ou mobile ! Petit bonus
- 49.
- 50. Ce qu’il fautsavoir : • 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. • Pas deré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.
- 53. •Un site estconsidé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. 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. 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. • Compresser lecontenu • 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. EN BREF 1. Neplus 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. EMAIL ET MOBILE Une updatebien utile ;)
- 59. En France, l’emailest lu sur mobile dans plus de 36% des cas... Source : ReturnPath (2014)
- 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. Mais de nombreuxclients mail ne supportent toujours pas les media queries ! Source : Litmus (2014)
- 62. 2012 2015 Tri Consultation etaction Consultation et action
- 63.
- 64.
- 65.
- 66.
- 67. Success ! Source :http://blog.movableink.com/clients-corner-best-western/ Device Targeting +143% App Download Geolocation +12% Taux de clic
- 68.
- 69. Solution #2 :One Column
- 70. Solution #3 :Get Help
- 71. Et vos clientsdans tout ça ? Source : http://zurb.com/playground/responsive-email-templates
- 72.
- 74.
- 75. EN BREF 1. VousDEVEZ 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
- 76. Merci :) NiceToMeetYou /Agence Digitale « Full-Services » www.ntmy.fr & @ntmy_fr La Revanche des Sites / Agence SEO www.la-revanche-des-sites.fr & @RevancheSites