Un introduction aux sites Web adaptatifs : un design pour chaque appareil

1. Introduction: Salut. Je suis Spencer. Je suis web designer ici chez Skillshare. Je fais partie de l'équipe qui a conçu la vidéo que vous regardez la scène en ce moment. Donc, lorsque vous naviguez, regardant votre propre profil, en téléchargeant votre projet, tout a été touché par le processus de conception que moi-même et les autres concepteurs faisons ici. Dans ce cours rapide, vous apprendrez les bases de la création d'une grille adaptable. Adaptable, ce qui signifie que cette grille va contenir tous les éléments de votre design et que vous le regardiez sur un ordinateur portable, une tablette, un téléphone, tout va vraiment s'ajuster en conséquence à une grille à n'importe quel taille d'écran que vous tirez vers le haut de ce site Web. Avec quelques réglages, vous pouvez généralement ajuster le design que vous avez déjà à intégrer dans une nouvelle grille que vous créez. Mais vous pouvez également utiliser l'ensemble de compétences que vous avez pour tous les nouveaux designs que vous pouvez présenter. Cela vraiment être mis dans une grille. Vous pouvez entendre des grilles et penser que les grilles sont limitées, qu'elles vont restreindre votre conception, mais ce n'est vraiment pas le cas. grilles sont un système visuel sous-jacent. Ce n'est pas la représentation visuelle de ce que vous créez. Donc, une grille vraiment simple va fonctionner pour tout ce que vous créez, que ce soit propre, complexe, fantaisiste, même votre flocon de neige d'un design. n'y a pas si longtemps, Skillshare n'était pas réactif et ne regardait pas bien sur les téléphones, ce qui est un problème parce que de nos jours beaucoup de gens accèdent au web sur leurs téléphones, sur leur tablette. Ce que vous voyez dans cette classe, c'est que ce n'est pas si inaccessible, ce n'est pas si difficile à faire. Donc, je vais vraiment vous montrer le processus de ce que nous avons fait de prendre la page d'accueil et de l'ajuster pour s'adapter à la grille que nous avons créée pour Skillshare. 2. Préface : pour est-il important d'avoir un site adaptatif: Donc, ici, nous avons la page d'accueil marketing Skillshare de quelque temps l'année dernière, et cela est montré en ce moment à 100% et c'est la seule façon dont il a été conçu. Il a été conçu pour le bureau, pour un ordinateur portable. À juste titre, il semble assez bon à cette taille. Vous avez votre cisaillement en haut, l' appel principal à l'action , vous voulez devenir membre d'ici, ou vous pouvez cliquer pour en savoir plus et obtenir plus de détails. Ensuite, nous avons quelques sous-sections ci-dessous. Donc, ils sont principalement composés d'images, liens texte, qui est le titre, quelques sous-copies en dessous, et même la même chose pour la section communautaire, vidéo, presse, et nous avons un pied de page en bas avec un tas de liens dans ça. Si nous zoomons un peu et disons que nous faisons semblant que maintenant cela est réduit et ajusté sur une tablette. Ce n'est pas si mal réduit à cette taille, n'est pas idéal, mais aucun des éléments n'est vraiment si petit. Donc, vous pouvez toujours lire le texte, le bouton se sent toujours assez grand, les images sont toujours belles, vous savez ce que vous regardez. Donc, dans l'ensemble, ça a marché, pas un briseur d'affaire. Mais si nous allons ici et regardons mobile, donc ça à 100%. Donc, ce que j'ai fait ici, c'est que j'ai juste pris le design précédent et l'ai réduit, ce qui se passerait. Donc, vous avez votre design qui est d'environ un millier de pixels ici, et je pense que c'est un peu plus et nous le réduisons à environ 400 pixels de large, ce qui dépendra du téléphone que vous utilisez mais juste de la façon dont l'illustrateur le rend, c'est encore plus difficile à lire, mais vous pouvez avoir l'idée de la taille du bouton et de la taille du texte, ce texte est vraiment petit et difficile à lire. Ces liens textes avant et les boutons, plus lisibles, ne peuvent pas vraiment les toucher très facilement, et c'est vraiment difficile à comprendre, vous devez zoomer pour vraiment faire quoi que ce soit ou lire quoi que ce soit sur cette page, ce qui n'est pas une expérience d'atterrissage idéale. Donc ceci, la page d'accueil, était en fait notre page la plus visitée sur mobile. Près de 20 pour cent de nos visiteurs sur la page d'accueil venaient par téléphone. quelque sorte, à juste titre. Cette page de Mobile avait plus de 40 pour cent taux de rebond et ce que cela signifie est que, les gens qui visitaient le site à partir d'un téléphone partaient immédiatement à un taux beaucoup plus élevé que le bureau. Avec cela, le nombre de personnes qui faisaient ce que nous voulions qu'elles fassent à partir de cette page qui est devenue membre était vraiment faible. Beaucoup plus bas que le bureau et c'est parce que vous ne voyez pas vraiment l'appel à l'action très bien, vous ne venez pas ici et comprenez vraiment ce que vous devriez faire ou ce que Skillshare essaie de vous dire. Donc, nous savions vraiment que nous devions optimiser cette page pour mobile sinon vous continueriez à partir. Donc, nous avons commencé à créer un système de grille réactif sur tout le site, qui serait d'adapter toutes nos vieilles pages, comme celle-ci, à une nouvelle grille et d'utiliser comme base pour chaque nouvelle page que nous avons conçue pour aller de l'avant. Dans la vidéo suivante, je vais vous expliquer un peu plus sur ce qu'est une grille de base. 3. Projet : le design d'une page d'accueil adaptative: Donc, brièvement, avant de commencer à parler de grilles et de points d'arrêt, je veux parler du projet rapide que vous allez créer ici, qui est d'adapter ou de concevoir une page d'un site Web dans une grille réactive. Donc, si vous avez un site Web en ce moment qui n'est pas réactif, corrigons cela, faisons ce projet ici. Mais si vous n'avez pas de site web, ou si vous ne voulez pas vraiment travailler sur votre site, je comprends que, nous pourrions choisir le site de votre restaurant préféré. La plupart des restaurants ont des sites Web. Ils sont assez simples, mais il est étonnamment pas réactif. Même une grande chaîne comme l'Olive Garden. Désolé, Olive Garden, pas mon restaurant préféré, a un site web simple, pas responsive. La première étape est si facile. Tu devrais le faire maintenant. Cinq minutes de haut. Prenez une capture d'écran du site Web que vous faites tel quel, ce soit votre propre site Web, le site du restaurant que vous voulez faire, ou un design que vous avez mis en place mais n'avez même pas encore construit. Prenez cette capture d'écran, téléchargez-la dans la galerie de projets, et c'est la première étape. Le projet final que vous allez partager pour cette classe sera de prendre écran que vous décidez de faire et vous allez le télécharger en trois tailles. Donc, il va y avoir un ordinateur de bureau, une tablette et un téléphone, et ça va fonctionner dans cette grille. 4. Qu'est-ce qu'un système de grille ?: Ici, j'ai un design épuré genre de filaire. En fait, c'est totalement filaire. Comme vous pouvez le voir, j'ai mis une grille dessus. Donc, c'est la grille de 12 colonnes que nous utilisons Skillshare, et il divise l'espace horizontalement en ces unités appelées colonnes. Les colonnes sont les bits blancs plus larges. Entre eux, nous avons les gouttières. Donc, ces 10 lignes et gouttières sont vraiment juste là pour fournir un espacement uniforme entre les colonnes. Du contenu que vous voyez, qui est le texte et les images, ceux-ci sont contenus dans la grille, mais peuvent varier en fonction de la largeur. Donc, évidemment, ils vont prendre plus qu'une seule colonne de grille. Ce texte passe ici sur tous les 12 et ces images sont divisées en plus petites unités de quatre colonnes chacune. Cela leur permet d'avoir trois images dans une rangée. Ces colonnes vont se rétrécir proportionnellement avec le contenu à l'intérieur. Donc, comme nous avançons ici, comme nous arrivons à un écran plus petit qui Intel fait une grille plus petite, donc ne fait pas une énorme différence notable sur la façon dont cela fonctionne. Donc, vous verrez que beaucoup de textes ont chuté à cette troisième ligne, parce que la taille du texte n'a pas changé, juste la quantité d'espace dans laquelle nous pouvons l'afficher a changé. Mais il est un peu plus évident quand vous regardez ces visages souriants côte à côte, comment ces visages souriants dans le plus petit écran prenant encore quatre colonnes, mais les quatre colonnes ne sont maintenant pas aussi larges. Ce qui se passe avec le texte ci-dessous car il est contenu sous forme une unité est un texte similaire à ce que nous avons vu avant descend. En fait, il passe de deux lignes à trois, ce qui signifie que tout le contenu qui serait assis dessous qui va juste être poussé vers le bas encore plus loin. Maintenant, il est arrivé que la page si généralement lorsque vous prenez une page comme celle-ci, et que vous la faites un peu moins large dans une grille, la page devient une page de défilement plus longue. Donc, vous vous demandez peut-être comment vous décidez de votre système de grille. Quelle taille, et combien de colonnes et c'est une bonne question. Alors, faisons défiler ici. Ceci est juste un affichage qui montre que plus vous avez de colonnes dans votre grille, plus vous avez d'options de mise en page. Donc, en ce moment, c'est une grille à deux colonnes. Donc, si nous regardons spécifiquement les objets de visage smiley, vous pouvez voir que vous avez deux options de mise en page, quatre éléments dans une rangée. Vous avez une pleine largeur qui va prendre les deux colonnes ou vous pouvez mettre un élément dans chaque colonne. Donc, ce que vous avez ici à la moitié de la taille. Si nous transformons cela à travers la grille de colonne en une grille de quatre colonnes, vous allez obtenir beaucoup plus d'options, car comme vous pouvez le voir, vous gardez les mêmes options de pleine largeur qui est maintenant sur quatre moitié, qui est maintenant à travers deux, et on a ces gars. Donc, maintenant vous avez des colonnes individuelles qui ont la moitié de la taille de ce qu'il est dans une grille à deux colonnes, et lorsque vous avez plusieurs colonnes, vous pouvez rendre les choses plus grandes et plus petites dans la même ligne. Donc, que vous souhaitiez le traiter comme une section primaire avec quelque chose de côté secondaire ou mélanger un peu la mise en page, vous avez cette option. Donc, cela va croître de façon exponentielle lorsque vous ajoutez des colonnes dans votre grille. Nous avons fini par aller avec une grille de 12 colonnes sur la sculpture, nous avons joué avec beaucoup d'options différentes. Donc, ce que nous avons ici est en fait une grille avec 12. Nous savions que nous voulions un design divisible par deux, trois et quatre. Donc, ici, nous le voyons divisible par trois, sorte que nous pouvons avoir des lignes avec des objets de famille et avoir une variété de si nous voulions des objets plus petits, nous pourrions mettre quatre images à travers et les avoir trois colonnes chacune, et ainsi de suite. Dans la prochaine vidéo, je vais vous montrer comment nous avons modifié l'un de nos modèles pour s'adapter à ce nouveau système de grille à 12 colonnes. 5. Créer une grille: Donc, maintenant, regardons en arrière la conception de la page d'accueil que nous avons vu avant quelques vidéos, et en plus, posons la grille que nous avons vu dans la dernière vidéo. Donc, ce que nous allons faire maintenant, c'est montrer comment nous pouvons modifier un design existant. Parfois assez facilement à cette grille afin que nous puissions le faire fonctionner de manière réactive, et à des tailles d'écran plus petites ce que nous avons vu cette page d'accueil ne fait pas actuellement. Donc, les deux premières sections sont en fait assez bonnes. Nous avons en fait conçu cette grille basée sur ces pages existantes qui sont à 9h30. Donc, il va regarder à première vue comme si tout s'y insère assez bien, comment les choses s'alignent sur la grille extérieure ici, et ici sur la droite. Nous n'avons pas vraiment besoin d'ajuster ces boutons ou ce texte, je ne vais pas le faire. Je ne pense pas que chaque bouton ait besoin d'être dans une gouttière et que tout doit être espacé de la largeur d'une gouttière, je pense que cela aurait l'air un peu bizarre dans ce cas. Donc, allez laisser ça tranquille et juste savoir qu'au fur et à mesure que le texte s'enroule, nous allons frapper un point d'arrêt, dont je parlerai un peu plus tard, que j'ajusterai les boutons quand il aura une certaine taille. Donc, cela nous pouvons laisser seuls à cette taille et la même chose pour cela. Donc, ce que nous avons examiné mais parce que nous avons une grille de 12, et nous avons une rangée de trois, cela fonctionne déjà. Il s'insère dans la grille, ils sont espacés à 30 qui sont ces gouttières. Donc, cette section pour en ce moment un peu déjà fait. Cependant, lorsque nous arrivons à cette pièce, nous avons une rangée de cinq éléments. Ce qui ne fonctionne pas parce que 12 n'est pas divisible par 5. Donc, parce que ces éléments n'ont pas de gouttières entre eux, quand cette grille devait se rétrécir, ils ne seraient pas espacés correctement. Donc, nous avons quelques options ici. Nous voyons cela, nous pouvons dire que nous pouvons aller à une rangée de six projets, à un autre projet ici, ce qui signifie rendre ce gars plus petit et avoir deux, mais cela crée un peu de problème. Donc, en plus d'être assez petit, vous pouvez voir qu'avec certains noms et followers, cela va créer un problème. Je ne veux vraiment pas que cela coule à la ligne suivante et devienne beaucoup plus grand que ces images. Donc, je ne pense pas que ce soit deux contre y va marcher. Mais, si on passe à trois, alors on a plus de place que maintenant pour les noms et les métaphores. Comme cela se développe dans cette poussée vers le bas, cela poussera tout le reste en dessous. Pour l'amour de la vitesse, je ne vais pas aller de l'avant et faire cela, mais comme vous déplacez les choses vers le bas juste pour être sûr que tout bouge en conséquence. Mais comme vous le voyez ici, avec trois, nous ne pouvons pas adapter cinq éléments de trois colonnes de large. Donc, on va devoir se faire couper. Donc, nous allons descendre à quatre, qui dans ce cas, je pense que c'est bon. Si vous pensez que quatre ne suffisent pas mais que vous voulez le garder aussi large, vous pouvez dire que vous allez avoir deux rangées de projets et avoir huit projets. Donc, je vais aller de l'avant et supprimer ceci, et grâce à la magie de la télévision, je vais tirer ce que j'ai fait avant, et je suis prêt à partir. Je vais le déposer comme ça. Là, vous l'avez. Maintenant, vous pouvez voir qu'ils sont espacés par la gouttière, et vous pouvez imaginer que cela se rétrécit, la gouttière reste la même. Tous ces éléments fonctionneront proportionnellement ensemble dans cette grille plus serrée. On va aller de l'avant et faire la même chose pour cette rangée de cinq. Donc, encore une fois, disons que quatre, c'est assez bon pour nous et nous allons en retirer un. Donc, désolé TechCrunch. Je t'aime beaucoup. Mais tu ne rentres pas en ce moment. Donc, nous pourrions aller de l'avant et faire toutes ces rangées de ou trois colonnes de large. Là, vous l'avez. Cette section s'insère désormais dans la grille. Pour ce gars en bas, on en a cinq. Dans ce cas, et dans tous ces cas, vous voudrez peut-être discuter de l'UX de ce qui est important à garder, vous pourriez vouloir reconfigurer les choses pour qu'elles s'intègrent dans cette grille, faire un changement plus important, mais je pense que pour nous en ce moment nous sont d'accord de prendre des sujets, parce que ceux vivent à l'intérieur des écoles. Maintenant, même en tant que liens de la même façon que ces inconvénients deviennent plus petits, cela va se fermer dessus, et ils vont juste se rapprocher ensemble. Donc, nous allons les aligner sur ces grilles. Il n'a pas besoin que tous soient alignés sous la même grille quand vous avez quatre colonnes, mais je pense que ça a l'air sympa qu'il le garde assez simple. Donc, c'est comme ça que je vais le faire fonctionner ici. Là, vous l'avez. Maintenant, ce qui autrefois n'était pas correctement contenu dans une grille, avec quelques ajustements simples. Cela aurait pu être plus facile que d'autres pages qui sont là-bas. Il s'intègre vraiment bien dans la grille. Tout est contenu dans la colonne, l'espace par une gouttière qui doit être. Comme je l'ai déjà dit, ce n'est pas le cas. Je pense que si ça avait un espace de gouttière entre elle, c'est en fait trop. Je pense que beaucoup d'espace entre l'image et le nom, semble mauvais. Donc, sous l'unité, je ne suis pas si inquiet que ça devienne plus petit. Là, nous l'avons pour ça. Dans la prochaine vidéo, nous allons parler de points d'arrêt. Les points d'arrêt sont la façon dont les grilles s'ajustent si nécessaire en fonction de la largeur de l'écran que vous visualisez. 6. Démonstration en direct des points de rupture: Maintenant, faisons une petite démo en direct. Donc, sur le site Skillshare, Skillshare.com/classes, je vais vous montrer, juste en changeant la largeur du navigateur, cette grille se rétrécit en action et points de rupture. Donc, comme je le fais plus petit, vous pouvez voir que nous sommes toujours dans le point d'arrêt un, mais les images deviennent plus petites proportionnellement, la gouttière reste la même et les maintient séparés. Vous pouvez voir le texte ci-dessous dans ces unités commence à envelopper. Bientôt, vous voyez qu'il est enveloppé à une troisième ligne. Donc, rien de tout cela n'est vraiment considéré comme un point d'arrêt, mais il pousse toujours le contenu en dessous. Si vous deviez venir sur le site avec ce gros, ça a l'air bien. Si votre fenêtre est si large, elle a toujours l'air bien. Donc, le contenu s'adapte vraiment à la fenêtre dans laquelle il se trouve. Une fois que nous commençons à regarder certains points d'arrêt, vous puissiez le voir rapidement, il tombe à une deuxième ligne, donc c'est un point d'arrêt mineur que vous avez mis là, parce que nous ne voulions pas que la ceinture se chevauche avec la barre de recherche. Mais ici, vous voyez qu'il va à la tablette. Ainsi, dans la tablette, le menu change. Nous avons un menu hamburger dans les deux endroits. Alors avant ça, nous avions Mes Classes et la cloche là-bas. Il va à l'intérieur et il peut sembler un peu tôt, mais il est toujours généralement bon de garder le moins de points d'arrêt possible. Il simplifie vraiment la conception, il simplifie le développement de celui-ci, et il fonctionne jusqu'au mobile. Donc, en passant dans la tablette, nous voyons quelques autres changements se produire comme le rail qui existait sur le côté gauche, qui avait tous ces stationnements. Maintenant, il est enlevé et mis sur le dessus. Il a juste fait des liens, ce qui est logique parce que vous n'avez pas besoin d'états de survol sur une tablette parce que vous appuyez simplement sur elle, sorte que vous pouvez réellement obtenir l'état de survol. Vous remarquez également que les gouttières passent à 20 pixels. Parce que ces articles sont plus petits maintenant, nous aimons généralement les garder un peu plus près ensemble et penser qu'ils semblent un peu mieux comme une grille. Si nous continuons encore plus petit, nous allons bientôt frapper mobile. Donc, mobile il y a quelques autres changements qui se produisent. Donc, nous avons fait cela au point de rupture, le titre plus petit, et nous l'avons aligné au centre. C' est donc un petit changement qu'on a fait là-bas. Nous avons également élargi ces options. Nous l'avons fait pleine largeur ce qui est agréable et mobile. Vous voulez que les choses que nous voulons que vous touchiez comme les boutons ou les menus soient un peu plus grandes parce que vos doigts sont un peu plus gros que le curseur de votre souris. Sans offenser. Nous avons également passé à une grille à une colonne. Donc, ces images sont en fait un peu plus grandes maintenant, mais c'est une vue beaucoup plus simple qui s'adapte vraiment beaucoup mieux pour mobile. Donc, maintenant, nous pourrions regarder un autre exemple de site Web, qui est The New Yorker. Je viens de trouver un article aléatoire sur les tortues marines. Si vous faites défiler vers le bas, vous remarquerez, nous savons qu'il y a beaucoup plus de colonnes, et deux, mais ils ont généralement deux sections donc ils ont l'article et les images, puis la section droite qui a leur publicités et liens pour découvrir différents articles. Donc, si nous commençons à rendre la fenêtre un peu plus étroite, vous pouvez voir un petit point de rupture où les éléments de navigation deviennent plus petits, sorte qu'ils s'intègrent confortablement dans cette nouvelle fenêtre plus mince. Le titre est un peu plus petit, et il devient encore plus petit pour qu'il corresponde à la publicité là-bas. Mais en général, aucun changement majeur n'est arrivé à la grille en apparence. Une fois que vous allez un peu plus, alors vous le voyez tourner vers un point de rupture majeur qui est une longue colonne. Donc, le menu est parti et est devenu un hamburger, semblable à ce que vous avez vu dans Skillshare. Ils le gèrent différemment. Le titre est maintenant aligné au centre, simplifié par rapport à ce qui était dans deux domaines maintenant regroupés en un seul. Cela ressemble plus à une section générale. Donc, les choses qu'ils avaient dans la droite, comme les publicités, ils incluent maintenant dans cette section de contenu principale. Donc, si vous voyez, il devient encore plus petit encore. Ils ont juste le texte enveloppé car ces colonnes deviennent plus petites. Ils conservent généralement la publicité la même. Je suppose que c'est juste les contraintes des images qu'ils ont. Ils ne veulent pas que ce texte devienne trop petit parce que c'est une image. Là où cela, ils ont un peu plus de marge de manœuvre avec la façon dont il est traité. Défilant vers le bas, avant, où nous avons vu sur le côté droit la section la plus populaire, ils l'ont sorti et ajouté au fond. Donc, encore une fois, un changement assez important dans un point de rupture, vous pouvez faire de petites choses comme changer certaines tailles, garder en place, ou vous pouvez faire des changements majeurs comme le couper d'une section et l'ajouter à une autre. Une grande partie de cela va être un appel de jugement basé sur le contenu. J' aimerais pouvoir dire qu'il y a une bonne règle et une bonne façon de gérer cela, mais cela dépend vraiment de ce que vous faites. Donc, je vous recommande de faire, si vous faites ce projet sur votre propre site Web ou lorsque vous faites ce projet dans la classe, aller sur différents sites Web, jouer autour. C' est aussi facile que d'élargir et de faire un navigateur plus petit et de voir comment un tas d'endroits le font. 7. Définir les points de rupture: Les points d'arrêt sont des largeurs que vous définissez dans votre conception. Ainsi, lorsque votre navigateur devient la largeur de votre point d'arrêt, il devient plus mince, vous le chargez sur une tablette, vous le chargez sur un téléphone, ou même si vous développez votre navigateur pour être plus large. Cela va forcer un changement plus important dans votre mise en page plus grande pour la rendre mieux adaptée à la nouvelle largeur. Ainsi, par exemple, les changements peuvent changer la taille de votre gouttière. Ainsi, dans la version de bureau 3.1, nous avons des gouttières de 30 pixels et dans la version tablette, nous avons des gouttières de 20 pixels. Une partie de cela est juste proportionnellement nous avons pensé qu'il semble un peu mieux pour que vous puissiez voir les images de visage smiley. Les images sont plus grandes qu'elles ne le sont sur cette taille de tablette. Donc, quand vous avez une image plus grande comme celle-ci, il est logique de lui donner un peu plus d'espace entre les deux. Mais, quand les choses sont un peu plus petites, si elles étaient 10 pixels plus éloignées, pourraient en fait être un peu trop éloignées. Mais cela vient aussi un peu hors de besoin pour nous, et nous avons juste établi une règle que dans notre grille, les colonnes ne seront jamais moins larges que les gouttières. Donc, avec cette grille de 12 colonnes et avec des gouttières de 30 pixels, la grille a un minimum de 750 pixels de large avant que ces colonnes commencent à devenir plus minces que les gouttières, ce que nous ne voulons pas. La même chose se produit au point d'arrêt deux qui est notre version tablette, mais c'est à 500 pixels de large lorsque les colonnes deviennent la même largeur que la gouttière que nous ne voulons pas vraiment et ensuite nous décomposons en mobile. Sur mobile, nous réduisons effectivement le nombre de colonnes et nous en faisons une grille à six colonnes, et cela a également tendance à se prêter à des écrans mobiles où et les choses mobiles sont simplement vraiment simplifiées. Donc, nous avons fait les boutons plus grands pour qu'il soit plus facile d'appuyer. Nous avons simplifié la mise en page de cette rangée de trois à une seule colonne. Avec cela, vous pouvez même voir que vous avez six ici et il prend une belle taille à deux rangées, mais quand vous les posez tous singulièrement, six devient super long. Donc, une autre chose que vous pourriez faire à un point d'arrêt est en fait mettre à jour ou supprimer du contenu. Ça pourrait être des sections entières ou des images. Donc, et quelque chose comme ça si nous ajoutons six ici à ces deux premiers points d'arrêt et le déplaçons au point d'arrêt trois, je devrais probablement en découper trois et dire, nous allons seulement montrer trois images. Je pense qu'une longueur comme celle-ci, pour mobile, correspond plus correctement parce que probablement, vous pourriez avoir du contenu ci-dessous que cela va pousser vers le bas et vous ne voulez pas que votre page mobile soit trop longue d'un défilement, mais, bien sûr, cela dépend de votre contenu. autres changements sont la navigation. Donc, ici vous pouvez voir que nous avons beaucoup d'espace entre la barre de recherche et l'onglet communauté. Mais comme il commence à devenir plus petit, quand la barre de recherche se ferme, nous pouvons définir un point d'arrêt pour dire, « Ok, à X-pixels large, disons qu'il fait 800 pixels de large, la barre de recherche devient trop proche de la communauté donc, laissons tomber cela à la deuxième ligne. » Nous pourrions dire, « Quand ça se rapproche trop, donc nous ne voulions probablement pas moins que ça et c'est maintenant... à quoi s'agit-il ? C' est à 610 de large ». Donc on pourrait dire à 610 ans et moins, passons à un menu hamburger qui est cet état effondré. Donc, tous ces éléments seraient simplement cachés sous ici et cela peut devenir aussi petit qu'il est montré ici. Avec toutes ces modifications, vous pouvez avoir différents points d'arrêt. Vous avez plusieurs points d'arrêt dans une conception pour dire qu' à un point d'arrêt différent, vous allez passer à une deuxième ligne de navigation puis passer à des gouttières de 20 pixels de large. Généralement, il est bon de les garder à aussi peu de points d'arrêt que possible. C' est généralement un excellent guide de ne pas avoir à garder une trace de trop, mais vraiment cela dépend de votre contenu donc, je suppose que vous parlez à votre développeur local de ce qui est possible. Pour notre prochaine vidéo, allant plus loin dans les points d'arrêt, nous allons jeter un oeil à quelques points d'arrêt en direct en action. Donc, ça va être un site Skillshare et une différence de site chez Skillshare. 8. Conclusion: Juste en train d'envelopper. Je me souviens quand je faisais des recherches, apprenais sur les notes, la différence que cela faisait quand je les créais et jouais avec eux plutôt que de lire à leur sujet. Donc, je vous encourage vraiment à prendre un coup de couteau à ce projet de classe. Jetez un oeil au guide de projet, j'ai même posté un exemple de ce que sont Skillshare Grid. Ne pas dire que vous devez le suivre ou nécessairement vous devriez le suivre en fonction de tout contenu que vous avez. Mais, cela pourrait être un point de saut vraiment facile juste pour voir comment nous le faisons et comment vous pourriez vouloir le faire aussi. N' hésitez pas à poser des questions dans la section discussion. En outre, c'est un endroit idéal pour laisser des liens ou partager des idées que vous avez faisant cela vous-même ou que vous avez fait dans le passé ou en apprenant pour la première fois à travers cette classe. J' ai vraiment hâte de voir ce que vous venez avec. Je serai dans la galerie du projet, fouiller, laisser des commentaires, alors montrez-moi ce que vous avez. 9. Découvrir le design sur Skillshare: façon.