SlideShare une entreprise Scribd logo
1  sur  43
Salle
#VEM7 Voyage en Multimédia | 3 - 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
La conception de sites web
en mode « mobile First »
Atelier i5
Animateur : Vivian VIDAL
Cédric CHABRY
Agence interactive
Jean-Baptiste DAVID
NOE interactive
Frédérique PACOTTE
Iris Interactive
Salle
#VEM7 Voyage en Multimédia | 3 - 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
Atelier i5
L’avènement de la connexion en mobilité impacte
la création des sites web.
Le responsive design permet un affichage optimisé
en lecture sur mobile. La conception de pages web
en mode « Mobile first » change la façon
d’appréhender l’expérience utilisateur en
valorisant la géolocalisation et le moment présent.
• Mobile first ça veut dire quoi concrètement ?
• Quand faut-il travailler en mobile first ?
• Comment faut-il s’y prendre ?
• Pourquoi suis-je concerné si je ne suis pas
développeur ?
La conception de sites web
en mode « mobile First »
> >
> >
> >> >
> >
>
> >
>
> >
9
Étude de cas :
#VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
Atelier 15 : La conception de site web en mode « mobile First »
Atelier 15 : La conception de site web en mode « mobile First »
Je découvre la destination
Atelier 15 : La conception de site web en mode « mobile First »
Je découvre la destination
#VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
Atelier 15 : La conception de site web en mode « mobile First »
Atelier 15 : La conception de site web en mode « mobile First »
Je consulte les offres
Atelier 15 : La conception de site web en mode « mobile First »
Je réserve mon voyage
Atelier 15 : La conception de site web en mode « mobile First »
Atelier 15 : La conception de site web en mode « mobile First »
Atelier 15 : La conception de site web en mode « mobile First »
Atelier 15 : La conception de site web en mode « mobile First »
Atelier 15 : La conception de site web en mode « mobile First »
MOBILE FIRST + RESPONSIVE DESIGN
{ USER FIRST }
25
#VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
montpellier-tourisme.fr
29
#VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
montpellier-tourisme.fr
30
#VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
montpellier-tourisme.fr
31
#VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
montpellier-tourisme.fr
32
#VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
montpellier-tourisme.fr
Etude de cas : chartreuse-tourisme.com
géolocalisation
Mobile First & expérience utilisateur (UX)
• Stimulation de
l’utilisateur par
un menu
accrocheur
• Expérience
spécifique si
l’utilisateur est
sur place,
détection via la
géolocalisation
Mobile First & expérience utilisateur (UX)
Géolocalisation
• Call to action :
situation
géographique à
préciser par
l’utilisateur (si pas
précisé)
• pour un service
très personnalisé
• on rassure
l’usager
Géolocalisation
Mobile First & expérience utilisateur (UX)
Géolocalisation
maximiser l’expérience et l’usage en mode carte
Mobile First & expérience utilisateur (UX)
Une interface utilisateur engageante
Mobile First
& expérience utilisateur (UX)
Etude de cas : lesmenuires.com (tablette)
2 boutons « Call to action » dépendants de la stratégie commerciale
Une interface utilisateur engageante
Mobile First & expérience utilisateur (UX)
UI similaire, dans un service tierce, mais responsive
Une interface utilisateur engageante
Mobile First & expérience utilisateur (UX)
Une stratégie mobile first n’a de sens que si :
– on sait proposer un contenu différencié en
préparation de séjour et en situation de séjour
(géolocalisation).
– le mobile devient le point de contact
privilégié pour capter l’attention d’un client en
séjour
– on connaît suffisamment de choses (Data) sur
ses utilisateurs pour leur proposer des offres
qualifiées (smartdata)
Mobile first : le contenu first
Une qualification exemplaire des données SIT pour
une recherche sur mobile
– des résultats liés à la proximité (géolocalisation)
– des résultats liés au contexte (horaires, disponibilité, météo)
– le mobile devient alors l’outil déterminant d’une stratégie
ROPO (Research Online Pourchasse Offline) avec vos
prestataires
Mobile first : le contenu first
ROPO
#VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
Retrouvez toutes les informations et les
coordonnées des intervenants sur:
http://www.salon-
etourisme.com/intervenants-vem
Ou cliquez directement leur nom sur la première slide
Infos Intervenants
Salle
#VEM7 Voyage en Multimédia | 3 - 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com
La conception de sites web
en mode « mobile First »
Atelier i5
Animateur : Vivian VIDAL
Cédric CHABRY
Agence interactive
Jean-Baptiste DAVID
NOE interactive
Frédérique PACOTTE
Iris Interactive

Contenu connexe

Tendances

