Télécharger le PDF du cours
Nous allons voir ici les principaux défis apportés par la multiplication des appareils pouvant aller sur le web et comment y répondre efficacement.
Comprendre les défis apportés par la multiplication des écrans
Il y a quelques années encore, on ne pouvait accéder à Internet et au web que grâce à des ordinateur de bureau.
Avec la miniaturisation des composants et les capacités de connexion de plus en plus puissante, cependant, de nouveaux appareils connectés ont vu le jour et les sites web peuvent maintenant être consultés à partir de nombreux appareils différents : ordinateurs de bureau, ordinateurs portables, tablettes, smartphones, montres connectées, etc.
Cela a multiplié les défis en termes d’ergonomie et de design pour les concepteurs de site : en effet, comment faire en sorte qu’un site Internet s’affiche correctement à la fois sur un écran de bureau et sur un smartphone ? Doit-on créer deux sites différents ? Deux versions d’un même site ? Dans ce cas-là, est-il préférable de retirer des informations pour rendre la version mobile plus légère ou peut-on se « contenter » de réarranger le contenu ?
Une définition rapide du responsive design
Lorsqu’on parle de « responsive design » ou de « design adaptable » en français, on fait référence à l’idée selon laquelle un site web devrait s’afficher aussi bien sur un écran de PC que sur un écran de smartphone ou sur n’importe quel type d’appareil.
Aujourd’hui, nous pouvons utiliser principalement trois méthodes pour répondre aux défis amenés par les différentes tailles d’écran. On peut :
- Créer une application dédiée pour les mobiles ;
- Créer une « copie mobile » de notre site en utilisant l’initiative AMP (« Accelerated Mobile Pages ») de Google ;
- Utiliser les Media Queries ou requêtes media.
L’idée de base du responsive design est qu’un site web devrait présenter les mêmes informations quel que soit l’appareil qui l’affiche, en les réarrangeant pour conserver la meilleure ergonomie possible. Nous allons pouvoir achever cela en utilisant les Media Queries qui seront donc la notion centrale de cette partie.
Définition rapide des Media Queries
Les Media Queries vont nous permettre d’appliquer certaines règles CSS de manière conditionnelle. Par exemple, on va pouvoir définir une largeur pour un élément pour certaines tailles d’écrans et une largeur différente pour le même élément pour d’autres tailles d’écran.
Cela va nous permettre d’afficher des pages avec des organisations différentes selon la taille de l’écran d’un visiteur. Attention ici à ne pas confondre les Media Queries et les valeurs de taille relatives et en % ou le flexbox.
Les valeurs en % et le flexbox vont pouvoir permettre aux éléments de grandir ou de rétrécir selon la taille d’un écran mais selon la même règle CSS.
Avec les Media Queries, nous allons pouvoir appliquer des règles CSS totalement différentes selon les tailles d’écrans. Notez par ailleurs qu’on va tout à fait pouvoir utiliser le flexbox, etc. dans nos Media Queries.
Regardez l’exemple ci-dessous pour bien comprendre :
See the Pen Cours HTML CSS 14.1.1 by Pierre (@pierregiraud) on CodePen.
Ici, on commence par définir un conteneur flexible qui va contenir trois éléments flexibles.
On définit ensuite l’axe principal et la direction de notre conteneur avec flex-flow : row wrap. Notre axe principal va donc être l’axe horizontal par défaut et les éléments flexibles vont s’afficher les uns à côté des autres. Les éléments seront distribués régulièrement le long de leur axe principal avec justify-content: space-around.
On définit finalement une dimension de 20% pour nos éléments flexbiles dans leur axe principal et on leur interdit de grossir automatiquement.
Ensuite, on va définir une règle media avec @media. Ici, notre règle va s’appliquer à tous les appareils disposant d’un écran (screen) de taille inférieure ou égale à 780px (max-width : 780px).
Dans cette règle media, nous allons pouvoir écrire autant de règles CSS que l’on souhaite. Ces règles CSS ne vont être appliqués que lorsqu’un utilisateur affiche la page avec un écran ou dans une fenêtre de taille inférieure à 780px.
Ici, on choisit de définir la direction de notre conteneur flexible avec flex-flow: column wrap pour tous les écrans de taille inférieure à 780px.
Notez qu’en cas de conflit (c’est-à-dire si une même propriété a déjà été définie en dehors d’une règle media ou dans une autre règle media), c’est la valeur de la propriété définie dans la règle la plus précise ou la plus restrictive qui va s’appliquer.
Dans le cas présent, nos éléments flexibles s’afficheront donc en ligne de manière générale et en colonne dès que la fenêtre fera moins de 780px. N’hésitez pas à recopier le code ci-dessus ou à l’ouvrir directement dans CodePen et à modifier la taille de votre fenêtre pour bien voir le changement s’opérer.
Ce type de modification de structure ne serait pas possible en utilisant juste le flexbox ou des valeurs en % et ne va pouvoir être réalisé qu’avec les Media Queries.
