Mobile & Responsive Design
Mieux vous connaître: sondage
• Votre site web est-il adapté aux
Smartphones et Tablettes?
• Quels problèmes rencontrez-vo...
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 ...
Le Nouveau Livre WSI
Disponible aussi sur Amazon :
http://amzn.to/1kImhJP
Concours en seconde
partie de webinaire
1 gagnan...
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
pu...
©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-20...
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 ta...
AWD
• Utilise le serveur pour détecter le périphérique utilisé
pour consulter le site (PC, tablette, smartphone)
• Envoie ...
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 su...
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...
Choisir entre AWD & RWD
RWD
• La conception de sites RWD repose sur HTML5, CSS3
et Javascript, et donc fonctionne mieux av...
Les avantages du
Responsive Design
Les Avantages du Responsive
Design
 gain de temps et d’argent
(développement et maintenance)
 plus facile à maintenir qu...
Impact SEO du Responsive Design
 …
• URL unique (plus facile à gérer)
• Pas de duplicate content
• On bénéficie des liens...
Les Inconvénients du Responsive
Design
 temps de téléchargement plus long
 de bonnes connaissances techniques sont
néces...
Pour conclure sur le Responsive Design
Un chapitre consacré au Mobile &
Responsive Design
Disponible aussi sur Amazon :
http://amzn.to/1kImhJP
Digital Minds
12 R...
Pour aller plus loin...
• Responsive Webdesign par Ethan Marcotte
Source : http://www.blogduwebdesign.com/livre-webdesign/...
Le Nouveau Livre WSI
Disponible aussi sur Amazon :
http://amzn.to/1kImhJP
Le Concours c’est
maintenant !
1 gagnant
remport...
La réponse est:
Contactez votre agence WSI
Laurent Annet
Tel : +352 27 39 57 27
lannet@wsiluxembourg.com
Jean-Jacques Turroc
Luxembourg - ...
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
Luxembou...
Prochain SlideShare
Chargement dans…5
×

Mobile & Responsive Design: Rendez votre marque mobile

1 352 vues

Publié le

Les consommateurs sont de plus en plus mobiles en terme de connexion, votre marque doit l'être également. Découvrez l'importance d'avoir un site mobile, adapté à différents supports (smartphones, tablettes...) et les possibilités qui s'offrent à vous pour développer votre stratégie webmarketing.

Présenté par Laurent Annet et Jean-Jacques Turroc, consultants en digital marketing WSI

Contactez l'expert en webmarketing le plus proche de chez vous:
http://www.wsi-marketing-internet.fr/agences-wsi/agences-wsi-france.html

Publié dans : Business
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 352
Sur SlideShare
0
Issues des intégrations
0
Intégrations
313
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Mobile & Responsive Design: Rendez votre marque mobile

  1. 1. Mobile & Responsive Design
  2. 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. 3. A propos des speakers +352 / 691 219 850 +33 / 673 923 708
  4. 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. 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. 6. Sommaire • Contexte • Le Marketing Mobile aujourd’hui • Le Responsive Design • Conclusion
  7. 7. ©2014 WSI. All rights reserved. CONTEXTE
  8. 8. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  9. 9. ©2012 RAM. All rights reserved.
  10. 10. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  11. 11. ©2012 RAM. All rights reserved.
  12. 12. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  13. 13. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  14. 14. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  15. 15. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  16. 16. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  17. 17. ©2012 RAM. All rights reserved.Source : http://fr.slideshare.net/HubSpot/50-mobilefactsdeck62812
  18. 18. Plus de chiffres… ©2012 RAM. All rights reserved. http://fr.slideshare.net/HubSpot/50- mobilefactsdeck62812
  19. 19. Impact Futur “Le mobile aura un plus gros impact que l’Internet.” -Keith Weed, Unilever CMO
  20. 20. ©2014 WSI. All rights reserved.
  21. 21. Le Marketing Mobile aujourd’hui
  22. 22. Le Marketing Mobile aujourd’hui  GSM  Smartphone  Tablette
  23. 23. Que Fait-on Sur Nos Mobiles?
  24. 24. Un Monde Multi-Ecrans Source : http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
  25. 25. Le Marketing Mobile Il est complémentaire - il se combine avec tous les autres médias et supports.
  26. 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. 27. ©2012 RAM. All rights reserved.
  28. 28. Zero Moment of Truth ©2012 RAM. All rights reserved.
  29. 29. SoLoMo ©2012 RAM. All rights reserved. http://www.mymarketingmobile.fr/2013/12/19/solomo- etude-marketing-adobe-neolane-2013-infographie/
  30. 30. C’est le moment? Mesurez l’importance du mobile pour votre business grâce à Google Analytics 25%!
  31. 31. L’approche ‘’mobile first’’ Approche traditionnelle Approche Mobile First
  32. 32. Le Responsive Design
  33. 33. De quoi parle-t-on? Responsive Web Design Site Mobile Adaptive Web Design Compatible Mobile Quelques termes utilisés:
  34. 34. De quoi parle-t-on? On peut retenir 2 categories principales: • Adaptive Web Design (AWD) • Responsive Web Design (RWD)
  35. 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. 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. 37. Exemple de site “AWD” URL Spécifique
  38. 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. 39. Exemple de site “RWD”
  40. 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. 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
  42. 42. Les avantages du Responsive Design
  43. 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. 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. 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. 46. Pour conclure sur le Responsive Design
  47. 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. 48. Pour aller plus loin... • Responsive Webdesign par Ethan Marcotte Source : http://www.blogduwebdesign.com/livre-webdesign/responsive-webdesign-par-ethan-marcotte/558
  49. 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
  50. 50. La réponse est:
  51. 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
  52. 52. Questions & Réponses
  53. 53. Participez à notre prochain webinar: http://www.wsi-marketing-internet.fr/webinar-webmarketing-analytics.htm
  54. 54. Questions & Réponses
  55. 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

×