Share
Si vous n'avez jamais entendu parler de Shopify auparavant, vous avez peut-être élu domicile sous un rocher. Shopify est l’un des services les plus populaires pour la création de solutions de commerce électronique en ligne et vient de repenser son site Web..
Aujourd'hui, nous allons jeter un coup d'œil sur les détails les plus fins de la refonte et parler un peu de la manière dont la refonte a été réalisée. Plongeons dedans!
Le passage à la réactivité est la principale modification apportée par Shopify dans cette refonte, et le niveau de détail de chaque point d'arrêt ne laisse aucun utilisateur à la traîne..
Shopify est un excellent exemple de prise de décision de conception basée sur la taille de l'écran. Jetons un coup d'oeil à certains de ces exemples, en commençant par la page d'accueil.
Pendant la durée de cet article, nous utiliserons le terme "mobile" en référence au plus petit point d'arrêt, "tablette" pour faire référence à la taille du point d'arrêt suivant et "desktop" pour faire référence aux points d'arrêt supérieurs. Il n’ya pas que 3 points d’arrêt de base dans cette conception, mais ces termes nous fournissent un cadre pour réfléchir aux périphériques..
À la taille du mobile, nous voyons un appel clair à l'action, Commencer, qui est répété deux fois. Nous voyons également une version minimale du logo Shopify, un slogan centré et un bloc de couleur vert empilé verticalement avec une fonction superposée d'un client Shopify. Un bouton de menu de style hamburger est placé en haut à gauche de l'en-tête.
Dès que nous nous approchons du point d'arrêt de la tablette, nous pouvons constater que la préférence s'éloigne de l'empilement vertical et que, par conséquent, le contenu est placé horizontalement. Le niveau de détail, ou «résolution du contenu», augmente; nous voyons un logo plus détaillé (toujours centré), un texte plus grand et l'image du client Shopify plus détaillée.
Le plus intéressant est peut-être que le bloc vert passe de la pile verticale à un alignement horizontal, flottant du côté droit de l’entête. Nous voyons aussi un S'identifier bouton en regard de l'appel principal à l'action en haut de l'en-tête. À la taille de la tablette, nous voyons toujours le menu de style hamburger.
Le niveau de détail le plus élevé dans l'en-tête se trouve dans la version de bureau de l'en-tête. Le logo s'aligne à gauche et le menu hamburger est remplacé par un menu explicite. Nous conservons l'alignement horizontal indiqué dans le point d'arrêt de la tablette. Sur le côté gauche, le Commencer L’appel à l’action est converti en un bouton de soumission de formulaire, avec un champ de texte permettant à l’utilisateur de saisir son adresse électronique. En dessous, nous voyons un tout nouveau contenu, "approuvé par plus de 100 000 propriétaires de magasins".
L'en-tête est une étude de cas dans la prise de décision pour le mobile. Quels sont les éléments les plus importants qui ne devraient jamais être supprimés? Quels éléments sont appropriés pour chaque point d'arrêt et les périphériques qui entrent généralement dans ce point d'arrêt? Shopify a choisi, par exemple, d'utiliser l'image d'un seul client Shopify à tous les points d'arrêt, mais n'affiche que le message quantitatif «Approuvé par plus de 100 000 * commerçants» sur les ordinateurs de bureau. Ces types de décisions sont de niveau supérieur et sont plus que esthétiques.
*Remarque: depuis que nous écrivons cet article, Shopify a mis à jour ce nombre à 120 000.
Accentsconagua
Il convient de noter que Shopify utilise de nombreuses techniques réactives compatibles avec les normes Web, telles que l’utilisation du
le image de fond, et chargement JavaScript non sémantique. Cela permet aux appareils dotés d'écrans haute résolution de demander des images de résolution supérieure. Notez que vous ne trouverez pas d'images pixélisées dans les pages remaniées de Shopify..
Shopify utilise également des données-uri codées en base 64 pour définir certaines images tout au long de la conception, y compris la légère texture sur le bloc vert dans l'en-tête. Cela évite une requête HTTP supplémentaire inutile et est particulièrement efficace pour les images d'interface utilisateur de détail plus petit qui ne peuvent pas être converties au format SVG, ainsi que pour les motifs répétés.
En parlant de SVG, le logo Shopify utilise également un data-uri codé en base 64 pour définir une image SVG. Cela fonctionne de la même manière que les images précédentes encodées en uri.
La navigation mobile principale repose sur une barre latérale hors écran masquée qui apparaît lorsque l'utilisateur clique ou touche le menu hamburger..
L'animation est réalisée en utilisant transformer et translateX, en combinaison avec la règle de transition suivante:
transition: transformer 0,6 s de Bézier cube (0,66, 0, 0,41, 1);
Le tiroir lui-même est réglé sur position: fixe, avec un débordement-y règle réglée à faire défiler. Lorsque le tiroir est ouvert, l’élément de corps reçoit une js-tiroir-ouvert classe, qui définit la hauteur à 100% et le dépassement à masqué. Cela empêche l'utilisateur de faire défiler la page de contenu lorsque le navigateur est ouvert.
Une navigation secondaire est présente sur certaines des pages internes, qui est simplement une page stylisée. élément. Voici le CSS utilisé pour styliser le élément:
.nav__mobile__select width: 100%; fond transparent ("data: image / svg + xml") bordure: aucune; -webkit-apparence: aucun; -moz-apparence: aucune; -ms-apparence: aucune; -o-apparence: aucune; apparence: aucune; couleur: # 767676; Encore une fois, nous voyons la technique data-uri utilisée pour la flèche vers le bas sur le côté droit de la sélection, ainsi que la apparence règle, qui définit les styles de navigateur de base.
Le même menu principal est utilisé sous les points d'arrêt tablette et mobile, mais le menu secondaire est utilisé uniquement sous le point d'arrêt mobile. Au niveau du point d'arrêt du bureau, les menus sont affichés explicitement, le menu secondaire au niveau de la page apparaissant en haut de la page. La barre de navigation utilise elle-même Headroom, un plug-in JavaScript permettant de contrôler l’affichage d’une barre de navigation adhésive en fonction de différentes actions. Par exemple, sur les pages internes, la barre de navigation principale est masquée lorsque l'utilisateur fait défiler l'écran vers le bas, de sorte que seul le navigateur secondaire est visible. Dès que l'utilisateur commence à revenir en arrière, la barre de navigation principale réapparaît..
Faites défiler, parti
Faites défiler, voilàEn parlant de menus coulissants, Shopify a choisi une stratégie intéressante pour répondre aux clics sur les boutons Call-to-Action: un tiroir coulissant provenant du côté droit de l'écran avec un menu. Ce tiroir apparaît sur la tablette et sur le mobile; sur le bureau, les entrées de formulaire sont placées au-dessus d'un fond noir semi-transparent en plein écran, de style modal.
La page «Vendre en ligne» fournit quelques considérations particulièrement intéressantes pour des considérations réactives..
L'image d'en-tête est la première considération de réponse sensible, car elle change de taille à chaque point d'arrêt. Mais un changement plus subtil se produit au point d'arrêt du bureau. Au lieu de ne fournir qu'un Créez votre magasin bouton, un formulaire avec trois champs apparaît, invitant les utilisateurs à s'inscrire et à créer un magasin dans une soumission de formulaire unique. Cela suit le même modèle de l'appel à l'action de la page d'accueil.
Un autre module de contenu répété à plusieurs endroits apparaît sur la page Vendre en ligne. Au point de rupture du mobile, le module est essentiellement un accordéon de sections de contenu, chacune avec un en-tête et un + bouton qui révèle la section. Lorsqu'il est révélé, l'utilisateur peut cliquer ou toucher un - bouton pour cacher cette section.
Au niveau des points d'arrêt de la tablette et du bureau, toutefois, le module passe à une navigation par boutons horizontale plus détaillée..
Chaque bouton de la navigation est associé à un bloc de contenu. La copie du bouton passe de titres plus longs et plus descriptifs à des mots isolés accompagnés d'une icône. Les sections de contenu elles-mêmes comportent des images plus grandes associées au titre de la section..
Ce même modèle apparaît deux fois sur la page "Vendre en ligne". L'accordéon est également réutilisé ailleurs, y compris au point d'arrêt mobile de la page Caractéristiques. Une différence intéressante, cependant, est que le module accordéon n'est pas toujours accompagné des mêmes sections de bouton décrites ci-dessus. Dans le cas de la page Fonctionnalités, nous voyons une navigation de contenu fixe sur le côté gauche, avec des sections de contenu défilables et toujours visibles à droite..
Dans les deux sections «Emmenez votre magasin où que vous alliez» et à la fin ci-dessous «Nous sommes là pour vous aider, 24 heures sur 24, 7 jours sur 7», les images sont choisies à des points de rupture différents. Dans la section "Emmenez votre magasin où que vous alliez", l'image d'un iPhone apparaît uniquement au point d'arrêt de la tablette et au-dessus. Dans la section «24h / 24, 7j / 7», une image de représentants du service clientèle montre sept personnes à des points d'arrêt pour mobiles et tablettes, mais passe à treize personnes à un point d'arrêt pour ordinateurs de bureau. Ceci est accompli en utilisant le
Notez le spécifique IE9 élément; cela permet à IE9 d’utiliser le
Au point d'arrêt mobile, les témoignages apparaissent comme des éléments uniques dans un carrousel.
À la taille de la tablette et plus grand, ces diapositives apparaissent parallèlement les unes aux autres.
La raison pour laquelle Shopify a choisi d’utiliser un carrousel au lieu d’un arrangement vertical des éléments n’est pas tout à fait claire, mais des hypothèses éclairées pourraient être émises. Par exemple, Shopify n'a peut-être pas voulu sacrifier l'espace vertical nécessaire pour empiler les témoignages afin que l'utilisateur puisse arriver au dernier appel à l'action plus rapidement. Ou cela pourrait simplement être un choix esthétique.
La page de tarification peut être considérée comme l'une des pages les plus importantes d'une page de marketing de services donnée. Pour cette raison, il est presque certain que les décisions de Shopify sur cette page ont été minutieusement réfléchies. Regardons comment le contenu change au cours des différents points d'arrêt.
L'utilisateur est invité à choisir un plan qui convient à son budget et se voit proposer trois options: vendre en ligne, vendre en magasin ou les deux..
Choisir l'une de ces options modifie les modules de tarification en fonction de la situation particulière que vous avez choisie. Ce changement s'accompagne également d'un changement de couleur. Shopify a pris une décision de conception subtile consistant à utiliser le jaune pour «en ligne», le bleu pour «en magasin» et le vert pour la combinaison des deux; cela est particulièrement intelligent parce que la combinaison de bleu et jaune produit effectivement le vert.
Une fois que l'utilisateur a choisi son point de vente, il se voit présenter des blocs disposés verticalement qui indiquent très clairement le prix et le nom du plan. Chaque bloc fournit également un menu déroulant «Détails du plan» pour afficher les informations détaillées du plan, telles que le taux et les caractéristiques..
Les FAQ apparaissent en bas dans le module accordéon discuté précédemment. Les en-têtes d'accordéon font référence aux types de questions et chaque section contient plusieurs questions. Cela diffère de l'approche commune consistant à créer un accordéon pour chaque question.
Au point d'arrêt de la tablette, le sélecteur de point de vente et les blocs de prix passent en présentation horizontale..
Les détails sont maintenant affichés sans qu'il soit nécessaire de cliquer sur un menu déroulant à l'intérieur de chaque bloc de contenu. Le sélecteur de point de vente bascule également d'un texte à un texte accompagné d'une icône. Le plan «Professionnel» est légèrement décalé verticalement par rapport aux deux autres plans et est désigné comme étant le plan «le plus populaire». Aux points d'arrêt de la tablette et du mobile, un plan de démarrage est conçu pour attirer moins d'attention, et n'inclut pas la Essayez Shopify gratuitement appel à l'action. Fait intéressant, le même manque d’attention est appliqué au plan Shopify Plus, qui est destiné aux plans à volume élevé au niveau de l’entreprise..
Les FAQ ne vivent plus dans un accordéon, mais apparaissent dans une mise en page à deux colonnes.
La seule modification liée à la présentation du contenu à la taille du bureau est que les plans moins ciblés sont placés dans une quatrième colonne à côté des trois plans principaux..
Les exemples de thèmes Shopify sont finalement le meilleur moyen de communiquer la flexibilité et les cas d'utilisation de Shopify. Ces pages ont utilisé quelques excellents exemples d’interactivité réactive que nous aimerions souligner..
Les fenêtres modales sur mobile souffrent souvent d'un manque de considération de la conception intentionnelle pour les utilisateurs mobiles. Ce n'est pas le cas pour les exemples «modaux» de Shopify. Centré sur les images presque en plein écran, le modal fournit des boutons de flèche de navigation et des métadonnées ci-dessous..
En passant à une disposition de la tablette, les flèches et les métadonnées flottent à droite de l'image. La transition entre chaque modal utilise un échelle et se faner changement d'attribut. La transition suggère un effet de zoom avant et arrière sur l'index des images. À tout moment, lorsque le modal est ouvert, un appel à l’action et un × bouton sont présents, fournissant des chemins de sortie appropriés pour l'utilisateur.
La grille elle-même fournit des filtres contextuels permettant à l'utilisateur de naviguer sur différents types de thèmes sur une page. L'effet de décalage d'échelle et d'opacité est également repris ici.
La stratégie de Shopify pour la navigation de pied de page révèle une autre situation dans laquelle la résolution de contenu est utilisée. Au point d'arrêt mobile, deux colonnes sont affichées:
sur la tablette et sur des points d'arrêt plus grands, deux nouvelles sections sont introduites, offrant un accès plus direct aux pages de détails intérieurs et aux pages d'autorité (pages basées sur le contenu qui établissent l'autorité sur un sujet spécifique).
En fin de compte, cela montre que Shopify a défini une stratégie de résolution de contenu: quel contenu doit être disponible sur tout points d'arrêt, sur tout périphériques, par rapport à quel contenu ne devrait être disponible que si le contenu à l'écran est celui d'un ordinateur de bureau ou d'une tablette? Ces types de questions conduisent à une meilleure stratégie globale de contenu et devraient sans doute faire partie de tous les efforts de conception réactifs..
Shopify a réussi une refonte stupéfiante, avec une grande intégrité dans le développement de son contenu et ses considérations réactives..
En outre, ils ont utilisé certaines des meilleures techniques proposées par les navigateurs modernes. Même s’il existe encore dans l’écosystème Shopify des pages qui n’ont pas encore adopté les nouvelles techniques et le nouveau système de conception, les pages de site et de marketing primaires offrent un modèle de conception réactif solide et unique pour les concepteurs Web et les développeurs frontaux de.
