CSS : Positionnement et mise en page

Prendre en compte quelques notions sur le mode responsif

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Approfondissez la notion et le besoin de requêtes média. Il s'agit de démontrer qu'il faut laisser le contenu piloter l'affichage et non le périphérique. Puis, vous pourrez explorer les divers aspects du mode responsif.
08:19

Transcription

Afin de faciliter la mise en évidence des pratiques sur un seul et unique écran, on utilise souvent la requête de média sur la largeur parce que cela permet tout simplement en redimensionnant le navigateur, de voir l’interaction agir. Mais n’oubliez surtout pas que les requêtes de média se passent sur différentes propriétés comme notamment la résolution qui va nous permettre de pouvoir distinguer un écran de type hd ou rétina par rapport à un écran plus basique. L’orientation qui va nous permettre de dire attention le périphérique est utilisé de manière verticale ou horizontale donc en mode portrait ou paysage on va pouvoir avoir une disposition dans l’espace et une utilisation de l’espace qui sera différente. Donc faites bien attention à ne pas bloquer simplement sur des requêtes qui sont de largeur, mais pensez à aller au-delà de ces largeurs justement et de pouvoir utiliser toutes les requêtes. De la même manière que par exemple sur les types de média, on a alors, faites bien attention, une exclusion maintenant de certains anciens types qui deviennent depracated qui deviennent obsolètes, pensez donc à distinguer si vous êtes sur un périphérique d’impression par exemple, la mise en page sera différente que si elle est à l’écran ou si je suis sur un lecteur d’écran j’aurais des possibilités qui seront différentes puisque je ne vais pas afficher les choses de la même manière. Donc pensez bien à garder cela sous le capot. Pour mieux illustrer encore les propos qui vont venir prenons cet exemple ici, j’ai un texte de contenu et si j’ouvre ma page ici si j’agrandis cette page, je vais forcément la rendre la plus large possible puisque mon contenu est placé dans un type article, dans un élément de type bloc, et donc le contenu va se remplir tant il y aura de la largeur. Alors si c’est très bien à ce niveau-là, cela devient moins lisible à ce niveau là parce que l’œil qui arrive à une fin de ligne va projeter sur la ligne suivante juste en dessous donc le décrochage n’arrivera pas mais dès que l’on va dépasser une certaine quantité de caractères à la ligne, cela deviendra illisible. Certains disent d’utiliser 80 caractères à la ligne, tout cela va dépendre en fait de la typo que vous utilisez, tout va dépendre de l'interlignage, tout va dépendre du contenu que vous avez, par exemple un titre sur 3 lignes c’est moins lisible qu’un titre sur 2 lignes. Donc tout va venir à ce niveau-là pour dire il serait bien qu’à un certain point de rupture je redéfinisse la largeur de mon contenu. Donc ici je vais matérialiser par une grille à l'arrière-plan du body et cette zone bleue me dit attention on n’arrive presque à la limite et la limite c’est ici 800 pixels et à 800 pixels il serait bien de redistribuer ce contenu sur une largeur différente. Donc ce que je vais faire ici, c'est tout simplement rajouter un média all, encore une fois pensez à quel périphérique vous vous adressez ici, et max-width, encore une fois quelle propriété vous utilisez , on va dire ici 50em, pensez à utiliser encore une fois des unités qui sont relatives et qui vont permettre de pouvoir d’adapter les problèmes d’augmentation de typographie par l’utilisateur sur le navigateur, et ici je vais dire que mon article responsive puisqu’il est d'une classe responsive va avoir une largeur de 90%. Tant que je serai à cette largeur là je serai à 90%. Et si j’enregistre ce que j’actualise on voit bien que je suis à 90%. Par contre dès qu’on va dépasser le fameux 800 pixels, on a rien défini, donc pour l’instant il va être un peu livré à lui-même, donc on va vite redéfinir une largeur supérieure cette fois-ci à 800 pixels, donc 800 pixels plus un, cela fait 801, divisé par 16 cela fait 50.0625, et là on va redéfinir la largeur de notre article, par exemple 60%. Ctrl + S, j’enregistre, j’actualise et vous voyez que maintenant que je vais dépasser, attention, pouf ! Je dépasse, je passe à 60% et je préserve la lisibilité de mon contenu. On voit bien qu’on utilise notre requête maintenant non plus pour présenter un affichage différent mais pour améliorer la lisibilité du contenu, donc cela veut dire qu’en fait c’est le contenu qui pilote les breakpoint, et ce n’est pas le périphérique qui pilote le breakpoint. Donc vous voyez que l’inversement de contexte qu’il est important de prendre en considération c’est de se dire que c’est le contenu qui va déterminer les breakpoint, et tout cela va être pour améliorer la lisibilité du contenu. Parce qu’après tout, ici je suis toujours sur le même périphérique je n’ai pas changé de périphérique, cela va dépendre si mon utilisateur a son navigateur calé dans un coin de l’écran à cette dimension qui ne bouge pas, ou si l’utilisateur utilise l’écran à cette dimension-là, ou si lui-même vient à jouer pour avoir plus d’espace de lisibilité sur le contenu. Donc toujours penser que c’est le contenu qui définit les breakpoint, et c’est l’amélioration qui est apporté sur une lisibilité et non pas une proposition d’affichage différente. Dans notre élément qui est important de prendre en considération aussi, c’est qu’ici je suis sur du responsive, c’est-à-dire que je suis toujours liquide, le contenu est continuellement en mouvement, ce qui peut le rendre des fois difficile à lire, ce qui veut dire que si je suis ici, mon œil arrive là et donc va devoir passer ici mais en même temps je redimensionne ma page et j’étais en train de lire, vous voyez, le contenu est parti, donc là c’est bien je peux le suivre il y a bien le surlignement bleu. Mais s’il n’y a pas le surlignement, ça devient des fois compliqué. Donc, certains contextes vont nous proposer de faire une autre amélioration qui ne sera pas responsive mais adaptative. Alors regardons cette différence et pour cela on va rajouter un article en fin de page ici, on va lui donner une classe adaptative ici, on va mettre son titre en adaptative et on va placer du contenu. Ctrl + S, j’actualise et ici je me retrouve avec un contenu non stylé livré à lui-même. Par contre ce qu’on va faire cette fois-ci c’est de ne pas utiliser des largeurs proportionnelles entre chacun des breakpoint, mais une unité fixe, et donc je vais donner une largeur par exemple de 400 pixels. Et ici je vais passer en dessous de 800 pixels, voilà, ici j’enregistre, j’actualise ma page et vous voyez que là ma largeur fait 400 pixels. On aurait pu prendre 500, 600 pixels, l’autre largeur mais j’ai pris une largeur beaucoup plus étroite ici pour mieux marquer cette distinction entre les deux. Et cette fois-ci, au lieu de dire, je vais avoir une largeur plus petite, puisqu'ici vous voyez vous avez 90%, et ici j’avais 60%. On pourrait dire non, je vais avoir une largeur plus grande qui pourrait être, par exemple, de 800 pixels. Vous voyez qu’on peut faire l’inverse ici dans ce sens-là, et regardez quand je vais actualiser ma page je vais avoir une largeur, par contre ma largeur reste fixe entre les breakpoints à la différence de la responsive qui elles vont rester fluide et liquide entre les breakpoints. Voilà, donc, ces deux notions sont également extrêmement importantes. Une dernière notion qui est importante de prendre en considération, c’est que souvent on va utiliser du display none pour dire que je ne peux pas afficher ce contenu parce qu’il est complémentaire uniquement lorsque je suis sur un écran de bureau, ou il est informatif quand je suis sur un écran de type mobile. Par contre s’il est en diplay none cela veut dire que le périphérique a quand même téléchargé cet élément et que la bande passante a été consommée. Alors, sachez quand même qu’il existe depuis quelques temps une prise en compte native par le javascript navigateur qui va être le matchMedia et on va pouvoir venir dire que si tu rencontres cette configuration-là, à ce moment-là il exécute ce javascript. Et là ce javascript pourrait tout simplement être une requête ajax qui va aller télécharger du contenu ou pas en fonction de nos périphériques. Et vous voyez la grosse différence. Par contre, Cela n’est pris en compte que par les navigateurs contemporain. Les plus vieux navigateurs ne le prennent pas en compte, donc je vous invite à vous rapprocher de ce polyfill, qui va permettre à matchMedia.js de rendre nos navigateurs plus anciens, compréhensifs de cette nouvelle requête javascript, ici, matchMedia qui va permettre de charger des contenus à la demande en fonction de nos besoins d’affichage. Donc voilà tout un certain nombre de notions qu’il est important de prendre en considération lorsqu’on fait des requêtes media, afin de ne pas se limiter à des affichages indirectement pilotés par nos périphériques mais bien au contraire par nos contenus. Nous allons pouvoir définir des breakpoint qui seront très importants majeurs ou mineurs, en fonction de leur importance mais qui agrandiront la capacité de lecture de nos contenus mais qui seront bien entendu pilotés par nos contenus.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !