Très régulièrement, on me pose des questions sur les tailles des écrans pour faire un design « responsive ».
Pour ceux qui connaisse le terme, mais qui ne savent pas vraiment ce que cela veut dire, sachez qu’on appelle « design responsive » (ou responsive design ) la capacité d’un site web à s’adapter au terminal de lecture.
Mais pourquoi faire ?
Eh bien avec le nombre d’appareils différents capables d’afficher une page web, il a fallut réfléchir à un moyen pour afficher proprement un site (et de façon légèrement différentes) quelque soit le support: écran d’ordinateur, tablette, smartphone, ou télévision. Pour cela, on s’appuie sur la technologie des feuilles de style (CSS), qui permet de modifier l’affichage d’un élément d’une page web en fonction de la taille de l’écran (ou du navigateur ).
Exemple de mise en page responsive
Bon, l’introduction étant faite, passons à la partie intéressante de ce sujet: la taille des écrans et les points de rupture conseillés (ou généralement utilisés )!
Tailles des écrans
Ecran d’ordinateur (que l’on appelle « Desktop » )
On distingue 2 sortes d’écran différents: les écrans « normaux » (13, 15, 17 pouces) et les grands écrans (21 pouce et + ).
Ce qui nous intéresse,c’est la taille de la fenêtre et non celle de l’écran. On considère ces 2 largeurs d’écran:
– 1280px
– 1920px
Tablette
Malgré l’existence de nombreuses tablettes différentes, on retrouve généralement les tailles suivantes:
– 1024px de largeur (format paysage)
– 768px de largeur (format portrait)
Smartphone
Pour les smartphones, c’est encore pire, on peut tout trouver coté taille d’écran. Mais encore une fois, on peut isoler les grandes tendances:
– 768px (format paysage)
– 480px (format portrait et format paysage de la taille en dessous)
– 375px (format portrait)
Bon, au final, ça fait beaucoup de taille différentes … mais avec ces grandes tendances, on peut définir des points de rupture assez efficaces (et suffisamment généralistes pour être utilisable presque à chaque fois).
Les points de ruptures
Un point de rupture, c’est quoi?
C’est un jalon, une taille particulière à partir de laquelle on bascule sur un autre style d’affichage. Avec les largeurs définis ci-dessus, on peut en déduire les limites de passage d’un affichage « smartphone » à un affichage « tablette », etc.
Il s’agit en fait de regrouper les formats équivalents afin de simplifier la vie du webdesigner et de l’intégrateur, et regrouper vos affichages en 3 ou 4 catégories.
Pour parler « code » quelques secondes, ce sont les valeurs que vous allez utiliser dans les @media query de vos feuilles de style.
Voici donc les points de rupture souvent utilisés pour un affichage « normal » basé sur 1024px de largeur:
Jusqu’à 767px : smartphone en portrait & paysage
De 768px à 1023px : tablette en portrait et petite tablette en paysage, petit écran, ou navigation sur une petite fenêtre.
De 1024px à 1280px : tablette en paysage, écran d’ordinateur de taille petite et moyenne
1281px et au delà : grand écran d’ordinateur (21″ et + en plein écran )
Donc pour résumer : 768px | 1024px ( à moduler selon votre design ) | 1281px
Prendre de bonnes résolutions : Télévision connectée
L’affichage d’une page web sur un écran PC Full HD 21″ et l’affichage de la même page web sur un téléviseur Full HD 42″ ne proposent absolument pas la même expérience utilisateur. Sur un téléviseur, un texte doit pouvoir rester lisible à plus de 3 à 5 mètres de distance. C’est là qu’intervient la notion de résolution. On l’exprime le plus souvent en DPI (Dot Per Inch). En Full HD, la résolution d’un écran PC 21″ est d’environ 102 DPI, celle d’un écran 42″ de 52 DPI soit quasiment 2 fois moins.
Pour info, voici un exemple de section CSS définissant un media query spécifique aux téléviseurs
@media tv (min-width:1919px) and (max-resolution:72dpi) {
...
}
Avec ça, vous pourrez augmenter la taille du texte uniquement pour les écrans TV. Et tout vos visiteurs provenant de smart TV ( OK, il y en a assez peu ) vous remercieront.
C’est ainsi que se termine cet article sur les différentes tailles d’écran et sur le design responsive. J’espère avoir répondu à pas mal de vos questions les plus courantes sur le sujet.