SlideShare une entreprise Scribd logo
1  sur  48
ATELIER A11 : NOS SITES INTERNET SE
REFONT UNE JEUNESSE : HTML 5- CSS3
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
INTRODUCTION
HTML5 – CSS3 ?
- 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
Web sémantique
Multimédia
Mode déconnecté
Stockage
3D / Jeux
Géolocation
  WEB APP TOURISTIQUE !!
- 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.
Transformations 2D/3D
Transitions
WebFonts
Region & Colonnes
Border radius, ombres, …
Media Queries
  RESPONSIVE WEBDESIGN !!
RESPONSIVE WEBDESIGN ?
- 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
Le point de vue prestataire
  Benjamin Bastien – GMT Editions
Casser les codes


Le web VS l’imprimerie
Responsive Layout : Penser global, ni
mobile, ni desktop, juste le web
Prototyper
Je consulte, tu consultes...


Un utilisateur = plusieurs modes de
consultations (cross-device experience)
Un utilisateur = un recruteur
... nous prototypons...

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

Vers des prototypes interactifs
  de toutes les tailles,dans tous les sens mais dans
  l’ordre
  automatiser en utilisant des frameworks
Développer
Un duo de choc
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
Certains resterons sur la touche
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
Illustrer
Optimiser les médias

Occuper l’espace visible
Manipuler des contenus fixes
  images : qualité, performance ?
  vidéos : formats, ratios ?
  cartes interactives ?
Recetter
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
Conclusion
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 ?
Le point de vue institutionnel
Bérangère Faure – Saint Etienne Tourisme
Saint-Etienne Tourisme
saint-etiennetourisme.com
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.
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.
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.
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 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
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)
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.
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
      bbastien@gmt-editions.fr
ENQUÊTE DE SATISFACTION




    HTTP://BIT.LY/ET8PAU
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8

Contenu connexe

Tendances

Tendances (15)

#Et6-At5-Application et/ou webapp
#Et6-At5-Application et/ou webapp#Et6-At5-Application et/ou webapp
#Et6-At5-Application et/ou webapp
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
 
Atelier 2-2015-image-le-vignoble-de-nantes-tourisme slideshare
Atelier 2-2015-image-le-vignoble-de-nantes-tourisme slideshareAtelier 2-2015-image-le-vignoble-de-nantes-tourisme slideshare
Atelier 2-2015-image-le-vignoble-de-nantes-tourisme slideshare
 
(i12) Construire et piloter sa stratégie E-tourisme - Salon etourisme
(i12) Construire et piloter sa stratégie E-tourisme - Salon etourisme(i12) Construire et piloter sa stratégie E-tourisme - Salon etourisme
(i12) Construire et piloter sa stratégie E-tourisme - Salon etourisme
 
Salon etourisme - Atelier expérience Hôtels
Salon etourisme - Atelier expérience HôtelsSalon etourisme - Atelier expérience Hôtels
Salon etourisme - Atelier expérience Hôtels
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
 
4e atelier numerique_2015_office_tourisme_vignoble_nantes_slideshare
4e atelier numerique_2015_office_tourisme_vignoble_nantes_slideshare4e atelier numerique_2015_office_tourisme_vignoble_nantes_slideshare
4e atelier numerique_2015_office_tourisme_vignoble_nantes_slideshare
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
A5 des réseaux sociaux à la curation territoriale
A5 des réseaux sociaux à la curation territorialeA5 des réseaux sociaux à la curation territoriale
A5 des réseaux sociaux à la curation territoriale
 
molka foods
molka foodsmolka foods
molka foods
 
CEFQ La fin du site web traditionnel
CEFQ   La fin du site web traditionnelCEFQ   La fin du site web traditionnel
CEFQ La fin du site web traditionnel
 
Forum du Livradois-Forez 2013 - Atelier 2 - ma communication internet
Forum du Livradois-Forez 2013 - Atelier 2 - ma communication internetForum du Livradois-Forez 2013 - Atelier 2 - ma communication internet
Forum du Livradois-Forez 2013 - Atelier 2 - ma communication internet
 
Améliorez votre site internet
Améliorez votre site internetAméliorez votre site internet
Améliorez votre site internet
 
(i15) Conseiller en séjour 2.0 - Salon etourisme
(i15) Conseiller en séjour 2.0 - Salon etourisme(i15) Conseiller en séjour 2.0 - Salon etourisme
(i15) Conseiller en séjour 2.0 - Salon etourisme
 
atelier-numerique-3-reseaux-sociaux-facebook-le-vignoble-de-nantes-tourisme
atelier-numerique-3-reseaux-sociaux-facebook-le-vignoble-de-nantes-tourismeatelier-numerique-3-reseaux-sociaux-facebook-le-vignoble-de-nantes-tourisme
atelier-numerique-3-reseaux-sociaux-facebook-le-vignoble-de-nantes-tourisme
 

En vedette

