SlideShare ist ein Scribd-Unternehmen logo
1 von 55
Downloaden Sie, um offline zu lesen
Mobile & Responsive Design
Mieux vous connaître: sondage
• Votre site web est-il adapté aux
Smartphones et Tablettes?
• Quels problèmes rencontrez-vous?
• Pensez-vous qu'il est important d'avoir une
marque mobile de nos jours?
A propos des speakers
+352 / 691 219 850
+33 / 673 923 708
A propos de WSI
©2013 WSI. All rights reserved.
Leader mondial du marketing digital
Savoir faire international, Résultats locaux.
• Fournir des solutions de marketing numérique de pointe
• Pour les entreprises de toutes tailles et dans tous les secteurs
• Le plus grand réseau mondial de consultants Internet (1.200)
• Présent dans plus de 80 pays à l'échelle internationale
• Siège social du groupe à Toronto, au Canada
www.wsi-marketing-internet.fr
Le Nouveau Livre WSI
Disponible aussi sur Amazon :
http://amzn.to/1kImhJP
Concours en seconde
partie de webinaire
1 gagnant
remportera un
exemplaire du livre
Digital Minds
Sommaire
• Contexte
• Le Marketing Mobile aujourd’hui
• Le Responsive Design
• Conclusion
©2014 WSI. All rights reserved.
CONTEXTE
©2012 RAM. All rights
reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
©2012 RAM. All rights
reserved.
©2012 RAM. All rights
reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
©2012 RAM. All rights
reserved.
©2012 RAM. All rights
reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
©2012 RAM. All rights
reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
©2012 RAM. All rights
reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
©2012 RAM. All rights
reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
©2012 RAM. All rights
reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
©2012 RAM. All rights
reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
Plus de chiffres…
©2012 RAM. All rights
reserved.
http://fr.slideshare.net/HubSpot/50-
mobilefactsdeck62812
Impact Futur
“Le mobile aura un plus
gros impact que
l’Internet.”
-Keith Weed, Unilever CMO
©2014 WSI. All rights reserved.
Le Marketing Mobile aujourd’hui
Le Marketing Mobile aujourd’hui
 GSM
 Smartphone
 Tablette
Que Fait-on Sur Nos Mobiles?
Un Monde Multi-Ecrans
Source : http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
Le Marketing Mobile
Il est complémentaire - il se combine
avec tous les autres médias et supports.
Le Marketing Mobile
©2012 RAM. All rights
reserved.
• C’est un média qui
influence le parcours
d’achat
entre exposition
publicitaire et acte
d’achat.
Le mobile influence l’acte d’achat
©2012 RAM. All rights
reserved.
Zero Moment of Truth
©2012 RAM. All rights reserved.
SoLoMo
©2012 RAM. All rights reserved.
http://www.mymarketingmobile.fr/2013/12/19/solomo-
etude-marketing-adobe-neolane-2013-infographie/
C’est le moment?
Mesurez l’importance du mobile pour votre
business grâce à Google Analytics
25%!
L’approche ‘’mobile first’’
Approche
traditionnelle
Approche
Mobile First
Le Responsive Design
De quoi parle-t-on?
Responsive Web Design
Site Mobile
Adaptive Web Design
Compatible Mobile
Quelques termes utilisés:
De quoi parle-t-on?
On peut retenir 2 categories principales:
• Adaptive Web Design (AWD)
• Responsive Web Design (RWD)
AWD & RWD
• Les deux permettent de créer des sites Web pouvant
être consultés avec les appareils mobiles et
différentes tailles d'écrans
• Les deux offrent finalement aux visiteurs une
meilleure expérience utilisateur mobile
AWD
• Utilise le serveur pour détecter le périphérique utilisé
pour consulter le site (PC, tablette, smartphone)
• Envoie des fichiers spécifiques pour cet appareil
• Des modèles distincts sont créés pour chaque
appareil
• Le chargement des pages est plus rapide – chaque
variante est généralement hébergée sur son propre
domaine « mobile.domain.com » ou
« domain.com/mobile »
La définition courte d’un design adaptatif, c'est que le
design va changer pour s'adapter à un ensemble
prédéterminé de tailles d'écrans et d'appareils.
Exemple de site “AWD”
URL Spécifique
RWD
• Utilise du code CSS spécifique pour modifier la
présentation d'un site Web en fonction de la taille de
l'appareil sur lequel il est affiché.
• L’information pour chaque écran est téléchargée
indépendamment du fait qu‘elle est utilisée ou non
• Le chargement des pages est plus lent - Le nom de
domaine est toujours le même.
La définition courte d'un design « Responsive » est
donc qu'il va changer de manière fluide et s'adapter
à n'importe quelle taille d’écran ou d'appareil.
Exemple de site “RWD”
Choisir entre AWD & RWD
AWD
• Il faut développer et maintenir des sites Web distincts
• Avec un site distinct / HTML, vous pouvez affiner et
optimiser la façon dont votre site affiche sur un
appareil particulier
• Avec un design Web adaptatif, vous pouvez
optimiser la taille des images (par exemple prévoir
une basse résolution pour de faibles bandes
passantes)
• SEO, liens, contenu tout doit être reconstruit pour
chaque site
Choisir entre AWD & RWD
RWD
• La conception de sites RWD repose sur HTML5, CSS3
et Javascript, et donc fonctionne mieux avec les
navigateurs web relativement modernes
• Le Responsive Web Design est particulièrement
adapté dans un marché d’appareils mobiles de plus
en plus fragmenté (Il existe plusieurs centaines
d’appareils différents, tablettes ou smartphones)
• SEO, liens, contenu tout est conservé ... Google aime
le Responsive Web Design
Les avantages du
Responsive Design
Les Avantages du Responsive
Design
 gain de temps et d’argent
