Mobile & Responsive Design: Rendez votre marque mobile
-
Upload
wsi-france -
Category
Business
-
view
659 -
download
0
description
Transcript of Mobile & Responsive Design: Rendez votre marque mobile
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 digitalSavoir 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 webinaire1 gagnant remportera un exemplaire du livreDigital 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 votrebusiness 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 Minds12 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 livreDigital Minds
La réponse est:
Contactez votre agence WSI
Laurent Annet
Tel : +352 27 39 57 27
Jean-Jacques Turroc
Luxembourg - Windhof Région Ile de France Autres régions
+ 50 consultantshttp://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
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
Jean-Jacques Turroc
Luxembourg - Windhof Région Ile de France Autres régions
+ 50 consultantshttp://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