Atelier 24 VEM7 - Comment optimiser son mix marketing ?
Atelier 24 VEM7 - Comment optimiser son mix marketing ?Atelier 24 VEM7 - Comment optimiser son mix marketing ?
Atelier 24 VEM7 - Comment optimiser son mix marketing ?Salon e-tourisme #VeM
 
Atelier 2 VEM7 - Buzz, séduction ou rassurance : quel objectif pour mes vidéos ?
Atelier 2 VEM7 - Buzz, séduction ou rassurance : quel objectif pour mes vidéos ?Atelier 2 VEM7 - Buzz, séduction ou rassurance : quel objectif pour mes vidéos ?
Atelier 2 VEM7 - Buzz, séduction ou rassurance : quel objectif pour mes vidéos ?Salon e-tourisme #VeM
 
Atelier 10 VEM7 - Revenue-management à la sauce participative
Atelier 10 VEM7 - Revenue-management à la sauce participativeAtelier 10 VEM7 - Revenue-management à la sauce participative
Atelier 10 VEM7 - Revenue-management à la sauce participativeSalon e-tourisme #VeM
 
Atelier 18 VEM7 - Optimiser la relation client avec l’outil numérique
Atelier 18 VEM7 - Optimiser la relation client avec l’outil numériqueAtelier 18 VEM7 - Optimiser la relation client avec l’outil numérique
Atelier 18 VEM7 - Optimiser la relation client avec l’outil numériqueSalon e-tourisme #VeM
 
Atelier 23 VEM7 - Comment garder le contrôle de son établissement sur le web ?
Atelier 23 VEM7 - Comment garder le contrôle de son établissement sur le web ?Atelier 23 VEM7 - Comment garder le contrôle de son établissement sur le web ?
Atelier 23 VEM7 - Comment garder le contrôle de son établissement sur le web ?Salon e-tourisme #VeM
 
6 vem6 E6 - stratégie de contenu sur les réseaux sociaux
6 vem6 E6 - stratégie de contenu sur les réseaux sociaux6 vem6 E6 - stratégie de contenu sur les réseaux sociaux
6 vem6 E6 - stratégie de contenu sur les réseaux sociauxSalon e-tourisme #VeM
 
Atelier 30 VEM7 - Hébergeur : Nouveau paysage commercial, nouveau positionnement
Atelier 30 VEM7 - Hébergeur : Nouveau paysage commercial, nouveau positionnementAtelier 30 VEM7 - Hébergeur : Nouveau paysage commercial, nouveau positionnement
Atelier 30 VEM7 - Hébergeur : Nouveau paysage commercial, nouveau positionnementSalon e-tourisme #VeM
 
Atelier 7 VEM7 - Comment travailler avec les blogueurs et autres influenceurs ?
Atelier 7 VEM7 - Comment travailler avec les blogueurs et autres influenceurs ?Atelier 7 VEM7 - Comment travailler avec les blogueurs et autres influenceurs ?
Atelier 7 VEM7 - Comment travailler avec les blogueurs et autres influenceurs ?Salon e-tourisme #VeM
 
Atelier 22 VEM7 - Animation offline de ses communautés numériques
Atelier 22 VEM7 - Animation offline de ses communautés numériquesAtelier 22 VEM7 - Animation offline de ses communautés numériques
Atelier 22 VEM7 - Animation offline de ses communautés numériquesSalon e-tourisme #VeM
 
15 vem6 e15 3 actions sensibilisation et formation
15 vem6 e15 3 actions sensibilisation et formation15 vem6 e15 3 actions sensibilisation et formation
15 vem6 e15 3 actions sensibilisation et formationSalon e-tourisme #VeM
 
Atelier IE3 VEM4 Etourisme pour les nuls
Atelier IE3 VEM4 Etourisme pour les nulsAtelier IE3 VEM4 Etourisme pour les nuls
Atelier IE3 VEM4 Etourisme pour les nulsSalon e-tourisme #VeM
 
Atelier 19 VEM7 - Juridique à qui appartient quoi ? Que puis-je faire avec ? ...
Atelier 19 VEM7 - Juridique à qui appartient quoi ? Que puis-je faire avec ? ...Atelier 19 VEM7 - Juridique à qui appartient quoi ? Que puis-je faire avec ? ...
Atelier 19 VEM7 - Juridique à qui appartient quoi ? Que puis-je faire avec ? ...Salon e-tourisme #VeM
 
Atelier 25 VEM7 - Le neuromarketing et les émotions au coeur du choix tourist...
Atelier 25 VEM7 - Le neuromarketing et les émotions au coeur du choix tourist...Atelier 25 VEM7 - Le neuromarketing et les émotions au coeur du choix tourist...
Atelier 25 VEM7 - Le neuromarketing et les émotions au coeur du choix tourist...Salon e-tourisme #VeM
 
