Il y a quelques années, il était relativement facile de concevoir et de créer des sites Web. Les sites Web étaient plus simples et étaient affichés sur des ordinateurs de bureau et des ordinateurs portables avec peu de variation dans les tailles d’écran. Aujourd'hui, avec les appareils mobiles qui prennent le temps de navigation des téléspectateurs, un site Web peut être visualisé sur un écran de smartphone de 4,8 ", un phablet de 5", une tablette de 7 "ou n'importe quelle taille intermédiaire.
Ainsi, comment vous assurez-vous que votre site Web affiche correctement à travers les types d'appareils et les tailles d'écran?
La solution a d'abord été proposée par Ethan Marcotte, quand il a exploré des façons de rendre les conceptions de sites Web réactives, c'est-à-dire les faire changer en fonction de la taille de l'écran. Une conception de site Web réactive utilise intelligemment les CSS pour garantir le bon rendu des pages Web sur un large éventail de tailles d’écran, sans avoir recours à la redirection d’URL ou à la diffusion dynamique de codes HTML et CSS différents, en fonction de l’agent utilisateur. Ce n'est pas vraiment une technologie ou une norme, mais plutôt un ensemble de principes de conception qui aident à atteindre le résultat.
Au cours des dernières années, de nombreux modèles réactifs, frameworks CSS et thèmes WordPress ont vu le jour. Il est par exemple possible de créer un site Web réactif dans WordPress sans écrire une seule ligne de code.
Mais un vrai concepteur Web n'est pas satisfait de l'utilisation des modèles. Elle s'efforcera de comprendre les éléments de la conception Web réactive afin de les utiliser efficacement.
Donc, aujourd'hui, nous allons examiner les 3 techniques fondamentales que vous devez maîtriser, vous devez être un concepteur réactif efficace.
Les requêtes multimédias vous permettent de concevoir différentes dispositions pour différents types de supports, tels que l'écran, l'impression, la télévision, les périphériques de poche, etc. Selon le type de support, vous pouvez configurer le style, la police et les autres éléments de la page.
Introduites dans CSS3, les requêtes multimédias permettent à un concepteur de personnaliser la présentation du contenu en fonction d'une gamme spécifique de types de périphériques de sortie. Ils consistent en une déclaration de type de média et en une ou plusieurs expressions d'entités multimédias dont la valeur est true ou false.
La gamme de types de supports comprend les ordinateurs de poche, les écrans, la télévision, l’impression et la projection. Les fonctions multimédias comprennent, sans toutefois s'y limiter, la hauteur, la largeur, le rapport hauteur / largeur, la résolution, l'index de couleur et la hauteur de la fenêtre du navigateur.
Prenons un exemple de base; Imaginez que vous souhaitiez réduire la taille de votre texte sur des appareils plus petits, comme les téléphones. La requête pour cela ressemblerait à quelque chose comme:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Maintenant, la taille de la police de vos paragraphes sera définie sur 1em, sauf si la largeur du navigateur est inférieure à 400px, auquel cas elle sera réduite à 0.8em.
D'après mon expérience, la meilleure façon de concevoir une mise en page réactive consiste à créer d'abord une feuille de style maître par défaut avec les principaux éléments structurels. Vous pouvez ensuite ajouter des requêtes multimédia pour personnaliser les éléments en fonction de la mise en page ou d'autres éléments de périphérique. S'il ne s'agit pas d'une poignée de règles, il serait préférable de les déplacer vers une feuille enfant distincte - que vous pouvez charger de manière sélective ultérieurement. Voici comment cela fonctionnerait:
Ce code vérifie si le périphérique est un ordinateur de poche en mode paysage avec une largeur de périphérique inférieure à 720px et, si tel est le cas, charge la feuille de style tablet_layout.css .
Notez que les entités width, height, min / max-width, min / max-height font toutes référence à la largeur et à la hauteur de la fenêtre du navigateur. La largeur et la hauteur de l' appareil sont contrôlées par la largeur de l'appareil, la hauteur de l'appareil, la largeur de l'appareil min / max, la hauteur de l'appareil min / max . Si vous souhaitez regarder plus d'exemples utilisant des requêtes média MDN a un bon tour d'horizon.
"Grille fluide" est un terme utilisé pour décrire une disposition qui est codée dans des proportions relatives des divers éléments, plutôt que des valeurs de pixels fixes.
Les mises en page CSS traditionnelles utilisaient des grilles à largeur fixe pour positionner les éléments. L'approche à largeur fixe ne fonctionne plus aujourd'hui maintenant que nous avons des écrans de périphériques allant de 3 pouces à quelques pieds. Dans une conception de grille fluide, tout est codé en termes de proportion relative par rapport à l'élément de base, au lieu de spécifier la hauteur et la largeur de chaque élément; il est donné un pourcentage ou une taille relative.
Imaginez que vous avez quatre colonnes. Pour produire ce fluide, au lieu de spécifier chacun une largeur de 200 pixels, vous devez les spécifier à 0,2083% (c'est-à-dire 200/960). Au moins, c'est le principe. Créer une grille entièrement fluide nécessite beaucoup de soin. C'est l'un de ces rares cas que je recommande plutôt d'utiliser des outils personnalisés. Petite grille de fluide , Système de grille variable et Grille de référence fluide sont d’excellentes alternatives à l’écriture de votre propre grille de fluides à partir de zéro.
Les images sont jugées flexibles lorsque l'image est rendue au format natif, à condition que le conteneur HTML le prenne en charge, mais lorsque la fenêtre du navigateur se rétrécit, l'image s'adapte à sa taille.
Même si le reste du design est fluide et réactif, il ne sera pas bien rendu si tous les composants ne sont pas adaptés. Cela peut être difficile avec les images et les vidéos. Une image de 700 pixels de large aura fière allure sur un ordinateur de bureau, mais sera coupée lorsqu'elle est vue sur une tablette de 320 pixels. La plupart des conceptions réactives modernes utilisent la propriété CSS max-width pour faire évoluer les images. (Cette méthode était d'abord proposé par Richard Butler .)
img {max-width: 100%;}Ces quelques lignes garantissent que l'image ne sera pas coupée en définissant la largeur maximale de l'image à 100% du conteneur. Si la fenêtre ou l'écran du navigateur devient plus petit, ce morceau de code CSS réduira proportionnellement l'image. La hauteur est automatiquement ajustée, tout en gardant le ratio d'aspect verrouillé.
Vous pouvez au lieu de cela verrouiller l'image pour occuper une certaine proportion d'écran vertical comme celui-ci
img {max-height: 75%;}(Veillez à ne pas utiliser simultanément les propriétés max-height et max-width .)
La taille de l'image peut également être liée à la taille du texte au lieu de l'élément parent utilisant em , comme ceci:
img {width: 30em;}Si l'image contient du texte, vous souhaiterez peut-être limiter la taille minimale / maximale pour vous assurer que le texte est lisible. Vous pouvez le spécifier comme ceci:
img {width: 30em;max-width: 500px;min-width: 100px;}Les mêmes techniques peuvent être utilisées pour mettre à l'échelle des vidéos, par exemple:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Le design réactif est l'avenir de notre industrie, mais avec autant de techniques différentes, il est souvent difficile de suivre le rythme. Maîtrisez ces 3 techniques simples et vous serez à 90% un concepteur réactif.
Image / vignette en vedette, image élastique via Shutterstock.