Depliant GMC Sélection Obsèques
Depliant GMC Sélection ObsèquesDepliant GMC Sélection Obsèques
Depliant GMC Sélection Obsèques
ADPAssurances
 
Observatoire des transports_franco_italiens_nice_12_avril_13
Observatoire des transports_franco_italiens_nice_12_avril_13Observatoire des transports_franco_italiens_nice_12_avril_13
Observatoire des transports_franco_italiens_nice_12_avril_13
INTERALPES Alcotra 2007-2013
 
New york odp
New york odpNew york odp
New york odp
nacarEOI
 
Ajouter du son sur prezi
Ajouter du son sur preziAjouter du son sur prezi
Ajouter du son sur prezi
francoisebreton
 
Présentation Ccs 2012
Présentation Ccs 2012Présentation Ccs 2012
Présentation Ccs 2012
Agence51
 

En vedette (20)

3-Cm9 2013-2014
3-Cm9 2013-20143-Cm9 2013-2014
3-Cm9 2013-2014
 
3-Cm2 2013-2014
3-Cm2 2013-20143-Cm2 2013-2014
3-Cm2 2013-2014
 
Environnement chine
Environnement chineEnvironnement chine
Environnement chine
 
Lettre ouverte à marisol touraine
Lettre ouverte à marisol touraineLettre ouverte à marisol touraine
Lettre ouverte à marisol touraine
 
4-Cm24 10-11
4-Cm24 10-114-Cm24 10-11
4-Cm24 10-11
 
3-Cm3 2013-2014
3-Cm3 2013-20143-Cm3 2013-2014
3-Cm3 2013-2014
 
Rapport pour améliorer la démographie médicale (ISNIH)
Rapport pour améliorer la démographie médicale (ISNIH)Rapport pour améliorer la démographie médicale (ISNIH)
Rapport pour améliorer la démographie médicale (ISNIH)
 
3-Cm18 2013-2014
3-Cm18 2013-20143-Cm18 2013-2014
3-Cm18 2013-2014
 
Congo
CongoCongo
Congo
 
Depliant GMC Sélection Obsèques
Depliant GMC Sélection ObsèquesDepliant GMC Sélection Obsèques
Depliant GMC Sélection Obsèques
 
Keratites des carnivores
Keratites des carnivoresKeratites des carnivores
Keratites des carnivores
 
Observatoire des transports_franco_italiens_nice_12_avril_13
Observatoire des transports_franco_italiens_nice_12_avril_13Observatoire des transports_franco_italiens_nice_12_avril_13
Observatoire des transports_franco_italiens_nice_12_avril_13
 
Pres inCitu webinar-comment utiliser les réseaux sociaux pour etre efficace
Pres inCitu webinar-comment utiliser les réseaux sociaux pour etre efficacePres inCitu webinar-comment utiliser les réseaux sociaux pour etre efficace
Pres inCitu webinar-comment utiliser les réseaux sociaux pour etre efficace
 
New york odp
New york odpNew york odp
New york odp
 
#ET11 - A2-Conduite de projet
#ET11 - A2-Conduite de projet#ET11 - A2-Conduite de projet
#ET11 - A2-Conduite de projet
 
Print digital 2012 151012
Print digital 2012 151012Print digital 2012 151012
Print digital 2012 151012
 
Atelier 1 - Nous sommes là pour faire des histoires - ET8
Atelier 1  - Nous sommes là pour faire des histoires - ET8Atelier 1  - Nous sommes là pour faire des histoires - ET8
Atelier 1 - Nous sommes là pour faire des histoires - ET8
 
Mais qui est donc Fabien Roussel?
Mais qui est donc Fabien Roussel?Mais qui est donc Fabien Roussel?
Mais qui est donc Fabien Roussel?
 
Ajouter du son sur prezi
Ajouter du son sur preziAjouter du son sur prezi
Ajouter du son sur prezi
 
Présentation Ccs 2012
Présentation Ccs 2012Présentation Ccs 2012
Présentation Ccs 2012
 

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

Les Sites Mobiles
Les Sites MobilesLes Sites Mobiles
Les Sites Mobiles
mmti2008
 

Similaire à Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8 (20)

Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
Développement HTML5 : les enjeux et best practices
Développement HTML5 : les enjeux et best practicesDéveloppement HTML5 : les enjeux et best practices
Développement HTML5 : les enjeux et best practices
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
 
2011 05 05 rendez accessible votre site internetvia un telephone portable by ...
2011 05 05 rendez accessible votre site internetvia un telephone portable by ...2011 05 05 rendez accessible votre site internetvia un telephone portable by ...
2011 05 05 rendez accessible votre site internetvia un telephone portable by ...
 
Proxym France : Your Digital Factory
Proxym France : Your Digital FactoryProxym France : Your Digital Factory
Proxym France : Your Digital Factory
 
Cv dridi-lotfi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
 
Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir
 