7 vem6 evolution et révolution du site web
7 vem6 evolution et révolution du site web7 vem6 evolution et révolution du site web
7 vem6 evolution et révolution du site webSalon e-tourisme #VeM
 
18 vem6 quoi de neuf dans mes adwords
18 vem6 quoi de neuf dans mes adwords18 vem6 quoi de neuf dans mes adwords
18 vem6 quoi de neuf dans mes adwordsSalon e-tourisme #VeM
 
Atelier 6 VEM7 - L'immersion par le multimédia, la sensation de vivre l’expér...
Atelier 6 VEM7 - L'immersion par le multimédia, la sensation de vivre l’expér...Atelier 6 VEM7 - L'immersion par le multimédia, la sensation de vivre l’expér...
Atelier 6 VEM7 - L'immersion par le multimédia, la sensation de vivre l’expér...Salon e-tourisme #VeM
 
Atelier 8 VEM7 - Vendre ses loisirs en ligne
Atelier 8 VEM7 - Vendre ses loisirs en ligneAtelier 8 VEM7 - Vendre ses loisirs en ligne
Atelier 8 VEM7 - Vendre ses loisirs en ligneSalon e-tourisme #VeM
 

Tendances (20)

Atelier 24 VEM7 - Comment optimiser son mix marketing ?
Atelier 24 VEM7 - Comment optimiser son mix marketing ?Atelier 24 VEM7 - Comment optimiser son mix marketing ?
Atelier 24 VEM7 - Comment optimiser son mix marketing ?
 
Atelier 2 VEM7 - Buzz, séduction ou rassurance : quel objectif pour mes vidéos ?
Atelier 2 VEM7 - Buzz, séduction ou rassurance : quel objectif pour mes vidéos ?Atelier 2 VEM7 - Buzz, séduction ou rassurance : quel objectif pour mes vidéos ?
Atelier 2 VEM7 - Buzz, séduction ou rassurance : quel objectif pour mes vidéos ?
 
Atelier 10 VEM7 - Revenue-management à la sauce participative
Atelier 10 VEM7 - Revenue-management à la sauce participativeAtelier 10 VEM7 - Revenue-management à la sauce participative
Atelier 10 VEM7 - Revenue-management à la sauce participative
 
Atelier 18 VEM7 - Optimiser la relation client avec l’outil numérique
Atelier 18 VEM7 - Optimiser la relation client avec l’outil numériqueAtelier 18 VEM7 - Optimiser la relation client avec l’outil numérique
Atelier 18 VEM7 - Optimiser la relation client avec l’outil numérique
 
Atelier 23 VEM7 - Comment garder le contrôle de son établissement sur le web ?
Atelier 23 VEM7 - Comment garder le contrôle de son établissement sur le web ?Atelier 23 VEM7 - Comment garder le contrôle de son établissement sur le web ?
Atelier 23 VEM7 - Comment garder le contrôle de son établissement sur le web ?
 
6 vem6 E6 - stratégie de contenu sur les réseaux sociaux
6 vem6 E6 - stratégie de contenu sur les réseaux sociaux6 vem6 E6 - stratégie de contenu sur les réseaux sociaux
6 vem6 E6 - stratégie de contenu sur les réseaux sociaux
 
Atelier 30 VEM7 - Hébergeur : Nouveau paysage commercial, nouveau positionnement
Atelier 30 VEM7 - Hébergeur : Nouveau paysage commercial, nouveau positionnementAtelier 30 VEM7 - Hébergeur : Nouveau paysage commercial, nouveau positionnement
Atelier 30 VEM7 - Hébergeur : Nouveau paysage commercial, nouveau positionnement
 
Atelier 7 VEM7 - Comment travailler avec les blogueurs et autres influenceurs ?
Atelier 7 VEM7 - Comment travailler avec les blogueurs et autres influenceurs ?Atelier 7 VEM7 - Comment travailler avec les blogueurs et autres influenceurs ?
Atelier 7 VEM7 - Comment travailler avec les blogueurs et autres influenceurs ?
 
4 vem6 ie4-ligne éditoriale
4 vem6 ie4-ligne éditoriale4 vem6 ie4-ligne éditoriale
4 vem6 ie4-ligne éditoriale
 
Atelier 22 VEM7 - Animation offline de ses communautés numériques
Atelier 22 VEM7 - Animation offline de ses communautés numériquesAtelier 22 VEM7 - Animation offline de ses communautés numériques
Atelier 22 VEM7 - Animation offline de ses communautés numériques
 
15 vem6 e15 3 actions sensibilisation et formation
15 vem6 e15 3 actions sensibilisation et formation15 vem6 e15 3 actions sensibilisation et formation
15 vem6 e15 3 actions sensibilisation et formation
 
