Conception Web adaptative : créer des sites Web adaptatifs qui durent

1. Introduction: L' une des meilleures et l'une des pires choses sur le Web est la fréquence à laquelle il change. Pour moi, au moins, c'est incroyablement excitant parce que je peux réexaminer différentes techniques de conception pour le Web moderne. Salut. Je suis Ethan Marcotte. Je suis un concepteur Web indépendant, auteur et conférencier, et la classe d'aujourd'hui est consacrée à la conception Web réactive. La conception réactive signifie que nous pouvons créer une expérience Web qui est offerte à chaque appareil et navigateur et qu'elle se remodelera intelligemment en fonction de la taille de l'écran. Donc, dans cette classe, nous allons regarder un design qui a été créé pour un magazine fictif et ensuite traduire en un design complètement réactif en utilisant les trois ingrédients que chaque mise en page responsive a : des grilles fluides, images flexibles et requêtes multimédias. Lorsque nous examinons chacun de ces ingrédients individuellement, nous les mettrons ensemble pour créer un design totalement indépendant de l'appareil, complètement réactif, et vers la fin de la classe, nous examinerons quelques stratégies que vous pouvez utiliser. utiliser pour remodeler votre processus de conception pour vous aider à devenir développeur frontal plus réactif pour les écrans que nous connaissons aujourd'hui ainsi que pour ceux qui n'ont pas encore été inventés. Je pense que la flexibilité au cœur de la conception réactive est si importante et qu'elle a toujours été importante parce que nous n'avons jamais conçu pour une seule taille d'écran. Je veux dire, il y a des navigateurs intégrés dans les tableaux de bord des voitures maintenant et ce n'est pas le Web pour lequel je me suis inscrit, mais maintenant nous avons la possibilité de concevoir une expérience qui peut se remodeler de façon flexible quel que soit l'endroit où cela se passe être. Donc, cette classe, je pense, est vraiment pour les concepteurs frontaux et les développeurs frontaux. Nous allons regarder un peu de CSS, mais vous n'avez pas besoin d'être un expert CSS. Nous étudierons certains des principes fondamentaux de la façon dont vous pouvez réellement traduire vos conceptions en une mise en page réactive. Pour moi, j'espère vraiment que vous quitterez cette classe avec une réelle appréciation de ce que signifie être un concepteur d'abord mobile et comment cela changera votre façon de concevoir pour le Web moderne. Je suis si contente que tu aies décidé de rejoindre ce cours. Allons-y. 2. Qu'est-ce que la conception adaptative ?: Alors commençons la classe en répondant à la question, qu'est-ce que le design responsive ? Parce que lorsque je travaille avec une nouvelle équipe ou un nouveau client, c'est l'une des premières questions que je reçois. Parce que tout le monde est incroyablement excité par cette phrase, la conception web réactive. Mais tout le monde a tendance à avoir une idée légèrement différente ce que cela signifie pour eux et pour leur entreprise. Donc, j'aimerais commencer aujourd'hui en vous racontant ce que cela signifie pour moi en tant que designer. Pour ce faire, j'aimerais vous raconter une histoire sur un arbre. Mais c'est un arbre assez spécial, et il est situé au cœur de la forêt de Pando, qui est en Utah. Maintenant, Pando est une forêt plutôt spéciale. C' est une superficie de 100 acres. Donc, disons que vous et moi voyageons côte à côte à côte dans cette forêt, et comme nous le faisons, nous sommes entourés d'une nature incroyable, ce magnifique tronc d'arbre blanc fuyant hors du sol tout autour de nous jusqu'à ce que l'œil puisse voir. Après un certain temps passé dans cette forêt, je me tourne vers vous et je dis que je vous ai menti, mais juste un peu. Parce que tu vois, Pando n'est pas une forêt, Pando n'est qu'un arbre. Tu vois, Pando est en fait le terme latin pour « Je me propage ». Pando n'était pas ce qu'on appelle une colonie clonale, c'est un simple tremble géant. Donc chaque arbre que vous et moi pourrions voir de nos yeux est en fait juste une tige et chacun d'entre eux tire hors de ce système racinaire souterrain massif qu'ils partagent tous. On estime qu'il y avait environ 40 000 tiges à Pando aujourd'hui. Pando est en fait un vieux arbre. Il a environ 80 000 ans, ce qui fait de Pando l'un des plus grands et l'un des plus anciens organismes connus de la planète aujourd'hui. Je pense que c'est une histoire vraiment merveilleuse pour commencer. Parce que je pense qu'en tant que designers ou peut-être en tant qu'êtres humains, nous avons tendance à regarder des choses qui semblent visuellement complexes, et c'est notre instinct de les voir comme plus distinctes et plus séparées qu'elles ne le sont par défaut. J' y ai beaucoup réfléchi dans ma propre pratique de design. D' habitude, quand je regarde une autre forêt entièrement. Qui tous les différents appareils et navigateurs auxquels on m' a demandé de livrer une expérience belle et convaincante à. C' est une forêt plus complexe que j'ai jamais eu à gérer lors de la conception pour le web. Mais le fait est que lorsque nous concevons pour le web moderne, ce ne sont que des enjeux de table. Le web est partout et partout où nos utilisateurs se trouvent avec les écrans les plus proches à portée de main. Donc, au moins pour moi, il est essentiel de comprendre le web comme un support de conception complètement flexible. En d'autres termes, lorsque nous concevons pour le web, nous concevons une toile infinie complète. C' est une toile entièrement flexible, et nos conceptions doivent être aussi flexibles et aussi accessibles que les appareils que nos utilisateurs tiennent entre leurs mains. Ce qui est excitant pour moi en tant que designer réactif, c'est qu'il y a tellement d'excellents travaux de design réactif sur le web aujourd'hui que je peux m'inspirer. Je suis sûr que vous avez trouvé tant de sites réactifs merveilleux là-bas, mais laissez-moi vous montrer quelques exemples que j'aime vraiment aujourd'hui. La chose passionnante que je pense à la conception adaptative telle qu'elle se produit aujourd'hui, c'est qu' il y a vraiment un excellent travail réactif qui est fait dans différentes industries. Voici Amherst College, qui est un excellent exemple d'un site réactif Higher Ed, et c'est beau, et il a un impact sur presque toutes les tailles d'écran. Vous remarquez que lorsque je redimensionne la fenêtre du navigateur, le design responsive change sa forme pour le rendre accessible aux écrans à la fois petits et grands. Les éditeurs ont eux aussi utilisé design responsive très efficacement au cours des dernières années. Voici le Financial Times, qui a une mise en page réactive très majestueuse et très belle, utilisant des grilles flexibles, des images flexibles et des requêtes multimédias, pour créer une expérience réactive vraiment belle. Mais il ne s'agit pas seulement des éditeurs ou des sites Web de Higher Ed. Il existe un certain nombre d'applications Web qui utilisent la conception responsive très efficacement. Voici Adobe Type Kit, et ils ont une interface très complexe que vous pouvez utiliser sur l'écran petits et grands pour non seulement parcourir les polices, mais aussi les filtrer le long d'un certain nombre d'axes vraiment complexes. La raison pour laquelle tant de ces organisations et entreprises sont devenus réactifs est parce qu'ils reconnaissent le fait qu'être agnostique de l' appareil est juste des enjeux de table pour la conception pour le web moderne. Nous concevons pour bien plus que des appareils de bureau. L' informatique mobile a explosé ces dernières années. On estime qu'environ huit milliards d'appareils mobiles sont utilisés dans le monde entier, et ce nombre ne semble pas diminuer d'ici peu. Tablette informatique n'est pas nécessairement le plus récent enfant sur le bloc plus, mais il est encore planchers moi que dans 2011 seul, certains 80 nouveaux appareils de tablettes sont entrés sur le marché dans une période de 12 mois. Ça me semble sauvage. Donc, avec tout le désordre que nous voyons dans l'informatique mobile et sur tablette, il y a un montant compréhensible d'investissement et d'expérimentation pour essayer comprendre ce que pourrait être le prochain contexte post-bureau. Donc, il ya une quantité considérable d'investissement qui se passe dans les téléviseurs intelligents et les montres intelligentes et tant de nouveaux contextes d'écran différents qui ont réellement des navigateurs vraiment puissants sur eux ainsi. Combien d'entre elles allons-nous concevoir à l'avenir ? Maintenant, lorsque nous regardons un marché complexe comme celui-ci, il est très tentant de dire que nous devrions concevoir des expériences spécifiques mobiles ou des expériences spécifiques à une tablette ou des expériences spécifiques à un ordinateur de bureau. Mais en fait, c'est beaucoup plus puissant et beaucoup plus libérant si nous arrêtons concevoir pour des appareils individuels et que nous pensons plutôt un peu plus de souplesse. Pensez à offrir une expérience unique qui peut être visualisée sur n'importe quelle taille d'écran. Parce qu'en fin de compte, nous ne concevons pas uniquement des appareils, nous concevons pour les personnes de l'autre côté de ces écrans. Pensez à un lecteur de votre site Web qui pourrait revenir sur ce site Web à plusieurs moments de la journée avec n'importe quel appareil ou appareil se trouve le plus proche à portée de main. C' est quelque chose que beaucoup d'éditeurs et d'organisations ont réellement réalisé. Qu' en étant un peu plus flexibles et en n'essayant pas contrôler les expériences sur différents appareils, ils peuvent réellement piloter et améliorer l'engagement sur tous ces appareils en étant un peu plus dans la façon dont ils conçoivent pour le Web. En fin de compte, la conception réactive signifie que vous concevez une expérience flexible, qui est livrée à tous les appareils susceptibles de visiter ce site Web. Maintenant, cette expérience peut changer dans sa mise en page ou sa présentation en fonction de la taille de l'écran, mais c'est correct. Parce qu'en fin de compte, il s'agit d'un site Web que vous livrez à tous vos utilisateurs. Ce faisant, cela vous aidera à atteindre plus d'appareils et plus de personnes que jamais auparavant. Donc, ce ne sont que quelques-unes des choses qui me traversaient la tête quand j' ai écrit cet article intitulé Responsive Web Design. C' est un article qui a été publié en 2010, qui dit essentiellement que la flexibilité inhérente au web est quelque chose que nous devons voir comme une force, plutôt que quelque chose que nous devons essayer de contrôler ou limite. Maintenant, dans l'article, j'ai mis en avant cette recette de haut niveau pour ce qui rend un design réactif. Plus précisément, chaque conception réactive commence par une mise en page fluide ou flexible basée sur une grille. Mise en page qui est construite avec des pourcentages et des proportions plutôt que des pixels inflexibles. Ensuite, il y a des images et des médias qui sont eux-mêmes flexibles qui fonctionnent dans ces mises en page flexibles. Enfin, nous avons des requêtes de médias, qui sont un peu de poussière de pixie de la spécification CSS. Ils nous permettent de contrôler la flexibilité d'une manière qui nous est utile. Nous pouvons changer et adapter ces agencements fluides à différents points d'arrêt. En d'autres termes, créer des mises en page qui peuvent modifier leur forme et représenter des informations. En d'autres termes, ils peuvent répondre à la forme changeante d'une fenêtre de navigateur ou à l'affichage de l'appareil. Donc, tout cela semble très technique. Mais en fin de compte, il est important de reconnaître qu' une mise en page réactive à la fin de la journée est tout simplement flexible dans la nature, mais qu'elle change et s'adapte à certains points d'arrêt pour le rendre accessible aux écrans étroits et larges. Dans ce cours, nous allons examiner la conception d'échantillons pour un magazine fictif, un qui a été créé par, pour, et sur les dinosaures. Maintenant, les exemples de fichiers pour cette conception seront accessibles dans la section Ressources de ce cours. Si vous voulez suivre, s'il vous plaît. Mais ce design est ce que nous allons utiliser pour vous montrer comment ces trois ingrédients d'un design réactif s'assemblent. Nous utiliserons donc des grilles fluides, des images flexibles et des requêtes multimédias pour traduire ce design en un design totalement flexible et totalement réactif. Nous examinerons également certaines stratégies pour modifier notre processus de conception, afin que vous puissiez être vous-même un concepteur ou un développeur plus flexible. Avec ça, commençons. 3. Étape 1 : les grilles fluides: Commençons donc par la base d'un design réactif qui est vraiment une mise en page flexible ou fluide basée sur une grille qui va alimenter toute votre expérience. Parce que vraiment chaque design réactif commence par une fondation flexible. Jetons donc un coup d'oeil à la façon dont nous pouvons traduire un balisage pour un design et le transformer en une mise en page entièrement flexible basée sur une grille. Donc, c'est le balisage que j'ai créé et dessiné pour notre magazine fictif appelé Rawr qui est par, pour et sur les dinosaures. Maintenant, si vous avez déjà conçu une page Web dans Photoshop ou Illustrator, vous allez probablement être assez familier avec le fonctionnement d'une telle mise en page. Maintenant, ce n'est qu'une photo d'un site Web et de haut en bas nous avons des choses comme des articles récents, une couverture, une lettre des rédacteurs au magazine et enfin, un pied de page tout le long du bas. Rien de vraiment super fantaisie, mais c'est en fait un cas d'utilisation vraiment sympa pour nous de montrer comment vous pouvez traduire un design à largeur fixe en quelque chose de beaucoup plus flexible. Maintenant, dans la section des ressources de la classe, vous trouverez un lien vers certains exemples de fichiers que j'ai créés et je vais les utiliser aujourd'hui pour travailler essentiellement à travers les trois ingrédients pour la conception responsive et vous montrer comment ils peuvent effectivement être appliqués à notre modèle de mise en page. Donc, je vais commencer par la toute première section sur la création de grilles fluides. Donc, dans ce fichier HTML, j'ai créé fondamentalement un design simple et léger pour la section récente de l'article sur notre exemple de mise en page. Maintenant, vous remarquerez qu'il n'y a pas grand-chose dans la façon de concevoir, il y a juste quelques tailles de police simples et des styles simples et il n'y a pas d'images. Je veux vraiment me concentrer sur le contenu et la mise en page de cette première section. Donc, si je vais traduire cela en une grille complètement flexible, je dois revenir en arrière et regarder mon design. Maintenant, dans cette maquette, je vais me concentrer sur les articles récents. J' ai une grille de cinq colonnes très directe pour cette mise en page d'écran large. Maintenant, si je veux traduire cela en HTML et CSS, je peux essentiellement utiliser quelque chose appelé CSS Grid pour construire cette mise en page assez rapidement. Jetons un coup d'oeil au HTML pour ce module. Donc, à l'intérieur de cet article div récent, j'ai quatre éléments. J' ai l'en-tête qui contient le titre de cette section ainsi qu'un lien pour lire plus d'articles et puis sous cet en-tête, j'ai deux articles qui sont fondamentalement teasers pour le contenu que je veux que l'utilisateur lise ou cliquez sur sur. Puis enfin, avoir un élément de côté qui contient une liste de liens supplémentaires, essentiellement vers des histoires secondaires. Si nous revenons à la mise en page, vous pouvez constater que c'est plus ou moins ce que nous avons créé. Donc, dans ma maquette, je vais me concentrer juste sur cette section récente de l'article. Ce que je vais faire, c'est, je vais faire un inventaire rapide des différents types de contenu que j'ai à l'intérieur de ce module. Eh bien, tout de suite, j'ai un en-tête qui annonce le titre cette section d'article récente ainsi qu'un lien plus large sur le côté qui me permet de créer un lien vers d'autres articles. Puis sous cet en-tête, j'ai deux histoires importantes qui sont fondamentalement juste des teasers de contenu pour inciter le lecteur à taper ou cliquer sur ces articles. Ensuite, j'ai une liste d'articles connexes décalés vers la droite dans une barre latérale. Maintenant, je ne vais pas me concentrer sur la mise en page, je veux juste me concentrer sur ces différents types de contenu parce que ce que j'ai fait est, je les ai traduits en un balisage plutôt simple. J' ai un conteneur pour ce module d'articles récents et puis à l'intérieur de cela, j'ai un en-tête avec mon titre, d'où le nom. Ensuite, j'ai deux éléments d'article qui contiennent un peu d'informations de teaser pour ces deux morceaux de contenu. Ensuite, dans ce bloc d'exception, j'ai une liste ordonnée qui contient à nouveau, une liste de liens vers des histoires secondaires. Si nous revenons en arrière et regardons notre prototype, c'est plus ou moins notre point de départ, nous n'avons pas de mise en page, mais nous avons des styles de police légers appliqués à ce balisage très simple. Maintenant, si je veux traduire cette mise en page en HTML et CSS, je vais revenir à ma grille et jeter un oeil aux colonnes avec lesquelles je travaille. Maintenant, plus précisément, chacune de ces colonnes a 180 pixels large et j'en ai cinq et la gouttière entre chacune de ces zones est de 25 pixels de large. Maintenant, c'est juste dans mon balisage et je fais face à des pixels fixes inflexibles. Maintenant, si je voulais construire cette mise en page assez rapidement dans mon CSS, je pourrais le faire avec quelque chose appelé grille CSS. Maintenant, la mise en page de grille CSS est une façon assez nouvelle de créer des mises en page pour le web moderne. Si vous avez déjà fait quelque chose avec des flotteurs ou un positionnement absolu, la grille CSS combine en fait les meilleurs éléments de ces deux et nous permet de créer des mises en page beaucoup plus rapidement, c'est incroyablement puissant. Donc, par exemple, dans mon articles-bloc récent, je pourrais écrire un peu CSS qui dit fondamentalement, à l'intérieur des articles-recent, je veux définir ceci pour afficher la grille et puis je vais faire des colonnes de modèle de grille et puis je suis va faire 180 pixels et je vais écrire ça cinq fois. Ensuite, je vais écrire grille-colonne-gap 25 pixels. Maintenant, ce sont toutes les mesures de pixel que j'ai prises directement à partir de mon balisage. Lorsque je l'enregistre et que je recharge la fenêtre de mon navigateur. Donc, dans Firefox, il y a un utilitaire vraiment pratique que je peux utiliser pour inspecter rapidement mes mises en page basées sur la grille. Donc, j'ai ouvert l'inspecteur de mon navigateur et si je sélectionne ce bloc articles-récent sur lequel je viens de créer une mise en page de grille, sur le panneau de droite il y a une option pour basculer le surligneur de grille CSS. Donc, si je clique sur ce petit symbole, cela va me montrer le squelette de la mise en page que je viens de créer avec ces trois lignes de CSS. J' ai essentiellement créé une scène qui est une mise en page de grille et en définissant des colonnes de modèle de grille à 180 pixels cinq fois, j'ai créé cinq colonnes de largeur de pixels et un espace de colonne de grille de 25 pixels essentiellement créé une gouttière de 25 pixels entre chaque l'un de ces domaines. Maintenant, chaque colonne est créée en configurant un quadrillage, un à gauche et un à droite. Maintenant, chacun d'entre eux est en fait numéroté et nous pouvons utiliser ces chiffres pour tracer les différentes parties de notre grille le long de ces lignes de grille, en d'autres termes, pour compléter notre mise en page. Ainsi, par exemple, notre élément d'en-tête est actuellement limité à cette première colonne, ce que nous voulons qu'il fasse est de couvrir toute la largeur de ces cinq colonnes sur les six lignes de grille. Pour ce faire, je peux juste l'aborder dans mon en-tête d' articles-recent CSS et je peux essentiellement dire, grille-column-start : un et puis je peux aussi dire, grille-column-end : six. Donc, je vais recharger mon navigateur et maintenant nous avons un en-tête qui couvre toute la largeur de notre disposition de grille, de la première ligne de grille à l'extrême gauche à la sixième ligne de grille à l'extrême droite. Donc, voyons si nous pouvons réellement améliorer la largeur de nos histoires aussi. Donc en ce moment, nos deux histoires ne couvrent qu'une seule colonne comme notre en-tête l'était avant. Donc, soyons un peu plus explicites. Donc, pour la première histoire qui est de classe à story-lead, j'aimerais voir grille-colonne-démarrer une, mais je voulais qu'elle couvre deux colonnes. Donc, ce que je vais faire, c'est que je vais dire, grille-colonne fin trois. Donc, qu'il va fondamentalement à la ligne de grille qui est à la fin de la deuxième colonne. Je vais sauver mon CSS, retourner à mon navigateur et réaliser et maintenant cette histoire s'étend sur deux colonnes plutôt que d'être écrasée en une seule. Faisons la même chose avec notre histoire finale qui est classée comme story-alt. Maintenant, celui-ci va commencer à la troisième colonne essentiellement à la fin juste après cette première histoire, et puis aussi je voulais enjamber deux colonnes. Donc, je vais faire une colonne de grille et cinq. Maintenant, si je sauve mon travail et recharge le navigateur, maintenant nous avons quelque chose qui ressemble un peu plus près de la conception que nous avons présentée dans notre balisage. On a gravé deux colonnes au lieu d'être découpées en une seule. Maintenant, c'est une mise en page de base et nous pouvons réellement améliorer cela juste un peu plus. Grid-column-start et grid-column-end peuvent en fait être exprimés un peu plus concisément parce que nous pouvons utiliser ce genre de notation barre oblique dans une propriété de colonne de grille pour dire que nous voulons cet élément commence à cette ligne de grille et se terminent à ce loin en utilisant cette notation barre oblique. Donc, pour l'élément story-lead par exemple, nous pourrions essentiellement dire grille-colonne une barre oblique trois au lieu de colonnes de grille commencer un et la colonne de grille se termine trois. Pour story-alt, au lieu de grille-colonne-start trois et grid-column-end cinq, nous pouvons faire grille-colonne-trois barre oblique cinq, juste une façon légèrement différente de faire la même mise en page avec un peu plus d'efficacité. Voici le truc de cette couche que nous venons de créer. Nous avons utilisé des pixels pour traduire parfaitement la mise en page de notre balisage en code, mais le truc avec les pixels est qu'ils ne changent pas vraiment leur forme. Donc, si je redimensionnais la fenêtre de mon navigateur pour simuler à quoi cela pourrait ressembler sur un écran plus petit, les choses vont sembler un peu bizarres. Donc, je vais rendre ma fenêtre de navigateur un peu plus étroite et comme je le fais, vous allez voir que la mise en page ne change pas sa forme. En fait, je reçois cette petite barre de défilement horizontale vraiment cool pour signifier que j'ai plus de mise en page qui tire sur le côté droit de l'écran. Donc, c'est là que nous devons prendre cette disposition fixe et flexible que nous avons conçue dans l'esquisse et la traduire en quelque chose de plus proportionnel. Il y a une formule avant-gardiste que vous devez utiliser pour le faire. Nous allons parler un peu de maths ici et je excuse parce que je suis terrifiée par les chiffres moi-même. Mais si vous traduisez une disposition de largeur fixe en quelque chose plus proportionnel, utilisez cette formule. Cible divisée par contexte équivaut au résultat. Laissez-moi vous montrer comment ça marche. Disons que vous avez un morceau de votre conception qui pourrait être une colonne dans votre grille, il pourrait s'agir d'un module particulier. Les chances sont bonnes si vous avez utilisé un programme comme Sketch ou Photoshop pour concevoir votre mise en page qui a une valeur de pixel cible dans cette mise en page. Maintenant, plutôt que de prendre cette valeur de pixel et de la mettre dans notre CSS comme je viens de le faire, ce que nous voulons faire est que nous voulons prendre cette valeur de pixel cible et la traduire en quelque chose de plus proportionnel. Pour ce faire, nous le divisons en fonction du contexte dans lequel il se trouve. Plus précisément, nous avons divisé contre la largeur de son élément contenant et le design. Une fois que nous divisons ces deux nombres ensemble, nous avons le résultat basé sur le pourcentage que nous pouvons ensuite traduire dans notre grille flexible. Laissez-moi vous montrer comment ça marche. Maintenant, je suis de retour dans ma maquette et je vais regarder les caractéristiques de la mise en page que j'ai conçue et essayer de comprendre les relations entre les différentes largeurs de ma mise en page. Maintenant, comme nous l'avons vu auparavant, la largeur de chaque colonne individuelle est de 180 pixels de large. Maintenant, c'est la largeur de pixel cible. Ce que je veux faire, c'est que je veux réellement comprendre la relation de cette valeur avec toute la largeur du design qui a 1 000 pixels de large du bord gauche de la grille au bord droit. Donc, vraiment plutôt que de dire 180 pixels, je veux 180 pixels divisés par 1 000 pixels, valeur de pixel cible de 180 pixels divisée par le contexte dans lequel il se trouve est de 1 000 pixels. Donc, si je divise ces deux chiffres l'un contre l'autre, j'aurai 18 pour cent. Donc, si je remplace le reste de ces 180 références de pixels par 18 pour cent, j'ai maintenant les débuts d'une grille flexible. Maintenant que je redimensionne ma fenêtre de navigateur, les valeurs de pixel de ces colonnes vont changer au fil du temps, mais les proportions que j'ai conçues dans mon balisage resteront intactes et c'est le composant clé d'une grille flexible juste là. Les relations entre les largeurs plutôt que les largeurs elles-mêmes. Maintenant, il reste un petit morceau de détail qui est cet écart de 25 pixels de colonne que nous avons ici aussi. Mais nous pouvons réellement traduire cela en quelque chose de plus basé sur le pourcentage aussi. Maintenant, les 25 pixels sont ce que nous avons conçu dans notre maquette, mais nous pouvons également utiliser cette cible divisée par contexte égale formule de résultat ici aussi bien. Nous divisons ces 25 pixels dans le même contexte qu'avant, 1 000 pixels de la largeur totale de notre mise en page basée sur la grille. Ainsi, 25 pixels divisés par 1 000 pixels est égal à 2,5 pour cent. Donc, maintenant, quand je sauve mon travail, les colonnes et les gouttières sont complètement flexibles avec aperçu plus étroit des pixels et maintenant j'ai une grille complètement flexible. Maintenant, un petit peu de finesse que nous pouvons faire avec cette mise en page. J' ai écrit 18 pour cent cinq fois mais il y a en fait un très bon petit outil à l'intérieur de la grille CSS qui nous permet d'être un peu plus concis. Plus précisément, il y a cette fonction appelée repeat, qui me permet de dire fondamentalement plutôt que d'écrire 18 pour cent cinq fois, je peux essentiellement dire que j'ai cinq colonnes qui ont 18 pour cent largeur et qui va fondamentalement être exactement le même résultat qui est un peu plus concis. Même mise en page exacte juste une façon légèrement différente de l'exprimer. La dernière chose à garder à l'esprit et ensuite je vais laisser les maths derrière un peu, est qu'il y a aussi cette unité très cool à l'intérieur de la grille CSS appelée l'unité fractionnaire ce qui signifie fondamentalement que nous pouvons représentent parfaitement l'espace restant. Au lieu d'écrire 18 pour cent, nous pouvons juste dire un f r qui dit fondamentalement que pour tout espace qui reste après que nous avons alloué nos lacunes de colonne, je veux que vous divisiez parfaitement cet espace cinq fois dans nos cinq colonnes. Donc, plutôt que de faire des mathématiques super complexes pour chaque partie de votre conception parfois qu' une unité f r sera tout ce dont vous avez besoin et alors nous avons notre grille complètement flexible. 4. Étape 2 : les images flexibles: Donc, dans la dernière leçon, nous avons créé quelques grilles flexibles en utilisant cette nouvelle technologie appelée CSS Grid layout. Mais dans nos grilles, nous n'avons pas inclus beaucoup d'images. Alors, réparons ça. Ce que j'ai fait est dans la deuxième section d' exemples de fichiers que vous trouverez dans les ressources, je suis retourné dans les grilles flexibles, et j'ai ajouté quelques images, une partie clé de la conception. Dans le module d'articles récents, j'ai inclus quelques photos en haut des articles en vedette eux-mêmes. Dans la lettre des éditeurs, j'ai inclus une petite photo qu'une entreprise est le byline sur dans la colonne de gauche. Je suis également allé de l'avant et créé une mise en page complète dans une grille flexible pour ce module vraiment éclaboussant appelé, notre histoire de couverture, et je vais vous montrer quelques stratégies pour gérer les images ici aussi. Mais commençons par le haut de la conception, d'abord et avant tout. Maintenant, comme avant, nos images sont abandonnées dans le html et les grilles sont complètement flexibles. Donc, voyons ce qui se passe lorsque nous redimensionnons réellement les grilles maintenant que nous avons inclus des images. Je vais rendre ma fenêtre de navigateur un peu plus étroite pour simuler ce qui se passe sur les écrans plus petits. Comme avant, nos colonnes vont être complètement flexibles. Mais, oh mon Dieu, les choses sont cassées maintenant que nous avons inclus des images. Voici la chose avec les images, est que lorsqu'elles sont affichées à l'utilisateur final, images ont en fait des dimensions natives, elles ont une largeur et une hauteur. Comme nous les avons déposés dans nos conceptions sans faire quoi que ce soit avec eux en CSS, ils ne font que rendre leurs dimensions natives et ils rompent notre mise en page. Ils échappent aux colonnes dans lesquelles ils sont assis et brisent l'expérience pour l'utilisateur final. Mais comme n'importe quel autre aspect de nos conceptions, nous pouvons contrôler la présentation de ces images avec notre CSS. Maintenant, si vous voulez avoir des images flexibles apparaissant à l'intérieur de vos conceptions réactives, il y a un morceau de CSS très simple que vous devriez connaître pour les faire fonctionner à l'intérieur de vos grilles flexibles. C' est-à-dire, image, largeur maximale 100 pour cent. Cela ne semble pas beaucoup, mais qu'un morceau de code dit fondamentalement qu' une image peut rendre à la taille qu'elle veut, tant qu'elle n'est jamais plus large que l'élément qui se trouve dans. En d'autres termes, cela signifie que l'image peut être rendue à la taille qu'elle veut, mais si cette colonne est plus petite que l'image, cette image va se redimensionner proportionnellement et se rétrécir pour s'adapter à l'intérieur de cette colonne. Laissez-moi vous montrer à quoi ça ressemble à l'intérieur de notre modèle d'échantillon. Donc, si ajouté l'image largeur maximale 100 pour cent, et maintenant que je redimensionne ma fenêtre de navigateur, vous remarquerez que les images sont redimensionnées proportionnellement aussi. Ils sont entièrement flexibles et redimensionnés tout aussi flexibles que nos grilles. Maintenant, vous remarquerez peut-être que sur des résolutions d'écran plus larges, certaines de ces images ne correspondent pas nécessairement à toute la largeur de la colonne, et peut-être que c'est correct pour certaines parties de votre conception. Mais au moins pour celui-ci, je voudrais m'assurer que ces classes particulières d'images seront toujours pleine largeur. Pour ce faire, j'avais un morceau de CSS légèrement différent, juste pour ces images. Donc, comme vous vous en souvenez peut-être, dans le travail récent de cet article, nous avons deux éléments d'article qui contiennent ces histoires de teaser qui sont bien en évidence dans ce module. Maintenant, les images elles-mêmes que j'ai classé avec un peu de html, je leur ai donné un nom d'art. Donc, fondamentalement, je peux dire qu'à l'intérieur de ces éléments de l'histoire, je veux que ces images d'art aient toujours une largeur de 100 %. C' est un peu différent de la largeur maximale 100 pour cent, ce qui dit fondamentalement que l'image ne doit jamais dépasser la largeur de son conteneur. Largeur 100 pour cent dit que je veux toujours que cette image corresponde à la largeur de ses éléments contenant. Donc, maintenant si je reviens, vous remarquerez que ces images sont parfaitement alignées sur la largeur qu'elles contiennent colonne. Ils sont toujours complètement flexibles, mais maintenant quelle que soit la largeur de cette colonne, il y aura toujours un saignement complet. Maintenant, nous allons un peu plus loin. Maintenant, encore une fois, nous avons cette image encart qui accompagne le byline dans les lettres de l'éditeur. Tout comme avant, si je redimensionnais ma grille pour la rendre beaucoup plus petite, cette image de largeur maximale 100 pour cent fait beau travail en veillant à ce que cette image se redimensionne proportionnellement. Maintenant, comme nous le verrons dans une leçon ultérieure, il y a beaucoup de travail d'ajustement et de finition qui peuvent servir à contrôler les images que vous servez à vos utilisateurs, mais cette règle de 100 % de largeur maximale de l'image est vraiment la première étape de notre voyage. C' est l'un des outils les plus critiques de la boîte à outils du concepteur réactif. Donc, nous avons réussi à restreindre certaines des images que nous avons incluses dans notre html de manière à ne pas casser les grilles flexibles que nous avons créées pour notre mise en page responsive. Mais que se passe-t-il si nous avons affaire à des images de fond ? C' est quelque chose qui arrive assez souvent dans mon travail et je suis sûr que c'est la même chose pour vous aussi. Maintenant, je vais revenir à la conception que j'ai créée en esquisse pour cette mise en page particulière. Il y a un élément en particulier sur lequel je vais me concentrer en ce moment, à savoir cette image de fond d'empreintes fossiles que j'aimerais inclure dans mon design. Donc, pour le faire dans mon CSS, je vais juste inclure ce fichier SVG. Donc, sur l'élément principal, je vais définir une image d'arrière-plan qui pointe vers le chemin de mon fichier footprint.SVG, et maintenant je vais utiliser la propriété background-repeat pour dire que je veux juste une version de l'image, Je ne veux pas d'une tuile entière en arrière-plan, et je vais la mettre sur aucune répétition. Maintenant, une fois que j'ai fait cela, j'ai une image massive comme arrière-plan de mon design. Maintenant, ce n'est pas ce que j'ai dit dans le croquis, idéalement ce que j'aimerais voir arriver, c'est que j'aimerais ancrer ça dans le coin supérieur droit et que j'aimerais le rendre un peu plus petit. Pour contrôler la taille des images d'arrière-plan, comme nous le faisons avec les images en ligne, nous pouvons utiliser la propriété de taille d'arrière-plan. Maintenant, la taille de l'arrière-plan est une propriété très puissante et il peut être très pratique dans différentes circonstances. Par exemple, je pourrais le définir à 200 pixels, auto. Maintenant, ce que cela signifie, c'est que l'image va redimensionner à une largeur de 200 pixels, puis j'ai défini sa hauteur pour redimensionner en auto, ce qui garantit fondamentalement qu'elle va redimensionner proportionnellement pour s'adapter à l'intérieur de cette largeur de 200 pixels. Voyons à quoi ça ressemble. Donc, maintenant, nous avons une petite empreinte dans le coin supérieur gauche de notre design. Maintenant, je peux rendre ça un peu plus important, je pourrais mettre cette position d'arrière-plan à 95 pour cent et zéro, ce qui va essentiellement se déplacer à 95 pour cent de l'axe horizontal, déplaçant dans la colonne de droite, puis l'avoir ancré dans le coin supérieur droit en utilisant une position d'arrière-plan de zéro. Donc, maintenant nous l'avons ancré en haut à droite. Maintenant, c'est bon, mais comme avec nos images avant, la largeur de cette empreinte ne change pas. Nous pouvons également utiliser des valeurs proportionnelles pour nos tailles d'arrière-plan. Donc, ce que je vais faire, c'est que je vais définir cette taille d'arrière-plan à 30 pour cent, ce qui va fondamentalement le définir à 30 pour cent de son élément contenant, en d'autres termes, dans ce cas, la fenêtre complète du navigateur. Ensuite, je vais mettre sa position d'arrière-plan vers le bas juste un peu du haut, il se sent un peu près du bord de la fenêtre du navigateur. Donc, maintenant que j'ai réglé la taille de l'arrière-plan à 30 pour cent, l'image est beaucoup plus importante, et aussi, elle va se redimensionner proportionnellement. Donc, sur les écrans plus petits, cette image va juste être beaucoup plus petite qu'elle ne le serait sur les écrans plus larges. Maintenant, comme je l'ai déjà dit, la taille de l'arrière-plan est incroyablement puissante. En fait, il existe d'autres propriétés qui pourraient vous être utiles dans d'autres parties de votre conception. Il y a celle-là en particulier appelé couverture. Cela peut être vraiment utile. Un site réactif qui, je pense, l'utilise très efficacement est dans virb.com. Donc, cette image que vous voyez dans la zone de bannière supérieure à droite sur leur page d'accueil est en fait une image d'arrière-plan. Lorsque je redimensionne la fenêtre du navigateur, vous remarquerez que cette image conserve toujours sa taille pour correspondre à la largeur de son conteneur. Donc, comme ce conteneur devient plus étroit ou plus court, il est réglé sur la couverture de taille d'arrière-plan qui garantit fondamentalement que l'image couvrira toujours parfaitement l'espace disponible devant lui, c'est une propriété vraiment puissante et il peut être très utile pour nous aussi. Mais ce ne sont là que quelques-unes des différentes stratégies que nous pouvons utiliser pour gérer les images d' arrière-plan avec plus de souplesse dans nos conceptions. utilisant la taille de l'arrière-plan et la position de l'arrière-plan, nous pouvons réellement contrôler avec précision non seulement le placement mais aussi la mise à l'échelle proportionnelle de nos images d'arrière-plan. Maintenant, la taille de l'arrière-plan est vraiment génial, et en fait il y a un moyen de faire quelque chose de très similaire avec les images en ligne aussi, et pour vous donner un exemple de cela, je vais vous montrer notre histoire de couverture. À l'intérieur de notre module d'histoire de couverture, il y a une très grande image en vue qui est incluse en ligne à l'intérieur de cette zone de contenu. Maintenant, il est configuré dans une mise en page basée sur une grille, tout comme nous l'avons fait avec nos autres grilles flexibles, et si je montre les lignes de grille pour cette image particulière, cette image d'introduction, la photo en ligne est fondamentalement définie pour couvrir cinq colonnes. Mais il ne répond pas tout à fait aux cinq colonnes complètes, et il laisse aussi un peu d'espace au bas de l'image. Idéalement, ce que j'aimerais voir se produire, c'est que j'aimerais que cette image soit pleine hauteur, donc elle couvre parfaitement l'espace vertical à l'intérieur de ce module. Eh bien, je peux le faire en réglant la hauteur à 100 % sur cette image. Donc, en réglant la hauteur à 100 pour cent sur cette image, nous avons en fait étiré cette image un peu sur l'axe vertical. Idéalement, ce que nous aimerions voir arriver, c'est que nous voulons veiller à ce que ces proportions restent intactes. Maintenant, la façon dont nous pouvons le faire, parce que c'est une image en ligne, est avec quelque chose appelé ajustement d'objet, qui est une propriété légèrement plus récente en CSS. Donc, ce que je vais faire, c'est que je vais mettre l'objet en forme de couverture, et vous remarquerez maintenant que l'image conserve ses proportions d'origine. C' est fondamentalement un peu comme la couverture de la taille de fond, mais pour les images en ligne. Nous avons étiré cette image sur un certain espace, mais nous avons essentiellement dit que l'image qui apparaît à l'intérieur de cet espace devrait redimensionner proportionnellement à l'intérieur de ce canevas, et c'est une autre propriété vraiment précieuse que peut vous être utile dans certaines circonstances. Donc, dans cette leçon, nous avons examiné quelques stratégies différentes pour gérer les images en ligne qui apparaissent sur notre html et aussi pour les images d'arrière-plan. En utilisant certaines de ces techniques de concert, nous pouvons avoir des images qui sont tout aussi flexibles que nos grilles fluides flexibles. 5. Étape 3 : les requêtes médias: Ainsi, dans nos deux dernières leçons, nous avons examiné la façon dont nous pouvons utiliser des grilles flexibles et des images flexibles ensemble. Mais la chose à propos des mises en page flexibles, c'est qu'ils ne sont pas toujours la meilleure expérience. Donc, par exemple sur notre module d'articles récents, une fois que j'apporte la fenêtre du navigateur dans environ, disons 50 pour cent, nous pouvons déjà dire que ce n'est pas la meilleure expérience pour l'utilisateur. Certaines longueurs de ligne commencent à se sentir un peu à l'étroit. Ils commencent à envelopper vraiment dramatiquement. Cette mise en page n'est plus vraiment un plaisir à lire. Il ne se sent pas aussi confortable que sur un écran plus large. La même chose est vraie, si nous descendons un peu plus loin à la lettre de nos rédacteurs. Encore une fois, la mise en page semble bien. Il est redimensionné proportionnellement, mais l'expérience de lecture n'est pas nécessairement idéale. Ce titre a l'air très lourd et proéminent. En fait, si nous apportons notre fenêtre de navigateur encore un peu plus, il commence à prendre beaucoup plus de biens immobiliers qu'il n'en a réellement besoin. Encore une fois, notre grille est redimensionnée de manière flexible, mais elle arrive à un certain point la conception, où elle commence à se décomposer. Donc, pas la meilleure expérience que nous pouvons commencer à servir à nos utilisateurs finaux. Donc peut-être, nous devons chercher une façon de prendre cette base flexible et de la remodeler un peu. Pour peut-être changer la façon dont l'information est présentée, à certaines largeurs d'écran ou de fenêtre, afin de servir quelque chose qui ne correspond pas seulement, mais qui se sent aussi à la maison sur n'importe quelle taille d'écran. C' est là que les requêtes des médias entrent en jeu. C' est un peu de CSS que nous allons appliquer à notre base flexible pour améliorer l'expérience, sorte qu'elle soit belle sur les petits et les grands écrans. Donc, je vais écrire un peu de CSS simple, qui vous montre comment une requête multimédia peut fonctionner. Parce que vraiment requête média est comme une question, nous demandons un navigateur. Nous demandons au navigateur s'il répond à certaines caractéristiques ou conditions. S' il réussit ce test, et dit, oui, je remplit toutes ces conditions que vous avez énoncées dans votre requête média, alors nous pouvons appliquer conditionnellement quelques règles de style supplémentaires juste pour ces circonstances spécifiques. Je vais commencer par quelque chose de très simple qui est de dire que sur l'élément du corps, je veux que la couleur du texte soit noire. Mais quand j'ai une largeur d'écran d'au moins 500 pixels de large, je veux que la couleur soit rouge, et je veux que le texte soit en gras. Laissez-moi vous montrer à quoi ça ressemble en pratique. Donc, voici à quoi ressemble l'écran sur un appareil plus petit. J' utilise le mode de conception responsive de Firefox, pour simuler cet effet d'écran étroit. Mais à mesure que je rends la fenêtre un peu plus large, le texte va se redimensionner proportionnellement. Mais une fois que j'ai frappé une largeur d'écran d'environ 500 pixels, la conception change assez radicalement, parce que les conditions de requêtes multimédia ont été remplies. Dans notre requête média, nous avons dit que vous ne devriez appliquer que la couleur rouge, vous ne devriez appliquer la face en gras si nous avons au moins une largeur minimale de 500 pixels. Si c'est le cas, alors nous allons rendre les choses bien, franchement moches. Ce n'est pas la requête média la plus utile, mais c'est la flexibilité que nous pouvons appliquer à nos conceptions réactives. Nous pouvons changer la mise en page, changer la typographie et changer d'autres aspects de notre conception, d'une manière qui nous est un peu plus utile que le texte rouge. Examinons donc de plus près la syntaxe des requêtes multimédias. Maintenant, nous avons dit avant que c'est une petite question que nous posons au navigateur et chaque requête média se décompose essentiellement en deux composants spécifiques. Chaque requête multimédia commence par un type de média, qui décrit la classe de périphérique ou plus précisément le média que nous essayons de styliser. Maintenant, dans la spécification CSS, il y a quatre types de médias acceptables qui sont décrits. Écran, comme les navigateurs mobiles et tablettes et de bureau. Il y a aussi le type de média vocal, pour les navigateurs oraux qui peuvent lire du contenu autorisé à l'utilisateur. Il y a aussi le type de média imprimé, pour les styles spécifiques à l'impression, puis enfin, il y a le type de média tout entier, qui dit fondamentalement que cette requête de média devrait s'appliquer à tous les médias. Maintenant, le type de média est complètement facultatif. Si vous ne le faites pas, vous dites effectivement que cela s'applique à tous les médias. Il utilise par défaut tout type de média. La deuxième partie de la requête multimédia est, la vraie clé pour déverrouiller la puissance derrière une requête multimédia. C' est la fonctionnalité médiatique. C' est vraiment la question que nous posons réellement au navigateur. Comme nous l'avons déjà dit, cette fonctionnalité multimédia particulière dit, est-ce que votre fenêtre de navigateur est d'au moins 500 pixels de large ? Si c'est le cas, il applique les styles à l'intérieur de la requête multimédia. Maintenant, il y a toute une série de fonctionnalités multimédias que vous pouvez réellement interroger. Nous ne les couvrirons pas nécessairement tous dans cette classe. Si vous souhaitez en savoir plus, il y aura un lien dans les ressources vers une liste complète de toutes les options que vous avez à votre disposition. Il est juste de dire que la plupart de ce que nous faisons dans un design réactif est, appliquant des requêtes min-width pour superposer des styles plus complexes sur nos conceptions à mesure que les écrans deviennent plus larges au fil du temps. Jetons donc un coup d'oeil à notre exemple de mise en page et examinons certaines façons d'utiliser les requêtes de médias de largeur minimale, pour mettre en quarantaine certains de ces styles d'écran large sur des écrans bien plus larges. Donc, lorsque je commence à appliquer des requêtes multimédias à une mise en page flexible, je trouve qu'il est vraiment utile de regarder les zones dans lesquelles mon design commence à se dégrader et où il commence à se dégrader à mesure que l'écran devient plus étroit. Donc, comme nous l'avons dit précédemment, nous avons toujours affaire à une mise en page flexible basée sur une grille, qui est cinq colonnes de large, ce qui est vraiment idéal pour les appareils à écran large et les navigateurs. Donc, en dessous de ce point d'écran large, nous voulons appliquer une mise en page différente. Nous voulons seulement appliquer cette disposition à cinq colonnes, lorsque les écrans sont au moins au-dessus d'une certaine largeur. Donc, je vais commencer, prenant certaines des règles de mise en page de grille à écran large que nous avons écrites pour le module d'articles récents et en les entourant d'une requête multimédia. Donc, je vais écrire des médias, min-width, 60em. Ensuite, je vais prendre toutes ces règles de grille que nous avons écrites pour le module d'articles récents, et les appliquer à l'intérieur de cette requête multimédia. Maintenant, 60em, est fondamentalement équivalent à l'écriture de 960 pixels. J' aime utiliser des requêtes média basées sur m parce qu'elles sont un peu plus accessibles. Si quelqu'un modifie la taille du texte dans son navigateur , les requêtes média vont plus ou moins suivre cette préférence pour l'utilisateur final. Si vous êtes plus à l'aise d'écrire des requêtes multimédia basées sur des pixels, c'est tout à fait bien. C' est une préférence stylistique et celle que je trouve est un peu plus accessible, mais peu importe comment vous l'écrivez. Maintenant, que nous avons une requête multimédia qui dit, au-dessus de cette large largeur d'écran, au-dessus d'une largeur de 60em, appliquez cette disposition de grille. Si j'enregistre mes modifications, et je retourne au navigateur, et actualise mon travail, quand je tombe en dessous du seuil de 60em, je perds ma disposition basée sur la grille et les choses linéarisent à une conception de colonne unique. Maintenant, à ce stade, ce n'est pas très attrayant. Mais je pense que vous pourriez voir comment sur un écran plus petit, cela fonctionne vraiment incroyablement bien. Nous avons commencé avec une petite mise en page conviviale, puis quand nous atteignons une certaine largeur, nous pouvons rendre le design aussi complexe que nécessaire. Nous pouvons mieux profiter de l'espace qui nous est disponible. Cela ne change pas le fait que nous avons encore cette période de transition maladroite. Donc, ce que je vais faire, c'est, je vais appliquer une requête médiatique de 35em. Donc, j'ai écrit à media, min-width, 35 ems, qui devrait cibler cette mise en page de milieu de gamme assez bien. Maintenant à l'intérieur de cette zone, je vais cibler mes articles récents bloc. Je vais déclarer une mise en page basée sur une grille. Mais au lieu de faire une mise en page de cinq colonnes, je vais faire une mise en page de quatre colonnes. Ensuite, je vais ramener l'écart de colonne à deux pour cent. Maintenant, avant de continuer, je veux juste noter que nous sommes en train de superposer la complexité à mesure que le printemps s'élargit de plus en plus. Toutes les règles de la requête multimédia précédente, nous allons appliquer les règles suivantes. Donc, c'est un peu comme un effet de superposition que nous faisons dans notre conception à mesure que les choses deviennent plus complexes. J' ai mentionné que parce que nous avons déclaré affichage, grille à ce stade dans le CSS, qui signifie que lorsque nous frappons notre mise en page grand écran, nous pouvons effectivement supprimer la deuxième déclaration. Nous l'avons déjà déclaré un point d'arrêt plus étroit, et cela va toujours être un effet lorsque nous atteindrons le plus large. Donc, maintenant nous avons une disposition à quatre colonnes. Vous vous souvenez peut-être de ce placement par défaut bizarre des éléments dans notre mise en page de la grille de la leçon précédente. Mais ce que nous avons fait ici, si nous allumons les lignes de grille dans Firefox, vous pouvez voir que nous avons créé une grille flexible à quatre colonnes. Maintenant, nous pouvons l'utiliser pour compléter notre conception comme nous l'avons fait auparavant. À ce point d'arrêt, je veux toujours que mon en-tête couvre toute la largeur du module. Donc, pour ce faire, je peux en fait prendre la règle du point d'arrêt large et la déplacer vers l'étroit. C' est quelque chose que je veux vrai à la fois à ce point d'arrêt de milieu de gamme, et aussi à l'écran large. Je peux essentiellement dire que la colonne de la grille commence un, et la colonne de la grille et négative pour avoir sa portée toute la largeur de la ligne. Maintenant, nous avons un en-tête de ligne complète en haut. Maintenant, rappelez-vous, nous avons une disposition à quatre colonnes avec laquelle nous travaillons au lieu d'une mise en page à cinq colonnes. Donc, ce que j'aimerais voir se produire, c'est que j'aimerais que toutes les histoires à l'intérieur de mon bloc articles-recent aient une grille-colonne, et je veux enjamber deux colonnes. Donc, une fois que j'ai enregistré ceci, nous avons maintenant plus ou moins le genre de mise en page que nous recherchons à ce milieu de gamme. deux histoires sont également pondérées sur cet axe horizontal, les deux s'étendant sur deux colonnes, et les histoires secondaires sont assis en dessous. C' est beaucoup mieux que ce que nous avions avant, parce que nous avions une disposition de colonne unique pour les petits écrans, et maintenant nous avons un bon point d'arrêt de milieu de gamme pour tout ce qui est au milieu, se déplaçant vers le haut. Donc, c'est une amélioration, mais il y a un peu de travail d' ajustement et de finition que nous pouvons encore faire. Plus précisément, cette liste d'histoires ici en bas semble un peu comme si elle utilisait mieux l'espace disponible. Pour ce faire, je vais réellement traiter cette liste comme une grille elle-même à ce point d'arrêt particulier. Ce que je vais faire ensuite, c'est que je vais dire qu'une fois que j'ai atteint un point d'arrêt d'au moins une largeur de 35 ems, mais aussi à une largeur maximale de 60 ems. Je veux traiter cette liste un peu différemment. Donc, c'est un moyen que nous pouvons combiner fonctionnalités multimédias ensemble pour faire des requêtes multimédias plus complexes. Nous pouvons dire fondamentalement que nous voulons qu'elle soit d'au moins 35 ems de large mais pas supérieure à 65 ems, juste pour cibler la zone médiane. Une fois que nous avons ce point d'arrêt du milieu en place, alors je peux écrire un petit code pour cibler ma barre latérale. Plus précisément, je vais écrire des articles-recent-côté et des articles-récent-teaser-list. Cela me permettra de cibler à la fois l'élément de côté qui contient la barre latérale, et aussi la liste à l'intérieur de celui-ci. Ensuite, je vais écrire display : contents. Maintenant, c'est un petit morceau magique de la spécification CSS Grid qui nous permet de désactiver ces morceaux de HTML. En d'autres termes, nous demandons au navigateur de faire semblant que ces éléments n' existent pas et de se concentrer sur tout ce qui est à l'intérieur de la liste elle-même, particulier nos liens vers des histoires secondaires. Une fois que nous faisons cela, je sauve mon travail, je retourne au navigateur. Ces éléments de liste vont être traités comme s'ils faisaient partie de la grille qui se trouve au-dessus d'eux, et donc ils vont être disposés sur ces quatre colonnes. Maintenant, il existe différentes façons d'aborder ce problème. Vous pouvez utiliser d'autres méthodes de mise en page pour mettre en page ces éléments sont le long des mêmes lignes de grille, mais c'est un moyen vraiment efficace de faire quelque chose de similaire. Parce que nous l'avons réellement portée à une largeur maximale de 60 ems, une fois que nous passons à notre conception d'écran large, vous remarquerez qu'ils apparaissent dans la barre latérale. Nous avons désactivé ces styles au-dessus de notre mise en page grand écran, puis ils sont essentiellement situés dans cette cinquième colonne. Maintenant, nous avons une grille flexible, images flexibles et des requêtes multimédias qui fonctionnent ensemble. Nous avons commencé avec la mise en page grand écran et nous avons désactivé des parties de la conception qui ne conviennent pas aux écrans plus petits. C' est pour moi le signe d'un designer réactif vraiment efficace. Pour vous poser ces questions difficiles, pas seulement sur le petit écran et le grand écran, mais pour vous demander quelles autres expériences vous pourriez ne pas nécessairement envisager, et avoir un design ou une mise en page en place qui parle à certains de ces moyennes gammes ? Donc, maintenant que nous avons rendu le module d'articles récents réactif, je suis allé de l'avant et en fait traduit à la fois la lettre des éditeurs et aussi nos modules de couverture le long de la même manière exacte. J' ai commencé par regarder cette mise en page flexible et regarder comment elle se décompose, et j' ai appliqué certaines requêtes multimédias, non seulement pour désactiver les styles plus complexes, mais aussi pour affiner l'approche à plus petits écrans plus larges. Juste pour vous donner un aperçu rapide de certaines des décisions que j'ai prises, la lettre pour nos rédacteurs en chef, j'ai abordé d'une manière très similaire au module d'articles récents. Donc, sur des mises en page plus petites, j'ai fini par opter pour une autre mise en page de quatre colonnes spécifiée avec CSS Grid. Encore une fois, je traite les liens secondaires en bas d' une manière très similaire à la façon dont je l'ai fait dans le bloc d'articles récents. Puis en dessous d'un certain point d'écran, je me fie juste sur le texte pour fournir un peu de design pour les écrans plus petits. En d'autres termes, il n'y a pas de disposition de grille ici pour parler, bien que je pourrais certainement appliquer quand je le veux. Pour la couverture, j'ai fait quelque chose de très similaire. Donc, plutôt que de superposer le blurb et l'image l'un sur l'autre, j'ai décidé de les empiler sur des écrans plus petits. C' est tout aussi impactant, mais c'est un peu plus simple quand je n'ai pas autant d'images avec lesquelles travailler. Mais alors que l'écran devient un peu plus large, je peux commencer à chercher des opportunités à l'écran large pour ensuite introduire la mise en page complète seulement lorsque je suis au-dessus de cette largeur d'écran de 60 ems. Mais en dessous de ce point, il simplement empilé. C' est ainsi que vous rendez ces mises en page fluides réactives, avec un peu de travail de requête multimédia. 6. Ajuster votre conception: Dans cette leçon, je veux aborder trois domaines distincts qui peuvent vraiment mettre un niveau supplémentaire de polissage sur vos conceptions réactives, particulier la typographie, les mises en page de secours et l'imagerie. Ainsi, dans notre dernière section, nous avons examiné certaines façons de remodeler nos mises en page flexibles à l'aide requêtes multimédias pour veiller à ce que les choses soient belles sur le petit écran, mais aussi sur l'écran large. Donc, ce que nous avons fait jusqu'à présent, c'est que nous avons une très belle adaptation qui se passe au niveau de la grille pour chacun de ces modules. Les choses passent d'une disposition d'une colonne à une disposition de quatre colonnes, puis finalement à une disposition de cinq colonnes à l'extrémité supérieure. Mais si vous passez un peu de temps à regarder ces dessins, vous remarquerez certains domaines dans lesquels ils ont encore besoin d'un peu plus d'attention, particulier sur leur typographie. Ainsi, par exemple, ce titre vraiment important dans les lettres du module de notre éditeur. Sur les écrans plus petits, ce texte vraiment grand proéminent commence à se sentir bien assez grand et proéminent et. En fait, si vous regardez cela sur un petit écran ou sur une tablette, vous remarquerez probablement qu'il commence à dépasser le reste de l'écran. Ainsi, dans la leçon précédente, nous utilisons des requêtes multimédias pour modifier nos grilles afin de ne pas servir de mises en page grand écran jusqu'aux utilisateurs de petits écrans. Nous devrions également rechercher des possibilités dans nos conceptions réactives pour nous assurer que nous ne servons pas la topographie à écran large jusqu'aux utilisateurs de petits écrans. Donc, ce que j'ai fini par faire dans cette leçon, c'est en train de regarder quelques façons d'utiliser les requêtes média pour personnaliser la typographie. Donc, par exemple, sur un appareil d'écran plus petit, j'ai essentiellement apporté la taille du type infer considérablement ce titre. Ensuite, quand nous sommes arrivés à notre point de rupture de milieu de gamme à environ 35 M, je peux augmenter la taille du type un peu plus. Ensuite, une fois que nous avons atteint notre disposition grand écran, nous avons le titre complet et la vue. Maintenant, cela peut également s'appliquer à notre article de couverture. Vous avez ce gros, beau titre et ce blurb sur des écrans plus larges. Mais sur les écrans plus petits, ce dimensionnement de type ne semble pas nécessairement approprié. Donc, nous pouvons aussi serrer cela, peut-être rendre ce sous-tête un peu plus petit ainsi et réduire le rembourrage sur le blurb ainsi que pour s'assurer qu'il est vraiment agréable et approprié à chaque écran de taille. Donc, ce sont en quelque sorte les défis devant les concepteurs réactifs de penser non seulement à la façon dont la mise en page change au niveau macro, mais aussi à regarder ces petits détails comme celui-ci et à s'assurer que les choses se sentent à la maison sur des écrans plus petits aussi. L' autre chose dont nous devrions parler est ce qu'il faut faire lorsque les navigateurs ne prennent pas en charge certaines des fonctionnalités que vous pourriez utiliser pour alimenter vos conceptions réactives. Maintenant, pour la classe d'aujourd'hui, nous utilisons vraiment CSS Grid pour fournir cette grille fluide flexible qui sert de base à nos conceptions réactives. Maintenant, vous n'avez pas besoin d'utiliser CSS Grid, vous pouvez utiliser des floats ou flexbox ou ce que vous avez si vous préférez le faire, mais au moins pour moi, je trouve que c'est un excellent moyen de concevoir des mises en page pour le web moderne. La chose avec CSS Grid cependant est que c'est relativement nouveau et il y a encore des navigateurs et des appareils plus anciens qui ne le supportent pas nativement. Alors, quel est le meilleur scénario pour ces appareils et navigateurs ? Vous avez quelques options différentes. L' un est que vous pourriez éviter CSS Grid. C' est un choix parfaitement valable. Au lieu de cela, ce que j'aime réellement utiliser est quelque chose appelé Feature Requêtes. Maintenant, nous avons largement utilisé les requêtes média tout au long de ce cours pour adapter nos mises en page réactives en fonction des caractéristiques des médias qui rendent nos conceptions. Les requêtes de fonctionnalité nous permettent de demander au navigateur s'il prend en charge certaines fonctionnalités CSS, et si c'est le cas, alors nous pouvons impliquer conditionnellement ces mises en page plus améliorées. Maintenant, la façon dont les requêtes de fonctionnalité sont écrites est avec la directive Art prend en charge. Maintenant, si nous regardons notre conçu dans Internet Explorer, les choses vont sembler un peu bizarres sur les anciennes versions d'Internet Explorer qui ne prennent pas en charge CSS Grid. Donc, les questions que nous devons vous poser sont, voulons-nous fournir une mise en page de secours écrite avec des flottants, ou avec flexbox, ou qu'est-ce que vous avez, qui est fondamentalement similaire à ce que nous avons créé avec CSS Grid ? C' est une approche parfaitement valide, et selon qui est dans votre public et les types de navigateurs qu'ils utilisent, cela pourrait être la meilleure option pour vous. Pour la plupart des projets sur lesquels j'ai travaillé récemment, à la place, ce que j'ai choisi de faire est de servir une mise en page de colonne unique pour les navigateurs qui ne comprennent pas CSS Grid, puis pour les navigateurs qui le font, pour plus de appareils et navigateurs, je leur sers une mise en page complète pilotée par la grille. Donc, listez quatre notre magazine fictif, je vais écrire une requête de fonctionnalité, et je vais demander au navigateur si elle prend en charge la grille d'affichage. Maintenant, si le navigateur comprend les requêtes de fonctionnalité, et qu'il comprend la grille d'affichage, je peux appliquer des règles plus avancées à l'intérieur de ce bloc. Maintenant, vraiment ce que je veux voir arriver, c'est que je veux restreindre la largeur de l'élément body uniquement aux navigateurs qui ne le comprennent pas. Donc, à la place, je vais définir une marge de zéro auto pour tous les navigateurs et définir une largeur maximale de 30 ems sur l'élément body qui va essentiellement créer une belle colonne centrée au milieu de la fenêtre du navigateur s'ils ne supportent pas CSS Grid. Maintenant, pour les navigateurs qui prennent en charge CSS Grid, je veux désactiver cette largeur maximale et je veux remettre la marge à zéro. Ce sont mes règles de mise en page les plus avancées. Maintenant, si nous revenons à Internet Explorer, vous allez voir que les choses sont parfaitement centrées au milieu de la fenêtre du navigateur. Maintenant, cela peut ne pas nécessairement être la mise en page que vous et moi avons passé beaucoup de temps à concevoir, mais l'important est qu'il permet à chaque navigateur et à chaque appareil d'accéder au contenu de notre page Web indépendamment de leurs capacités. Pour les navigateurs un peu plus avancés, ils obtiennent une expérience un peu plus raffinée. Donc, cette leçon de réglage fin, nous avons cherché des moyens de masser un peu notre topographie et aussi de fournir une meilleure expérience pour les appareils et navigateurs moins performants. Il existe également différentes façons de rendre nos images réactives. Parfois, simplement redimensionner une image n'est pas nécessairement la meilleure approche. Vous pouvez utiliser différents formats de fichiers différents périphériques s'ils ne prennent pas en charge le type d'image que vous essayez de leur fournir. Peut-être que vous voulez servir des images de haute définition sur des écrans de meilleure qualité sans surcharger appareils moins capables avec des images qu'ils ne rendront pas. Ou peut-être, dans certaines circonstances, vous voulez être très précis sur les cultures d' images que vous affichez sur certaines classes d'appareils. Si vous passez du temps à parcourir cette mise en page complète que j'ai faite, vous verrez différentes instances dans lesquelles j'ai utilisé différentes parties de la spécification d'images réactives pour faire exactement cela. Par exemple, le logo qui apparaît sur la tête de mât utilise l'élément image et à l'intérieur de l'élément image, vous remarquerez qu'il existe une balise source. Eh bien, cette balise source pointe vers un fichier SVG qui est un rendu vectoriel agréable et net de notre petite marque de logo, mais il n'est servi qu'aux navigateurs qui comprennent l'élément image et qu' exception des images SVG basées sur le type que nous avons mis sur cette source. Si un navigateur ne comprend pas l'élément image ou n'accepte pas les images SVG, nous avons laissé une image à l'intérieur de notre élément image qui agit comme un repli qui pointe vers un ancien fichier SVG. En d'autres termes, nous pouvons conditionnellement livrer cette image de meilleure qualité aux navigateurs et appareils qui la comprennent, et s'ils ne le font pas, nous les laissons avec une belle repli. Nous pouvons également être très prescriptifs sur les types d'images que nous voulons montrer sur différents points de rupture. Nous pouvons également utiliser l'élément image pour le faire. Vous remarquerez sur la couverture, sur des écrans plus petits, je charge un peu différent de l'image. Il est un peu plus concentré sur le visage du dinosaure, mais sur les écrans plus larges, nous revenons à cette image carrée complète qui est superposée sur le module complet. C' est une culture légèrement différente et c'est un peu plus convivial. Je suis capable de spécifier quelle image est chargée où en utilisant à nouveau l'élément image. Mais maintenant j'utilise réellement la balise source pour dire au-dessus d'un certain point de rupture, je veux utiliser cette requête multimédia pour charger conditionnellement dans cette image d'écran blanc. Ensuite, par défaut, j'ai cette ancienne balise d'image simple qui agit comme l'expérience de base pour les utilisateurs de petits écrans. Donc, dans notre leçon jusqu'à présent, nous avons examiné différentes façons d'adapter nos mises en page pour les rendre plus flexibles et plus réactives, mais dans la leçon suivante, nous allons prendre du recul par rapport au HTML et au CSS, et à la place parler de notre processus de conception et de la façon dont il pourrait devoir changer maintenant que nous concevons pour plus d'appareils que jamais auparavant. 7. Un processus plus adaptatif: Dans la leçon jusqu'à présent, nous avons regardé beaucoup et des mises en page réactives. Mais maintenant, j'aimerais parler un peu plus largement de la façon dont votre travail en tant que développeur réactif ou designer réactif pourrait changer au cours des prochains mois ou quelques années. Dans l'une des toutes premières leçons, j'ai dit que les éléments qui rendent un design réactif sont des grilles fluides, des images fluides et des requêtes médiatiques. Mais, le fait est qu'il s'agit vraiment de la mise en page, établissement d'une hiérarchie visuelle et de la définition de la façon dont cette hiérarchie pourrait devoir changer au fil du temps à l'aide de points d'arrêt et de grilles fluides. Le fait est que tous ces ingrédients sont vraiment concentrés sur la mise en page, sur l'établissement d'une hiérarchie visuelle, puis en utilisant des requêtes média pour expliquer comment cette hiérarchie doit changer à mesure que les écrans deviennent plus larges ou plus petits. Le fait est que le design est tellement plus que ça. Il y a cette citation que j'aime de Paul Rand. Il a dit un jour que le design est la méthode de mise en forme et de contenu. Plus récemment, un collègue et ami à moi, Mark Boulton, a dit que le design est la chose autour du résultat final. design n'est pas seulement l'ensemble final de maquettes ou le site que vous avez lancé, c'est le processus que vous avez pris pour y arriver. Le chemin que vous avez parcouru vers les questions difficiles que vous deviez vous poser en tant que concepteur ou développeur. C' est ce qui façonne finalement votre design. Alors, quand on se demande ce qui rend un design réactif ? Je pense que l'accent est un peu mis sur la mauvaise partie de l'expression. En d'autres termes, comment notre processus doit-il changer pour rendre la conception réactive beaucoup plus facile pour nous ? Comment devons-nous devenir des concepteurs plus réactifs ou des développeurs plus réactifs ? Donc, j'aimerais parler un peu dans cette leçon de la façon dont ma pratique a changé au cours des dernières années. Je voudrais commencer par parler d'une étude de cas spécifique, à la refonte du Boston Globe, qui a été la première refonte réactive à grande échelle qui a eu lieu il y a quelques années. Maintenant, quand mes collègues et moi avons été amenés pour aider dans ce projet, l'équipe avait déjà créé cette suite de très belles compositions pour une mise en page large, comme nous l'avons fait aujourd'hui dans ce cours. Donc, le défi que nous avons dû comprendre était comment prendre ces photos d'un site Web, et les traduire en un design fluide complètement réactif. Parce que le défi avec les maquettes est qu'ils sont des images de largeur fixe d'un site Web. Ils ne sont pas nécessairement aussi flexibles que la toile pour laquelle nous sommes en train de concevoir sur le web moderne. Maintenant, vous pourriez être capable de contourner tout ça, non ? Parce que les compositions peuvent être répliquées, vous pouvez afficher différentes versions d'une mise en page à différents points de rupture, mais c'est incroyablement cher. Décomposer les points d'arrêt du petit écran et du milieu de gamme pour toutes ces différentes pages devient vraiment difficile dans Photoshop ou dans Sketch. Par conséquent, ces outils de conception ne sont pas nécessairement aussi flexibles que nous en avons besoin lorsque nous concevons de manière réactive. Nous avons également trouvé que la façon dont nous gérions le processus créatif était un peu trop inflexible pour un produit réactif. Plus précisément, lorsqu'il est arrivé au point de transition entre la conception et le développement frontal, le client a eu l'idée qu'il avait déjà approuvé le travail. Ils avaient signé sur les comps, et donc il était juste plus ou moins un design dans le navigateur qui représentait la conception dans les comps qu'ils avaient approuvés. Malheureusement, ces comps n'étaient pas aussi flexibles que nous en avions besoin. Donc, c'est pourquoi très tôt, moi et les autres coéquipiers avec qui je travaillais, avons réalisé que nous devions briser ce mur entre la conception et le développement, et au lieu de cela, itérer plus rapidement sur la conception et le navigateur. Nous avons tous travaillé efficacement comme une seule équipe créative. Certains d'entre nous conçoivent principalement dans Illustrator ou Photoshop. D' autres travaillent principalement avec HTML et CSS. Nous concevons tous ce site réactif ensemble. La façon dont nous avons travaillé à cette fin a été avec une révision plus collaborative de la conception, c'est là que nous nous asseyions en groupe et examinions réellement la prochaine série de travaux ensemble, examinant spécifiquement les compositions produites par la moitié de l'équipe de conception. Lorsque nous nous sommes réunis en équipe de conception, nous nous présentons le design les uns aux autres. Donc, la moitié de l'équipe de conception raconterait un peu d'histoire sur la façon dont ils sont arrivés là, certaines des décisions qu'ils ont prises dans cette mise en page, et comment il a répondu aux besoins de l'entreprise. Dès lors, c'était vraiment sur la moitié du développement de l'équipe de conception de poser beaucoup de questions, et il s'agissait de questions très variées. Ils peuvent aborder des questions de mise en page, sur ce qui se passe lorsque vous avez deux éléments d'information dominants. Disons dans un module, et puis quelles étaient les attentes sur la moitié de conception de l'équipe si vous avez perdu l'avantage de deux colonnes côte à côte. Si vous effectuez le rendu de ce module sur un petit écran, lequel de ces deux éléments d'information devrait apparaître en premier ? Ils pourraient aborder des questions d'interaction. Si vous regardez un carrousel photo par exemple, comme il a été conçu dans Photoshop, il est probablement assez facile de deviner comment cela pourrait fonctionner si vous avez une souris à la disposition de votre appareil. Si vous appuyez ou cliquez sur un élément pour faire avancer le carrousel. Mais que se passe-t-il si vous n'avez pas vraiment de souris ? Que se passe-t-il si vous êtes sur un écran tactile ? Souhaitez-vous construire une accessibilité pour toucher et être en mesure de glisser à travers ces photos ? Que se passe-t-il si quelqu'un ne voit pas le design comme vous et moi, et qu'il fait lire cette information à haute voix dans un navigateur parlant ? C' est aussi quelque chose que nous pouvons concevoir. Alors, quelles sont les attentes de la moitié de l'équipe de conception sur ce que devrait être cette expérience ? Je vais être honnête, j'ai été sur la fin de la réception de certaines de ces questions dans de nombreux projets et ils sont terribles. Parce que très souvent en tant que designer, je n'ai pas envisagé certaines de ces options. Mais nous nous sommes rendu compte très tôt dans la refonte du Boston Globe, que c'est bon si nous n'avions pas de réponses. fait, ce que nous essayons de faire est de nous assurer que chaque membre de l'équipe a une compréhension commune de ce qui nous a amenés jusqu'à présent, parce qu'à un moment donné, le processus qu'il va incomber à moitié de l'équipe d'hériter de la l'autre moitié du travail. Ils doivent donc être en mesure de faire des recommandations sur la façon de procéder. C' est quelque chose que j'ai entendu de tous mes clients, depuis que j'ai travaillé sur le Boston Globe. Que lorsque vous pouvez rapprocher le design et le développement, cela se traduit toujours par des produits numériques réactifs plus forts. La qualité du travail s'améliore, plus la conception et le développement peuvent travailler ensemble. partie de cela consiste en fait à traiter la phase de prototypage dans le cadre du processus de conception, car une fois que vous avez une compréhension commune de la façon dont les composs sont arrivés à ce point, vous devez les sortir des comps et le coder. En d'autres termes, vous devez les intégrer dans un prototype réactif flexible qui est en fait la toile pour laquelle nous concevons vraiment. Une fois que vous pouvez faire, que vous pouvez demander aux développeurs frontaux de faire des recommandations sur la façon de commencer avec une mise en page de petit écran, et d'introduire des grilles flexibles, des images flexibles et des requêtes multimédias pour créer un prototype qui est comme réactif que possible. Maintenant, dans le prototype, ils n'ont pas nécessairement conceptions de référence pour chacun de ces points d'arrêt. En d'autres termes, ils conçoivent dans le navigateur, et ils font de bonnes recommandations plus souvent qu'autrement, mais ce ne sont que des recommandations. Donc, c'est pourquoi, à l'autre extrémité de la phase de prototypage, je trouve qu'il est incroyablement utile de revenir en équipe, et d' avoir en fait un examen plus interactif de la conception. Mais plutôt que d'imprimer des dessins et de les coller sur un mur ou peut-être de les projeter sur l'écran, il est vraiment incroyablement utile de charger le prototype sur autant d'appareils et de navigateurs que possible, et le remettre aux gens. En fait, laissez-les travailler avec la conception dans ces différents appareils, et parler de la façon dont le design se sent réellement pour eux. Ces critiques de conception plus interactives sont un moyen incroyablement puissant de vérifier un design réactif en direct dans autant d'appareils et de navigateurs que possible. Vous pouvez simplement avoir une conversation en cours sur la façon dont le design réactif se sent. Est-ce que la mise en page semble appropriée car nous la regardons sur des écrans de taille différente ? Est-ce que je me sens bien si je suis sur un écran tactile et que je glisse à travers différents éléments ? Ou plus important encore, des éléments ont-ils réellement besoin d'une direction de conception supplémentaire ? Cherchez des opportunités dans votre conception où certaines parties de l'élément pourraient se briser, et peut-être la moitié de la conception que l'équipe peut decamper, et faites quelques recommandations sur la façon de composer certains de ces détails. En d'autres termes, si vous pouvez utiliser étroitement le prototypage et les outils de conception traditionnels, vous obtiendrez toujours un produit plus réactif. En d'autres termes, traiter vos comps Photoshop ou vos fichiers Sketch comme canonique, comme référence parfaite, est quelque chose qui va réellement compromettre la valeur de votre produit responsive parce qu'il s'agit d'images d'un site Web sur la fin de la journée. Ils ne peuvent pas vous dire ce qui se passe sur des écrans de taille différente ou quand les polices ne chargent pas ou quand une partie de votre conception ne fait pas de rendu dans le navigateur. En d'autres termes, HTML et CSS sont les meilleurs outils de conception que nous avons pour combler certaines de ces lacunes. Mais idéalement, nous allons travailler ensemble. Maintenant, l'autre chose qui est incroyablement puissante, et je pense que c'est vrai pour tout projet réactif, c'est de regarder attentivement les informations que nous concevons sur ces écrans, et cela a été très précieux pour nous sur le Boston Globe. À chaque étape du processus, nous nous demandions toujours quelle est la valeur de ce contenu pour l'utilisateur mobile ? Mobile a d'abord été inventé par le designer Luke Wroblewski il y a plus de 10 ans. À l'époque, il soutenait que les écrans mobiles devaient être notre priorité dans le processus de conception. Il a fait valoir cela pour un certain nombre de raisons. Le trafic mobile avait explosé à l'époque et franchement, il explose encore maintenant. Mais aussi, ces appareils ont toutes ces merveilleuses capacités. Donc, si nous commençons à concevoir pour eux en premier, cela améliorera réellement le produit, et introduira de nouvelles fonctionnalités passionnantes. Mais enfin, et je dirais peut-être le plus important, il arguait que les écrans mobiles nous obligent à nous concentrer. Qu' il s'agit d'écrans 80 pour cent plus petits que ceux pour lesquels nous avons traditionnellement conçu. Donc, si nous pouvons commencer par concevoir là-bas, nous pouvons construire un consensus autour de ce qui compte le plus pour notre conception, et l'utiliser pour améliorer l'expérience pour tout le monde. C' est quelque chose que j'ai entendu de chaque design réactif réussi à grande échelle. Un de mes exemples préférés de cela est en fait le très cher site Virgin America, et après la refonte a commencé, un de mes collègues et moi avons interviewé l'équipe derrière la refonte. Le responsable de la conception du projet, un gars nommé Joe Stewart a dit une fois : « Pour une raison quelconque, les gens pensent qu'il est normal d'avoir des expériences utilisateur ciblées sur mobile, mais quand vous arrivez au bureau, il s'agit de lancer dans le évier de cuisine. L' une des grandes choses de responsive, c'est qu'elle vous oblige à prendre ces décisions mobiles sur un ordinateur de bureau. » En fin de compte, le mobile d'abord consiste à concevoir pour se concentrer. Peu importe si vous concevez pour une mise en page d'écran ou une mise en page d'écran large, jetez un oeil attentif à chaque élément d' information actuellement inséré sur cette page, et demandez-vous s'il y a réellement un à l'utilisateur mobile ? Si ce n'est pas le cas, eh bien peut-être que cela vaut la peine d'avoir une conversation difficile sur la valeur qu'il a pour n'importe quel utilisateur. Parce que nos audiences sont tellement mobiles de nos jours, cela doit vraiment être notre point de départ. Le grand secret de la première conception mobile, est que si vous pouvez vraiment vous concentrer sur ce qui compte réellement pour vos utilisateurs, cela va rendre vos utilisateurs non-mobiles beaucoup plus heureux aussi. Donc, ce ne sont que quelques-unes des stratégies à garder à l'esprit lorsque vous concevez de manière réactive. Regardez la façon dont vous collaborez avec les concepteurs et les développeurs, et posez-vous également certaines de ces questions difficiles sur une première priorité mobile dans votre mise en page. Si vous pouvez le faire, vous allez trouver très belles conceptions réactives qui s'adaptent et se sentent à la maison sur n'importe quelle classe d'appareil qu'il pourrait leur rendre visite. 8. Réflexions finales: Donc, dans cette classe, nous avons utilisé les ingrédients clés d'un design réactif. Grilles fluides, images fluides et requêtes multimédias, pour construire des mises en page plus flexibles et indépendantes de l'appareil. Nous passons également un peu de temps à examiner certaines façons de peaufiner nos expériences réactives. Pour ajuster la typographie ou l'imagerie en fonction des besoins de l'appareil ou du navigateur, pour s'assurer que les choses s'adaptent et se sentent à la maison sur n'importe quelle taille d'écran. J' espère vraiment que vous utiliserez cette classe comme point de saut. Ensuite, vous utilisez quelques-unes des techniques que nous avons examinées aujourd'hui pour construire votre propre vocabulaire sur la façon de construire de beaux sites réactifs. J' aimerais voir certains des travaux réactifs que vous faites, peut-être partager dans la galerie de projets. Merci beaucoup d'avoir pris ce cours, je suis vraiment excité de voir le travail que vous avez fait. 9. Que faire ensuite ?: [ MUSIQUE]