Développement HTML5 : les enjeux et best practices

732 vues

Publié le

Responsive design, HTML5,… autant de concepts permettant notamment d’adresser la fragmentation des écrans (smartphone, tablette, PC, TV connectée) au travers desquels les consommateurs accèdent à votre marque digitale. Tour d’horizon des enjeux, des fonctionnalités clés (réseaux sociaux, SEO, SEM, geolocalisation, gestion du offline, adaptation du design) et des meilleures pratiques dans le développement de site internet mobile. Etudes de cas notamment sur PMU & Interflora récompensés par Google comme M site de l’année.

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
732
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Développement HTML5 : les enjeux et best practices

  1. 1. Les Slides de l’ExpertSi vous utilisez les informations de cette présentation, merci de citer le nom de l’entreprise et le nom de l’événement dans vos sources
  2. 2. USER ADGENTS Nom et prénom: Renaud Ménérat Titre: Co-Fondateur Twitter: @rmeneratLe Pitch > Développement HTML5 : les enjeux et best practicesResponsive design, HTML5,… autant de concepts permettant notamment d’adresser lafragmentation des écrans (smartphone, tablette, PC, TV connectée) au travers desquels lesconsommateurs accèdent à votre marque digitale. Tour d’horizon des enjeux, desfonctionnalités clés (réseaux sociaux, SEO, SEM, geolocalisation, gestion du offline,adaptation du design) et des meilleures pratiques dans le développement de site internetmobile
  3. 3. Mobile First ! Site / Web app multi-écrans & HTML5 Renaud MENERAT – Président @rmeneratLa French Mobile Day - 2 Octobre 2012 – 11h58
  4. 4. Qui sommes-nous? userADgents est une agence conseil en marketing mobilespécialisée dans la conception, le développement & la promotion de webapps et d’applications nomades pour Smartphones, tablettes, PC et TV ConnectéesUne société 100% spécialisée sur les problématiques nomades multi-écrans 4
  5. 5. Pourquoi sommes-nous là à 11h58?Une expertise sur le développement de sites / webapps optimisés pour le multi-écrans 5
  6. 6. Le multi-écrans pourquoi? 1 - L’audience Un accès internet via de plus en plus de terminaux Source : LewebmarketeurLes entreprises ont l’obligation d’offrir une expérience optimisée sur tous les écrans 6
  7. 7. Le multi-écrans pourquoi? 1 - L’audience Fin 2012, 20 à 25% de votre audience digitale Smartphones & tablettes 25% PCs Source : userADgents - 2012Les entreprises ont l’obligation d’offrir une expérience optimisée sur tous les écrans 7
  8. 8. Le multi-écrans pourquoi? 1 - L’audience 67% des e-acheteurs ont un parcours d’achat séquentiel Mono-écran 67% + Multi-écrans Source : Etude Google / Ipsos – Multiscreens - 2012Les entreprises ont l’obligation d’offrir une expérience optimisée sur tous les écrans 8
  9. 9. Le multi-écrans pourquoi? 2 - La simplicité Une problématique de déploiement et de maintenance Smartphones Tablettes PCsUne multiplication des versions rendant la mise à jour & le déploiement complexes 9
  10. 10. Le multi-écrans comment ? 1 – Exposer les données de l’entreprise Mettre en place une couche de médiation / services web API / Web Services (Json / Rest) Simplifier le déploiement, permettre le développement d’applications web / nativesnt, permettre le développement d’applications web / natives 10
  11. 11. Le multi-écrans comment ? 2 – Simplifier l’échange & l’accès aux données Séparer couche de présentation & données HTTPSite (mobile) M V C HTML HTTPWebapp (mobile) M V C JSON Déporter une partie de l’intelligence au niveau des clients 11
  12. 12. Le multi-écrans comment ? 3 – Au-delà du HTML5, s’appuyer sur des standard ouverts Le web est mort, vive le web• Une évolution du HTML (encore en Beta)• 90% des navigateurs compatibles en 2016• Gestion du cache• Geolocalisation• … Oubliez les features phones & s’affranchir des frameworks& solutions propriétaires 12
  13. 13. Le multi-écrans comment ?4 – Adopter le responsive web, une réponse à presque tout Papa ours, Maman ours, Bébé ours Taille de l’écran, touchgesture, orientation UI, fonctionnel,… Source : Sparky hubs Une seul code, mais une présentation (CSS) & un fonctionnel (JS) adaptés 13
  14. 14. Le multi-écrans comment ? 5 –Osez le Mobile first !Optimiser votre développement en repensant votre site à partir du mobile 4 - Optimisez le chargement & donc le SEO (LAZY LOADING) 14
  15. 15. Pourquoi nous revoir après 12h10*? Performance Conversion +80% +35% *Horaire sans engagement 15
  16. 16. En conclusionLa prochaine fois que vous repensez …osez interroger une
  17. 17. merci Renaud Ménérat  r.menerat@useradgents.com  +33 (0)1 77 75 67 88 +33(0)6 86 18 51 24 www.useradgents.com

×