Découvrir le design responsive

Concevoir pour des écrans de densité variable

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Appliquez des stratégies alternatives de gestion d'images et d'icônes pour des mises en page responsives à destination d'écrans de densité variable.

Transcription

Maintenant que nous avons vu ce qu'était la densité des écrans, et puis quels étaient les problèmes qui étaient liés aux écrans haute résolution, voyons quels sont les moyens d'optimiser les graphiques pour ces écrans à haute densité. Voyons donc comment intégrer les densités variables dans notre stratégie de contenu. La première des choses que l'on peut faire, c'est de minimiser le recours aux images bitmap, de manière à pouvoir utiliser des images qui vont être redimensionnées sans perte de qualité, comme c'est le cas des images bitmap. Nous allons donc travailler avec du SVG, nous pouvons également travailler avec des images définies par des codes CSS. L'avantage du SVG, Scalable Vector Graphic, est qu'il s'agit d'un format vectoriel. Lorsque vous prenez une image bitmap, comme c'est le cas ici et que vous l'agrandissez successivement, vous allez voir apparaître des pixels à partir du moment où cette image va être agrandie au-delà de sa résolution initiale. En ce qui concerne un fichier vectoriel, vous pouvez agrandir ou réduire cette image, sans qu'il y ait aucune perte de qualité, puisque le format SVG redessine l'image à chaque redimensionnement. Il y a des limitations à la fois pour le SVG et les CSS. En ce qui concerne le SVG, il s'agit d'un format qui peut être un petit peu plus lourd, en ce qui concerne notamment des icônes, et puis les graphiques sont redessinés à chaque redimensionnement de l'écran, ce qui demande des ressources. Les CSS, elles, ne sont pas toujours faciles à réaliser, et puis elles vont générer un code un petit peu parasite avec un balisage non sémantique qui risque de perturber des moteurs de recherche, par exemple lorsqu'ils vont indexer les sites. Et enfin les CSS ne sont pas supportés encore par tous les navigateurs et tous les périphériques. Il y a donc un certain nombre de limitations qui font que l'on va encore énormément travailler avec des images bitmap. Lorsque l'on va travailler avec des images bitmap, il va donc falloir prendre en compte à chaque fois le fait qu'elles peuvent être affichées sur des écrans basse définition, mais également sur des écrans haute définition. Donc nous allons partir du principe, que qui peut le plus peut le moins, et nous pouvons tout à fait envisager de commencer à travailler avec une image haute définition qui est destinée à s'afficher sur des périphériques qui ont une densité supérieure. Et cette même image va s'afficher dans une dimension inférieure sur des périphériques qui ont une densité qui est inférieure. Et puis on va gérer l'affichage en hauteur et en largeur de cette image en considérant qu'elle s'affichera à la même taille. En ce qui concerne le ciblage des densités, on peut donc décider d'utiliser toujours par exemple des graphiques de haute définition. Sachant que le poids des images va être supérieur, et lorsqu'ils vont s'afficher sur des périphériques qui certes ont des écrans qui sont avec une très haute densité, n'ont pas forcément en termes de connexion et de débit des systèmes qui vont être très performants. Le paradoxe est que aujourd'hui les périphériques mobiles ont des écrans qui sont de très haute densité, mais qui restent encore pour la plupart connectés avec de la 3G. Et puis d'autre part, les ratios pixel/device vont varier en fonction des périphériques. Donc nous allons pouvoir travailler avec des CSS qui vont nous permettre de déterminer Et vous voyez qu'ici on peut aller dans une instruction CSS, préciser que en fonction de ce que le navigateur va trouver, c'est-à-dire est-ce qu'il va s'agir par exemple ici, d'un pixel ratio de 2, c'est-à-dire d'un écran à haute densité, eh bien on ira appliquer ici une image de haute résolution qui sera gérée en background. Nous avons donc dans un premier temps la définition de l'image haute résolution. Nous avons prévu une image qui est en haute résolution, elle va être affichée en background, et elle sera affichée à 50 % de sa taille, puisque on est dans un pixel ratio de 2. On peut également travailler avec des JavaScript qui vont trouver le ratio device / pixel. On peut avoir une fonction de type getDevicePixelRatio, et puis on va demander si l'on trouve un pixel ratio qui est indéfini, on va renvoyer 1, on va supposer qu'on est sur un ratio de 1. Et puis ensuite, si le pixel ratio n'est pas indéfini, c'est-à-dire qu'il a été fixé, eh bien à ce moment-là, on va renvoyer ce pixel ratio. Et on pourra ensuite l'intégrer, c'est-à-dire déterminer ce qu'on affichera en fonction du pixel ratio que l'on aura trouvé. Pour réaliser des conceptions de site responsive, il va toujours falloir soigneusement réfléchir à nos utilisateurs, et surtout au contexte dans lequel ces images vont être utilisées, et puis de l'opportunité ou non d'utiliser des images haute résolution pour ce site. Un jour bientôt, nous aurons universelle qui va nous permettre de spécifier quels éléments utiliser pour quel périphérique, et comment la bande passante pourrait jouer un rôle dans cette sélection. À l'heure actuelle, par contre, nous devons faire de notre mieux en utilisant les techniques qui nous sont offertes actuellement. Cela signifie que pour vous, en tant que concepteur de site, vous allez devoir examiner attentivement toutes vos options lors de la conception pour des densités d'écrans multiples. quel va être le pixel ratio.

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
Votre/vos formateur(s) :
Date de parution :6 sept. 2017
Durée :2h02 (25 vidéos)

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 !