Seamlessly connect your eCommerce system

Commerce mobile: Design réactif, dynamique ou hybride?

Il est clair que les questions mobiles, et les sites Web conviviaux sont des enjeux de table. Mais quelle est la meilleure approche pour le commerce mobile?

Mort de m. dot

Dans les premiers jours de la conception Web mobile ciblée-circa 2009, les domaines mobiles (m. dot ou. mobi sites) ont été la norme. Les pages d'accueil n'étaient rien de plus qu'une liste de liens de menu. Certains sites, comme Best Buy, offraient uniquement des outils de recherche et des localisateurs de magasins sans navigation, photos de produits ou fonctionnalité de commande. Les vendeurs de plate-forme mobile comme Usablenet, mPoria et Digby ont alimenté plus de 80 pour cent de ces premiers sites de m-commerce, tandis que les autres ont été construits à l'interne.

Nous avons fait un long chemin depuis, et les sites de m. dot sont tous morts. Une récente enquête sur le détaillant Internet 500 a trouvé l'utilisation de sites m-dot pour le commerce électronique a chuté de 79 pour cent dans 2013 à 59 pour cent en 2014, avec des sites de service dynamique et réactive augmentant de 12 pour cent et 15 pour cent, respectivement.

Malgré l'attrait de la conception réactive, le service dynamique est plus élevé en 2015 que réactif parmi les sites de m-commerce, devrait passer 20 pour cent cette année.

Réactif vs. Dynamique

Responsive Design utilise une combinaison de grilles flexibles et de mises en page, d'images et de requêtes multimédias CSS pour répondre au mieux à la conception et au contenu de la taille et des spécifications d'un appareil.

Un des plus grands avantages de la conception réactive est qu'il fonctionne hors d'un ensemble d'URL et de code html. Plutôt que de maintenir un site distinct m. dot (ou t. dot), les mises à jour peuvent être rendues universellement grâce à un CMS unique, simplifiant la maintenance et assurant la cohérence en temps réel du contenu.

Un ensemble d'URLs est également mieux pour SEO. Google préfère à seulement besoin d'explorer un domaine, l'élimination du contenu en double, et les sites Web bénéficient de backlinks consolidés, plutôt que d'avoir quelques liens pointent vers le bureau et d'autres le domaine mobile.

Les concepteurs ont la flexibilité de modifier et de réduire le contenu livré aux écrans mobiles, donnant ainsi un certain contrôle sur l'optimisation de l'expérience. Cependant, avec tout ce code dans un seul fichier HTML, la charge de la page peut ralentir de manière significative-un facteur qui est mauvais pour l'expérience utilisateur et SEO.

Le Dynamic (également appelé adaptative) approche utilise des dispositions prédéfinies basées sur la résolution d'écran combinée avec CSS et JavaScript. La bonne disposition à servir peut être détectée par le serveur ou par le client (périphérique). Comme les sites sensibles, les sites dynamiques peuvent également conserver une structure d'URL unique (ne pas avoir à utiliser un domaine m. dot), et généralement charger plus rapidement que les sites sensibles parce qu'ils n'ont pas besoin d'un ensemble de html.

Rester informé

Recevez le meilleur contenu sur le futur du marketing, les changements dans le secteur et les avis de nos experts.

Les sites dynamiques permettent également le ciblage et les expériences spécifiques au périphérique. Par exemple, les périphériques iOS utilisent actuellement un outil de sélection multi-options moins que optimal par défaut.

Pour le rendre plus convivial, un concepteur peut cibler les appareils Apple avec une grille de cases à cocher/bouton ou un outil de sélection personnalisée. Les mises en page personnalisées s'adaptent également à des expériences mobiles radicalement différentes (par rapport au bureau) si désiré.

À la fois réactif et adaptatif doit concevoir et tester les résolutions d'écran les plus communes. Les deux sont longs et coûteux à cet égard, mais pour les petits sites, l'approche réactive peut être plus rentable, en particulier en tenant compte de la variété de la taille des appareils. Smartphones ont été tendance plus grand, comprimés plus petits, et la distinction entre est plus floue. Chaque année, même les appareils les plus populaires libèrent de nouvelles dimensions, et il faut du travail pour suivre ces changements.

Le grand avantage de l'Adaptive est le temps de chargement plus rapide, qui a un impact énorme sur l'expérience utilisateur et les taux de rebond, les taux de conversion et les revenus. C'est peut-être la raison pour laquelle il est le plus populaire parmi les détaillants en ligne haut malgré l'augmentation des coûts et d'entretien.

Conception Web réactive hybride

HRWD-Hybrid réactive Web Design, également appelé ress (réactif avec les composants côté serveur) est une approche alternative où le serveur détecte la classe de périphérique (par exemple mobile) et fournit la mise en page optimisée à partir d'un ensemble unique d'URL et de code. Plutôt que le client de l'utilisateur d'avoir à charger tous les html, le serveur peut détecter et sélectionner uniquement les scripts, le balisage et les feuilles de style qui sont nécessaires pour le périphérique. La propriété flexible de la conception réactive manipule la mise à l'échelle des images et d'autres éléments de conception pour s'assurer que tout semble bon (par rapport à l'exigence adaptative des configurations de résolution multiple).

Par exemple, un site ecommerce peut souhaiter servir une expérience de genre App avec les principaux contrôles de navigation apparaissant épinglés au bas de la page que l'utilisateur fait défiler vers le haut et vers le bas, vs la disposition du Bureau de travers l'en-tête supérieur.

Les inconvénients de HRWD sont la complexité, qui peut être au-dessus et au-delà de ce que votre solution exige et ce que votre équipe de développement peut fournir, et le coût. En tant que solution émergente, elle ne remplit pas encore toutes les lacunes laissées par les solutions adaptées et adaptatives.

Lequel choisir?

Il n'y a pas de méthode de coupe et de séchage à suivre. Votre choix dépendra de votre budget, des ressources internes, des objectifs de l'expérience et des compromis entre les avantages et les inconvénients de chacun.

Cependant, réactif, adaptatif et hybride sont tous plus souhaitables que les sites autonomes m. dot pour une échelle plus efficace et la maintenance.

Linda Bustos

Linda Bustos

Directrice de la recherche en e-commerce Elastic Path