Contenu
- Concevoir pour l'inconnu
- Une approche pragmatique du design
- Devenir agnostique de mise en page
- Codage au fur et à mesure
- Plonger dans le balisage
Il semble que tout le monde parle de conception de sites Web réactifs ces jours-ci, et pour de bonnes raisons; à mesure que le nombre d'appareils compatibles Web continue d'augmenter - chacun avec des capacités et des fonctionnalités différentes - il n'est plus judicieux de créer des sites Web à largeur fixe.
La vérité est que cela ne l'a jamais été. Pourtant, jusqu'à présent, il était considéré comme une meilleure pratique de concevoir des expériences reposant sur un certain nombre d'hypothèses, qu'il s'agisse de la résolution d'écran, de la bande passante ou de la méthode de saisie. Si vous avez déjà conçu un site Web d'une largeur de 960 pixels, uniquement pour l'afficher sur le netbook à petit écran d'un ami (et oui, j'écris à partir d'une expérience douloureuse ici), vous comprendrez pourquoi ce n'était pas une approche particulièrement intelligente. Désormais, avec les smartphones et les tablettes intégrés dans le mix, il est clair que nos méthodes traditionnelles ne sont plus adaptées à leurs besoins.
Heureusement, l'avènement des requêtes médias CSS et une reconnaissance croissante que le Web est un média à part entière, signifie que nous commençons à embrasser la vraie nature de la plate-forme, en acceptant que son universalité est une force, pas une faiblesse.
Au cours des cinq prochains jours, je vous guiderai à travers une technique qui reconnaît ce fait: site Web adaptatif. Développé par Ethan Marcotte, il combine des mises en page fluides, des images flexibles et des requêtes multimédias pour nous aider à créer des sites qui s'adaptent gracieusement à tout environnement qu'ils rencontrent.
Je vais vous montrer cette approche en vous montrant comment créer une galerie multimédia simple. Dans mes exemples, je vais créer un petit site Web pour documenter un récent voyage sur la route que j'ai effectué à travers les États-Unis, mais n'hésitez pas à personnaliser le code et la conception en fonction de vos propres besoins.
Concevoir pour l'inconnu
Une grande partie de ce didacticiel sera centrée sur l'aspect développement de la conception réactive. Mais avant de fouiller dans un code, prenons un moment pour réfléchir à la façon dont nous pourrions concevoir un site Web qui pourrait éventuellement avoir des mises en page infinies.
Maintenant, j'ai la chance de pouvoir concevoir des interfaces et développer le code frontal qui les rend réels. Ce n’est bien sûr pas une compétence unique - si vous travaillez pour vous-même, vous êtes probablement le même. Mais il est certainement avantageux de comprendre comment le contenu peut s'adapter et se redéfinir lors de la création de conceptions fluides.
Je travaille également au sein d'une équipe plus large où mon rôle est plus spécialisé. Dans un tel environnement, le concepteur visuel peut se concentrer uniquement sur la traduction de wireframes en compositions attrayantes et attrayantes (signées, pixel-perfect). Et il n’est pas inhabituel que les développeurs soient situés séparément, traduisant ces mises en page en balisage et CSS simples et efficaces.
Cependant, ces flux de travail linéaires et séparés se décomposent rapidement une fois que nous commençons à évaluer comment les conceptions s'adapteront à des environnements différents. Tout comme tout nouvel outil ou toute nouvelle technologie, nous devrions également envisager des méthodes de travail plus collaboratives et agiles. Bon nombre des problèmes les plus délicats rencontrés lors de la conception de sites Web réactifs peuvent être résolus simplement par la conversation, l'expérimentation et l'itération.
Une approche pragmatique du design
Cela ne veut pas dire que les concepteurs n'ont pas la possibilité de réfléchir à la façon dont un design peut fonctionner en dehors des limites d'un appareil particulier.
Chez Clearleft, nous initions la conception visuelle du point de vue du bureau. Nous commençons par définir un langage de conception global et une esthétique visuelle, basant souvent les explorations initiales autour d'un élément de contenu central. Par exemple, si nous concevons un site culinaire, nous commencerons par une page de recettes; pour un site d'actualités, une page d'histoire.
Non seulement cette page est importante sur le site, mais elle comprend probablement suffisamment de contenu structuré pour que nous puissions construire une palette typographique. Nous réfléchirons également à la manière dont la mise en page peut s'adapter, même si cela ne nous préoccupe qu'à ce stade.
Un moyen utile de tester une conception est de prendre une telle page et de l'adapter à un écran plus étroit (~ 320 px de large). Vous découvrirez probablement que certains aspects de la conception devront être repensés pour qu'ils fonctionnent à cette largeur. Voici quelques exemples:
- Typographie: Les grands en-têtes peuvent bien fonctionner sur des mises en page plus larges, mais sur des écrans plus petits, ils peuvent prendre beaucoup d'espace vertical et donc nécessiter un défilement supplémentaire. Au fur et à mesure que les longueurs de ligne changent, vous devez également prendre en compte les hauteurs de ligne et d'autres traitements typographiques.
- Liens: Comment votre conception fonctionnera-t-elle sur les appareils à écran tactile? Bien que nous n'ayons pas encore de moyen facile de les détecter (ce qui signifie que nous devrions prendre en compte le toucher dans tous les aspects de notre conception), la conception d'un écran plus étroit peut nous donner l'occasion de réfléchir aux zones cibles pour les liens et autres éléments interactifs. . Les directives iOS recommandent que celles-ci soient d'au moins 44 pixels / points carrés, ce qui est un bon chiffre à viser.
- La navigation: Ce sera probablement le composant le plus gênant de toute conception réactive, surtout si votre site comporte de nombreuses sections et une hiérarchie profonde. Brad Frost a rédigé un résumé de certaines approches de navigation actuellement envisagées.
- Contenu superflu: Un contenu n'est-il pas nécessaire? D'autres contenus doivent-ils uniquement être affichés dans certains scénarios? Je ne recommande pas de masquer le contenu en fonction de l'appareil qu'un utilisateur utilise, mais des techniques telles que le chargement conditionnel (que nous examinerons plus tard cette semaine) peuvent nous aider à proposer des pages plus petites qui ne chargent du contenu complémentaire que lorsque cela est nécessaire.
La conception de deux mises en page contrastées renforce l'idée qu'un design s'adaptera, tout en éliminant les éventuels pièges dès le début. Bien que cela ressemble à un doublement du travail, gardez à l'esprit que nous ne concevons pas chaque page avec une précision au pixel près. Au lieu de cela, nous nous concentrons sur la création d'un langage de conception évolutif - un langage qui évoluera au fur et à mesure que nous commencerons à l'implémenter dans le code, et un autre basé sur des modules et des composants individuels.
Devenir agnostique de mise en page
Sans surprise, pour une industrie qui a toujours traité le Web comme l'impression, les mises en page à largeur fixe ont imprégné de nombreux produits que nous produisons. Alors que nous commençons à concevoir un support adaptable, de nouvelles approches sont envisagées qui nous permettent de résoudre des problèmes et de communiquer des idées tout en reconnaissant la nature fluide du support. Voici quelques-uns de mes favoris:
- Diagrammes de description de page: Alors que les wireframes peuvent souvent impliquer une mise en page (et donc supposer un certain type de périphérique), les diagrammes de description de page suppriment cette hypothèse et décrivent à la place les composants individuels, organisés dans le document en termes de priorité.
- Carreaux de style: Lorsque nous communiquons des idées de conception avec les clients, nous pouvons nous retrouver à présenter des «peintures de sites Web». Si nous ne faisons pas attention, les clients demanderont à juste titre à voir des concepts qui montrent à quoi ressemblera un design sur d'autres appareils également. Cela peut nous contraindre à une situation insoutenable de production de plusieurs pages pour plusieurs appareils. Samantha Warren a réfléchi à ce problème et a proposé des carreaux de style. Celles-ci se situent quelque part entre un moodboard (mais moins vague) et des compositions entièrement réalisées (mais moins précises), et nous aident à communiquer la typographie, les styles de boutons et les traitements des têtes de mât. Ils encouragent également un niveau de discussion plus mature avec nos clients.
- Jeu de design Mobilify: Cet exercice peut très bien fonctionner lors des ateliers de conception collaborative. Dans cet exercice, tout le monde écrit sur Post-it les éléments qui peuvent apparaître sur une certaine page. Celles-ci sont ensuite collées au mur par ordre d'importance, comme si elles apparaissaient linéarisées sur un téléphone mobile. La discussion qui en résulte peut générer des conclusions surprenantes. Par exemple, vous réalisez peut-être que la navigation n'est pas le composant le plus important de la page. Cela pourrait faire suite à la conception, où un lien de saut en haut de la page renvoie à la navigation dans le pied de page.
Il y a encore de la place pour les outils que nous utilisons déjà, bien sûr, mais lors de la conception d'un site Web en termes généraux, nous devons garder à l'esprit que la mise en page n'est plus connue.
Codage au fur et à mesure
Heureusement, nous n'avons pas à nous soucier de la conception visuelle de l'exemple sur lequel nous travaillons, car le travail acharné a été fait pour nous! Au lieu de cela, nous pouvons nous concentrer sur le codage de notre conception dans un site Web entièrement réactif.
Encore une chose avant de commencer. Il est important de se souvenir d’un principe fondateur du média avec lequel nous travaillons: l’universalité. Cela signifie non seulement construire pour les appareils Web d'aujourd'hui, mais également assurer la compatibilité avec ceux d'hier et de demain. John Allsopp a décrit pourquoi ce principe est important dans son article The Next 6 Billion:
«Les six milliards suivants sont des enfants des régions rurales de l’Inde, de l’Afrique et de la Chine, où l’accès au pouvoir et aux réseaux peut être intermittent. C'est quelqu'un à Sumatra dans une boîte Wintel vieille de dix ans. Ce sont des gens qui parlent des centaines de langues différentes, avec des dizaines de langues différentes. Ce sont les gens qui sont les premiers de leur famille à savoir lire et écrire. Ce sont les 20% de personnes dans le monde qui ne savent ni lire ni écrire. Pourtant.’
On peut retracer notre compréhension du web en regardant les différentes modes (faute d'un meilleur mot) qui se sont imposées dans notre métier: standards du web, accessibilité, JavaScript discret… toutes sont des variantes sur le même thème: l'amélioration progressive. Il en va de même pour la conception Web réactive. Pour construire un vraiment Un site Web réactif consiste à créer un site non seulement rétrocompatible, mais également convivial pour le futur.
Plonger dans le balisage
Bon, assez de préambule, il est temps d’ouvrir un éditeur de texte.Notre concepteur nous a fourni une conception orientée bureau et a eu la gentillesse de fournir des exemples de la façon dont cela pourrait également apparaître dans une fenêtre plus étroite.
Il peut être tentant de les coder séparément, mais je vais suggérer une approche différente. En plaçant les composants séparés - ou modèles - qui composent la conception sur une seule page, nous pouvons créer un portefeuille de modèles. Cela nous permet de développer des composants en dehors des limites de toute mise en page, et nous donnera quelque chose à consulter plus tard pour tout test de régression. Voyons le balisage initial sur quelques appareils différents:
Consultez notre portefeuille de modèles balisés
Eh bien, je serai damné - nous avons déjà un site Web réactif! Notre contenu s'adapte aux limites de chaque appareil, qu'il s'agisse d'un nouvel iPad sophistiqué ou d'un téléphone multifonction mis au rebut. Cela fonctionne même dans un navigateur de texte uniquement comme Lynx.
Grâce aux principes sous-jacents de l'universalité, le Web est responsive par défaut. C’est formidable, mais cela signifie également que tout ce que nous faisons au code à partir de maintenant peut compromettre cette adaptabilité native.
Demain: Nous allons faire preuve de prudence et commencer à appliquer le premier aspect du responsive design: la typographie et les grilles fluides.
