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

1. ATELIER A11 : NOS SITES INTERNET SE
REFONT UNE JEUNESSE : HTML 5- CSS3

2. Qui ?
Bérangère Faure Benjamin Bastien
Responsable etourisme GMT Editions
Saint Etienne Tourisme www.gmt-editions.fr
www.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. - HTML5
HTML > Format de données
(langage) conçu pour représenter
les pages web
HTML5 (HyperText Markup Language 5)
est la prochaine révision majeure
d'HTML

6. Web sémantique
Multimédia
Mode déconnecté
Stockage
3D / Jeux
Géolocation
WEB APP TOURISTIQUE !!

7. - CSS3
CSS (Cascading Style Sheet) langage
informatique qui sert à décrire la
présentation des documents HTML
et XML.
CSS3 > Dénomination employée
pour caractériser l’ensemble des
nouveautés depuis le CSS2.1.

8. Transformations 2D/3D
Transitions
WebFonts
Region & Colonnes
Border radius, ombres, …
Media Queries
RESPONSIVE WEBDESIGN !!

9. RESPONSIVE WEBDESIGN ?

10. - RESPONSIVE WEBDESIGN
Regroupe différents principes et
technologies indiquant qu'un site
est conçu pour s'adapter aux
différentes tailles d'écran et aux
différents terminaux permettant de
l'afficher

11. Le point de vue prestataire
Benjamin Bastien – GMT Editions

12. Casser les codes
Le web VS l’imprimerie
Responsive Layout : Penser global, ni
mobile, ni desktop, juste le web

13. Prototyper

14. Je consulte, tu consultes...
Un utilisateur = plusieurs modes de
consultations (cross-device experience)
Un utilisateur = un recruteur

16. ... nous prototypons...
La poule et l’oeuf ?
Dégradation de l’experience ou amélioration
progressive ?
Le choix du «mobile first»

17. ... vous validez
Vers des prototypes interactifs
de toutes les tailles,dans tous les sens mais dans
l’ordre
automatiser en utilisant des frameworks

19. Développer

20. Un duo de choc

21. Quelle compatibilité ?
Les navigateurs issus du webkit : Chrome,
Safari et versions mobiles
Les autres : Firefox et Opéra dans la course
Le cas IE :
IE9 et + la révélation
IE8 sous perfusion

22. Certains resterons sur la touche

23. L’heure des choix
Une certitude : éviter les ascenseurs
mise en page fluide ? élastique ? breackpoint ?
mobile portrait, mobile paysage/tablette portrait,
tablette paysage, écran, grand écran

24. Illustrer

25. Optimiser les médias
Occuper l’espace visible
Manipuler des contenus fixes
images : qualité, performance ?
vidéos : formats, ratios ?
cartes interactives ?

26. Recetter

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

29. Conclusion

30. Et après ?
Une stratégie web mono-canale pour
économiser du temps et du
budget...
... prévoir que malgré tout un site
responsive doit s’entretenir
Pas besoin d’applications mobile ?

31. Le point de vue institutionnel
Bérangère Faure – Saint Etienne Tourisme

32. Saint-Etienne
Tourisme

33. saint-etiennetourisme.com

34. Les 3 fondamentaux du projet
Exploiter notre base de données
Proposer un site créatif - innovant
Rendre accessible le site sur tablettes
dans un 1er temps, dans un 2ème temps sur
Smartphones.

35. 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 sont
conçus pour une navigation sur tablette.

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

37. Affichage sur un ordinateur

38. Affichage sur une tablette

39. Affichage sur une tablette

40. Affichage sur un smartphone

41. Focus sur l’expérience utilisateur
Dés lors commence la phase d’identification des
contenus prioritaires et de la prise en compte de la
navigation 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

42. Déroulement de la phase de test
Une plateforme de test a permis de
prendre en compte le rendu avant la
mise en ligne.
Nous avons testé le site sur 2
environnements différents. (iPhone et
Android)

43. Pourquoi le choix de l’approche
responsive webdesign ?
Réduction des coûts (pas de création de site mobile, pas
d’achat de nom de domaine supplémentaire).
Réponse aux nouveaux usages, nos internautes sont de
plus en plus des mobinautes.
Volonté d’anticiper les besoins par rapport aux usages et
de se positionner dans une démarche innovante à la
pointe de la technologie et des avancées du web.

44. Merci de votre attention
Bérangère FAURE
b.faure@saint-etiennetourisme.com
saint-etiennetourisme.com

45. Merci de votre attention
Bérangère FAURE
b.faure@saint-etiennetourisme.com
Benjamin BASTIEN
bbastien@gmt-editions.fr

46. ENQUÊTE DE SATISFACTION
HTTP://BIT.LY/ET8PAU