Atelier IE3 VEM4 Etourisme pour les nuls
Atelier IE3 VEM4 Etourisme pour les nulsAtelier IE3 VEM4 Etourisme pour les nuls
Atelier IE3 VEM4 Etourisme pour les nuls
 
Atelier 19 VEM7 - Juridique à qui appartient quoi ? Que puis-je faire avec ? ...
Atelier 19 VEM7 - Juridique à qui appartient quoi ? Que puis-je faire avec ? ...Atelier 19 VEM7 - Juridique à qui appartient quoi ? Que puis-je faire avec ? ...
Atelier 19 VEM7 - Juridique à qui appartient quoi ? Que puis-je faire avec ? ...
 
Atelier 25 VEM7 - Le neuromarketing et les émotions au coeur du choix tourist...
Atelier 25 VEM7 - Le neuromarketing et les émotions au coeur du choix tourist...Atelier 25 VEM7 - Le neuromarketing et les émotions au coeur du choix tourist...
Atelier 25 VEM7 - Le neuromarketing et les émotions au coeur du choix tourist...
 
2 vem6 ie2-création_contenus
2 vem6 ie2-création_contenus2 vem6 ie2-création_contenus
2 vem6 ie2-création_contenus
 
7 vem6 evolution et révolution du site web
7 vem6 evolution et révolution du site web7 vem6 evolution et révolution du site web
7 vem6 evolution et révolution du site web
 
18 vem6 quoi de neuf dans mes adwords
18 vem6 quoi de neuf dans mes adwords18 vem6 quoi de neuf dans mes adwords
18 vem6 quoi de neuf dans mes adwords
 
Atelier 6 VEM7 - L'immersion par le multimédia, la sensation de vivre l’expér...
Atelier 6 VEM7 - L'immersion par le multimédia, la sensation de vivre l’expér...Atelier 6 VEM7 - L'immersion par le multimédia, la sensation de vivre l’expér...
Atelier 6 VEM7 - L'immersion par le multimédia, la sensation de vivre l’expér...
 
29 vem6 pub on line
29 vem6 pub on line29 vem6 pub on line
29 vem6 pub on line
 
Atelier 8 VEM7 - Vendre ses loisirs en ligne
Atelier 8 VEM7 - Vendre ses loisirs en ligneAtelier 8 VEM7 - Vendre ses loisirs en ligne
Atelier 8 VEM7 - Vendre ses loisirs en ligne
 

Similaire à Atelier 5 VEM7 - La conception de sites web en mode mobile first

Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Vincent Vandevelde
 
Competitic Referencement mobile friendly - numerique en entreprise
Competitic Referencement mobile friendly - numerique en entrepriseCompetitic Referencement mobile friendly - numerique en entreprise
Competitic Referencement mobile friendly - numerique en entrepriseCOMPETITIC
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenLes 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenSolange Derrey
 
Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012CCI Yonne
 
Webassoc - 30 janvier 2014 - mobile
Webassoc - 30 janvier 2014 - mobileWebassoc - 30 janvier 2014 - mobile
Webassoc - 30 janvier 2014 - mobilewebassoc .fr
 
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 ...COMPETITIC
 
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 VanksenVanksen
 
Les Tendances Webmarketing pour 2016
Les Tendances Webmarketing pour 2016Les Tendances Webmarketing pour 2016
Les Tendances Webmarketing pour 2016Céline Cordeau
 
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...Salon e-tourisme #VeM
 
SEO, CRO, UX
SEO, CRO, UXSEO, CRO, UX
SEO, CRO, UXErgonline
 
Conference e-commerce, Altics _ Kreactive
Conference e-commerce, Altics _ KreactiveConference e-commerce, Altics _ Kreactive
Conference e-commerce, Altics _ KreactiveALTICS
 
03 By Agency Interactive
03 By Agency Interactive03 By Agency Interactive
03 By Agency InteractiveBy Agency Group
 
Améliorez votre présence en ligne pour attirer vos clients !
Améliorez votre présence en ligne pour attirer vos clients !Améliorez votre présence en ligne pour attirer vos clients !
Améliorez votre présence en ligne pour attirer vos clients !polenumerique33
 
"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 ?WebSchool Orléans
 
La Gestion de Projet Mobile
La Gestion de Projet MobileLa Gestion de Projet Mobile
La Gestion de Projet MobileSebastien Brison
 
WUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobilesWUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobilesFrederic CAVAZZA
 

Similaire à Atelier 5 VEM7 - La conception de sites web en mode mobile first (20)

Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
 
