Découvrir le design responsive

Tenir compte des densités d'écran

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez les densités d'écran et les problèmes posés par les écrans haute résolution. En effet, ceux-ci auront un impact sur le développement de sites web responsives.

Transcription

En plus de la diversité très étendue des tailles d'écran, à un problème qui est croissant, qui est celui des densités des écrans. La densité des écrans est le nombre de pixels qui vont s'afficher dans la zone physique d'un écran, et les écrans les plus récents vont présenter des densités qui sont chaque jour supérieures. Si nous prenons ces 2 écrans, nous pouvons avoir à gauche un écran qui va avoir une diagonale de 3 pouces et demi, et qui va afficher 320 pixels de large sur 480 pixels de haut. Et puis nous avons à droite un périphérique qui va être plus récent, avec un écran qui ne sera pas plus grand qui va, admettons également avoir une diagonale de 3 pouces et demi, mais qui dans cet espace va nous afficher le double de pixels, Il y aura donc dans l'écran de droite beaucoup plus de pixels que dans l'écran de gauche, et ces pixels n'auront bien entendu pas la même taille à gauche qu'à droite. Le premier problème va donc consister à définir correctement ce qu'est exactement un pixel, surtout lorsque l'on va utiliser des écrans de densité supérieure comme par exemple les écrans Retina. Nous allons faire la distinction entre ce que l'on peut appeler des pixels matériels, physiques, affichés par le périphérique et qui sont dépendants du périphérique, de pixels de rendu qui eux vont être des unités de mesure qui vont être indépendants des périphériques sur lesquels on visionnera les pages Web. Voyons comment tout cela fonctionne. Si je reprends mes 2 écrans, j'ai toujours à droite un écran qui va afficher 320 pixels de large par 480 pixels de haut. Et puis à droite un écran qui va afficher 640 pixels de large par 960 pixels de haut. Et ce qui se passe, vous l'avez bien compris, c'est que à gauche les pixels n'ont pas du tout la même taille que sur l'écran de droite, Lorsque je vais réaliser des affichages d'image ou même de typographie, le phénomène suivant va se passer : si je saisis un texte et que je lui affecte une hauteur par exemple de 30 pixels, eh bien il va s'afficher à gauche avec une hauteur de 30 pixels, et ce seront des gros pixels, donc la hauteur sera importante, et puis à droite les pixels étant plus petits, la hauteur de 30 pixels sera nécessairement bien inférieure à celle de gauche, en l'occurrence dans cet exemple exactement de la moitié. Ce qui veut dire que si je souhaite établir une norme pour pouvoir mesurer les éléments, non pas en fonction du périphérique mais de manière absolue, il va falloir que je puisse passer de la notion de pixels physiques à la notion de pixels de rendu, et c'est ce qui est entrain de se passer actuellement au niveau des nouvelles technologies qui sont mises en place pour créer des sites Web responsives. À gauche, j'ai un écran de 320 par 480 pixels, et puis à droite j'ai toujours mon deuxième écran de 640 par 960 pixels. Si je veux afficher dans ces 2 écrans un élément qui aura exactement la même dimension, il me faudra un certain nombre de pixels, et ce nombre de pixels sera différent, selon que j'ai un affichage de 320 par 480 pixels, ou un affichage de 640 par 960 pixels. Donc à gauche, il va me falloir un certain nombre de pixels pour afficher un carré comme ici le carré jaune que vous voyez à l'intérieur de la grille. Ici il fait 3 pixels par 3 pixels. Et puis pour afficher à droite optiquement le même objet qui visuellement aura la même taille, vous voyez que les pixels étant plus petits, il me faudra le double de pixels en largeur et en hauteur pour afficher le même objet avec la même valeur visuelle. Nous avons donc ici une approche de la notion de pixels de rendu. Il faut donc définir une unité qui va être une unité qui ne sera pas liée au périphérique de sortie comme le pixel qui est le pixel device, le pixel du périphérique, mais qui va être une valeur qui va être indépendante. On peut donc définir la notion de pixels de rendu, on parle également de pixels CSS comme étant une unité de mesure qui va établir une norme qui sera optique pour la longueur d'un pixel, et qui va être totalement indépendante des pixels matériels. Cette valeur, en ce qui concerne les pixels CSS, a été fixée à 1"/196 de pouce, mais on pourrait travailler avec d'autres valeurs, comme c'est le cas par exemple sur Android où l'on fonctionne avec une valeur de base qui est sur 1"/160 de pouce. Nous avons en ce qui concerne le ratio pixel/device pour Android ici une grille, qui va nous montrer par exemple à quelle taille nous allons devoir travailler une image, à partir du moment où nous allons travailler pour des écrans qui vont être des écrans de densité différente. Si nous prenons toutes les lignes, vous voyez que la taille affichée sera la même. Nous sommes ici à peu près sur un peu plus d'un demi-pouce. Et selon la densité, puisque sur Android nous sommes avec un ratio de 1 sur une densité de 160, nous aurons une image qui devra mesurer 100 pixels par 100 pixels. Et puis si nous passons à une résolution supérieure de haute définition, HDPI à 240 pixels, eh bien nous sommes dans un ratio de 1.5, et nous devrons donc travailler notre image sur 150 pixels par 150 pixels, pour qu'elle s'affiche avec la même valeur optique à l'écran. Au fur à mesure que le ratio pixels/image va s'incrémenter à 2, à 3, à 4, nous allons bien entendu, dans la même proportion, avoir à augmenter la taille de l'image que nous devrons travailler pour qu'elle s'affiche à la même taille sur un écran de densité 640 qu'elle s'afficherait sur un écran de densité 160. Alors ceci peut peut-être vous paraître un peu théorique, mais il y a une chose qu'il faut essentiellement retenir, c'est que les densités des écrans Il faut donc travailler avec un système qui va nous permettre de nous assurer que, à partir du moment où nous voulons qu'une image s'affiche sur une certaine taille, eh bien elle s'affiche de la même manière sur les différents écrans de même taille quelle que soit leur densité. Et dans la vidéo qui suit, nous allons voir très concrètement quel est l'impact sur le travail que nous aurons à faire pour nos images. nous sommes c'est-à-dire 640 pixels de large par 960 pixels de haut. et il y en a bien entendu beaucoup et l'affichage des pixels n'est pas pas les mêmes.

Découvrir le design responsive

Abordez les principes du design responsive. Comprenez la problématique des écrans haute densité, analysez les grilles fluides, explorez les outils de prototypage, etc.

Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :6 sept. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !