Un design web réactif, de par sa nature, passe inaperçu pour ceux qui consomment du contenu en ligne. Donc, quand quelqu'un demande un nouveau site Web, il est souvent complètement inconscient du concept, même s'il en fait l'expérience quotidiennement. Et pourtant, la conception de sites Web réactifs est désormais reconnue comme une pratique courante dans l’industrie.
La création de sites Web réactifs a modifié nos processus, de la création de maquettes de pages complètes à la création de bibliothèques de composants et de mises en page réutilisables.
la mise en page est axée sur le contenu et les styles sont axés sur la marque
Récemment, un client existant nous a demandé de repenser son site Web de manière réactive. Nous avions déjà travaillé avec eux en utilisant un processus de chute d'eau rigide. Passant à un workflow agile, nous avons pu adopter le changement à tout moment du projet.
Tout au long du processus, nous avons adhéré à la philosophie selon laquelle la mise en page est axée sur le contenu et les styles sont axés sur la marque.
Les documents de spécifications fonctionnent parfaitement pour répertorier toutes les fonctionnalités requises pour un site. Mais est-ce vraiment ce que le client a besoin? Il est très difficile de visualiser ces fonctionnalités en place. Ainsi, les documents de spécification se transforment souvent en listes de souhaits gonflées. Cela n'aide pas le client, les concepteurs ou le site Web final.
Au lieu de documents de spécifications, nous avons opté pour l'utilisation de trames. La première étape du projet consistait à créer des images filaires pour chaque page. Cela peut sembler exagéré, mais les images filaires ont conduit à des discussions précoces sur le contenu et les fonctionnalités de chaque page. Nous avons constaté que des fonctionnalités que nous n'avions jamais considérées auparavant ont été ajoutées, tandis que beaucoup ont été supprimées.
Les images filaires nous ont donné une représentation visuelle claire de la manière dont le contenu et les fonctionnalités doivent être priorisés sur chaque page. Ces images filaires devenaient alors un point de référence, remplaçant un document de spécification.
Point à retenir: la production de trames à la place des documents de spécification met l'accent sur les caractéristiques essentielles et l'importance du contenu.
L'audit des trames nous permet de former une liste de tous les composants communs. Sur un seul site, il y aura des dizaines de petites sections sur chaque page qui sont très similaires. Ces composants peuvent être regroupés dans une liste exhaustive qui sera utilisée ultérieurement.
Cette étape présente trois avantages principaux:
Élément clé à retenir: la planification de l'approche du développement initial d'un projet est importante pour créer une base de code facile à gérer.
Les bibliothèques de modèles sont un ensemble d'éléments communs utilisés sur un site Web. En concentrant le développement frontal sur la création de composants qui ne dépendent pas des pages, nous pouvons réduire le temps système et améliorer la cohérence.
En utilisant la liste des composants que nous avons rassemblés au cours de la phase d'audit, nous sommes en mesure de structurer notre Sass en une collection de fichiers gérable.
Nous avons utilisé des bibliothèques de patterns sur quelques projets mais avons toujours eu du mal avec les conventions de nommage, en particulier la structure des dossiers: où placez-vous vos styles pour ce lecteur de musique, dans ses composants ou dans ses partiels?
Auparavant, nous utilisions une terminologie telle que des partiels et des composants pour organiser nos fichiers Sass. Bien que ces conventions semblent être des conventions de nommage parfaitement légitimes, elles sont sujettes à interprétation. Lorsque plusieurs développeurs travaillent sur un projet, laisser l’organisation de la base de code ouverte à l’interprétation conduit à des CSS non organisés.
BEM (Block, Element, Modificateur), nous fournit une convention commune à suivre et crée une compréhension entre les développeurs front-end. L'ancienne méthode laissait aux développeurs individuels le soin de proposer des noms de classes trop complexes pour en tirer un sens. Heureusement, nous avons eu la chance de voir Brad Frost parler de sa bibliothèque de modèles au Conférence initiale à Manchester. Pattern Lab prête la terminologie de la chimie pour décrire les composants qui constituent la bibliothèque. L'utilisation d'atomes, de molécules et d'organismes pour décrire les différences entre les composants d'une page permet d'expliquer le concept aux développeurs novices.
La conception atomique concerne les interfaces utilisateur: http://t.co/eEZSYeK5VF Vous pouvez appliquer la conception atomique à toute interface utilisateur, comme Instagram pic.twitter.com/BrztgtRoGU
- Brad Frost (@brad_frost) 10 juillet 2015
Dans la nature, les atomes sont la plus petite dénomination (à moins de fouiller dans les quarks et les électrons). Dans le développement Web, les atomes sont les éléments les plus fondamentaux du HTML. À toutes fins utiles, ils ne font pas beaucoup par eux-mêmes. Celles-ci incluent des titres, des paragraphes, des entrées, des boutons, des listes ... Vous avez l’idée.
Ce sont la couche suivante. En chimie, les molécules sont composées d'atomes et il en va de même pour la structure des CSS. Les molécules sont des composants sur le site Web qui utilisent des atomes pour les former.
Un bon exemple de molécule est un champ de recherche. Celui-ci contient 3 atomes: une étiquette, une entrée et un bouton. La couche de molécules commence à former certains des éléments que nous pouvons utiliser sur le site Web. Il est important de rendre toutes ces molécules évolutives. Ils devraient être conçus avec l'idée qu'ils pourraient être utilisés n'importe où sur le site. Notre objectif ultime est de rendre le CSS aussi flexible et réutilisable que possible.
Comme son nom l'indique, les organismes sont des groupements de molécules. Certains exemples incluent un en-tête, un pied de page ou une liste de produits.
Si nous prenons l'exemple d'un en-tête, cela inclurait un logo, une recherche et une navigation. Celles-ci ont toutes été créées en tant que molécules et sont combinées pour former un organisme en-tête.
C'est là que l'analogie avec la biochimie prend fin. Comme Brad le dit, «entrez dans un langage plus logique pour les clients et le résultat final» . Les modèles sont la colle d'un site Web. Ceux-ci combinent tous les organismes que nous avons créés dans une mise en page qui pourrait être appliquée à une page sur le site Web.
Un exemple pourrait être une liste de blog. Ce modèle inclut un en-tête, un pied de page, une liste d'éléments de blog et une barre latérale. Les modèles sont généralement structurels et ne contiennent que la mise en page.
La section finale est des pages. C'est là que vous pouvez tester les modèles avec des données réelles. Les pages sont des instances spécifiques d'un modèle. Cette partie est importante car elle nous permet de voir à quel point les atomes, les molécules, les organismes et les gabarits ont réussi.
Il est inévitable que lors de la création du site Web, certains scénarios soient manqués. L'exemple classique est celui des titres longs ou de la prise en charge de différentes devises et langues.
Point à retenir: Les conventions de nommage sont importantes. La superposition de CSS crée une base de code propre à travailler à partir de celle qui est la plus petite possible.
Concevoir des motifs est difficile. Vous ne pouvez pas concevoir un motif isolé, tel qu'un élément d'actualité, et vous attendre à ce qu'il corresponde au reste de la page. La manière dont nous construisons les sites Web et la façon dont nous les concevons diffèrent.
Les conceptions sont susceptibles de changer, peu importe si nous obtenons l'approbation ... L'approbation est devenue une étape non pertinente du processus qui ne fait que mettre la pression des deux côtés
Nous avons utilisé Photoshop pour créer des maquettes de trames avec ces composants stylisés en place. Une fois que nous avons été satisfaits de l'apparence des designs, nous avons décidé d'isoler chaque composant. Cela nous a permis de nous assurer que chaque composant était suffisamment flexible pour fonctionner n'importe où sur le site Web.
Nous étions très conscients de ne pas obtenir d’approbation pour un travail de conception. L'approbation de la conception crée une barrière dans laquelle le concepteur se sent obligé de créer quelque chose qui sera figé. Les conceptions sont susceptibles de changer, que nous obtenions ou non notre approbation. En règle générale, nous sommes heureux de prendre en compte tous les changements à tout moment dans le calendrier du projet. L'approbation est devenue une étape non pertinente du processus qui n'a fait que mettre la pression sur les deux parties au détriment de la relation.
Il est important de savoir quand passer de Photoshop à du code. Cette étape est beaucoup plus précoce que celle à laquelle nous étions habitués pour deux raisons:
Au lieu de passer plus de temps dans Photoshop, nous avons opté pour investir du temps dans le code. Si nous devions perfectionner quoi que ce soit, ce devrait être le code, le bit qui sera réellement utilisé et vu par tous les utilisateurs du site Web. Pour nous, Photoshop était un outil permettant de créer un style de conception utilisable sur le site Web.
Le design est beaucoup plus une question de collaboration entre tous les membres de l'équipe. Les maquettes constituaient toujours une partie très importante du processus, aidant le client à visualiser l'aspect du site. Si nous étions tous satisfaits de la direction générale de la conception, nous le ferions passer au code. Nous avons rarement passé du temps à revenir en arrière et à modifier des documents Photoshop.
Point à retenir: Photoshop est un excellent outil pour créer des concepts de conception. Passer au code dès que possible est important. Parfait dans le code, pas Photoshop.
La beauté de ce flux de travail est qu'il y a tellement d'endroits pour examiner et améliorer le site Web.
Il est important de noter que ce sont des étapes lâches dans notre processus de projet. Si nous avons besoin de quelque chose de nouveau pendant le projet, nous le traiterons généralement comme un composant autonome et modulaire pouvant être intégré au site Web et adopter le thème de conception du site.
Chacune de ces étapes offre un point où nous pouvons examiner notre travail jusqu’à présent. Cela permet également de voir les choses sous un angle différent.
Pendant l'une de ces étapes, nous pouvons constater que certaines pièces ne fonctionnent pas aussi bien que prévu. C'est d'accord. En fait, c'est bien. Cacher tôt la facilité d'utilisation est la clé d'un site Web performant. Revenir en arrière et encadrer ces parties du site Web amélioreront le projet lorsqu'il sera mis en service.
Point à retenir : N'ayez pas peur de revenir au début si quelque chose doit être amélioré. Les récupérer rapidement permettra d'améliorer le projet lorsqu'il sera mis en service.
Nous avons passé des jours à travailler ensemble pour nous assurer que chaque partie du site Web était terminée. Nous avons testé autant de scénarios que possible, garantissant la cohérence de l'expérience de navigation.
Une fois que les données sont sur le site Web, nous sommes en mesure de tester complètement le site Web. Il est souvent trop facile de configurer un projet en direct sans avoir à effectuer des tests complets. Nous pouvons vérifier la vitesse, la facilité de navigation et surtout le flux d’achat.
Tout le monde mentionne Apple pour ses perfectionnistes, mais je suis sûr que ses premières tentatives étaient loin d’être parfaites. Il faut du temps et du dévouement pour apporter ces dernières améliorations afin de nous donner les produits que nous aimons aujourd'hui. Grâce à notre laboratoire d’appareils, qui comprend la plupart des appareils et plates-formes les plus courants, nous avons pu garantir que l’expérience était optimisée sur le plus grand nombre possible de plates-formes et de tailles d’écran les plus récentes.
Apprendre de chaque projet est important pour améliorer continuellement les processus menant à de meilleurs sites Web.
Ce projet a vu la naissance de notre propre bibliothèque de modèles qui encourage la cohérence entre les projets. Lorsque vous travaillez dans une agence, nous pouvons avoir des dizaines de projets en développement simultanément. La possibilité pour quiconque de travailler sur un projet est importante.
Créer une base sur laquelle nous pouvons tous travailler contribuera à atteindre cet objectif.
La performance du site Web n'a été considérée que vers la fin du projet. Un site Web réactif efficace doit être rapide et efficace. La vaste gamme d'appareils et leurs capacités varient énormément d'un ordinateur Mac neuf à un ancien smartphone. Lorsque vous créez un site Web riche en médias, il peut être très difficile de gérer les performances, en particulier lorsque vous essayez de l’améliorer de manière rétrospective.
Lors de la conférence Upfront à Manchester, nous avons vu Yesenia Perez Cruz parler de considérer la performance à chaque étape d'un projet, y compris la conception. Avec le recul, c'est quelque chose que nous aurions dû mettre en œuvre. En tant qu'équipe composée de plusieurs concepteurs, développeurs et développeurs frontaux, la gestion de la taille et des performances globales (en particulier la performance perçue) aurait dû être une priorité plus importante.
Tout sur une page a un coût pour la performance. Donner la priorité à ce qui est important garantit que le site Web est non seulement rapide, mais accessible à davantage d’appareils. Sur certains appareils plus anciens, nous avons constaté que le site Web ne fonctionnait pas seulement sur le navigateur, mais sur l’ensemble du périphérique. Tenter d’accélérer le site Web de manière rétroactive signifiait que nous ne pouvions pas rendre le site Web aussi rapide qu’il aurait pu être.
La prochaine fois, nous veillerons à ce que la performance soit intégrée à toutes les étapes du processus, donc ce n’est pas une réflexion après coup.