Competitic Referencement mobile friendly - numerique en entreprise
Competitic Referencement mobile friendly - numerique en entrepriseCompetitic Referencement mobile friendly - numerique en entreprise
Competitic Referencement mobile friendly - numerique en entreprise
 
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenLes 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by Vanksen
 
Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012
 
Webassoc - 30 janvier 2014 - mobile
Webassoc - 30 janvier 2014 - mobileWebassoc - 30 janvier 2014 - mobile
Webassoc - 30 janvier 2014 - mobile
 
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 ...
 
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
 
Les Tendances Webmarketing pour 2016
Les Tendances Webmarketing pour 2016Les Tendances Webmarketing pour 2016
Les Tendances Webmarketing pour 2016
 
Cv herika-calzadilla-ux-u idesignerpdf
Cv herika-calzadilla-ux-u idesignerpdfCv herika-calzadilla-ux-u idesignerpdf
Cv herika-calzadilla-ux-u idesignerpdf
 
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...
 
SEO, CRO, UX
SEO, CRO, UXSEO, CRO, UX
SEO, CRO, UX
 
Conference e-commerce, Altics _ Kreactive
Conference e-commerce, Altics _ KreactiveConference e-commerce, Altics _ Kreactive
Conference e-commerce, Altics _ Kreactive
 
03 By Agency Interactive
03 By Agency Interactive03 By Agency Interactive
03 By Agency Interactive
 
Améliorez votre présence en ligne pour attirer vos clients !
Améliorez votre présence en ligne pour attirer vos clients !Améliorez votre présence en ligne pour attirer vos clients !
Améliorez votre présence en ligne pour attirer vos clients !
 
"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 ?
 
La Gestion de Projet Mobile
La Gestion de Projet MobileLa Gestion de Projet Mobile
La Gestion de Projet Mobile
 
WUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobilesWUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobiles
 
Cvbook2016
Cvbook2016Cvbook2016
Cvbook2016
 
8 vem6 i8-internet_séjour
8 vem6 i8-internet_séjour8 vem6 i8-internet_séjour
8 vem6 i8-internet_séjour
 

Plus de Salon e-tourisme #VeM

L'Office de Tourisme du futur [VEM9]
L'Office de Tourisme du futur [VEM9]L'Office de Tourisme du futur [VEM9]
L'Office de Tourisme du futur [VEM9]Salon e-tourisme #VeM
 
#CMonTheBeach - Optimiser ses campagnes pub sur les réseaux sociaux [VEM9]
#CMonTheBeach - Optimiser ses campagnes pub sur les réseaux sociaux [VEM9]#CMonTheBeach - Optimiser ses campagnes pub sur les réseaux sociaux [VEM9]
#CMonTheBeach - Optimiser ses campagnes pub sur les réseaux sociaux [VEM9]Salon e-tourisme #VeM
 
M12 comment reagir a la baisse de visibilite des publications facebook
M12 comment reagir a la baisse de visibilite des publications facebookM12 comment reagir a la baisse de visibilite des publications facebook
M12 comment reagir a la baisse de visibilite des publications facebookSalon e-tourisme #VeM
 
M27 - Micro ou macro influenceurs et super clients
M27 - Micro ou macro influenceurs et super clientsM27 - Micro ou macro influenceurs et super clients
M27 - Micro ou macro influenceurs et super clientsSalon e-tourisme #VeM
 
M26 - Jouer l'enfant dans la communication touristique vf [VEM9]
M26 - Jouer l'enfant dans la communication touristique vf [VEM9]M26 - Jouer l'enfant dans la communication touristique vf [VEM9]
M26 - Jouer l'enfant dans la communication touristique vf [VEM9]Salon e-tourisme #VeM
 
E23 - Les mille facettes du storytelling [VEM9]
E23 - Les mille facettes du storytelling [VEM9]E23 - Les mille facettes du storytelling [VEM9]
E23 - Les mille facettes du storytelling [VEM9]Salon e-tourisme #VeM
 
M22 - Ads Facebook et Instagram : les formats et les bonnes pratiques [VEM9]
M22 - Ads Facebook et Instagram : les formats et les bonnes pratiques [VEM9]M22 - Ads Facebook et Instagram : les formats et les bonnes pratiques [VEM9]
M22 - Ads Facebook et Instagram : les formats et les bonnes pratiques [VEM9]Salon e-tourisme #VeM
 
M17 - Comment exploiter les stories [VEM9]
M17 - Comment exploiter les stories [VEM9]M17 - Comment exploiter les stories [VEM9]
M17 - Comment exploiter les stories [VEM9]Salon e-tourisme #VeM
 
i11 - Chatbots et assistants de la conversation a l'inspiration [VEM9]
i11 - Chatbots et assistants de la conversation a l'inspiration [VEM9]i11 - Chatbots et assistants de la conversation a l'inspiration [VEM9]
i11 - Chatbots et assistants de la conversation a l'inspiration [VEM9]Salon e-tourisme #VeM
 
E8 - Les avis comme source de diffusion multicanal, epidode 2 [VEM9]
E8 - Les avis comme source de diffusion multicanal, epidode 2 [VEM9]E8 - Les avis comme source de diffusion multicanal, epidode 2 [VEM9]
E8 - Les avis comme source de diffusion multicanal, epidode 2 [VEM9]Salon e-tourisme #VeM
 
i6 - Intelligence artificielle [VEM9]
i6 - Intelligence artificielle [VEM9]i6 - Intelligence artificielle [VEM9]
i6 - Intelligence artificielle [VEM9]Salon e-tourisme #VeM
 
i1 - Datamining : explorer ses données [VEM9]
i1 - Datamining : explorer ses données [VEM9]i1 - Datamining : explorer ses données [VEM9]
i1 - Datamining : explorer ses données [VEM9]Salon e-tourisme #VeM
 
M19- Promouvoir mes vidéos le boum et les dernières tendances
M19- Promouvoir mes vidéos   le boum et les dernières tendancesM19- Promouvoir mes vidéos   le boum et les dernières tendances
M19- Promouvoir mes vidéos le boum et les dernières tendancesSalon e-tourisme #VeM
 
M7- Faire du « live vidéo » sur les réseaux sociaux, mode d’emploi
M7- Faire du « live vidéo » sur les réseaux sociaux, mode d’emploiM7- Faire du « live vidéo » sur les réseaux sociaux, mode d’emploi
M7- Faire du « live vidéo » sur les réseaux sociaux, mode d’emploiSalon e-tourisme #VeM
 
E13- L’outil ne fait pas le moine, mais fait-il l’hébergeur
E13- L’outil ne fait pas le moine, mais fait-il l’hébergeurE13- L’outil ne fait pas le moine, mais fait-il l’hébergeur
E13- L’outil ne fait pas le moine, mais fait-il l’hébergeurSalon e-tourisme #VeM
 
C11- L’expérience touristico-culturelle et le numérique
C11- L’expérience touristico-culturelle et le numériqueC11- L’expérience touristico-culturelle et le numérique
C11- L’expérience touristico-culturelle et le numériqueSalon e-tourisme #VeM
 
M10 - Le marketing de l’intention anticiper le besoin client
M10 - Le marketing de l’intention  anticiper le besoin clientM10 - Le marketing de l’intention  anticiper le besoin client
M10 - Le marketing de l’intention anticiper le besoin clientSalon e-tourisme #VeM
 
M9 - Comment séduire et traiter le contenu des influenceurs
M9 - Comment séduire et traiter le contenu des influenceursM9 - Comment séduire et traiter le contenu des influenceurs
M9 - Comment séduire et traiter le contenu des influenceursSalon e-tourisme #VeM
 
E8 - L'hébergeur touristique : un nouveau métier
E8 - L'hébergeur touristique : un nouveau métierE8 - L'hébergeur touristique : un nouveau métier
E8 - L'hébergeur touristique : un nouveau métierSalon e-tourisme #VeM
 
M5 - Repenser l’expérience client avant, pendant après le séjour, offline, o...
M5 - Repenser l’expérience client  avant, pendant après le séjour, offline, o...M5 - Repenser l’expérience client  avant, pendant après le séjour, offline, o...
M5 - Repenser l’expérience client avant, pendant après le séjour, offline, o...Salon e-tourisme #VeM
 

Plus de Salon e-tourisme #VeM (20)

L'Office de Tourisme du futur [VEM9]
L'Office de Tourisme du futur [VEM9]L'Office de Tourisme du futur [VEM9]
L'Office de Tourisme du futur [VEM9]
 
#CMonTheBeach - Optimiser ses campagnes pub sur les réseaux sociaux [VEM9]
#CMonTheBeach - Optimiser ses campagnes pub sur les réseaux sociaux [VEM9]#CMonTheBeach - Optimiser ses campagnes pub sur les réseaux sociaux [VEM9]
#CMonTheBeach - Optimiser ses campagnes pub sur les réseaux sociaux [VEM9]
 
M12 comment reagir a la baisse de visibilite des publications facebook
M12 comment reagir a la baisse de visibilite des publications facebookM12 comment reagir a la baisse de visibilite des publications facebook
M12 comment reagir a la baisse de visibilite des publications facebook
 
M27 - Micro ou macro influenceurs et super clients
M27 - Micro ou macro influenceurs et super clientsM27 - Micro ou macro influenceurs et super clients
M27 - Micro ou macro influenceurs et super clients
 