(développement et maintenance)
 plus facile à maintenir que des apps
ou des sites dédiés
 améliore et renforce le SEO
 offre une meilleure expérience de
navigation
 génère une meilleure conversion
Impact SEO du Responsive Design
 …
• URL unique (plus facile à gérer)
• Pas de duplicate content
• On bénéficie des liens préexistant du site classique
pour la version mobile
• La construction de liens devient plus facile
• Diminution du temps de téléchargement
Les Inconvénients du Responsive
Design
 temps de téléchargement plus long
 de bonnes connaissances techniques sont
nécessaires
 une veille technologique constante
 des tests nombreux et variés tout au long
du projet
 limites ergonomiques et de performances
des navigateurs web
 c'est plus long à développer (25% du temps
supplémentaire)
Pour conclure sur le Responsive Design
Un chapitre consacré au Mobile &
Responsive Design
Disponible aussi sur Amazon :
http://amzn.to/1kImhJP
Digital Minds
12 Recommandations
essentielles pour un
Marketing Digital
réussi
Pour aller plus loin...
• Responsive Webdesign par Ethan Marcotte
Source : http://www.blogduwebdesign.com/livre-webdesign/responsive-webdesign-par-ethan-marcotte/558
Le Nouveau Livre WSI
Disponible aussi sur Amazon :
http://amzn.to/1kImhJP
Le Concours c’est
maintenant !
1 gagnant
remportera un
exemplaire du livre
Digital Minds
La réponse est:
Contactez votre agence WSI
Laurent Annet
Tel : +352 27 39 57 27
lannet@wsiluxembourg.com
Jean-Jacques Turroc
Luxembourg - Windhof Région Ile de France Autres régions
+ 50 consultants
http://www.wsi-marketing-
internet.fr
/agences-wsi/agences-wsi-
france.html
Tel : +33 (0) 970 46 90 00 |
GSM : +33 (0) 673 92 37 08
jjt@wsi4yoursuccess.fr
Questions & Réponses
Participez à notre prochain webinar:
http://www.wsi-marketing-internet.fr/webinar-webmarketing-analytics.htm
Questions & Réponses
Merci et bonne journée à tous !
Laurent Annet
Tel : +352 27 39 57 27
lannet@wsiluxembourg.com
Jean-Jacques Turroc
Luxembourg - Windhof Région Ile de France Autres régions
+ 50 consultants
http://www.wsi-marketing-
internet.fr
/agences-wsi/agences-wsi-
france.html
Tel : +33 (0) 970 46 90 00 |
GSM : +33 (0) 673 92 37 08
jjt@wsi4yoursuccess.fr

Weitere ähnliche Inhalte

Andere mochten auch

130925 - PES V2, dématérialisation de la chaine comptable
130925 - PES V2, dématérialisation de la chaine comptable130925 - PES V2, dématérialisation de la chaine comptable
130925 - PES V2, dématérialisation de la chaine comptableIDEM-Normandie
 
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !LINAGORA
 
Présentation de la nouvelle version de Mozilla Thunderbird
Présentation de la nouvelle version de Mozilla ThunderbirdPrésentation de la nouvelle version de Mozilla Thunderbird
Présentation de la nouvelle version de Mozilla ThunderbirdLINAGORA
 
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...LINAGORA
 
