Le design web : Les méthodes modernes de création de sites

Gérer le design graphique

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Le travail sur les images responsives ne doit pas se limiter à une seule mise à l'échelle. Il doit s'appuyer sur les mediaqueries, les balises images et les formats de fichier modernes.

Transcription

Une partie très importante pour ne pas dire cruciale du travail du graphiste web est de produire des images qui soient responsives, c'est-à-dire qui vont s'adapter à la taille des écrans. Vous allez me dire que c'est peut-être facile, qu'il va suffire d'ajouter une image pour le plus grand écran et puis que ma foi on la resserrera, on la réduira pour les petits écrans et que qui peut le plus peut le moins sauf que lorsque vous allez avoir une très grande image sur un écran, celle-ci sera lourde et pour un grand écran ça se justifiera mais sur un périphérique mobile qui d'autre part aura une connexion avec un débit plus faible, il n'est pas conseillé de télécharger une énorme image pour l'afficher à la taille d'une vignette. En HTML 5, de nouvelles balises comme srcset et picture permettent de bien travailler les images responsives, l'idée étant avec des media queries, des requêtes médias, de pouvoir aller chercher différentes tailles d'images en fonction du périphérique et ainsi de ne pas charger une image inutilement lourde pour une mise en page où elle sera affichée à la taille d'un timbre-poste. On aura donc un affichage des images qui sera variable en fonction des périphériques et selon certains cas on aura même la possibilité, pour certaines tailles d'écran, de zapper les images, c'est-à-dire de décider qu'il ne sera pas judicieux d'afficher telle image sur un écran qui sera trop petit. D'autre part il y a des avancées, c'est-à-dire qu'aujourd'hui les icônes que l'on va utiliser peuvent être utilisées à partir de polices de caractères. Il ne va donc plus sagir de dessins mais de caractères et l'on pourra simplement changer la taille de ces caractères. Par exemple ici nous sommes sur le site de Foundation qui est un FrameWork responsive, nous pouvons ici consulter leurs polices d'icônes, télécharger ces polices d'icônes et vous voyez que nous avons ici toutes les icônes possibles et imaginables dans des tailles qui vont être variables puisqu'il suffira de faire changer la taille du caractère. C'est le corps de la police qui déterminera la taille de l'icône. Nous avons des icônes de e-commerce avec des paniers, des caddies etc donc toutes les icônes bien entendu ici ont été prévues. Il y a également une autre avancée qui est intéressante qui est le nouveau format SVG pour Scalable Vector Graphics. C'est un format qui ne va pas s'appliquer pour l'instant à des photos mais essentiellement à des dessins. Il s'agit d'un format vectoriel dont la structure du code est une structure XML. Vous pouvez produire du SVG à partir de logiciels divers comme Illustrator, Inkscape qui est open source et bien d'autres logiciels. Vous pouvez également créer des SVG en les codant directement avec un éditeur de code. Quel est l'intérêt du SVG ? Quel est l'intérêt d'être vectoriel ? C'est très simple, vous voyez ici que nous avons un texte qui a été écrit et vectorisé puis passé en SVG. Si j'agrandis la taille de ma page, vous allez voir que la qualité du texte reste tout à fait excellente, c'est-à-dire que si j'avais fait cette même opération avec un JPEG ou avec un GIF, j'aurais une image toute petite qui serait de très bonne qualité mais j'aurais été obligé de prévoir des images de substitution pour les grandes tailles. Ici la même image est exploitée à toutes les tailles avec une même qualité constante. Nous voyons que nous sommes parfaitement armés pour travailler des images responsives. Bien entendu c'est un processus qui devra être intégré à notre processus global de conception web et qui devra être testé systématiquement à chaque fois que nous implémenterons des images dans notre mise en page.

Le design web : Les méthodes modernes de création de sites

Ayez une vue d’ensemble du processus de conception de sites web. Définissez la stratégie de contenu, le développement, la conception, les tests, pour finalement lancer votre site.

Aucun commentaire n´est disponible actuellement

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 !