M26 - Jouer l'enfant dans la communication touristique vf [VEM9]
M26 - Jouer l'enfant dans la communication touristique vf [VEM9]M26 - Jouer l'enfant dans la communication touristique vf [VEM9]
M26 - Jouer l'enfant dans la communication touristique vf [VEM9]
 
E23 - Les mille facettes du storytelling [VEM9]
E23 - Les mille facettes du storytelling [VEM9]E23 - Les mille facettes du storytelling [VEM9]
E23 - Les mille facettes du storytelling [VEM9]
 
M22 - Ads Facebook et Instagram : les formats et les bonnes pratiques [VEM9]
M22 - Ads Facebook et Instagram : les formats et les bonnes pratiques [VEM9]M22 - Ads Facebook et Instagram : les formats et les bonnes pratiques [VEM9]
M22 - Ads Facebook et Instagram : les formats et les bonnes pratiques [VEM9]
 
M17 - Comment exploiter les stories [VEM9]
M17 - Comment exploiter les stories [VEM9]M17 - Comment exploiter les stories [VEM9]
M17 - Comment exploiter les stories [VEM9]
 
i11 - Chatbots et assistants de la conversation a l'inspiration [VEM9]
i11 - Chatbots et assistants de la conversation a l'inspiration [VEM9]i11 - Chatbots et assistants de la conversation a l'inspiration [VEM9]
i11 - Chatbots et assistants de la conversation a l'inspiration [VEM9]
 
E8 - Les avis comme source de diffusion multicanal, epidode 2 [VEM9]
E8 - Les avis comme source de diffusion multicanal, epidode 2 [VEM9]E8 - Les avis comme source de diffusion multicanal, epidode 2 [VEM9]
E8 - Les avis comme source de diffusion multicanal, epidode 2 [VEM9]
 
i6 - Intelligence artificielle [VEM9]
i6 - Intelligence artificielle [VEM9]i6 - Intelligence artificielle [VEM9]
i6 - Intelligence artificielle [VEM9]
 
i1 - Datamining : explorer ses données [VEM9]
i1 - Datamining : explorer ses données [VEM9]i1 - Datamining : explorer ses données [VEM9]
i1 - Datamining : explorer ses données [VEM9]
 
M19- Promouvoir mes vidéos le boum et les dernières tendances
M19- Promouvoir mes vidéos   le boum et les dernières tendancesM19- Promouvoir mes vidéos   le boum et les dernières tendances
M19- Promouvoir mes vidéos le boum et les dernières tendances
 
M7- Faire du « live vidéo » sur les réseaux sociaux, mode d’emploi
M7- Faire du « live vidéo » sur les réseaux sociaux, mode d’emploiM7- Faire du « live vidéo » sur les réseaux sociaux, mode d’emploi
M7- Faire du « live vidéo » sur les réseaux sociaux, mode d’emploi
 
E13- L’outil ne fait pas le moine, mais fait-il l’hébergeur
E13- L’outil ne fait pas le moine, mais fait-il l’hébergeurE13- L’outil ne fait pas le moine, mais fait-il l’hébergeur
E13- L’outil ne fait pas le moine, mais fait-il l’hébergeur
 
C11- L’expérience touristico-culturelle et le numérique
C11- L’expérience touristico-culturelle et le numériqueC11- L’expérience touristico-culturelle et le numérique
C11- L’expérience touristico-culturelle et le numérique
 
M10 - Le marketing de l’intention anticiper le besoin client
M10 - Le marketing de l’intention  anticiper le besoin clientM10 - Le marketing de l’intention  anticiper le besoin client
M10 - Le marketing de l’intention anticiper le besoin client
 
M9 - Comment séduire et traiter le contenu des influenceurs
M9 - Comment séduire et traiter le contenu des influenceursM9 - Comment séduire et traiter le contenu des influenceurs
M9 - Comment séduire et traiter le contenu des influenceurs
 
E8 - L'hébergeur touristique : un nouveau métier
E8 - L'hébergeur touristique : un nouveau métierE8 - L'hébergeur touristique : un nouveau métier
E8 - L'hébergeur touristique : un nouveau métier
 
M5 - Repenser l’expérience client avant, pendant après le séjour, offline, o...
M5 - Repenser l’expérience client  avant, pendant après le séjour, offline, o...M5 - Repenser l’expérience client  avant, pendant après le séjour, offline, o...
M5 - Repenser l’expérience client avant, pendant après le séjour, offline, o...
 

Atelier 5 VEM7 - La conception de sites web en mode mobile first

  • 1. Salle #VEM7 Voyage en Multimédia | 3 - 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com La conception de sites web en mode « mobile First » Atelier i5 Animateur : Vivian VIDAL Cédric CHABRY Agence interactive Jean-Baptiste DAVID NOE interactive Frédérique PACOTTE Iris Interactive
  • 2. Salle #VEM7 Voyage en Multimédia | 3 - 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com Atelier i5 L’avènement de la connexion en mobilité impacte la création des sites web. Le responsive design permet un affichage optimisé en lecture sur mobile. La conception de pages web en mode « Mobile first » change la façon d’appréhender l’expérience utilisateur en valorisant la géolocalisation et le moment présent. • Mobile first ça veut dire quoi concrètement ? • Quand faut-il travailler en mobile first ? • Comment faut-il s’y prendre ? • Pourquoi suis-je concerné si je ne suis pas développeur ? La conception de sites web en mode « mobile First »
  • 3. > >
  • 4. > >
  • 8.
  • 9. 9 Étude de cas : #VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com Atelier 15 : La conception de site web en mode « mobile First »
  • 10. Atelier 15 : La conception de site web en mode « mobile First » Je découvre la destination
  • 11. Atelier 15 : La conception de site web en mode « mobile First » Je découvre la destination
  • 12. #VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com Atelier 15 : La conception de site web en mode « mobile First »
  • 13. Atelier 15 : La conception de site web en mode « mobile First » Je consulte les offres
  • 14. Atelier 15 : La conception de site web en mode « mobile First » Je réserve mon voyage
  • 15. Atelier 15 : La conception de site web en mode « mobile First »
  • 16.
  • 17.
  • 18.
  • 19. Atelier 15 : La conception de site web en mode « mobile First »
  • 20. Atelier 15 : La conception de site web en mode « mobile First »
  • 21. Atelier 15 : La conception de site web en mode « mobile First »
  • 22. Atelier 15 : La conception de site web en mode « mobile First »
  • 23. MOBILE FIRST + RESPONSIVE DESIGN { USER FIRST }
  • 24.
  • 25. 25 #VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com montpellier-tourisme.fr
  • 26.
  • 27.
  • 28.
  • 29. 29 #VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com montpellier-tourisme.fr
  • 30. 30 #VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com montpellier-tourisme.fr
  • 31. 31 #VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com montpellier-tourisme.fr
  • 32. 32 #VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com montpellier-tourisme.fr
  • 33. Etude de cas : chartreuse-tourisme.com géolocalisation Mobile First & expérience utilisateur (UX)
  • 34. • Stimulation de l’utilisateur par un menu accrocheur • Expérience spécifique si l’utilisateur est sur place, détection via la géolocalisation Mobile First & expérience utilisateur (UX) Géolocalisation
  • 35. • Call to action : situation géographique à préciser par l’utilisateur (si pas précisé) • pour un service très personnalisé • on rassure l’usager Géolocalisation Mobile First & expérience utilisateur (UX)
  • 36. Géolocalisation maximiser l’expérience et l’usage en mode carte Mobile First & expérience utilisateur (UX)
  • 37. Une interface utilisateur engageante Mobile First & expérience utilisateur (UX) Etude de cas : lesmenuires.com (tablette)
  • 38. 2 boutons « Call to action » dépendants de la stratégie commerciale Une interface utilisateur engageante Mobile First & expérience utilisateur (UX)
  • 39. UI similaire, dans un service tierce, mais responsive Une interface utilisateur engageante Mobile First & expérience utilisateur (UX)
  • 40. Une stratégie mobile first n’a de sens que si : – on sait proposer un contenu différencié en préparation de séjour et en situation de séjour (géolocalisation). – le mobile devient le point de contact privilégié pour capter l’attention d’un client en séjour – on connaît suffisamment de choses (Data) sur ses utilisateurs pour leur proposer des offres qualifiées (smartdata) Mobile first : le contenu first
  • 41. Une qualification exemplaire des données SIT pour une recherche sur mobile – des résultats liés à la proximité (géolocalisation) – des résultats liés au contexte (horaires, disponibilité, météo) – le mobile devient alors l’outil déterminant d’une stratégie ROPO (Research Online Pourchasse Offline) avec vos prestataires Mobile first : le contenu first ROPO
  • 42. #VEM7 Voyage en Multimédia | 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com Retrouvez toutes les informations et les coordonnées des intervenants sur: http://www.salon- etourisme.com/intervenants-vem Ou cliquez directement leur nom sur la première slide Infos Intervenants
  • 43. Salle #VEM7 Voyage en Multimédia | 3 - 4 & 5 Février 2016 | Saint-Raphaël - Slides disponibles sur www.salon-etourisme.com La conception de sites web en mode « mobile First » Atelier i5 Animateur : Vivian VIDAL Cédric CHABRY Agence interactive Jean-Baptiste DAVID NOE interactive Frédérique PACOTTE Iris Interactive