site responsive design developpement
Boutiques e-commerce, Développements sur mesure, SEO / référencement naturel, Sites Internet / Intranet / Extranet

Comment définir ses points de rupture pour le responsive design

6 mars 2020

Rendre son site adapté à la consultation sur mobile est devenu un incontournable du web aujourd’hui pour une bonne prise en compte de l’expérience utilisateur et un bon référencement de son site Internet dans les moteurs de recherche. Pour développer en responsive, il existe une multitude d’outils et de frameworks qui facilitent la vie du développeur.

Mais chaque site étant unique (du moins c’est ce que nous essayons de proposer chez Pic Digital), il arrive toujours un moment où l’utilisation de points de rupture (les fameux media-queries) deviennent alors incontournables. Compte tenu de la multitude de tailles d’écrans, de ratios et de définition d’écrans sur smartphone et tablettes, la question qui se pose au développeur est la suivante : quels points de ruptures utiliser et pour quel type de dispositif mobile ?

Définition d’écran et device-width

Lorsque l’on réalise un site web, il faut se baser sur la largeur du « viewport ». Le viewport représente la zone d’affichage du document, comme par exemple la fenêtre d’un navigateur web. Cette largeur de référence est définie dans une balise HTML meta à l’intérieur des balises head. Le comportement recommandé est que la largeur du viewport soit logiquement équivalente à celle de l’écran du terminal client (ce qui revient à dire que le défilement de la page se fera normalement de haut en bas et non pas de gauche à droite).

Voici comment est déclaré le viewport en HTML :

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

Mais si le viewport était équivalent à la largeur en pixels réels de l’appareil, il y aurait forcément des incohérences pour l’affichage d’un site conçu en 2015 pour l’écran d’un smartphone de l’époque et sur celui d’un smartphone de 2020. En effet, la densité de pixels à quasiment doublée depuis, par exemple, entre le 720p d’un écran 5 pouces haut de gamme à l’époque par rapport au quad HD 1440p des écran 5,5 pouces haute définition disponible de nos jours.

Pixels Virtuels : le concept de “Density Independent Pixel” (DIP)

C’est là qu’intervient la notion de DIP qui va définir notre device-width. Cette notion est elle même liée au « rapport d’aspect » des pixels (ou ratio de pixels).

La « device-width » est calculée en divisant la largeur de l’écran de l’appareil par le ratio de pixels défini par le système d’exploitation du terminal. Cela permet d’optimiser la visualisation de page web et harmoniser l’affichage d’un appareil à l’autre. Pour l’utilisateur, il s’agit concrètement d’un zoom appliqué sur le document.

La formule de calcul est simple pour définir le ratio qui correspond à un pixel du device-width :

Ratio DIP = Résolution du terminal / résolution base

Exemple :
Considérant un terminal avec une densité de 550ppi et une resolution base de 160ppi (fixé par l’OS) :
550/160 = 3,43.

Sur ce terminal, un pixel virtuel de notre device-width correspondra donc à 3,43 pixels physiques. Avec un terminal de 1440 pixels le device-width correspond à environ 420 pixel.

La largeur en pixels virtuels de notre zone d’affichage impose donc un effet de “zoom” qui dépendra de la définition de l’écran et de la densité de pixels (la résolution en points par pouces).

Parmi les critères servant à calibrer la taille du pixel virtuel, les constructeurs peuvent prendre en considération l’affichage d’un texte avec une police de 16 pixels (standard pour le web) pour qu’elle soit confortablement lu à une distance moyenne d’utilisation de l’appareil. On constate dans la pratique que les ratios sont arrondis à l’unité supérieur.

Tout cela permet donc au développeur web de ne pas faire des calculs de densité de pixel pour obtenir un affichage désiré. En effet, les smartphones ont une device-width différente des tablettes qui sera à son tour différente de celle des grandes tablettes ou des ordinateurs portables, etc.

Pour nuancer notre affirmation, on peut quand même évoquer que le zoom constructeur est modifiable par l’utilisateur dans les paramètres d’affichage du terminal ou dans le navigateur selon ses préférences.

Device-width et appareils mobiles

Maintenant que nous savons que les constructeurs de terminaux mobiles utilisent un ratio de pixels pour permettre l’affichage optimal des sites web, il nous faut identifier les largeurs les plus courantes correspondantes aux différents types d’appareil du marché.

Voici les quelques largeurs que nous pouvons considérer comme quasi standard :

SMARTPHONES

ATTENTION : Le format paysage est plus variable car influencé par les différents format de l’écran : 16:10, 18:9, 19:9 etc.

TABLETTES (et Netbook)

PC portables 13 pouces à 17 pouces

à partir de 1280px

Points de ruptures et media queries

A partir de ces repères, on peut alors envisager les comportements d’affichage d’un site web selon le type de terminaux qui réaliseront l’impression écran. Cela peut nous permettre de déterminer des points de rupture logiques qui engloberont le plus de dispositifs cibles possibles.

Ainsi, on peut imaginer, par exemple, un ensemble de règles CSS qui gère de façon différente les petits écrans de smartphone, les plus grands écrans de smartphone et les tablettes jusqu’à 8” en mode portrait. Le reste du CSS gèrera l’affichage de la même façon pour tous.

Cela donnera concrètement :

@media only screen and (max-width: 320px){
/*style petits smartphones en voie de disparition*/
}
@media only screen (min-width: 321px) and (max-width: 799px){
/*style smartphones et petites tablettes en portrait*/
}
@media only screen and (min-width: 800px) and (max-width: 966px){
/*style petites-moyennes tablettes */
}

Une bonne pratique pourrait être aussi d’utiliser à la place des unités de tailles en pixels, les unités de mesure CSS « em/rem », en fixant la taille de la police à la racine du document à 16px.

On aurait ainsi, par exemple pour les smartphones en orientation portrait, des largeurs de 40em pour les petits écrans, 60em pour les écrans plus standard et 80em pour les plus grands écrans. Cette pratique éviterait la confusion entre les pixels réels et les pixels du viewport. Ou pourquoi pas, directement l’unité dip qui est disponible en CSS !

Conclusion

Bien construire un site pour qu’il s’adapte à tous les dispositifs possibles comporte une dose de complexité qui nécessite une certaine maîtrise du design, de l’ergonomie et de la technologie web pour y arriver. Cet article ne propose pas de recettes toutes faites pour résoudre cette complexité mais nous espérons qu’il vous aura permis de mieux comprendre comment fonctionne le responsive design par une approche technique. Ce niveau de connaissance basique vous permettra de développer un site web adapté aux usages actuels d’Internet et d’utiliser des outils tels que des frameworks CSS. Bien comprendre son outil, c’est forcément mieux l’utiliser !

Sources