Séminaire Linagora : poste de travail Libre, décembre 2009
Séminaire Linagora : poste de travail Libre, décembre 2009Séminaire Linagora : poste de travail Libre, décembre 2009
Séminaire Linagora : poste de travail Libre, décembre 2009LINAGORA
 
Standards de gestion d'agenda et de planification
Standards de gestion d'agenda et de planificationStandards de gestion d'agenda et de planification
Standards de gestion d'agenda et de planificationLINAGORA
 
Séminaire juin 2011 - OBM
Séminaire juin 2011 - OBMSéminaire juin 2011 - OBM
Séminaire juin 2011 - OBMLINAGORA
 
Séminaire février - OBM, nouvelle version 2.4
Séminaire février - OBM, nouvelle version 2.4 Séminaire février - OBM, nouvelle version 2.4
Séminaire février - OBM, nouvelle version 2.4 LINAGORA
 
Présentation du marché P2I UGAP « Support sur Logiciels Libres »
Présentation du marché P2I UGAP « Support sur Logiciels Libres »Présentation du marché P2I UGAP « Support sur Logiciels Libres »
Présentation du marché P2I UGAP « Support sur Logiciels Libres »LINAGORA
 
Tendances Futures du Web - GTI780 & MTI780 - ETS - A08
Tendances Futures du Web - GTI780 & MTI780 - ETS - A08Tendances Futures du Web - GTI780 & MTI780 - ETS - A08
Tendances Futures du Web - GTI780 & MTI780 - ETS - A08Claude Coulombe
 
LinSHARE : Serveur de partage sécurisé
LinSHARE : Serveur de partage sécuriséLinSHARE : Serveur de partage sécurisé
LinSHARE : Serveur de partage sécuriséLINAGORA
 
Livre-blanc-Cryptolog-contractualisation-en-ligne
Livre-blanc-Cryptolog-contractualisation-en-ligneLivre-blanc-Cryptolog-contractualisation-en-ligne
Livre-blanc-Cryptolog-contractualisation-en-ligneGautier Harmel
 
Signature electronique CertSign
Signature electronique CertSignSignature electronique CertSign
Signature electronique CertSigncerteurope
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalLINAGORA
 
Seminaire 2010 : Réussir les nouveaux projets web innovants avec Drupal
Seminaire 2010 : Réussir les nouveaux projets web innovants avec DrupalSeminaire 2010 : Réussir les nouveaux projets web innovants avec Drupal
Seminaire 2010 : Réussir les nouveaux projets web innovants avec DrupalLINAGORA
 
La dématérialisation du conseil minicipal
La dématérialisation du conseil minicipalLa dématérialisation du conseil minicipal
La dématérialisation du conseil minicipalLINAGORA
 
OpenStack - open source au service du Cloud
OpenStack - open source au service du CloudOpenStack - open source au service du Cloud
OpenStack - open source au service du CloudLINAGORA
 
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libreClaude Coulombe
 
Présentation Schéma Directeur Open Source au S2LQ 2015
Présentation Schéma Directeur Open Source au S2LQ 2015Présentation Schéma Directeur Open Source au S2LQ 2015
Présentation Schéma Directeur Open Source au S2LQ 2015Michel-Marie Maudet
 
Offre de demat d'Adullact projet
Offre de demat d'Adullact projet Offre de demat d'Adullact projet
Offre de demat d'Adullact projet LINAGORA
 

Andere mochten auch (20)

130925 - PES V2, dématérialisation de la chaine comptable
130925 - PES V2, dématérialisation de la chaine comptable130925 - PES V2, dématérialisation de la chaine comptable
130925 - PES V2, dématérialisation de la chaine comptable
 
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !
 
Présentation de la nouvelle version de Mozilla Thunderbird
Présentation de la nouvelle version de Mozilla ThunderbirdPrésentation de la nouvelle version de Mozilla Thunderbird
Présentation de la nouvelle version de Mozilla Thunderbird
 
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...
 
Séminaire Linagora : poste de travail Libre, décembre 2009
Séminaire Linagora : poste de travail Libre, décembre 2009Séminaire Linagora : poste de travail Libre, décembre 2009
Séminaire Linagora : poste de travail Libre, décembre 2009
 
Standards de gestion d'agenda et de planification
Standards de gestion d'agenda et de planificationStandards de gestion d'agenda et de planification
Standards de gestion d'agenda et de planification
 
