Webdesign pour écrans Retina

La « technologie » Retina, si on peut l’appeler ainsi, consiste en une densité de pixels assez élevé pour que l’œil (d’où le nom de retina) ne puisse discerner les pixels sur l’écran. Cependant, avec une telle densité de pixels, pour ne pas que tout paraisse minuscule sur ces écrans, Apple a décidé de tout simplement doubler la valeur en pixel de chaque élément. Concrètement, cela signifie que dans votre feuille CSS, tout élément que vous définissez, par exemple, avec une width: 100px; fera en réalité 200px. Tout est multiplié par deux.

Les proportions sont conservées et dans l’ensemble ça ne défigurera pas votre site, à l’exception des images, qui risquent de paraître d’une bien piètre qualité. Autant s’adapter à cet usage, d’autant plus que de plus en plus de devices (tablettes smartphones et ordinateur) vont adopter des écrans de haute résolution.

Voici donc un article (en anglais), qui explore les différente manière de faire un design compatible Retina, sans pour autant pénaliser les écrans « normaux ».

Il n'y a pas encore de commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *