Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 621 views

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. ...

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

Statistics

Views

Total Views
621
Views on SlideShare
621
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. ATELIER A11 : NOS SITES INTERNET SEREFONT UNE JEUNESSE : HTML 5- CSS3
  • 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. INTRODUCTION
  • 4. HTML5 – CSS3  ?
  • 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. Web sémantiqueMultimédiaMode déconnectéStockage3D / JeuxGéolocation WEB APP TOURISTIQUE !!
  • 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. Transformations 2D/3DTransitionsWebFontsRegion & ColonnesBorder radius, ombres, …Media Queries RESPONSIVE WEBDESIGN !!
  • 9. RESPONSIVE WEBDESIGN ?
  • 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. Le point de vue prestataire Benjamin Bastien – GMT Editions
  • 12. Casser les codesLe web VS l’imprimerieResponsive Layout : Penser global, nimobile, ni desktop, juste le web
  • 13. Prototyper
  • 14. Je consulte, tu consultes...Un utilisateur = plusieurs modes deconsultations (cross-device experience)Un utilisateur = un recruteur
  • 15. ... nous prototypons...La poule et l’oeuf ? Dégradation de l’experience ou amélioration progressive ?Le choix du «mobile first»
  • 16. ... vous validezVers des prototypes interactifs de toutes les tailles,dans tous les sens mais dans l’ordre automatiser en utilisant des frameworks
  • 17. Développer
  • 18. Un duo de choc
  • 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. Certains resterons sur la touche
  • 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. Illustrer
  • 23. Optimiser les médiasOccuper l’espace visibleManipuler des contenus fixes images : qualité, performance ? vidéos : formats, ratios ? cartes interactives ?
  • 24. Recetter
  • 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. Conclusion
  • 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. Le point de vue institutionnel Bérangère Faure – Saint Etienne Tourisme
  • 29. Saint-Etienne Tourisme
  • 30. saint-etiennetourisme.com
  • 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. 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. 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. Affichage sur un ordinateur
  • 35. Affichage sur une tablette
  • 36. Affichage sur une tablette
  • 37. Affichage sur un smartphone
  • 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. 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. 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. Merci de votre attention Bérangère FAURE b.faure@saint-etiennetourisme.com saint-etiennetourisme.com
  • 42. Merci de votre attention Bérangère FAURE b.faure@saint-etiennetourisme.com Benjamin BASTIEN bbastien@gmt-editions.fr
  • 43. ENQUÊTE DE SATISFACTION HTTP://BIT.LY/ET8PAU