Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8

2,204 views
2,193 views

Published on

Intervention réalisée lors des 8èmes Rencontres Nationales du etourisme institutionnel, #ET8 à Pau, Aquitaine, les 23 et 24 octobre 2012

Published in: Travel
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,204
On SlideShare
0
From Embeds
0
Number of Embeds
985
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8

  1. 1. ATELIER A11 : NOS SITES INTERNET SEREFONT UNE JEUNESSE : HTML 5- CSS3
  2. 2. Qui ?Bérangère Faure Benjamin BastienResponsable etourisme GMT EditionsSaint Etienne Tourisme www.gmt-editions.frwww.saint-etiennetourisme.com Twitter > @GMTEdition Animé par Vincent Vandevelde Fisheye Communication - IDREZO www.fisheye-communication.com pioupiou : @v_vandevelde
  3. 3. INTRODUCTION
  4. 4. HTML5 – CSS3 ?
  5. 5. - HTML5HTML > Format de données(langage) conçu pour représenterles pages webHTML5 (HyperText Markup Language 5)est la prochaine révision majeuredHTML
  6. 6. Web sémantiqueMultimédiaMode déconnectéStockage3D / JeuxGéolocation WEB APP TOURISTIQUE !!
  7. 7. - CSS3CSS (Cascading Style Sheet) langageinformatique qui sert à décrire laprésentation des documents HTMLet XML.CSS3 > Dénomination employéepour caractériser l’ensemble desnouveautés depuis le CSS2.1.
  8. 8. Transformations 2D/3DTransitionsWebFontsRegion & ColonnesBorder radius, ombres, …Media Queries RESPONSIVE WEBDESIGN !!
  9. 9. RESPONSIVE WEBDESIGN ?
  10. 10. - RESPONSIVE WEBDESIGNRegroupe différents principes ettechnologies indiquant quun siteest conçu pour sadapter auxdifférentes tailles décran et auxdifférents terminaux permettant delafficher
  11. 11. Le point de vue prestataire Benjamin Bastien – GMT Editions
  12. 12. Casser les codesLe web VS l’imprimerieResponsive Layout : Penser global, nimobile, ni desktop, juste le web
  13. 13. Prototyper
  14. 14. Je consulte, tu consultes...Un utilisateur = plusieurs modes deconsultations (cross-device experience)Un utilisateur = un recruteur
  15. 15. ... nous prototypons...La poule et l’oeuf ? Dégradation de l’experience ou amélioration progressive ?Le choix du «mobile first»
  16. 16. ... vous validezVers des prototypes interactifs de toutes les tailles,dans tous les sens mais dans l’ordre automatiser en utilisant des frameworks
  17. 17. Développer
  18. 18. Un duo de choc
  19. 19. Quelle compatibilité ?Les navigateurs issus du webkit : Chrome,Safari et versions mobilesLes autres : Firefox et Opéra dans la courseLe cas IE : IE9 et + la révélation IE8 sous perfusion
  20. 20. Certains resterons sur la touche
  21. 21. L’heure des choixUne certitude : éviter les ascenseurs mise en page fluide ? élastique ? breackpoint ? mobile portrait, mobile paysage/tablette portrait, tablette paysage, écran, grand écran
  22. 22. Illustrer
  23. 23. Optimiser les médiasOccuper l’espace visibleManipuler des contenus fixes images : qualité, performance ? vidéos : formats, ratios ? cartes interactives ?
  24. 24. Recetter
  25. 25. Un contrôle qualité allongéDe nouveaux outils pour les prestataires logiciels, plateformes de test etc.De nouveaux équipements pour les clients la caverne d’Ali Baba
  26. 26. Conclusion
  27. 27. Et après ?Une stratégie web mono-canale pouréconomiser du temps et dubudget...... prévoir que malgré tout un siteresponsive doit s’entretenirPas besoin d’applications mobile ?
  28. 28. Le point de vue institutionnelBérangère Faure – Saint Etienne Tourisme
  29. 29. Saint-Etienne Tourisme
  30. 30. saint-etiennetourisme.com
  31. 31. Les 3 fondamentaux du projetExploiter notre base de donnéesProposer un site créatif - innovantRendre accessible le site sur tablettesdans un 1er temps, dans un 2ème temps surSmartphones.
  32. 32. Proposition du prestataire Une navigation verticale du type tablette, en isotope et infinite scroll. Un affichage du contenu sous forme de blocs qui s’agencent dans tout type de page de manière aléatoire.Les gabarits à ce stade du projet sontconçus pour une navigation sur tablette.
  33. 33. Responsive webdesign à 100 %Au lancement, le site est accessible sur tablette. La 2èmeétape commence, le rendre accessible sur mobiles. La façon dont avait été pensée le site en amont a permis de faciliter l’adaptation sur mobile. L’affichage sous forme de blocs n’a pas demandé un changement de mise en page. Les contenus s’affichent dès lors sur une colonne.
  34. 34. Affichage sur un ordinateur
  35. 35. Affichage sur une tablette
  36. 36. Affichage sur une tablette
  37. 37. Affichage sur un smartphone
  38. 38. Focus sur l’expérience utilisateurDés lors commence la phase d’identification descontenus prioritaires et de la prise en compte de lanavigation sur mobile. Réagencement d’éléments Activation de la fonction numéros de téléphone Menu de navigation s’ouvre comme une application Liens du header déplacés dans le footer sauf le carnet de voyage
  39. 39. Déroulement de la phase de testUne plateforme de test a permis deprendre en compte le rendu avant lamise en ligne.Nous avons testé le site sur 2environnements différents. (iPhone etAndroid)
  40. 40. Pourquoi le choix de l’approche responsive webdesign ?Réduction des coûts (pas de création de site mobile, pasd’achat de nom de domaine supplémentaire).Réponse aux nouveaux usages, nos internautes sont deplus en plus des mobinautes.Volonté d’anticiper les besoins par rapport aux usages etde se positionner dans une démarche innovante à lapointe de la technologie et des avancées du web.
  41. 41. Merci de votre attention Bérangère FAURE b.faure@saint-etiennetourisme.com saint-etiennetourisme.com
  42. 42. Merci de votre attention Bérangère FAURE b.faure@saint-etiennetourisme.com Benjamin BASTIEN bbastien@gmt-editions.fr
  43. 43. ENQUÊTE DE SATISFACTION HTTP://BIT.LY/ET8PAU

×