Mobile & Responsive Design: Rendez votre marque mobile

1 394 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 394
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

×