Share
8 Faces est un magazine de 88 pages, publié tous les deux ans et publié indépendamment. Il est composé d'entretiens avec huit grands designers des domaines de l'impression, du Web, de l'illustration et de la composition. Chaque entretien est vaguement basé sur la question "si vous pouviez utiliser seulement huit polices de caractères, laquelle choisiriez-vous?"
La page d'accueil originale de 8 Faces conçue par Kyle Meyer 8 Faces a été lancé en 2010 par Elliot Jay Stocks - un concepteur de sites Web basé au Royaume-Uni et auto-confessé. Depuis lors, il a connu une croissance constante et est devenu une entreprise en soi avec une liste croissante de contributeurs et une communauté Tumblr très active..
Le numéro un a été vendu en moins d'une heure et les versions ultérieures se sont également bien comportées. La gamme de produits 8 Faces a également été élargie et comprend désormais une gamme d’affiches en édition limitée et une fonctionnalité "lire en ligne" qui sera bientôt disponible..
À la mi-2012, Elliot a confié à Paravel, Inc. la refonte de l'expérience en ligne des 8 visages. Composé de Trent Walton, Dave Rupert et Reagan Ray, Paravel s'est forgé une solide réputation en tant que sites Web créatifs, dynamiques et réactifs, comprenant les conférences DO et l'un des sites les plus visités sur Internet, microsoft.com..
Elliot a expliqué pourquoi il avait choisi Paravel:
J'aurais adoré concevoir le site moi-même, mais je savais que le temps ne le permettait pas. J'ai donc choisi Paravel pour ses yeux typographiques perspicaces et sa vaste expérience de la conception Web réactive. Ils m'ont aussi très gentiment autorisé à travailler avec Je pouvais quand même incorporer certaines de mes sensibilités de conception dans le mélange.
Parallèlement au lancement du processus de refonte, Elliot a également pris la décision de passer d'un système de commerce électronique sur mesure à Shopify, une plate-forme hébergée reposant sur un système de modèles simple à utiliser et adapté aux concepteurs..
Shopify était un choix logique, car la boutique en ligne de Viewport Industries (la société basée sur de petits projets que nous exploitons ensemble) utilise la plate-forme depuis plus d'un an et vend des produits physiques et numériques tels que Insites: The Book..
Les travaux sur le projet ont commencé fin 2012 et le premier message de Basecamp a été posté le 12 octobre. Les idées initiales ont été littéralement dessinées à la main et très lâches comme vous pouvez le voir sur l'image ci-dessous.
Une première esquisse pour partager des idées, beaucoup d’entre elles ont été partagées dans le projet Basecamp Cette approche "rapide et sale" a permis de prendre un certain nombre de décisions initiales clés avant que les pixels ne soient poussés. Celles-ci comprenaient le choix des polices et le choix d’une navigation sans onglets pour les petits écrans. Comme l'explique Trent:
Parce qu’il s’agissait d’Elliot, Reagan et moi n’avions pas besoin de présenter des PSD au pixel près. Il nous a fait confiance et une fois que nous avons dépassé les concepts de base et les explorations de la mise en page, nous avons transféré les choses au navigateur. Pendant que Dave et moi étions en train de coder, nous repérions régulièrement des points délicats dans la conception sur des largeurs / points d'arrêt. Nous effectuions des répétitions itératives dans le navigateur et dans Photoshop - quel que soit l'outil qui fonctionnait le mieux à l'époque. Il n’ya pas de chemin clair ni de méthode pour la folie, mais j’aime bien ça. Vous avez juste besoin de bouger, de pousser et d'écraser jusqu'à ce que les problèmes soient résolus.
Lorsque la phase de conception est passée du dessin au code, Paravel a commencé à partager des idées de mise en page et des conceptions de page via un simple site de mise en scène géré par PHP et configuré sur Heroku..
Tandis que Paravel utilisait Git dans son flux de travail quotidien, et compte tenu de l'intégration entre Git et Heroku, cela était parfaitement logique. Les itérations pourraient être poussées vers GitHub et immédiatement appliquées au site de transfert. Comme toutes les parties étaient séparées géographiquement, cela rendait les choses très faciles. Comme l'explique Trent, cette approche convient bien à Paravel:
Nous essayons de nous en tenir à notre spécialité, qui va de la planification à la conception et au code frontal. Nous aimons faire tout ce qui est en notre pouvoir pour rendre la mise en œuvre aussi simple que possible pour les clients. Par conséquent, nous masquons les pages de manière à faciliter le transfert..
Ce processus a également permis de tester plusieurs périphériques. Contrairement au site original 8 Faces, construit en 2010 avec une largeur fixe, la nouvelle version devait être totalement réactive. Les itérations ont été discutées sur Basecamp, les modifications apportées, puis renvoyées sur le site intermédiaire pour les tests. Cela dit, le projet a toujours eu un processus lâche, commente Trent:
Avec Elliot, nous n’avons pas vraiment participé à des rondes d’itérations formelles. Nous avons probablement des commandes Github qui pourraient montrer l’évolution, mais cette partie du processus a été délicieusement négligée et n’a que peu d’importance pour l’archivage..
En fait, après avoir examiné les messages de Basecamp, il n’ya que huit threads et 84 commentaires pour l’ensemble du processus, ce qui inclut l’intégration à Shopify et les ajustements post-lancement..
Conception et mise en page des premières pages d'archives de magazines 
La page d'accueil prend forme. Une grande partie de cette mise en page est visible dans le site lancé. Naturellement, étant donné le sujet traité, les grilles étaient à l’avant-garde du processus de conception. Encore une fois, en créant de simples pages sur le site de préparation, Paravel a pu partager facilement des choix de grilles, de gouttières, de points d'arrêt et de typographie..
Un bon exemple des différentes options de mise en page est à la page à propos.
La page à propos montre beaucoup de fractionnements de colonnes au travail Les dispositions possibles dans la grille finale sont les suivantes:
FF Unit Slab est utilisé dans le magazine et a été choisi comme police pour le nouveau site, en plus de Trent:
Le magazine fait bon usage de FF Unit Slab de Christian Schwartz, Kris Sowersby et Erik Spiekermann, et nous avons fait de même avec le site. J'aime toute la famille Super Unit. Une section de lecture en ligne est à venir, et Unit y brille vraiment. J'ai hâte que les gens le voient.
Les polices sont servies via TypeKit et les solutions de remplacement sont relativement simples:
body font: 100% / 1.5 "ff-unit-slab-web", "Georgia", "Times New Roman", empattement; poids de la police: 300; couleur: # 666666;
Comme Trent l'a expliqué plus tôt, le fichier CSS contient un certain nombre de points d'arrêt, chacun correspondant à des scénarios différents. Certaines sont des modifications mineures pour le type tandis que d'autres traitent de changements de mise en page à grande échelle. Construit en utilisant une approche "mobile first", les points d'arrêt sont les suivants:
@media (largeur minimale: 700px) @media (largeur minimale: 850px) @media (largeur minimale: 1100px) @media (largeur minimale: 1400px) @media (largeur minimale: 1680px)
Une astuce astucieuse consiste à utiliser des requêtes de support pour redimensionner la taille de la police. Comme la taille de police initiale du corps est définie sur 100% avec une hauteur de ligne de 1,5, toutes les réinitialisations ultérieures agrandissent à la fois la hauteur de la police et celle des lignes, ce qui permet une transition en douceur entre les tailles d'écran..
Bien que JavaScript ne soit pas beaucoup utilisé sur le nouveau site 8 Faces, il est utilisé de manière efficace sur la page d'accueil. L'objectif principal du site étant l'affichage du magazine imprimé, il fallait trouver un moyen de mettre efficacement en valeur les couvertures et les pages intérieures. Ceci a été réalisé avec le plugin jQuery "Kinetic".
Le plugin permet au visiteur de faire glisser la grande image du héros d'un côté à l'autre et d'afficher les photos du dernier numéro à leur époque. En fin de compte, cette image est contrôlée via la page de paramètres de thème Shopify et permet à Elliot de la mettre à jour facilement sans qu'il soit nécessaire de modifier les modèles Shopify manuellement..
Paravel a achevé ses travaux vers la fin du mois de février 2013. À ce moment-là, Elliot et moi avions pris en charge le processus et commencé à transférer le projet du site de planification PHP vers Shopify. Shopify utilise le moteur de modélisation Liquid pour extraire les données du magasin dans des modèles de thème. En utilisant des sorties simples et des constructions logiques, il est possible de contrôler le flux de données tout en conservant la conception créée par Paravel.
8 Faces est en bonne compagnie. Plus de 60 000 magasins utilisent désormais Shopify, y compris un certain nombre de grandes marques Web, dont United Pixel Workers, A Book Apart et Tattly. En passant, de nombreux concepteurs Web tirent des revenus considérables de leur utilisation de Shopify..
Si vous n'avez pas encore eu l'occasion de vous familiariser avec le programme gratuit Shopify Experts, cela vaut le coup d'oeil. Au cours des 18 derniers mois, le programme a généré 18 millions de dollars de contrats - matière à réflexion!
L’écran d’administration de Shopify permet d’accéder à tous les modèles Grâce au site de mise en scène bien présenté et commenté, le processus initial de transfert du code HTML, CSS et JavaScript vers le thème Shopify n’a duré que quelques heures. le header.php et footer.php constitue la base du fichier de mise en page principal de Shopify thème.liquide et diverses autres pages PHP mappées sur d'autres modèles Shopify de base tels que page.liquid et collection.liquid.
Les progrès ont été partagés via un magasin de développement - un site de test Shopify complet et protégé par mot de passe. Cela a facilité le partage des progrès grâce à l'ajout de photographies de produits, de descriptions et de prix détaillés..
La plupart des magasins ont un flux distinct. Par exemple:
Shopify prend très bien en compte ce flux en utilisant des concepts tels que les collections et les produits. En fait, chacun de ces éléments est directement mappé sur deux modèles principaux., collection.liquid et produit.liquide. Pour référence une collection est Shopify est un groupe logique de produits - dans ce cas, les six numéros du magazine 8 Faces.
Cependant, étant donné qu’il n’ya actuellement que six problèmes, Elliot a décidé qu’une page de détail distincte pour chaque problème était un excédent par rapport aux besoins. Pour obtenir ce flux, il a fallu repenser subtilement et des modifications ont été apportées à la collection.liquid modèle.
% if collection.handle == 'magazines'% % include 'collection-magazines'% % elsif collection.handle == 'affiches'% % include 'collection-posters'% % modèle elsif == 'list-collections'% % include 'liste-collection'% % else% % include 'collection-default'% % endif%
En utilisant le principal collection.liquid en tant que contrôleur logique, nous pouvons insérer un extrait spécifique, un petit morceau de code réutilisable, en fonction de la collection actuellement visualisée. Par conséquent, lorsque nous demandons à voir la collection "magazines", Shopify insère automatiquement le collection-magazines.liquid fragment.
% pour le produit dans collection.products% % endfor%
product.title
product.description % pour la variante dans product.variants% % si variante.available == true% % endif% % endfor%
Il est habituel de passer en boucle sur chaque produit d'une collection, en utilisant le code Liquid, et de générer un lien vers la page de détail du produit, où l'utilisateur peut ensuite ajouter le produit à son panier..
Pour pouvoir ajouter le produit à partir de la page de collection, un forme a été utilisé à la place d'un lien vers la page de détail du produit. Comme vous le verrez dans le code ci-dessus, le formulaire devient unique en raison du champ de saisie masqué "id" auquel est attribuée la valeur du produit. variant.id.
Comme de nombreux produits ont des options, par exemple la couleur et la taille, chaque combinaison a un variant.id - même s'il n'y a qu'une seule version. Il est à noter que les pages de détails du produit pour le magazine ont été conçues et sont présentes. S'ils sont liés par inadvertance à, ou sont consultés par quelqu'un qui travaille correctement sur l'URL, rien ne semblera cassé.
Étant donné que la nouvelle version 8 Faces est conçue pour les appareils de toutes tailles, le "problème d’image sensible" doit être résolu. En fin de compte, Paravel a recommandé l’utilisation du polyfill picturefill.js de Scott Jehl. Trent explique:
Nous devions absolument réduire la taille des fichiers pour les images, en particulier avec la page d'accueil. Nous avons utilisé picturefill.js plusieurs fois dans le passé, y compris une version adaptée à la page d'accueil Microsoft..
Si vous n'êtes pas familier avec picturefill.js, il se décrit comme "une approche des images réactives que vous pouvez utiliser aujourd'hui et qui imite l'élément d'image proposé en utilisant des étendues, pour des raisons de sécurité". Cela fonctionne très bien et, une fois compressé, pèse moins de 0,5 Ko. Pour que picturefill.js fonctionne, vous devez définir un certain nombre de chemins d’image différents pour chaque "point d'arrêt". Voici le balisage rendu à partir de la page d'accueil de 8 Faces:
En créant trois "paramètres de thème" dans le thème Shopify 8 Faces, un administrateur peut télécharger des images différentes pour chacun des trois points d'arrêt. Une fois téléchargé le index.liquid template utilise Liquid code pour accéder aux images correspondantes:
En outre, une simple vérification vrai / faux est effectuée dans le modèle pour s'assurer que le paramètre de thème "Afficher l'image du héros" est défini. Si ce n'est pas le cas, le balisage est simplement ignoré.
Les paramètres de thème ont également été utilisés pour contrôler le bouton "Acheter le dernier numéro" qui recouvre l'image du héros sur la page d'accueil. Pour éviter de coder de manière irréversible l'id de variante du dernier numéro dans le modèle, trois chaînes de texte sont entrées dans la page de configuration du thème:
En utilisant un panier permalien, nous nous assurons que si le support JavaScript n'est pas présent, l'utilisateur pourra toujours acheter le magazine via le lien URL. Cependant, aller directement à la page de paiement n'est pas le flux idéal, il est préférable que l'utilisateur clique sur un bouton et accède à la page du panier où il peut ajuster les quantités et ajouter d'autres articles à sa commande. Heureusement, ce n'était pas trop difficile à réaliser.
En utilisant la fonction jQuery emballage l'image du héros est enveloppée dans un élément de formulaire. Un champ caché est ensuite ajouté au formulaire qui contient le settings.home_hero_variant_id tiré de nos paramètres de thème. Comme le nom de fichier JavaScript contient le .liquide extension Shopify est capable d'insérer des données à partir des paramètres de thème avant de servir le fichier. Cela nous permet d’insérer le settings.home_hero_variant_id dans notre code JavaScript.
De plus, si et quand cet identifiant est modifié, le code n'aura pas besoin d'être changé - ce qui est pratique. Cette approche a de nombreuses utilisations et ce n’est qu’un exemple simple:
Accentsconagua
/ * Bouton d’achat sur la page d’accueil pour soumettre le formulaire * / $ ('. Héros-unité'). Wrap (' '); $ ('') .attr (type:' hidden ', id:' id ', nom:' id ', valeur:' settings.home_hero_variant_id '). appendTo (' # forme_héroïne '); $ ('a.blackflag'). click (fonction (e) $ ("# formulaire-hero"). submit (); e.preventDefault ();); Enfin, nous détournons la fonctionnalité par défaut de notre ancre et soumettons le formulaire lorsque vous cliquez dessus..
Le site a été lancé avec succès le 1er mai 2013 avec la publication du numéro six du magazine..
La conception de la page d'accueil relancée La phase 1 étant terminée, le développement se poursuit et, plus tard, en 2012, la section "Lecture en ligne" sera ajoutée au site. Chaque numéro sera disponible pour la lecture via le navigateur..
Dans l'ensemble, tous les participants au projet étaient très satisfaits des résultats, comme le fait remarquer Elliot:
Les gars de Paravel sont des professionnels tout en étant très amusants à travailler et le produit fini est exceptionnel. Je n'avais aucune idée de ce qu'ils produiraient quand je les aurais commandés, mais je savais que ce serait quelque chose de formidable.
Merci à Trent Walton et Elliot Jay Stocks pour leur aide concernant cet article.
