Arrêtez les résolutions d'écran de poursuite
Nous vivons une période si excitante dans le monde du web. La technologie et les normes progressent à un rythme peut-être plus rapide et plus excitant que jamais. Au fur et à mesure que les choses changent, nos habitudes aussi, et un changement qui, selon moi, a connu de plus grands changements que la plupart des autres devrait être le changement de résolution de nos appareils.
La résolution est une chose amusante à mesurer. ce n'est pas un changement de taille physique, mais un changement de clarté. Ce ne sont pas des images, des couleurs plus vives ou plus riches, mais des images plus denses. C'est aussi quelque chose que les gens comprennent rarement la valeur jusqu'à ce qu'ils le voient par eux-mêmes.
Bien sûr, lorsque nous découvrons les écrans haute résolution, nous sommes accrochés. Et nous voulons tous que nos sites Web (et les sites Web de nos clients) soient superbes sur les appareils dotés de ces écrans. De nombreux concepteurs de sites Web s’attaquent à cet objectif en créant des images pour chaque nouvelle résolution proposée. Ou, comme je l'appelle dans cet article, "courir après les résolutions d'écran".
Une introduction à SVG
Beaucoup d'entre nous savent ce que sont les SVG (Scalable Vector Graphics). Nous l'avons vu sur le site Web HTML5 du W3C, sous "3D, Graphics & Effects". SVG est une technologie HTML5 standard qui affiche des images avec du code. Ou quelque chose.
Au moins, c’est la réponse générale que j’ai eue lorsque j’ai posé des questions sur les graphiques SVG. Ce n'est pas vraiment quelque chose qui intéresse les gens, car sa valeur n'est pas entièrement comprise.
Je veux vous montrer comment éviter de "courir après les résolutions d'écran", et il se trouve que la norme SVG peut nous aider à faire exactement cela.
L'état des graphiques de la rétine
Lorsque je parle de "graphiques rétiniens", je me réfère à tout appareil dont la résolution d'écran est supérieure à celle des écrans traditionnels, avec une résolution nettement supérieure à 72 ppm (pixels par pouce).
Apple a brisé la barrière 72ppi avec l’iPhone 4, un appareil doté d’un nouvel écran haute résolution fantastique, qui ressemble à tout ce que nous avions vu auparavant. Sauf quand vous l'utilisiez pour naviguer sur le Web ... le Web semblait être une bêtise.
Le web avait des images optimisées à 72ppi. Au moment de la rédaction de cet article, la plupart des sites Web le sont toujours, deux ans après le lancement de l’iPhone 4.
Maintenant, nous avons toutes sortes de périphériques avec des graphismes de qualité Retina. Il fait lentement son apparition sur toute la gamme de produits Apple, allant jusqu’à l’iPod Touch, à l’iPad et même au dernier MacBook Pro. Les smartphones apparaissent partout avec des affichages haute résolution, à tel point qu'un écran de résolution "standard" se sent presque vieux à ce stade.
Résolution toujours dépendante
Lorsque la communauté des concepteurs Web a surmonté le problème des images floues avec des images @ 2x chargées conditionnellement (les images ont été créées pour être deux fois plus grandes que leurs homologues d'origine, chargées uniquement sur les périphériques haute résolution), . Certains concepteurs ont même annoncé que leurs sites Web étaient "indépendants de la résolution".
Bien sûr, ce qu'ils auraient vraiment dû faire de la publicité sur leurs sites était "optimisé pour deux résolutions d'écran".
Les appareils continueront à s'améliorer, les résolutions continueront à s'améliorer et le Web continuera à être apprécié sur un nombre croissant de facteurs de forme. Qu'en est-il de l'avenir inévitable @ 3x? Qu'en est-il de @ 4x? Qu'en est-il si la norme "1x" devient inutile? Qu'est-ce qui fait que 3x "@ 3x" et non "@ 2.5x"?
Messy en effet.
De plus, cette technique n’est guère répandue. Je navigue sur le Web avec le MacBook Pro susmentionné avec Retina Display, et la plupart du Web est malheureusement exactement là où il a toujours été depuis l'iPhone 4: flou. Créer à nouveau toutes vos images Web est une tâche ardue, en particulier lorsque le monde entier de la conception Web conçoit depuis si longtemps avec des bitmaps.
Unboomable web
Même aujourd'hui, avec nos images @ 2x, nous ne pouvons toujours pas zoomer sur les pages Web sans qu'elles ne redeviennent moche. Text gère très bien un zoom, mais en comparaison, les images sortent juste pour les futures exportations @ 4x (quelque chose que personne ne jugera approprié de servir juste au hasard si quelqu'un souhaite zoomer en 4x sur votre icône RSS) .
Aller vraiment indépendant de la résolution
Le problème concerne les images bitmap. Nous avons toujours su qu'ils ne sont pas haut de gamme, et maintenant n'est pas différent. Nous avons besoin de graphiques vectoriels sur nos sites Web. Les graphiques vectoriels sont calculés par une série d'instructions, plutôt que cuits sur une grille où chaque pixel représente une couleur. Entrez, SVG.
Taille unique
Étant donné que les graphiques SVG sont des graphiques vectoriels (d'où le nom "Scalable Vector Graphics"), ils seront superbes sur les résolutions d’hier, d’aujourd’hui et même de demain. En outre, en raison de la nature formelle des graphiques vectoriels, vous pouvez effectuer un zoom avant sur tout appareil et les images resteront superbes.
Temps de chargement plus rapides
Faire une image de 2000px par 2000px, à un concepteur de sites Web, semble tout simplement ridicule. Cela prendrait beaucoup trop de temps pour charger, cela mettrait certains appareils mobiles à genoux, et la version "@ 2x" 4000px x 4000px serait une folie. Et comme les résolutions vont de mieux en mieux, elles ne sont tout simplement pas viables. Avec SVG, puisqu'il s'agit d'un format vectoriel, peu importe que l'image soit 20px ou 2000px; le temps de chargement sera exactement le même. La seule chose qui fait la différence dans les temps de chargement est la complexité de chaque fichier image.
Vous pouvez l'utiliser aujourd'hui
SVG peut ne pas être pris en charge à tous les niveaux, mais Modernizr peut détecter les fonctionnalités. En desservant une version SVG et non-SVG, vous pouvez profiter de tous les avantages du format SVG, tout en laissant les navigateurs hérités avec un format PNG @ 1x. C'est aussi simple que cela:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Limites de SVG
Il n’est pas difficile de créer des graphiques SVG à partir d’images vectorielles. De nombreuses applications professionnelles telles que Adobe Illustrator et Inkscape peuvent exporter vers SVG en mode natif. Il y a cependant quelques points à connaître sur les SVG pour le web.
Ils ne peuvent contenir aucune image bitmap.
Bien sûr, vous pouvez les ajouter dans des applications de création SVG telles qu'Illustrator ou InkScape, et enregistrer votre travail en tant que fichiers SVG, mais ils ne seront pas rendus là où cela compte: votre navigateur Web. La magie CSS sera nécessaire pour charger un bitmap au-dessus du SVG, le cas échéant.
Peut prendre pour toujours à charger si compliqué
Si vous créez un fichier SVG compliqué, vous serez frappé avec des temps de chargement différents de ceux de l’image de 2000 x 2000 pixels. Par exemple, vous ne voudrez pas dessiner une peinture complexe au format SVG.
Je dois rester simple
Les applications comme Illustrator et Inkscape peuvent faire beaucoup plus que ce que votre navigateur Web peut gérer. Ils sont des applications d'illustration complètes et non des applications de création Web SVG. En fait, il est raisonnable de supposer que 90% des fonctionnalités offertes par ce type d’application ne seront pas accessibles aux internautes. Si vous êtes familier avec le logiciel vectoriel, vous devrez apprendre des moyens alternatifs pour créer les effets que vous aimez.
Essayer d'apprendre la langue
Le code SVG n'est pas quelque chose que vous pouvez "voir dans votre esprit" comme vous le pouvez lorsque vous lisez le HTML. C'est une série d'instructions cartographiées respectivement les unes contre les autres, élément par élément, couche par couche. Malheureusement, à partir d’aujourd’hui, vous devrez probablement y accéder de temps en temps, car Adobe Illustrator ne propose pas encore certains résultats.
Par exemple, les images dans Illustrator ont une toile sur laquelle vous dessinez; c'est une largeur définie par une hauteur définie. C'est bien, mais si vous voulez contrôler ces détails dans le navigateur, vous devez supprimer ces informations du SVG (note: certains navigateurs interpréteront votre CSS indépendamment des dimensions SVG déclarées, mais pas toutes). Ce n'est pas particulièrement difficile, mais cela peut être un casse-tête. Cela vaut la peine de passer un peu de temps à apprendre la langue pour pouvoir manipuler encore plus les SVG.
SVG dans la nature
Logos
Les logos doivent généralement être dans un format vectoriel, de sorte qu'ils sont un excellent moyen d'intégrer le SVG dans les conceptions de votre site Web. En utilisant le balisage ci-dessus, vous avez tout ce dont vous avez besoin pour prendre vos premiers éléments SVG en ligne.
Des icônes
Les icônes sont un excellent candidat pour SVG. À tel point que j'ai créé un jeu d'icônes complet en utilisant les graphiques SVG. La nature évolutive de SVG signifie que les icônes peuvent être utilisées à n'importe quelle taille, en tenant compte d'un large éventail de conceptions de sites.
Des animations
Les animations constituent également un excellent exemple d'utilisation graphique de SVG. Étant donné que les animations sont généralement attachées à une largeur et une hauteur fixes, le format SVG aide les animations à devenir réactives. Flash a utilisé des éléments graphiques vectoriels, maintenant les animations HTML5 peuvent aussi.
Images de fond
Les images de fond ont toujours été un point délicat pour les développeurs Web. les temps de chargement potentiels, comme je l'ai mentionné ci-dessus, peuvent être fous. Les images de fond SVG peuvent être aussi grandes que vous le souhaitez; ils ont toujours des temps de chargement rapides à condition qu'ils ne soient pas vraiment complexes.
Conclusion
Dans l'ensemble, l'indépendance de la résolution est un objectif fantastique pour les concepteurs Web et les développeurs. Cela signifiera même que leurs goûts de conception seront obsolètes avant que leur image de site ne soit. Bien qu'il soit important de les aborder avec les yeux ouverts, il est assez clair de voir comment les graphiques SVG peuvent vous rapprocher d'un avenir d'autonomie de résolution totale.
Lorsque vous chargez un site compatible SVG sur un périphérique haute résolution comme un iPad 3 et que vous effectuez un zoom avant, vous serez vendu.
J'espère que cet article contribuera à encourager une réflexion indépendante sur la résolution de problèmes dans la conception et le développement Web, et j'espère que cela a encouragé certains d'entre vous à réfléchir à la manière dont SVG peut fonctionner pour votre prochain site.
Je suis dans la piscine SVG depuis un moment et je dois dire que l'eau n'a jamais été aussi belle.
Êtes-vous un convertisseur SVG ou servez-vous des bitmaps à l'échelle pour les écrans de rétine? Les vecteurs sont-ils l'avenir des graphiques Web? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image vectorielle via Shutterstock.