Share
Site Web adaptatif. Cela dit tout. Ethan Marcotte, qui est à l’origine du mouvement le plus contagieux en matière de conception de sites Web, n’a pas besoin d’être présenté. Récemment il a répondu à quelques-unes de mes questions (voyez ce que j’ai fait là-bas?), prenez donc un café et découvrez ce qu’il avait à dire au sujet des sanglots dans le métro et des tirs au soleil?
Designer. Développeur. Grand. Bad avec des chiffres.
Je suis un designer / développeur indépendant / quelque chose qui vit à Cambridge, dans le Massachusetts. Avant de me lancer à nouveau à la fin de l'année 2010, j'étais directeur de la conception interactive pour la charmante et charmante Happy Cog. Mais au fil des ans, j'ai eu la chance de travailler avec des artistes tels que le New York Magazine, l'Université de Stanford, le W3C et le Festival du film de Sundance. Plus récemment, j'ai aidé à lancer un nouveau site responsive pour le Boston Globe. J'adore ce métier.
Plus récemment, je suppose que je suis "connu pour" en train de forger le terme "conception Web réactive" à An Event Apart Seattle 2010, pour décrire un moyen plus flexible de concevoir au-delà du bureau. J'ai suivi cette conversation avec un article dans le magazine A List Apart et, finalement, j'ai écrit un petit livre sur le sujet..
En résumé, la conception réactive est un moyen alternatif de concevoir le Web post-desktop. Historiquement, notre approche principale en matière de conception pour mobile, tablette ou ce que vous avez a été de créer des sites spécifiques à chaque appareil, en fragmentant notre contenu dans différents contextes. La conception réactive, à son niveau le plus élémentaire, nous permet de combiner des mises en page flexibles basées sur une grille et des requêtes de média pour créer une conception plus réactive et plus réactive: une conception qui se redéfinit pour s'adapter à différentes plages de résolution..
En tous cas. Ce fut une année absolument folle et merveilleuse.
Croisade personnelle? Oh, bonté oui. Je suis la personne la plus dogmatique sur Internet et je crois secrètement que les personnes en désaccord avec moi devraient être renvoyées au soleil..
Hey! Je rigole! Je plaisante! (Je suis aussi incroyablement faible en caféine!)
Mais vraiment, la meilleure chose à propos du travail sur le Web est qu’il n’existe pas de One True Way? de travailler. Je veux dire, l'année dernière, il semble que ce débat se soit formé en ligne, un débat qui oppose en quelque sorte le "design mobile" au "responsive design" dans une sorte de conflit épique, le Clash of the Titans. Je ne comprends pas pourquoi les choses doivent être aussi binaires: certains publics bénéficieraient d'expériences spécifiques à un appareil, alors que d'autres bénéficieraient d'une approche plus réactive..
J'ai travaillé avec un grand client cette année, où ce dernier est le cas: les objectifs de chaque "contexte" se recoupent à un point tel qu'une approche réactive était de loin le meilleur. Mais j'ai aussi travaillé sur des sites où l'inverse était vrai.
En fin de compte, il s’agit d’adapter l’approche aux besoins du public d’un site donné, pas simplement aux appareils qu’ils utilisent, ou aux biais que les concepteurs apportent à la table. Si notre communauté peut fournir plus de structure et de processus pour Comment pour choisir entre une approche réactive ou une approche spécifique à un appareil, nous nous attaquerons au bon problème.
Homme. Pas mal de choses, pour être honnête.
Tout d’abord, beaucoup de choses pourraient être améliorées du côté des CSS. Je veux dire, aujourd’hui, nous nous appuyons sur des outils plutôt anciens (bien que fiables): les flotteurs et le positionnement. Et malheureusement, cela signifie que la plupart des sites réactifs sont limités par l’ordre des sources. Cela peut être corrigé dans une certaine mesure, en particulier si vous planifiez votre balisage de manière «mobile d’abord», mais heureusement, quelques outils CSS3 en cours de rédaction nous donneront encore plus de flexibilité. Je suis particulièrement enthousiasmé par la boîte flexible et le module de disposition.
Nous ne pouvons pas établir de corrélation entre la largeur d'un écran et la quantité de bande passante disponible, mais beaucoup de travail a encore été accompli sur l'optimisation de la diffusion des images. L'un des premiers est le script d'images réactives de Filament Group, mais des scads ont été construits depuis. Jason Grigsby a fait un tour d'horizon fantastique sur diverses techniques d'images réactives, détaillant leurs forces et leurs inconvénients respectifs, que je recommande vivement..
Et enfin, je pense que ce qui m'intéresse le plus, c’est de savoir comment une approche réactive peut changer la façon dont je gère mes projets. Pour le Boston Globe, le changement le plus important pour moi a été d’adopter une approche plus collaborative entre concepteurs et développeurs: privilégier le prototypage rapide en tant qu’outil de conception et laisser l’utilisation du site dans divers téléphones, tablettes et navigateurs en tant qu’informations utiles pour la conception du site. Alors, à quoi ressemblerait une approche plus réactive de la collecte des exigences? Une stratégie de contenu plus réactive? Les bases techniques - grilles fluides, images flexibles et requêtes des médias - ne sont en réalité qu'une partie d'un processus de conception beaucoup plus vaste, que je suis vraiment impatient d'essayer de comprendre..
J'ai lu beaucoup de travail de Garret Keizer ces derniers temps. Son livre sur le bruit était merveilleux, et je pleurais ouvertement dans le métro lorsque j'ai lu son récent essai sur l'éducation pour le magazine Harper's. (Disponible dans le magazine, mais en ligne pour les abonnés.)
Parlant un peu plus visuellement, j’ai découvert le travail de Dave Mott via Dribbble et.
Je peux arrêter à tout moment ok ouais peut-être que je devrais passer à des licornes.
Accentsconagua