Historique

Internet est né vers la fin des années 60, puis rapidement le mail est apparu en 1972. Le web arrive au début des années 90 avec la création du HTML et du premier navigateur. Entre ces deux périodes, les technologies ont évolué, les ordinateurs sont devenus personnels et le réseau s’est étendu à l’échelle mondiale. Aujourd’hui, les téléphones apportent une nouvelle dimension à notre relation avec Internet.

Internet Ne doit pas être confondu avec World Wide Web.
— fr.wikipedia.org/wiki/Internet

En complément : (une) histoire du design interactif par Étienne Mineur.

Base du langage

L’HyperText Markup Language est le langage à la l’origine de la première page web de l’histoire. Le HTML permet de lier des contenus et de structurer du texte en utilisant des balises.
Une grande qualité du HTML étant sa pérennité celui-ci reste toujours lisible dans les navigateurs d’aujourd’hui.

Graphisme à l’écran

Les surfaces d’affichage sont des dispositifs très variés, les spécificités de chaque écran engendrent de nombreuses combinaisons que l’on peut multiplier par les habitudes de chacun. Si votre travail de graphiste se destine à une borne spécifique (musée, aéroport, hôtel…) ou juste votre ordinateur, il sera facile d’anticiper le résultat final, mais cela sera rarement le cas.

© Luke Wroblewski
© Luke Wroblewski

Le design web nécessite une approche stratégique et complexe basée sur une bonne connaissance des contraintes. La préoccupation du graphiste étant la mise en page, le premier obstacle vient de la multitude d’écrans sur le marché. Il est rare d’avoir le même affichage d’un site d’une machine à l’autre.
Cette contrainte vous obligera à tester sur différents appareils, jouer avec des prototypes et régler la fluidité des éléments à différentes étapes de votre projet. La fluidité des éléments est propre aux graphismes à l’écran, il s’agit de fixer la taille des blocs ou des marges en utilisant des pourcentages.

La tendance actuelle étant de créer plusieurs mises en page pour améliorer l’affichage entre les appareils (téléphone, télévision, portable, tablette, console de jeux…), on parle de site web adaptatif.
Notez bien, qu’il est nécessaire d’anticiper et d’adapter votre design afin d’être lisible et compréhensible, même si vous n’avez pas assez ou trop d’espace.

DPI, Retina et HDPI

Chaque écran dispose d’une définition native exprimée en pixel et d’un réglage logiciel définissant la résolution, pendant longtemps l’écran étalon fut le 1024 ×768 et les sites étaient optimisés pour cet espace, mais aujourd’hui il faut s’imposer un panel plus complet.
Quelques résolutions d’écran d’ordinateur par ordre de popularité mondiale

  1. 1366 × 768 (29,49%)
  2. 1920 × 1080 (14,73%)
  3. 1024 × 768 (6,43%)
  4. 1280 × 800
  5. 1440 × 900
  6. 1280 × 1024
  7. 1600 × 900
  8. 1680 × 1050
  9. 1360 × 768
  10. 1280 × 720
  11. 1920 × 1200
  12. 1024 × 600
  13. 1280 × 768
  14. 1364 × 768
  15. 1536 × 864
  16. 2560 × 1440

(source : http://gs.statcounter.com/)
Attention, très peu d’utilisateurs naviguent en plein écran, l’interface du navigateur et du système d’exploitation peuvent facilement rogner 150 pixels sur la hauteur et 18 pixels sur la largeur.

DPI

La définition et l’usage de DPI portent à confusion, dots per inch ou points par pouce (PPP) en français n’a pas vraiment de sens pour le web, il s’agit d’un nombre de points sur une surface donnée. Les écrans sont certes des surfaces, mais l’approche est différente. Les techniques d’impression nécessitent généralement une résolution de 300 dpi. Pour le web, il faut se fier aux nombres de pixels et aux types d’écrans.
Néanmoins, des subtilités existent, si vous réalisez votre maquette sur Adobe Photoshop, par défaut (dans les préférences) celui-ci fixe les corps de typographie en points (pt). Pour garder vos repères, il est alors préférable de régler votre document à 72 dpi, ainsi 1 pt égale 1 px.
Rien ne vous empêche d’avoir une maquette web en 300 dpi mais la conversion des corps de typographie perturbera votre travail (un corps 3,84 pt sera lisible, car il représentera 16px).

Conseil : Gardez à l’esprit qu’un corps 16 px sera facilement lisible sur une page web, c’est la valeur par défaut du texte en HTML. Faites des essais, testez vos réglages, exportez et ouvrez votre image à 100%.

Retina et HDPI

Une autre subtilité est le travail d’image pour écran rétina et HDPI. Depuis la naissance du web, les technologies d’affichage ont évolué et s’améliorent encore. Les innovations récentes permettent de réduire la taille des pixels matériels. Ces améliorations connues sous les noms de xxhdpi, xhdpi, hdpi et retina ajoutent un gain de définition à l’écran avec un pixel 1,5 à 3 fois plus petit selon les appareils. On parle de PPI pour pixels per inch (la traduction en PPP porte à confusion), cela permet de mesurer le nombre de pixels par pouce sur l’écran, la densité.
Quelques valeurs :

  • MacBook 13 pouces : 113 ppi
  • MacBook Retina 13 pouces : 227 ppi
  • MacBook 15 pouces : 128 ppi
  • MacBook Retina 15 pouces : 220 ppi
  • Sony Xperia Z 5 pouces : 441 ppi

http://screensiz.es/phone

« ressemble à 1280 × 800 » avec une netteté Retina sur un 13 pouces.
« ressemble à 1280 × 800 » avec une netteté Retina sur un 13 pouces.
« ressemble à 1680 × 1050 » sur le même 13 pouces.
« ressemble à 1680 × 1050 » sur le même 13 pouces.

Le pixel étant l’unité de base, un texte en corps 16 px sur un appareil avec deux fois plus de pixels ressemblerait à un corps 8 px, rendant celui-ci illisible et cette technologie superfétatoire ; judicieusement grâce aux logiciels le corps ne change pas et le dessin du caractère s’affine en se basant sur son tracé vectoriel.

rendu MDPI, XHDPI et tracé d’un a Helvetica Light en corps 11,5 px
rendu MDPI, XHDPI et tracé d’un a Helvetica Light en corps 11,5 px

Pour les images bitmaps, il faudra fournir quatre à neuf fois plus de pixels pour avoir un affichage parfait, une petite photo de 640 × 320 = 204 800 nécessitera une source de 1280 × 640 = 819 200, le cas échéant un flou d’extrapolation sera visible. Quelques techniques seront abordées dans les prochains chapitres pour bien intégrer ses images.

Le même site avec deux définitions d’écran différentes :

réglage par défaut
réglage par défaut
réglage plus d'espace
réglage plus d’espace

Macro, Pixels & Retina

Voici une expérience de photographie macro de trois réglages Retina (défaut, intermédiaire, plus d’espace) d’une grille de 5px avec des lignes de 1px.

See the Pen Line 5px × 5px by Benoît Wimart (@benoitwimart) on CodePen.dark

Par défaut - Retina
Par défaut – Retina
intermédiaire
intermédiaire
Plus d‘espace
Plus d‘espace

Autres écrans

Pour finir, la photo de l’écran géant devant la Philharmonie de Paris.

30 leds rvb par gros pixel
30 leds rvb par gros pixel