Responsive Design: Pourquoi c’est Votre Meilleure Option et Comment le faire correctement

BY admin
|

La croissance explosive du mobile et la prolifération continue d’une variété d’appareils font du responsive web design (RWD) la meilleure option pour les détaillants et les marques qui souhaitent optimiser la façon dont ils interagissent avec les clients sur tous les points de contact numériques. Selon le détaillant Internet, 261 millions de consommateurs américains possèdent des appareils mobiles et 66 millions de ces propriétaires d’appareils achètent avec eux. En fait, le détaillant Internet a enregistré une augmentation de 159% du nombre de commerçants utilisant le mobile IR 500 en utilisant responsive de 2013 à 2014, les commerçants cherchant à rester compétitifs et à répondre aux besoins des consommateurs en déplacement.

Les versions mobiles des sites de bureau ont été une solution populaire jusqu’à présent, mais l’expérience manque souvent d’éléments de marque et de contenu critiques et lie le personnel et le budget précieux à la gestion de deux versions d’un site Web. En fournissant des informations à partir d’une seule base de code qui reconnaît et s’adapte à l’appareil mobile, la conception réactive résout ces deux problèmes et à partir d’une seule URL.

Pourtant, tout comme le lancement d’un site de commerce électronique n’est pas une garantie de succès commercial, un site réactif très performant prend tout autant en considération et en planification. S’ils ne sont pas bien faits, les sites réactifs peuvent apporter autant de défis qu’ils résolvent: performances lentes, retards de tests de développement coûteux, chronophages et complexes, et cela peut démasquer les défis architecturaux qui nécessitent une réécriture du site. Dans une récente étude Moovweb sur 12 sites réactifs, le détaillant Internet a noté que les performances étaient 513% plus lentes sur les smartphones que sur les PC et les tablettes, certains sites prenant 18,24 secondes pour se charger, bien au-dessus du temps de chargement de la page des meilleures pratiques de l’industrie de 3 secondes.

Optimisation pour Responsive: Avant de commencer

Lors d’un récent webinaire sur les Détaillants en Ligne sponsorisé par Magento, conférencier invité, Forrester Research, Inc. L’analyste Mark Grannan a souligné que, comme la plupart des projets, une mise en œuvre réussie de RWD commence par l’alignement des objectifs commerciaux et de développement. Prendre le temps d’analyser les modèles de trafic mobile, de créer des listes de priorités d’appareils et de revoir votre architecture d’information et votre contenu permettra à vos équipes d’aller plus vite. En reliant étroitement les équipes de conception et de développement et en accélérant leur collaboration avec des outils de prototypage et des cadres de développement, vous pouvez également améliorer les délais de mise sur le marché. Grannan a également conseillé aux ingénieurs de résoudre dès le début les exigences à long terme, telles que déterminer si des modifications de l’architecture CMS ou Web sont nécessaires pour prendre en charge les projets de conception réactive, et de traiter de manière proactive la vitesse et l’accélération du site grâce à des techniques d’optimisation frontend. Enfin, Grannan a recommandé de faire correspondre les métriques de valeur métier (telles que le trafic sur le site et les conversions) à la portée du développement.

Optimisation pour Responsive: Cartographiez le parcours de vos clients

Comme tout le reste, l’optimisation de votre site pour plusieurs appareils commence par votre audience – sa composition et ses comportements.

  • Quel pourcentage du trafic de votre site provient d’appareils mobiles? La plupart des marchands fixent 20 à 30% du trafic mobile comme déclencheur pour envisager une solution réactive

  • Comment accèdent-ils à votre site aujourd’hui? Les tendances macro importent moins que les spécificités de votre site et de votre client

  • Quels appareils/navigateurs votre clientèle privilégie-t-elle ? Il est important de garder à l’esprit que la conception Web réactive est implémentée en utilisant des techniques incompatibles avec les navigateurs plus anciens (notamment IE8 et plus anciens). L’identification des principaux appareils accédant à votre site vous aidera également à déterminer le nombre de points d’arrêt d’écran pour lesquels vous devez concevoir votre site

Optimiser pour le Responsive: Définissez votre stratégie de contenu

Préparer du contenu pour un site Web responsive est l’un des plus grands défis auxquels les commerçants seront confrontés, car ils devront changer leur façon de penser le contenu. On dit souvent que la mise en œuvre d’une conception Web réactive est plus une question de stratégie de contenu qu’une question de conception.

Comme l’a dit Brendan Falkowski du Département Gravity, « Mobile First est une méthodologie qui vous demande de concevoir des interactions en pensant d’abord au petit écran. Mobile first n’est pas une version allégée d’un site de bureau. »

