Le Responsive Design

Le responsive design

Cette technique permet de faire en sorte qu'un même site puisse être affiché aussi bien sur smartphone, sur tablette, sur ordinateur ou sur très grand écran comme les télévisions connectées. Au début du net mobile, avec l'arrivée de petits terminaux permettant de surfer sur le net, les sociétés qui avaient des sites faisaient un site optimisé pour ces nouveaux téléphones et utilisaient souvent un sous-domaine m.ma-societe.fr. Le problème avec cette solution, c'est que ça signifiait deux sites à maintenir et à faire vivre. C'est pourquoi les @media queries ont été créées en CSS3.

Le responsive design est aujourd'hui un élément clé de tous les sites ! Et ce pour deux raisons :

Plus de la moitié des internautes surfent sur mobile. Si vous souhaitez que votre site soit visité et que vous puissiez convertir vos utilisateurs, il est nécessaire de l'optimiser pour les smartphones ;
Les moteurs de recherchent englobent le responsive design dans les critères de référencement. Un site qui est plus optimisé pour les smartphones sera mieux classé qu'un autre qui ne l'est pas.

Test du smartphone

Pour tester votre site, il est possible d'utiliser votre smartphone avec une URL spécifique qu'on verra quand on fera le serveur en PHP ou directement une simulation de smartphone dans votre navigateur. Pour utiliser cette simulation, vous ouvrez votre inspecteur comme indiqué dans le cours où l'on a stylisé notre header, puis en haut à gauche de votre inspecteur vous avez :

Sur Chrome/chromium :

Sur Firefox :

Puis, en haut de l'écran, vous avez des options pour changer le format de la tablette ou du smartphone testé :

La simulation est une émulation complète ! En effet, quand vous utilisez le curseur pour "swiper" vers le haut ou le bas, en Javascript ce seront de vrais évènements touch qui seront lancés et non mouseup/mousedown. Nous reverrons ce point quand on fera la gestion des évènements en JS.

Le mobile first

Quand on fait du responsive design, on travaille généralement en mobile first pour deux raisons :

Le smartphone est un appareil "nomade", donc sur batterie. Plus le site nécessite de calcul pour l'affichage, plus le processeur de l'appareil va travailler et plus il va consommer de la batterie. Pour soulager cette dernière et pour permettre un rendu plus rapide sur smartphone, on travaille par défaut le design mobile.
Le design smartphone est souvent le plus compliqué à mettre en place car on dispose de très peu de place pour afficher nos éléments. Donc, en travaillant en priorité ce design sur mobile, on aura moins de mal à espacer nos éléments pour les placer sur ordinateurs que la démarche inverse, où l'on doit redisposer nos élements pour les serrer.

La meta "viewport"

Comme on est très proche de l'appareil quand on utilise un smartphone, comparé à un ordinateur par exemple, le mobile mentira sur sa taille réelle quand il veut afficher le site. En effet, si l'on prend l'exemple d'un iPhone 6, sa taille réelle est de 375x667 mais il fait croire qu'il fait 981x1744. Pour éviter d'avoir un affichage incohérent sur smartphone, on force alors l'appareil à donner sa vraie taille et à être en zoom à 1 :

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Les media queries

Pour utiliser les media queries :

@media screen and (min-width: 768px) {
    div {
        color: red;
    }
}

...ici, pour tous les écrans = screen qui ont au moins 768px de large, les div seront écrites en rouge.

Conseils : pour faire votre responsive design, je vous conseille de designer élément par élément sur les différents formats, ça vous permettra de ne pas vous perdre dans le code. Pour la même raison, plutôt que d'écrire tout en bas de votre fichier CSS une grosse balise @media, je vous conseille de réécrire uniquement les propriétés CSS qui sont modifiées par le changement de format, juste en dessous de la propriété CSS par défaut. cf. la vidéo du cours.

Le type de support

Dans le code exemple, on a écrit "screen", mais on peut utiliser les media queries pour différents types de supports spécifiques :

print : permet de faire un design spécifique lorsque quelqu'un imprime votre site internet (Oui ! des gens qui impriment Internet, ça existe encore...) ;
screen : appareil avec un écran ;
speech : outils de sythèse vocale, comme les lecteurs d'écran ;
all : tous les types ci-dessus.

Dans la V3 des media queries il y avait d'autres types : tty, tv, braille... qui sont dépréciés depuis la V4.

Les caractéristiques du média

Dans la seconde partie du code exemple, on a indiqué "pour les écrans ayant au moins 768px". On a d'autres caractéristiques qui peuvent être testées :

width, max-width, min-width : respectivement la largeur exacte, au moins la largeur, au plus la largeur ;
height, max-height, min-height : la même chose pour la hauteur de l'écran ;
orientation : portrait ou landscape (paysage) ;
resolution : la résolution des pixels...

Pour la liste complète : Media queries : Caractéristiques média.