ATELIER A11 : NOS SITES INTERNET SEREFONT UNE JEUNESSE : HTML 5- CSS3
Qui ?Bérangère Faure                             Benjamin BastienResponsable etourisme                       GMT EditionsS...
INTRODUCTION
HTML5 – CSS3  ?
- HTML5HTML > Format de données(langage) conçu pour représenterles pages webHTML5 (HyperText Markup Language 5)est la proc...
Web sémantiqueMultimédiaMode déconnectéStockage3D / JeuxGéolocation  WEB APP TOURISTIQUE !!
- CSS3CSS (Cascading Style Sheet) langageinformatique qui sert à décrire laprésentation des documents HTMLet XML.CSS3 > Dé...
Transformations 2D/3DTransitionsWebFontsRegion & ColonnesBorder radius, ombres, …Media Queries  RESPONSIVE WEBDESIGN !!
RESPONSIVE WEBDESIGN ?
- RESPONSIVE WEBDESIGNRegroupe différents principes ettechnologies indiquant quun siteest conçu pour sadapter auxdifférent...
Le point de vue prestataire   Benjamin Bastien – GMT Editions
Casser les codesLe web VS l’imprimerieResponsive Layout : Penser global, nimobile, ni desktop, juste le web
Prototyper
Je consulte, tu consultes...Un utilisateur = plusieurs modes deconsultations (cross-device experience)Un utilisateur = un ...
... nous prototypons...La poule et l’oeuf ?  Dégradation de l’experience ou amélioration  progressive ?Le choix du «mobile...
... vous validezVers des prototypes interactifs  de toutes les tailles,dans tous les sens mais dans  l’ordre  automatiser ...
Développer
Un duo de choc
Quelle compatibilité ?Les navigateurs issus du webkit : Chrome,Safari et versions mobilesLes autres : Firefox et Opéra dan...
Certains resterons sur la touche
L’heure des choixUne certitude : éviter les ascenseurs  mise en page fluide ? élastique ? breackpoint ?  mobile portrait, ...
Illustrer
Optimiser les médiasOccuper l’espace visibleManipuler des contenus fixes  images : qualité, performance ?  vidéos : format...
Recetter
Un contrôle qualité allongéDe nouveaux outils pour les prestataires  logiciels, plateformes de test etc.De nouveaux équipe...
Conclusion
Et après ?Une stratégie web mono-canale pouréconomiser du temps et dubudget...... prévoir que malgré tout un siteresponsiv...
Le point de vue institutionnel Bérangère Faure – Saint Etienne Tourisme
Saint-Etienne  Tourisme
saint-etiennetourisme.com
Les 3 fondamentaux du projetExploiter notre base de donnéesProposer un site créatif - innovantRendre accessible le site su...
Proposition du prestataire  Une navigation verticale du type tablette,  en isotope et infinite scroll.  Un affichage du co...
Responsive webdesign à 100 %Au lancement, le site est accessible sur tablette. La 2èmeétape commence, le rendre accessible...
Affichage sur un ordinateur
Affichage sur une tablette
Affichage sur une tablette
Affichage sur un smartphone
Focus sur l’expérience utilisateur Dés lors commence la phase d’identification descontenus prioritaires et de la prise en ...
Déroulement de la phase de testUne plateforme de test a permis deprendre en compte le rendu avant lamise en ligne.Nous avo...
Pourquoi le choix de l’approche      responsive webdesign ? Réduction des coûts (pas de création de site mobile, pasd’acha...
Merci de votre attention          Bérangère FAURE   b.faure@saint-etiennetourisme.com     saint-etiennetourisme.com
Merci de votre attention          Bérangère FAURE   b.faure@saint-etiennetourisme.com        Benjamin BASTIEN      bbastie...
ENQUÊTE DE SATISFACTION    HTTP://BIT.LY/ET8PAU
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Prochain SlideShare
Chargement dans…5
×

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

818 vues

Publié le

Présentation projetée lors de l'atelier "Nos sites internet se refont une jeunesse HTML5 / CSS3" lors des 8èmes Rencontres Nationales du etourisme Institutionnel.

Focalisée autour du Responsive Webdesign l'atelier à vu la participation de Bérangère Faure de Saint Etienne Tourisme, de Benjamin Bastien de GMT Editions et animée par Vincent Vandevelde de Fisheye Communication / IDREZO

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

Atelier "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 institutionnel Bé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 utilisateur Dé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

×