Conception Web réactive

Le schéma ci-dessous illustre l'approche de conception de sites Web adaptatifs pour le magasin type Aurora sur différents appareils :

où la vitrine s'affiche pour les clients en fonction de l'appareil ou de la résolution de l'écran qu'ils utilisent, comme un ordinateur de bureau, une tablette ou un appareil mobile, ou en fonction de la taille de la fenêtre du navigateur Web.

Avantages de l'utilisation de la conception de sites Web adaptatifs

Les éléments de présentation des pages de magasin sont simplifiés pour élargir la gamme d'appareils compatibles et garantir cohérence et performances sur un large éventail de plateformes. La simplification des pages du magasin permet d'obtenir une vitrine solide dont les fonctions sont comparables sur les différents appareils et les différentes tailles d'écran. En d'autres termes, les pages de magasin adaptatives fournissent une expérience utilisateur uniforme quel que soit l'appareil pour ce qui est de la consultation de magasins types optimisés pour les ordinateurs de bureau sur une tablette ou des appareils mobiles ou de la gestion de plusieurs archives de magasin HCL Commerce.

Les pages de magasin sont conçues sans taille d'écran ni plateforme de périphérique spécifique de base. A la place, les agencements et les flux de site sont conçus pour fonctionner sur tous les périphériques fournissant des capacités de navigation Web HTML. Ils sont optimisés pour les orientations paysage et portrait. Ils s'adaptent facilement à la taille des appareils, sans pincement, défilement, agrandissement ou autres gestes tactiles nécessaires sur les appareils mobiles. Les fonctions de widgets Dojo, HTML 5 et CSS 3 permettent des interactions fluides avec l'interface utilisateur d'une vitrine sur tous les appareils.

Le déploiement de magasins types adaptatifs permettent de réduire les coûts, car la prise en charge des appareils futurs est intégrée. La vitrine fonctionne toujours de la manière escomptée, même sur les nouveaux appareils commercialisés.

Conception de sites Web adaptatifs et HCL Commerce

Conception de l'expérience utilisateur

La boutique en ligne gère la structure du magasin type Aurora et met visuellement l'accent sur la grille fluide sous-jacente, par exemple en augmentant l'espacement dans l'interface utilisateur autour des zones acceptant le contact. Des éléments d'interface utilisateur fonctionnels agrandis et des conceptions de grille plus transparentes et simplifiées permettent de séparer le contenu quelle que soit la taille de l'écran ou quel que soit le type de périphérique.

Toutes les fonctions de page sont disponibles sans qu'il ne soit nécessaire d'utiliser des zones de page masquées ou difficiles à trouver, comme les états de survol. En d'autres termes, toutes les interactions et fonctions sont accessibles dans chaque zone de page visible. Les états de survol sont utilisés comme représentation visuelle complémentaire ou décorative, au lieu d'être utilisés pour accéder à des fonctions de site.

Avec les appels Asynchronous JavaScript and XML (AJAX), la fréquence de chargement et de rechargement de pages entières est réduite.

magasin type Aurora

Les pages de consultation du catalogue dans le magasin type Aurora sont adaptatives par leur conception afin d'être accessibles sur différents canaux et différentes plateformes. par exemple sur un ordinateur de bureau, une tablette ou un périphérique mobile. Elles suivent les meilleures pratiques de développement du magasin type avec HCL Commerce et peuvent servir de base pour la mise en oeuvre de vitrines adaptatives pour différentes plateformes.

Un fichier d'archivage de magasin (SAR) unique couvre les boutiques en ligne pour tous les périphériques ; il n'est donc pas nécessaire de déployer séparément plusieurs fichiers SAR pour les magasins pour ordinateur de bureau, tablette et périphérique mobile. En d'autres termes, le fichier Aurora.sar permet de déployer le magasin type Aurora réactif pour tous les périphériques. Grâce au fichier SAR unique, le développement et les tests sont moins complexes et plus rapides que pour des sites spécifiques à un appareil discrets.

Les magasins types réactifs fournissent une page d'accueil dynamique et attirante qui propose un contenu marketing ciblé et permet de parcourir les catalogues facilement.

Les pages de magasin et les éléments d'interface utilisateur sont tous conçus pour être utilisables quel que soit le périphérique. Par exemple, tous les contrôles d'interaction fournissent une taille minimale de 40 x 40 pixels CSS, ce qui génère plus de zones acceptant le contact dans la vitrine.

La navigation qui s'appuie sur la fonction de HCL Commerce Search with Solr permet aux clients de trouver rapidement ce qu'ils cherchent. Des associations de termes de recherche, des règles de recherche et des pages d'arrivée permettent d'afficher un contenu ciblé associé à une expérience utilisateur riche. Les services géodépendants permettent aux clients de rechercher les magasins les plus proches, quel que soit le périphérique.

Délimitations d'une plage de pages

Les pages de conception de sites Web adaptatifs sont redimensionnées dynamiquement et affichent un contenu différent sur les différents appareils utilisés pour accéder au magasin. Par défaut, le magasin type Aurora comporte trois délimitations de plage de pages pour prendre en compte les ordinateurs de bureau, les tablettes et les appareils mobiles.

Contrôle total du contenu et de la présentation des pages par les utilisateurs professionnels

L'outil de composition Commerce permet aux utilisateurs professionnels de créer des pages et des présentations pour le magasin directement dans le Centre de gestion, sans avoir à faire appel à des informaticiens.

Des modèles de page de conception de sites Web adaptatifs enrichis, orientés commerce de détail, accessibles, localisés et tactiles par défaut. Les modèles de pages de conception de sites Web adaptatifs enrichis, orientés commerce de détail, permettent d'obtenir un flux de travail de bout en bout unique pour la conception, l'assemblage et les tests des pages de conception de sites Web adaptatifs.

Pour plus d'informations, voir Commerce Composer tool.

Flux de sites adaptatifs

Les flux de sites adaptatifs affichent toutes les pages du magasin adaptatives dans la vitrine. Les rubriques relatives au flux du site contiennent des captures d'écran à chaque délimitation de plage et décrivent la façon dont les emplacements de la maquette fonctionnelle sont remplis par défaut. Pour comprendre quelles sont les pages du magasin qui sont adaptatives, consultez les schémas de flux du site :présentation des flux de site.

Prise en charge des périphériques

Les pages réactives du magasin type prennent en charge les ordinateurs de bureau, les tablettes et les périphériques mobiles par défaut.