Regardez les termes de recherche utilisés par vos clients et commencez par définir les interactions importantes pour votre magasin. Hiérarchisez les fonctions et les informations pour organiser la vue mobile plus efficacement, puis évoluez vers un site plus propre pour les grands écrans. Créer une expérience gagnante ne consiste pas à éliminer l’utilité ou la profondeur.

Au contraire, les utilisateurs s’attendent à pouvoir effectuer n’importe quelle action depuis n’importe quel appareil qu’ils détiennent. Cela signifie que le filtrage des résultats de recherche, la lecture des avis, l’enregistrement dans les listes de souhaits et la vérification doivent être universellement accessibles.

Optimisation pour Responsive: Code et images

Un défi de RWD est que sa base de code unique peut être très volumineuse et lente à charger. Considérez ces conseils, dont beaucoup ont été partagés par Mark Grannan lors du récent webinaire sur les détaillants en ligne, pour une expérience mobile optimale:

  • Chargez le contenu prioritaire en premier et chargez le contenu en retard (« chargement paresseux ») en dessous pour créer la perception de performances plus rapides, plutôt que d’attendre d’afficher le contenu une fois que tout est chargé

  • Utilisez la technologie côté serveur pour fournir ou restituer des images de taille appropriée pour l’appareil

  • Codez votre site pour réduire le nombre d’allers-retours vers le serveur afin de réduire la latence

  • Utilisez des polices Web ouvertes plutôt que des polices personnalisées pour réduire le poids de la page

  • Envisagez d’utiliser une accélération tierce les fournisseurs, comme les CDN, pour optimiser les performances grâce à une gamme de technologies et à la mise en cache de contenu local

Going Responsive: Lessons from the Trenches

Skinny Ties est l’un des plus grands détaillants et grossistes de cravates aux États-Unis et l’une des premières entreprises vendant des cravates traditionnelles en ligne. Il était donc tout à fait normal que le détaillant soit l’un des premiers commerçants à développer un site réactif début 2012.

Pour créer l’expérience client exceptionnelle que Skinny Ties recherchait, Gravity Department a considérablement augmenté la complexité de sa taxonomie en mappant chaque attribut à un format standardisé. Avant, les utilisateurs ne pouvaient naviguer que dans une arborescence de catégories rigide. La taxonomie dynamique a ouvert plusieurs entrées à chaque produit.

La combinaison d’un design réactif et d’une taxonomie flexible a contribué à une augmentation massive des revenus, de la valeur SEO et des taux de conversion sur toutes les plateformes et tous les facteurs de forme.

  • 58% augmentation des transactions en glissement annuel

  • 20.8% augmentation de l’AOV

  • 187% augmentation des revenus des appareils Android

  • 224% augmentation des revenus tirés des iPad

  • 437% augmentation des revenus des iPhones

Vax est une marque de produits floorcare la plus vendue au Royaume-Uni et fait partie de la division floorcare de Tti, basée à Hong Kong, un leader mondial des produits pour les industries de l’amélioration de l’habitat et de la construction.

L’activité croît de 40% par an et l’activité en ligne a connu une croissance de plus de 85%.

La société a connu un énorme succès grâce aux ventes flash, ou ce qu’elle appelle les ventes au triage.

Ces événements de cinq jours attirent plus de 3 000 utilisateurs simultanés au plus fort de leur activité et ont connu un grand succès ! Lorsque l’entreprise a constaté que 40 % du trafic des ventes au triage provenait d’appareils mobiles, elle savait qu’elle avait besoin d’un site optimisé pour les appareils mobiles.

Nigel Aitchison, directeur de Tti Floorcare pour la région EMEA, a partagé les excellents résultats de sa gamme Vax après son lancement sur Magento Enterprise Edition 1.le thème responsive de 14, qui leur a pris seulement quatre semaines à construire et à tester. Avec le site responsive, Vax a vu la conversion lors de sa vente à grande surface augmenter de 42% sur les tablettes et de 156% sur les téléphones mobiles.

Ressources supplémentaires:

Détaillant Internet – 23 juillet 2014: Étapes vers le succès de la Conception Web réactive

Forrester Research – Jan. 16, 2014: Six Pièges Du Projet De Site Web Réactif Et Les Meilleures Pratiques Pour Les Éviter

Détaillant Internet – 2 Mai 2013: Skinny Ties obtient une hausse de 211% des ventes mobiles avec son site de design réactif

Brendan Falkowski : https://speakerdeck.com/brendanfalkowski

Moovweb – Juillet 2014 : 8 Façons d’Améliorer les Performances de Votre Site Responsive

Magento Blog – 13 mai 2014 : Magento Permet aux Sites Responsive en deux fois Moins de Temps