Informatique


Responsive Web Design (RWD)

Aller à


Rappel


Smartphone | PC-Laptop | Tablettes

Un écran se définit par sa taille, sa définition et sa résolution.

Le pixel

Le pixel (souvent abrégé px) est l'unité de base permettant de mesurer la définition d'une image numérique matricielle.
Son nom provient de la locution anglaise picture element, qui signifie « élément d'image ».

La taille

Elle se mesure en pouces ou en cm et représente la diagonale de l'écran.

La définition

La définition d’écran est le nombre de pixels que peut afficher un écran. La définition est le produit du nombre de pixels selon l’horizontale par le nombre de pixels selon la verticale de l’affichage.

La résolution

La résolution de l’écran est le nombre de pixels par pouce (dpi).



Organiser sa page

Le RWD peut être organiser de plusieurs façons, historiquement:

Qulle technique de programmation utilsera-t-on?

  • Une grille pour disposer les balises principales
  • Des flexbox ou des block pour les balises contenues dans

  • Taille des écrans

    Ecran d’ordinateur type « 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 (plus précisément la définition) 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 rupture

    Il s'agit de déterminer une taille particulière à partir de laquelle on bascule sur un autre style d’affichage.
    Avec les largeurs définies ci-dessus, on peut déduire les limites de passage d’un affichage à l'autre, en essayant de ne pas dépasser 3 ou 4 catégories d'affichage.

    Ce sont les valeurs que vous allez utiliser dans les Medias Queries 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.


    Les télévisions

    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 (exprimée en dpi).
    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.