Le responsive design (vue adaptative) est la pratique de concevoir un site web afin que celui-ci s'affiche correctement sur un grand nombre d'appareils différents. En particulier les mobiles et les tablettes, ainsi que les ordinateurs (portable ou de bureau).
Le facteur le plus évident ici est la taille d'écran, mais il y a aussi d'autres facteurs, incluant la densité de pixels de l'affichage ainsi que s’il est tactile ou non. Le mode vue adaptative vous donne un moyen simple de simuler ces facteurs, de tester à quoi ressembler votre site web et comment il se comportera sur différents appareils.
Il existe trois façons d’activer la vue adaptative :
Lorsque l'outil est activé, la zone de contenu des pages web prend la taille de l'écran de l'appareil sélectionné. Par défaut la taille est de 320 x 480 pixels.
Note: L'appareil sélectioné ainsi que l'orientation (portrait/paysage) sera sauvegardé entre deux sessions.
Il est possible d'afficher ou de cacher la boîte à outils indépendamment de la vue adaptative elle-même :
Quand la vue adaptative est activée, il est possible de continuer à naviguer comme vous le feriez normalement dans la zone de contenu redimensionnée.
Juste au-dessus de la zone d'affichage, se trouve la ligne "Aucun appareil sélectionné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un appareil, et le mode de vue adaptative configurera les propriétés suivantes correspondantes à l'appareil sélectionné :
En plus, Firefox modifiera l'en-tête HTTP User-Agent pour s'identifier en tant que navigateur par défaut. Par exemple si l'appareil sélection est un iPhone, alors Firefox s'identifiera comme Safari. La propriété navigator.userAgent aura la même valeur.
{{EmbedYouTube("JNAyKemudv0")}}
Les appareils listés ne sont qu'une partie de tous les appareils possibles. En bas de la liste, le bouton "Modifier la liste" ouvrira un panneau avec la liste complète de tous les appareils. Ce panneau permet de définir les appareils qui apparaitront dans la liste déroulante. La liste des appareils ainsi que leurs valeurs associées proviennent de : https://github.com/mozilla/simulated-devices.
Depuis de Firefox 54, il est possible de sauvegarder des appareils personnalisés. Chaque appareil peut avoir ses propres propriétés de :
Il est également possible de prévisualiser les propriétés des appareils existants en survolant leur nom dans le menu des appareils.
Il est possible de fournir des valeurs personnalisées pour la plupart des propriétés d'un appareil.
Pour modifier la taille d'écran, il faut cliquer sur les valeurs en dessous de la zone d'affichage et les modifier :
Il est également possible de déplacer le coin en bas à droite de la zone d'affichage.
Depuis Firefox 59, il est possible d'éditer les tailles d'écran avec le clavier. Lorsque les dimensions sont sélectionnées (ou que le curseur d'écriture est dedans). Il est également possible d'utiliser les flèches haut et bas de 1px.
Pour changer les dimensions plus rapidement, il est possible d'utiliser maj pour itérer de 10pixels en 10 pixels.
Pour définir un ratio personnalisé, il faut cliquer sur la boite "DPR" et sélectionner la valeur voulue.
Pour ce faire, il faut cliquer sur l'icône en forme de doigt :
Lorsque la simulation est activée, les évènements de la souris sont transformés en évènements évènements touch.
Depuis Firefox 60 le menu de sélection Actualiser quand... a été rajouté :
Cliquer dessus affiche deux options qui sont toutes deux désactivées par défaut :
Avant Firefox 60, ces actualisations étaient automatiques, car certains comportements de la page n'étaient pas fonctionnels sinon. Par exemple, certaines pages vérifient la compatibilité tactile au chargement, et n'ajoute des évènements que si tel est le cas.
Cependant, si vous n'êtes pas intéressé par de telles fonctionnalités (par exemple si vous avez juste envie de vérifier la mise en page dans différentes résolutions), ces rechargements peuvent s'avérer ennuyants. Il est donc utile de pouvoir contrôler ces rechargements.
Lors d'un changement de certaines options, un message d'avertissement est affiché pour vous prévenir que les rechargements ne sont plus automatiques, et précise comment réactiver ce comportement :
Pour alterner entre les orientations d'écran portrait et paysage, il suffit de cliquer sur l'icône à droite de la sélection d'appareils :
Si tout le développement est fait avec une bonne bande passante, il est possible d'avoir des problèmes avec une connexion moins rapide et de ne pas s'en rendre compte. La Vue Adaptative permet de dire au navigateur d'émuler (très approximativement) les caractéristiques de différents types de réseaux.
Les caractéristiques émulées sont :
La table ci-dessous liste les valeurs associées à chaque type de réseau. Cependant, ne vous fiez pas à cela pour des mesures de performances exactes. Le but n'est d'avoir qu'une idée approximative de l’expérience utilisateur dans différentes conditions.
| Sélection | Vitesse de téléchargement | Vitesse d'upload | Latence minimum (ms) |
|---|---|---|---|
| GPRS | 50 KB/s | 20 KB/s | 500 |
| Regular 2G | 250 KB/s | 50 KB/s | 300 |
| Good 2G | 450 KB/s | 150 KB/s | 150 |
| Regular 3G | 750 KB/s | 250 KB/s | 100 |
| Good 3G | 1.5 MB/s | 750 KB/s | 40 |
| Regular 4G/LTE | 4 MB/s | 3 MB/s | 20 |
| DSL | 2 MB/s | 1 MB/s | 5 |
| Wi-Fi | 30 MB/s | 15 MB/s | 2 |
Pour sélectionner un réseau il faut cliquer sur la liste déroulante qui par défaut vaut "Aucune limitation" :
Pour prendre une capture d'écran, il suffit de cliquer sur l'icône en forme d'appareil photo :
Les captures d'écran sont enregistrées à l'emplacement de téléchargement par défaut de Firefox.
Depuis Firefox 53, si la case "Enregistrer dans le presse-papier" est cochée dans la page des paramètres alors, la capture d'écran sera aussi enregistrée dans le presse-papier du système d'exploitation.