Découvrir le design responsive

Découvrir les solutions émergentes pour images responsives

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avec les balises SourceSet et Picture, découvrez les nouvelles méthodes pour utiliser des images responsives.

Transcription

Nous avons vu dans la vidéo précédente des techniques pour rendre les images responsives et nous avons vu également que ces solutions ne sont pas toujours totalement idéales. Nous allons maintenant voir des solutions émergentes et vous allez également constater qu'il n'y a pas de solution miracle. Pour comprendre comment fonctionnent ces images réactives il faut savoir qu'au coeur de la problématique il y a la question de servir la bonne image dans le bon contexte. Il ne suffit pas d'avoir simplement une image Nous devons avoir la possibilité de nous assurer que la bonne image bien adaptée va être servie dans le bon contexte. À l'heure actuelle, cela dépend d'essentiellement trois facteurs. Premièrement il y a la taille de l'écran. Deuxièmement il y a la densité de cet écran. Et puis il y a également la connectivité qui va jouer sur la bande passante. On s'aperçoit que cela va générer des facteurs qui sont contradictoires. Parfois on va avoir sur un téléphone portable une faible bande passante qui va rester pour la plupart des appareils en service actuellement calée sur de la 3G alors que même si on voit apparaître la 4G et la 5G, il faut savoir que l'essentiel du parc est encore connecté la plupart du temps en 3G. D'autre part, les temps de latence peuvent être élevés, les tailles d'écran sont relativement réduites puisque ces téléphones ne sont pas très très larges. Et puis, par contre, ils ont de plus en plus des écrans de haute résolution. Vous voyez donc que ces facteurs peuvent parfois être contradictoires. En ce qui concerne les tablettes, la bande passante va également être faible mais elle peut être un peu plus élevée selon l'environnement dans lequel on se connecte et puis la latence est toujours élevée. Les tailles d'écran sont par contre un petit peu plus grandes et on va avoir de plus en plus des écrans de haute résolution. En ce qui concerne les ordinateurs, il faut comprendre que la bande passante qui la plupart du temps va être élevée peut également dans certains cas être faible. Ces ordinateurs peuvent être connectés à des bornes wifi qui ne vont pas forcément avoir un très très haut débit. La taille des écrans est bien entendu assez importante et de plus en plus, ces écrans sont des écrans de haute résolution. Pour prendre en compte ces paramètres, le W3C et des groupes de travail qui planchent sur le HTML 5 ont mis en place un certain nombre de solutions. La première solution est la solution srcset où l'on va définir pour une image un set de ressources qui va aller chercher telle ou telle image en fonction d'une largeur d'écran. Vous remarquez qu'ici il y a en plus de ce srcset une ressource qui va consister à charger une image de secours pour des navigateurs qui ne reconnaîtraient pas cette balise srcset. Il y a une proposition concurrente et puis également complémentaire qui est la solution picture. Il s'agit d'une nouvelle balise et vous voyez qu'ici dans un premier temps on place une balise picture. Il y a une description de cette image comme dans les balises anciennes img. Et puis en-dessous, nous allons charger également un srcset au cas où le navigateur reconnaîtrait la balise srcset et ensuite à l'intérieur de cette balise picture, on va aller rechercher les médias sources. Et ici on va rechercher des médias en fonction des largeurs d'écran et puis l'on va chercher des médias qui vont être adaptés aux résolutions des différents écrans que l'on va afficher à leur taille normale ou au double de leur taille. Ici en l'occurrence on a défini deux sources média pour deux tailles d'écran différentes 18em et 45em. Notez également que l'on a ajouté une balise img src très classique en HTML pour des navigateurs qui ne reconnaîtraient pas la balise picture. En tant que concepteur, vous allez donc devoir accorder une attention toute particulière à la façon dont ces techniques vont changer, vont évoluer et puis dont les mises en œuvre vont être réalisées afin que vous soyez prêt à adopter les nouvelles techniques au fur et à mesure de leur apparition. qui va se réduire pour les petits écrans.

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 !