10février2015

Taille des écrans, responsive design, et point de rupture

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

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 » (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:

– 1024px
– 1600px

Tablette

Malgré l’existence de nombreuses tablettes différentes, on retrouve généralement les tailles suivantes:

– 1024px de largeur (format paysage)
– 740px 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:

– 720px (format paysage)
– 480px (format portrait et format paysage de la taille en dessous)
– 320px (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 960px de largeur:

Jusqu’à 479px : smartphone en portrait
De 480px à 959px : smartphone en paysage, tablette en portrait et petite tablette en paysage
De 960px à 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 )

Et dans les cas où votre design initial est basé sur une largeur de 1024px, il suffit de remplacer le point de rupture 960px par 1024px.

Donc pour résumer : 480px | 960px ou 1024px ( 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.

 

FacebookTwitterLinkedInGoogle+

A PROPOS DE L'AUTEUR

Co-fondateur de Mekalab , Benjamin BUFFARD est un passionné de nouvelle technologie et d'innovation. Son rôle de directeur technique l’amène à s'informer sur les dernières nouveautés en terme de développement et d’expérience utilisateur.