E BUSINESS course 3 - INSEEC 2011/12
E BUSINESS course 3 - INSEEC 2011/12 E BUSINESS course 3 - INSEEC 2011/12
E BUSINESS course 3 - INSEEC 2011/12
 
Mobile et e-commerce 2017 : Google AMP, Mobile First Index
Mobile et e-commerce 2017 : Google AMP, Mobile First IndexMobile et e-commerce 2017 : Google AMP, Mobile First Index
Mobile et e-commerce 2017 : Google AMP, Mobile First Index
 
Offre migrer vers_flutter
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutter
 
aYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web DesignaYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web Design
 
aYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web DesignaYaline - Offre Mobilité - Responsive Web Design
aYaline - Offre Mobilité - Responsive Web Design
 
Cv2015
Cv2015Cv2015
Cv2015
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...
 
Les Sites Mobiles
Les Sites MobilesLes Sites Mobiles
Les Sites Mobiles
 
Les Sites Mobiles
Les Sites MobilesLes Sites Mobiles
Les Sites Mobiles
 
Blog ecommerce conférence mobile - analyse de logs
Blog ecommerce   conférence mobile - analyse de logsBlog ecommerce   conférence mobile - analyse de logs
Blog ecommerce conférence mobile - analyse de logs
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
 

Plus de Rencontres Nationales du etourisme institutionnel

Plus de Rencontres Nationales du etourisme institutionnel (20)

Bilan #ET17
Bilan #ET17Bilan #ET17
Bilan #ET17
 
C4 - De la stratégie digitale au cahier des charges
C4  - De la stratégie digitale au cahier des chargesC4  - De la stratégie digitale au cahier des charges
C4 - De la stratégie digitale au cahier des charges
 
Amsterdam : How to manage success
Amsterdam : How to manage successAmsterdam : How to manage success
Amsterdam : How to manage success
 
MC1 - La publicité dans les réseaux sociaux
MC1 - La publicité dans les réseaux sociauxMC1 - La publicité dans les réseaux sociaux
MC1 - La publicité dans les réseaux sociaux
 
B4 - La galaxie Facebook
B4 - La galaxie FacebookB4 - La galaxie Facebook
B4 - La galaxie Facebook
 
B3 - Mes sociopros avant mes touristes
B3 - Mes sociopros avant mes touristesB3 - Mes sociopros avant mes touristes
B3 - Mes sociopros avant mes touristes
 
MC4 - Yield management
MC4 - Yield managementMC4 - Yield management
MC4 - Yield management
 
MC3 - Mets du son
MC3 - Mets du sonMC3 - Mets du son
MC3 - Mets du son
 
MC2 - Les stories
MC2 - Les storiesMC2 - Les stories
MC2 - Les stories
 
Bilan #ET14
Bilan #ET14Bilan #ET14
Bilan #ET14
 
Synthèse des ateliers des ET14
Synthèse des  ateliers des ET14Synthèse des  ateliers des ET14
Synthèse des ateliers des ET14
 
ET14 - Manifeste des ET14
ET14 - Manifeste des ET14ET14 - Manifeste des ET14
ET14 - Manifeste des ET14
 
ET14 - RE4 - Timescope
ET14 - RE4 - TimescopeET14 - RE4 - Timescope
ET14 - RE4 - Timescope
 
ET14 - RE3 - Micro aventures
ET14 - RE3 - Micro aventuresET14 - RE3 - Micro aventures
ET14 - RE3 - Micro aventures
 
ET14 - MC3 - Formats publicitaires
ET14 - MC3 - Formats publicitairesET14 - MC3 - Formats publicitaires
ET14 - MC3 - Formats publicitaires
 
ET14 - F4 - Coomptoir des loisirs
ET14 - F4 - Coomptoir des loisirsET14 - F4 - Coomptoir des loisirs
ET14 - F4 - Coomptoir des loisirs
 
ET14 - F3 - La Creuse
ET14 - F3 - La CreuseET14 - F3 - La Creuse
ET14 - F3 - La Creuse
 
ET14 - C4 - Nudge marketing
ET14 - C4 - Nudge marketingET14 - C4 - Nudge marketing
ET14 - C4 - Nudge marketing
 
ET14 - B4 - Digital detox
ET14 - B4 - Digital detoxET14 - B4 - Digital detox
ET14 - B4 - Digital detox
 
ET14 - B3 - Chatbots, IA
ET14 - B3 - Chatbots, IAET14 - B3 - Chatbots, IA
ET14 - B3 - Chatbots, IA
 

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

  • 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
  • 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 !!
  • 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
  • 14. Je consulte, tu consultes... Un utilisateur = plusieurs modes de consultations (cross-device experience) Un utilisateur = un recruteur
  • 15.
  • 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
  • 18.
  • 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
  • 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
  • 25. Optimiser les médias Occuper l’espace visible Manipuler des contenus fixes images : qualité, performance ? vidéos : formats, ratios ? cartes interactives ?
  • 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
  • 28.
  • 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
  • 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