Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

CSS : Positionnement et mise en page

Définir la notion de mise en page

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Que signifie la notion de mise en page ? Il s'agit du contenu complet d'une page. Toutes les approches de positionnement devront pouvoir être appliquées aussi bien à la page elle-même qu'à son contenu.
04:16

Transcription

Donc, que doit-on entendre par mise en page ? Alors, le plus simple c'est d'aller dans Google et taper mise en page web, par exemple, et de demander dans la partie « image », ici, voir ce qu'on nous donne visuellement sur une mise en page. On s'aperçoit que la mise en page dans les premières retombées de résultats sont tout ce qui va être les blocs de contenu, les blocs d'éléments principaux de la page. Et puis en égrainant un peu, on se retrouve avec quand même un peu des éléments de contenu, voyez ici, où c'est le contenu qui va être mis en forme. Alors, c'est très important de bien faire cette distinction parce que quelque part c'est le contenu qui doit être mis en forme. Pourquoi vient-on sur un site ? Bah, pour consulter le contenu. On vient pas sur un site pour voir si vous avez une belle arborescence, ou si la tête et la barre de navigation est chouette. Non, en fait il faut pas se tromper. Tous ces outils périphériques vont nous aider à naviguer dans le contenu, et donc c'est le contenu qu'il faut mettre en page. Et souvent il faut partir de ce contenu justement. Pour pouvoir placer cette mise en page, il est important aussi de comprendre qu'est-ce que c'est que la vision d'un élément qui va partir sur un appareil téléphonique ou sur un grand écran. On s’aperçoit que les surfaces de disponibilité ne sont pas les mêmes disponibilités d'affichage. Si on a un en-tête et une barre de navigation trop importante, on va se retrouver avec un contenu qui ne sera complètement plus visualisé. Et donc c'est pour ça qu'on s'aperçoit que dès qu'on va être sur appareil mobile tous les éléments périphériques vont être modifiés pour pouvoir donner plus d'espace à ce contenu. Ensuite il faut toujours garder à l'esprit d'avoir une lisibilité accrue de ce contenu. Donc, déjà d'avoir toujours des boutons de la même forme, d'avoir tous ces éléments-là, d'ergonomie, on va dire, cognitive qui vont permettre d'apprendre le processus de navigation au sein de vos contenus mais surtout, il faut apporter une grande visibilité. Et si vous tapez ces mots-clés à l'intérieur de Google et en partie images, vous aperçevez que la lisibilité, bah, en fait va permettre d'avoir des gros éléments qui vont capter l'attention du lecteur et de dire: « ça m'intéresse je vais cliquer » et après je vais pouvoir rentrer dans le détail des petites informations. Donc de regarder aussi sur la mise en page CSS, la mise en page de cette information, donc presque faire de la pub avec chacune de nos pages. Et à ce sujet Brad Frost a défini, au cours de son ouvrage Atomic Design, quelque chose que je trouve relativement puissant. C'est de ne fonctionner plus en partant du haut vers le bas, c'est-à-dire de notre page en allant vers le contenu, mais au contraire contraire de partir du contenu vers l'extérieur et puis de le faire d'une manière assez presque atomique de la chose. Donc de partir d'un atome. Un atome va être un seul élément, par exemple, un champ de recherche. Et puis, on va arriver sur une molécule. Alors, les molécules c'est quoi ? C'est un champ de recherche plus un bouton, par exemple, "rechercher" et la petite loupe qui va être dessinée. Donc, en fait, en associant trois atomes, on arrive à faire une molécule. En associant plusieurs molécules entre elles, on va arriver à faire un organisme comme par exemple le moteur de recherche à droite et une barre de navigation sur la partie gauche. Et tout ça va nous amener à fabriquer des templates de page. C'est-a-dire des templates qui vont permettre de recevoir du contenu qui seront des sortes de gabarit d'accueil pour fabriquer nos pages. Et donc, on voit bien qu'on part des éléments vers l'extérieur donc ça veut dire quoi ? Bien, ça veut dire qu'en CSS, on va plutôt s'attarder à venir styler les éléments de paragraphe, de titre, de bouton, de cases à cocher, de tous ces éléments là, et puis on va les associer dans des molécules qui vont être réutilisées : des composants, par exemple. On va pré-fabriquer des éléments de la page un peu plus sophistiqués comme le header, le footer, fabriqués par ses composants là pour fabriquer des templates d'accueil. Voyez donc une approche assez intéressante sur la fabrication de nos CSS. Puis, toujours faire une veille technologique, vous tapez par exemple dans Google « modern website layout idea » pour avoir des idées de mise en page et vous voyez que là on casse souvent les pré-requis que l'on a l'habitude de rencontrer, on arrive dans des sites Web qui vont ouvrir des portes complètement vers un visuel beaucoup plus à contre-pied de ce qu'on a l'habitude de rencontrer avec toujours des barres en haut des menus à gauche, etc. Alors je fais une mauvaise pioche dans le sens ou tout ce que je vais vous montrer dans des exercises partira sur cette habitude avec les menus à gauche, etc. mais parce que après ça peut laisser libre cours à votre propre créativité une fois qu'on aura compris le mécanisme et la façon d'utiliser des outils libres à vous après de les exploiter pour composer les layout que vous souhaitez.

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 !