Séminaire juin 2011 - OBM
Séminaire juin 2011 - OBMSéminaire juin 2011 - OBM
Séminaire juin 2011 - OBM
 
Séminaire février - OBM, nouvelle version 2.4
Séminaire février - OBM, nouvelle version 2.4 Séminaire février - OBM, nouvelle version 2.4
Séminaire février - OBM, nouvelle version 2.4
 
Présentation du marché P2I UGAP « Support sur Logiciels Libres »
Présentation du marché P2I UGAP « Support sur Logiciels Libres »Présentation du marché P2I UGAP « Support sur Logiciels Libres »
Présentation du marché P2I UGAP « Support sur Logiciels Libres »
 
Tendances Futures du Web - GTI780 & MTI780 - ETS - A08
Tendances Futures du Web - GTI780 & MTI780 - ETS - A08Tendances Futures du Web - GTI780 & MTI780 - ETS - A08
Tendances Futures du Web - GTI780 & MTI780 - ETS - A08
 
LinSHARE : Serveur de partage sécurisé
LinSHARE : Serveur de partage sécuriséLinSHARE : Serveur de partage sécurisé
LinSHARE : Serveur de partage sécurisé
 
Livre-blanc-Cryptolog-contractualisation-en-ligne
Livre-blanc-Cryptolog-contractualisation-en-ligneLivre-blanc-Cryptolog-contractualisation-en-ligne
Livre-blanc-Cryptolog-contractualisation-en-ligne
 
Signature electronique CertSign
Signature electronique CertSignSignature electronique CertSign
Signature electronique CertSign
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec Drupal
 
Seminaire 2010 : Réussir les nouveaux projets web innovants avec Drupal
Seminaire 2010 : Réussir les nouveaux projets web innovants avec DrupalSeminaire 2010 : Réussir les nouveaux projets web innovants avec Drupal
Seminaire 2010 : Réussir les nouveaux projets web innovants avec Drupal
 
La dématérialisation du conseil minicipal
La dématérialisation du conseil minicipalLa dématérialisation du conseil minicipal
La dématérialisation du conseil minicipal
 
OpenStack - open source au service du Cloud
OpenStack - open source au service du CloudOpenStack - open source au service du Cloud
OpenStack - open source au service du Cloud
 
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
 
Présentation Schéma Directeur Open Source au S2LQ 2015
Présentation Schéma Directeur Open Source au S2LQ 2015Présentation Schéma Directeur Open Source au S2LQ 2015
Présentation Schéma Directeur Open Source au S2LQ 2015
 
Offre de demat d'Adullact projet
Offre de demat d'Adullact projet Offre de demat d'Adullact projet
Offre de demat d'Adullact projet
 

Ähnlich wie Mobile & Responsive Design: Rendez votre marque mobile

Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignGreg Hoin
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCBrioude Internet
 
14 raisons qui font que le responsive design n'est pas la meilleure option
14 raisons qui font que le responsive design n'est pas la meilleure option14 raisons qui font que le responsive design n'est pas la meilleure option
14 raisons qui font que le responsive design n'est pas la meilleure optionRomain Danel
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Webambin_fr
 
Présentation Responsive Webdesign
Présentation Responsive WebdesignPrésentation Responsive Webdesign
Présentation Responsive WebdesignWilly Bahuaud
 
Responsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesResponsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesMehdi Kabab
 
Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / MobilitéAndré Dubreuil
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimediadefimedia
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalActency
 
Competitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCompetitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCOMPETITIC
 
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 Medialibs
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxClub des Community Managers de Lyon
 
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 ?NiceToMeetYou
 
Offre de services woujoud
Offre de services woujoudOffre de services woujoud
Offre de services woujoudNégoce DZ
 
Offre de services woujoud
Offre de services woujoudOffre de services woujoud
Offre de services woujoudKRIM AZEDDINE
 
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 practicesLaFrenchMobile
 

Ähnlich wie Mobile & Responsive Design: Rendez votre marque mobile (20)

Mobile marketing
Mobile marketingMobile marketing
Mobile marketing
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web Design
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLC
 
14 raisons qui font que le responsive design n'est pas la meilleure option
14 raisons qui font que le responsive design n'est pas la meilleure option14 raisons qui font que le responsive design n'est pas la meilleure option
14 raisons qui font que le responsive design n'est pas la meilleure option
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
 
Présentation Responsive Webdesign
Présentation Responsive WebdesignPrésentation Responsive Webdesign
Présentation Responsive Webdesign
 
Responsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesResponsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégies
 
Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / Mobilité
 
Web to go
Web to goWeb to go
Web to go
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
Competitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCompetitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clients
 
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
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
 
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 ?
 
Offre de services woujoud
Offre de services woujoudOffre de services woujoud
Offre de services woujoud
 
Offre de services woujoud
Offre de services woujoudOffre de services woujoud
Offre de services woujoud
 
Redcat final
Redcat finalRedcat final
Redcat final
 
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
 

Mehr von WSI France

6 leviers pour une Stratégie Marketing Digital performante en 2018
6 leviers pour une Stratégie Marketing Digital performante en 20186 leviers pour une Stratégie Marketing Digital performante en 2018
6 leviers pour une Stratégie Marketing Digital performante en 2018WSI France
 
Social Selling : Pourquoi et Comment
Social Selling : Pourquoi et CommentSocial Selling : Pourquoi et Comment
Social Selling : Pourquoi et CommentWSI France
 
Concurrence en ligne : 30 minutes pour reprendre l’avantage !
Concurrence en ligne : 30 minutes pour reprendre l’avantage ! Concurrence en ligne : 30 minutes pour reprendre l’avantage !
Concurrence en ligne : 30 minutes pour reprendre l’avantage ! WSI France
 
E-commerce : Comment amplifier ses ventes ?
E-commerce : Comment amplifier ses ventes ?E-commerce : Comment amplifier ses ventes ?
E-commerce : Comment amplifier ses ventes ?WSI France
 
Atelier5 stratégie digitalemarketing
Atelier5 stratégie digitalemarketingAtelier5 stratégie digitalemarketing
Atelier5 stratégie digitalemarketingWSI France
 
Développement international, trouvez et étudiez votre marché cible !
Développement international, trouvez et étudiez votre marché cible ! Développement international, trouvez et étudiez votre marché cible !
Développement international, trouvez et étudiez votre marché cible ! WSI France
 
Les clefs de la croissance à l'international en 2016
Les clefs de la croissance à l'international en 2016Les clefs de la croissance à l'international en 2016
Les clefs de la croissance à l'international en 2016WSI France
 
COMMENT GOOGLE INTERPRÈTE-T-IL VOTRE SITE INTERNET ? LES ASTUCES POUR OPTIMIS...
COMMENT GOOGLE INTERPRÈTE-T-IL VOTRE SITE INTERNET ? LES ASTUCES POUR OPTIMIS...COMMENT GOOGLE INTERPRÈTE-T-IL VOTRE SITE INTERNET ? LES ASTUCES POUR OPTIMIS...
COMMENT GOOGLE INTERPRÈTE-T-IL VOTRE SITE INTERNET ? LES ASTUCES POUR OPTIMIS...WSI France
 
Site internet : Comment créer un contenu qui rendra votre site efficace ?
Site internet : Comment créer un contenu qui rendra votre site efficace ?Site internet : Comment créer un contenu qui rendra votre site efficace ?
Site internet : Comment créer un contenu qui rendra votre site efficace ?WSI France
 
Eréputation et droit: Comprendre les risques
Eréputation et droit: Comprendre les risques Eréputation et droit: Comprendre les risques
Eréputation et droit: Comprendre les risques WSI France
 
Utiliser son site web pour se développer à l'international
Utiliser son site web pour se développer à l'internationalUtiliser son site web pour se développer à l'international
Utiliser son site web pour se développer à l'internationalWSI France
 
6 outils de Web analyse
6 outils de Web analyse6 outils de Web analyse
6 outils de Web analyseWSI France
 
Atelier du web: 3 Techniques de Référencement Payant pour promouvoir votre ma...
Atelier du web: 3 Techniques de Référencement Payant pour promouvoir votre ma...Atelier du web: 3 Techniques de Référencement Payant pour promouvoir votre ma...
Atelier du web: 3 Techniques de Référencement Payant pour promouvoir votre ma...WSI France
 
Générer des leads grâce au Marketing de Contenu
Générer des leads grâce au Marketing de ContenuGénérer des leads grâce au Marketing de Contenu
Générer des leads grâce au Marketing de ContenuWSI France
 
Faites la différence grâce au web !
Faites la différence grâce au web !Faites la différence grâce au web !
Faites la différence grâce au web !WSI France
 
WSI Marketing Internet
WSI Marketing InternetWSI Marketing Internet
WSI Marketing InternetWSI France
 
Atelier web marketing #6 S4: Définir une stratégie marketing digitale
Atelier web marketing #6 S4: Définir une stratégie marketing digitaleAtelier web marketing #6 S4: Définir une stratégie marketing digitale
Atelier web marketing #6 S4: Définir une stratégie marketing digitaleWSI France
 
L'Inbound Marketing
L'Inbound MarketingL'Inbound Marketing
L'Inbound MarketingWSI France
 
Le Social Selling - Atelier du web saison 4
Le Social Selling - Atelier du web saison 4Le Social Selling - Atelier du web saison 4
Le Social Selling - Atelier du web saison 4WSI France
 
Les Ateliers du web marketing Saison 4 - Website & Conversion
Les Ateliers du web marketing Saison 4 - Website & ConversionLes Ateliers du web marketing Saison 4 - Website & Conversion
Les Ateliers du web marketing Saison 4 - Website & ConversionWSI France
 

Mehr von WSI France (20)

6 leviers pour une Stratégie Marketing Digital performante en 2018
6 leviers pour une Stratégie Marketing Digital performante en 20186 leviers pour une Stratégie Marketing Digital performante en 2018
6 leviers pour une Stratégie Marketing Digital performante en 2018
 
Social Selling : Pourquoi et Comment
Social Selling : Pourquoi et CommentSocial Selling : Pourquoi et Comment
Social Selling : Pourquoi et Comment
 
Concurrence en ligne : 30 minutes pour reprendre l’avantage !
Concurrence en ligne : 30 minutes pour reprendre l’avantage ! Concurrence en ligne : 30 minutes pour reprendre l’avantage !
Concurrence en ligne : 30 minutes pour reprendre l’avantage !
 
E-commerce : Comment amplifier ses ventes ?
E-commerce : Comment amplifier ses ventes ?E-commerce : Comment amplifier ses ventes ?
E-commerce : Comment amplifier ses ventes ?
 
Atelier5 stratégie digitalemarketing
Atelier5 stratégie digitalemarketingAtelier5 stratégie digitalemarketing
Atelier5 stratégie digitalemarketing
 
Développement international, trouvez et étudiez votre marché cible !
Développement international, trouvez et étudiez votre marché cible ! Développement international, trouvez et étudiez votre marché cible !
Développement international, trouvez et étudiez votre marché cible !
 
Les clefs de la croissance à l'international en 2016
Les clefs de la croissance à l'international en 2016Les clefs de la croissance à l'international en 2016
Les clefs de la croissance à l'international en 2016
 
COMMENT GOOGLE INTERPRÈTE-T-IL VOTRE SITE INTERNET ? LES ASTUCES POUR OPTIMIS...
COMMENT GOOGLE INTERPRÈTE-T-IL VOTRE SITE INTERNET ? LES ASTUCES POUR OPTIMIS...COMMENT GOOGLE INTERPRÈTE-T-IL VOTRE SITE INTERNET ? LES ASTUCES POUR OPTIMIS...
COMMENT GOOGLE INTERPRÈTE-T-IL VOTRE SITE INTERNET ? LES ASTUCES POUR OPTIMIS...
 
Site internet : Comment créer un contenu qui rendra votre site efficace ?
Site internet : Comment créer un contenu qui rendra votre site efficace ?Site internet : Comment créer un contenu qui rendra votre site efficace ?
Site internet : Comment créer un contenu qui rendra votre site efficace ?
 
Eréputation et droit: Comprendre les risques
Eréputation et droit: Comprendre les risques Eréputation et droit: Comprendre les risques
Eréputation et droit: Comprendre les risques
 
Utiliser son site web pour se développer à l'international
Utiliser son site web pour se développer à l'internationalUtiliser son site web pour se développer à l'international
Utiliser son site web pour se développer à l'international
 
6 outils de Web analyse
6 outils de Web analyse6 outils de Web analyse
6 outils de Web analyse
 
Atelier du web: 3 Techniques de Référencement Payant pour promouvoir votre ma...
Atelier du web: 3 Techniques de Référencement Payant pour promouvoir votre ma...Atelier du web: 3 Techniques de Référencement Payant pour promouvoir votre ma...
Atelier du web: 3 Techniques de Référencement Payant pour promouvoir votre ma...
 
Générer des leads grâce au Marketing de Contenu
Générer des leads grâce au Marketing de ContenuGénérer des leads grâce au Marketing de Contenu
Générer des leads grâce au Marketing de Contenu
 
Faites la différence grâce au web !
Faites la différence grâce au web !Faites la différence grâce au web !
Faites la différence grâce au web !
 
WSI Marketing Internet
WSI Marketing InternetWSI Marketing Internet
WSI Marketing Internet
 
Atelier web marketing #6 S4: Définir une stratégie marketing digitale
Atelier web marketing #6 S4: Définir une stratégie marketing digitaleAtelier web marketing #6 S4: Définir une stratégie marketing digitale
Atelier web marketing #6 S4: Définir une stratégie marketing digitale
 
L'Inbound Marketing
L'Inbound MarketingL'Inbound Marketing
L'Inbound Marketing
 
Le Social Selling - Atelier du web saison 4
Le Social Selling - Atelier du web saison 4Le Social Selling - Atelier du web saison 4
Le Social Selling - Atelier du web saison 4
 
Les Ateliers du web marketing Saison 4 - Website & Conversion
Les Ateliers du web marketing Saison 4 - Website & ConversionLes Ateliers du web marketing Saison 4 - Website & Conversion
Les Ateliers du web marketing Saison 4 - Website & Conversion
 

Mobile & Responsive Design: Rendez votre marque mobile

  • 2. Mieux vous connaître: sondage • Votre site web est-il adapté aux Smartphones et Tablettes? • Quels problèmes rencontrez-vous? • Pensez-vous qu'il est important d'avoir une marque mobile de nos jours?
  • 3. A propos des speakers +352 / 691 219 850 +33 / 673 923 708
  • 4. A propos de WSI ©2013 WSI. All rights reserved. Leader mondial du marketing digital Savoir faire international, Résultats locaux. • Fournir des solutions de marketing numérique de pointe • Pour les entreprises de toutes tailles et dans tous les secteurs • Le plus grand réseau mondial de consultants Internet (1.200) • Présent dans plus de 80 pays à l'échelle internationale • Siège social du groupe à Toronto, au Canada www.wsi-marketing-internet.fr
  • 5. Le Nouveau Livre WSI Disponible aussi sur Amazon : http://amzn.to/1kImhJP Concours en seconde partie de webinaire 1 gagnant remportera un exemplaire du livre Digital Minds
  • 6. Sommaire • Contexte • Le Marketing Mobile aujourd’hui • Le Responsive Design • Conclusion
  • 7. ©2014 WSI. All rights reserved. CONTEXTE
  • 8. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  • 9. ©2012 RAM. All rights reserved.
  • 10. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  • 11. ©2012 RAM. All rights reserved.
  • 12. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  • 13. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  • 14. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  • 15. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  • 16. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  • 17. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  • 18. Plus de chiffres… ©2012 RAM. All rights reserved. http://fr.slideshare.net/HubSpot/50- mobilefactsdeck62812
  • 19. Impact Futur “Le mobile aura un plus gros impact que l’Internet.” -Keith Weed, Unilever CMO
  • 20. ©2014 WSI. All rights reserved.
  • 21. Le Marketing Mobile aujourd’hui
  • 22. Le Marketing Mobile aujourd’hui  GSM  Smartphone  Tablette
  • 23. Que Fait-on Sur Nos Mobiles?
  • 24. Un Monde Multi-Ecrans Source : http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
  • 25. Le Marketing Mobile Il est complémentaire - il se combine avec tous les autres médias et supports.
  • 26. Le Marketing Mobile ©2012 RAM. All rights reserved. • C’est un média qui influence le parcours d’achat entre exposition publicitaire et acte d’achat. Le mobile influence l’acte d’achat
  • 27. ©2012 RAM. All rights reserved.
  • 28. Zero Moment of Truth ©2012 RAM. All rights reserved.
  • 29. SoLoMo ©2012 RAM. All rights reserved. http://www.mymarketingmobile.fr/2013/12/19/solomo- etude-marketing-adobe-neolane-2013-infographie/
  • 30. C’est le moment? Mesurez l’importance du mobile pour votre business grâce à Google Analytics 25%!
  • 33. De quoi parle-t-on? Responsive Web Design Site Mobile Adaptive Web Design Compatible Mobile Quelques termes utilisés:
  • 34. De quoi parle-t-on? On peut retenir 2 categories principales: • Adaptive Web Design (AWD) • Responsive Web Design (RWD)
  • 35. AWD & RWD • Les deux permettent de créer des sites Web pouvant être consultés avec les appareils mobiles et différentes tailles d'écrans • Les deux offrent finalement aux visiteurs une meilleure expérience utilisateur mobile
  • 36. AWD • Utilise le serveur pour détecter le périphérique utilisé pour consulter le site (PC, tablette, smartphone) • Envoie des fichiers spécifiques pour cet appareil • Des modèles distincts sont créés pour chaque appareil • Le chargement des pages est plus rapide – chaque variante est généralement hébergée sur son propre domaine « mobile.domain.com » ou « domain.com/mobile » La définition courte d’un design adaptatif, c'est que le design va changer pour s'adapter à un ensemble prédéterminé de tailles d'écrans et d'appareils.
  • 37. Exemple de site “AWD” URL Spécifique
  • 38. RWD • Utilise du code CSS spécifique pour modifier la présentation d'un site Web en fonction de la taille de l'appareil sur lequel il est affiché. • L’information pour chaque écran est téléchargée indépendamment du fait qu‘elle est utilisée ou non • Le chargement des pages est plus lent - Le nom de domaine est toujours le même. La définition courte d'un design « Responsive » est donc qu'il va changer de manière fluide et s'adapter à n'importe quelle taille d’écran ou d'appareil.
  • 39. Exemple de site “RWD”
  • 40. Choisir entre AWD & RWD AWD • Il faut développer et maintenir des sites Web distincts • Avec un site distinct / HTML, vous pouvez affiner et optimiser la façon dont votre site affiche sur un appareil particulier • Avec un design Web adaptatif, vous pouvez optimiser la taille des images (par exemple prévoir une basse résolution pour de faibles bandes passantes) • SEO, liens, contenu tout doit être reconstruit pour chaque site
  • 41. Choisir entre AWD & RWD RWD • La conception de sites RWD repose sur HTML5, CSS3 et Javascript, et donc fonctionne mieux avec les navigateurs web relativement modernes • Le Responsive Web Design est particulièrement adapté dans un marché d’appareils mobiles de plus en plus fragmenté (Il existe plusieurs centaines d’appareils différents, tablettes ou smartphones) • SEO, liens, contenu tout est conservé ... Google aime le Responsive Web Design
  • 43. Les Avantages du Responsive Design  gain de temps et d’argent (développement et maintenance)  plus facile à maintenir que des apps ou des sites dédiés  améliore et renforce le SEO  offre une meilleure expérience de navigation  génère une meilleure conversion
  • 44. Impact SEO du Responsive Design  … • URL unique (plus facile à gérer) • Pas de duplicate content • On bénéficie des liens préexistant du site classique pour la version mobile • La construction de liens devient plus facile • Diminution du temps de téléchargement
  • 45. Les Inconvénients du Responsive Design  temps de téléchargement plus long  de bonnes connaissances techniques sont nécessaires  une veille technologique constante  des tests nombreux et variés tout au long du projet  limites ergonomiques et de performances des navigateurs web  c'est plus long à développer (25% du temps supplémentaire)
  • 46. Pour conclure sur le Responsive Design
  • 47. Un chapitre consacré au Mobile & Responsive Design Disponible aussi sur Amazon : http://amzn.to/1kImhJP Digital Minds 12 Recommandations essentielles pour un Marketing Digital réussi
  • 48. Pour aller plus loin... • Responsive Webdesign par Ethan Marcotte Source : http://www.blogduwebdesign.com/livre-webdesign/responsive-webdesign-par-ethan-marcotte/558
  • 49. Le Nouveau Livre WSI Disponible aussi sur Amazon : http://amzn.to/1kImhJP Le Concours c’est maintenant ! 1 gagnant remportera un exemplaire du livre Digital Minds
  • 51. Contactez votre agence WSI Laurent Annet Tel : +352 27 39 57 27 lannet@wsiluxembourg.com Jean-Jacques Turroc Luxembourg - Windhof Région Ile de France Autres régions + 50 consultants http://www.wsi-marketing- internet.fr /agences-wsi/agences-wsi- france.html Tel : +33 (0) 970 46 90 00 | GSM : +33 (0) 673 92 37 08 jjt@wsi4yoursuccess.fr
  • 53. Participez à notre prochain webinar: http://www.wsi-marketing-internet.fr/webinar-webmarketing-analytics.htm
  • 55. Merci et bonne journée à tous ! Laurent Annet Tel : +352 27 39 57 27 lannet@wsiluxembourg.com Jean-Jacques Turroc Luxembourg - Windhof Région Ile de France Autres régions + 50 consultants http://www.wsi-marketing- internet.fr /agences-wsi/agences-wsi- france.html Tel : +33 (0) 970 46 90 00 | GSM : +33 (0) 673 92 37 08 jjt@wsi4yoursuccess.fr