Apple pousse l'industrie de la technologie en augmentant la densité de pixels sur les écrans d'iPhone et d'iPad. C'est formidable du point de vue de l'utilisateur, mais en tant que concepteur ou développeur Web, il menace littéralement de changer complètement la façon dont vous créez des sites Web.
Êtes-vous prêt pour la conception Web HD? Savez-vous à quoi ressembleront vos sites sur une nouvelle génération d’écrans haute résolution? Quelles mesures pouvez-vous prendre pour vous préparer et quelles compétences devrez-vous conserver pour rester pertinentes dans les années à venir? Continuez à lire pour le découvrir.
Quand Apple parle, nous écoutons
J'utilise les Mac fidèlement depuis l'OS 9 jours, pas aussi longtemps que certains vieux, mais suffisamment longtemps pour boire le Kool-aid et devenir complètement accro à Apple.
Je me souviens que lorsque j'ai vu un logo Apple, le produit était une sorte de niche, une particularité que seuls les individus tenaces de la société utilisaient pour tenter ouvertement d'aller à l'encontre de la culture dominante, Windows.
"Si vous choisissez une maison au hasard, il y a de fortes chances que vous trouviez au moins un iPod, iPhone et / ou iPad à l'intérieur."Grâce à une transformation impressionnante fondée sur le dévouement à la création de produits innovants de nouvelle génération, la petite société opprimée est devenue la société la plus précieuse sur la planète. Il n’ya peut-être pas de Mac sur tous les ordinateurs de bureau en Amérique, mais si vous choisissez une maison au hasard, il y a de fortes chances que vous trouviez au moins un iPod, un iPhone et / ou un iPad à l’intérieur.
Je ne fais pas l'éloge pour vous convertir à mon culte, je veux simplement établir qu'Apple est un bouleverseur dans l'industrie des technologies. Personne ne se souciait des nouvelles fonctionnalités proposées par Newton, mais lorsque Apple publiera un nouvel appareil iOS, le monde entier s'arrêtera et écoutera patiemment ce que les assistants d'Infinite Loop nous disent en ce qui concerne l'avenir.
Apple mise sur la haute résolution
Jusqu'à récemment, Apple n'avait rien à voir avec notre fascination pour une meilleure résolution d'écran. Des téléviseurs HD plus grands et de meilleure qualité sont au cœur des préoccupations des consommateurs et des sociétés d’électronique depuis une décennie. Un marketing astucieux s’est associé à une technologie impressionnante pour créer une soif insatiable d’écrans haute définition, de programmation par câble et de films.
Pour l’essentiel, cette tendance est restée à l’écart de l’informatique. Bien sûr, il existe d’énormes écrans de cinéma magnifiques, mais la densité de pixels n’a jamais été telle qu’elle ait nécessité un changement de paradigme majeur. C'est, jusqu'à récemment.
Lorsque l'iPhone 4 est tombé au milieu de 2010, il a eu une surprise: la? Retina? l’écran, qui nous a époustouflés en doublant l’ancienne résolution avec un nombre impressionnant de 326 pixels par pouce (à titre de comparaison, un iMac 27 pouces pèse 109 ppi). être presque impossible, mais Apple a fait la même chose en doublant également la résolution de l'iPad de troisième génération, qui affiche un taux de résolution légèrement inférieur mais toujours superbe à 264ppi.
Pourquoi cela change complètement votre façon de faire votre travail
Et alors? Merci pour la leçon d'histoire, mais c'est un blog de design, non? Qui se soucie de la densité de pixels d'un iPad? En tant que concepteur de sites Web, vous le savez, que vous le sachiez ou non.
Le problème est évident ici sur ce site ainsi que pour tous les autres que vous visiterez aujourd'hui. Allez-y, prenez une image sur le Web et ouvrez-la dans Photoshop. Maintenant, ouvrez la boîte de dialogue Taille de l'image. Voir quelque chose d'intéressant?
Les concepteurs Web ont toujours eu un petit avantage intéressant par rapport aux concepteurs d’impression: nous pouvons utiliser des illustrations à basse résolution. Pourquoi est-ce un avantage et non un inconvénient? Comme les fichiers PSD en couches haute résolution peuvent ralentir votre machine, les photos haute résolution coûtent beaucoup plus cher, ce qui prend un temps fou pour être chargé sur le Web; La liste se rallonge de plus en plus.
Le problème est clair: cette image ne dépasse pas 72 ppp alors que le nouvel iPad coûte 264 ppp! (Ceci simplifie un peu l'argument, lisez cet article pour savoir si vous visualisez réellement des images à 72ppi.)
Pensez à ce que cela signifie. Apple propose des écrans Retina sur la gamme complète iOS: iPod Touch, iPhone et iPad. Cela signifie que des millions nombre de personnes naviguent sur le Web chaque jour sur des écrans haute résolution qui ne permettent pas d’afficher correctement vos images. Ne vous y méprenez pas, cette tendance ne fera que s'aggraver à mesure que les autres fabricants d'appareils rattrapent leur retard et qu'Apple explore les moyens d'accroître la densité de pixels dans le prochain lieu évident: le marché des ordinateurs portables.
Que pouvez-vous faire?
Le problème de la densité de pixels est intéressant. Le Web représente tellement de technologies différentes qui s’harmonisent qu’elles peuvent être chaotiques si l’une de ces technologies avance et bouleverse l’équilibre.
Nous assistons à l’émergence d’écrans de résolution supérieure, mais notre contenu n’est optimisé que pour les anciens écrans. En outre, songez à la folie des développeurs Web à propos du temps de chargement des pages avec des images basse résolution. Imaginez maintenant le ralentissement que l’on obtiendrait sur un site chargé d’images comme Pinterest, s’il était soudain rempli d’images de 326ppi!
Eléments Web purs HTML et CSS
La bonne nouvelle est que nous nous préparons à cette situation depuis des années et que nous ne le savions même pas. La montée en puissance de CSS3 et HTML5 a réellement poussé à l’idée de réduire le nombre d’images que nous utilisons dans notre balisage.
De nos jours, la plupart des éléments d'interface utilisateur sont rendus dans le navigateur, ce qui signifie qu'ils s'adaptent parfaitement à tout écran que vous leur lancez.
À titre d’illustration, voici à quoi cela ressemble lorsque je fais un zoom avant sur un bouton de téléchargement basé sur les images de mon iPhone 4.
Maintenant, si je regarde ce même bouton construit avec exactement les mêmes dimensions en pixels mais rendu avec CSS, je peux zoomer aussi loin que je le veux sans dégradation d'image.
C'est une belle chose n'est-ce pas? La morale ici est que le? Sans image? la tendance a porté ses fruits à long terme et nous a fourni beaucoup moins de choses à nous inquiéter que nous aurions eu les écrans de rétine lorsque nous avons utilisé des images pour les dégradés, les ombres, les coins arrondis et à peu près tout autre style avancé.
Il est important de noter que les objets rendus avec les zones de travail HTML5 et JavaScript peuvent atteindre une évolutivité similaire.
SVG
SVG, ou Scalable Vector Graphics, est une autre étape importante sur la voie de l’indépendance de la résolution. Cette technologie existe depuis très longtemps, mais le support inter-navigateurs avec IE9 n’a été que récemment adopté.
Quand je pense à SVG, je pense à Adobe Illustrator. Cette application est principalement utilisée pour créer des graphiques vectoriels avec une évolutivité infinie. À son tour, SVG apporte cette même fonctionnalité aux graphiques Web.
Presque tout ce que vous pouvez construire dans Illustrator et dans d'autres applications d'édition de vecteurs peut facilement être exporté sous forme de fichier SVG et implémenté sur le Web sous forme d'objet évolutif.
Ici, l’avantage par rapport au CSS semble flou au début, mais il devient évident lorsque vous travaillez avec des images complexes. Il est facile de créer de simples boutons avec CSS, mais en ce qui concerne la création du logo Starbucks, les choses se compliquent.
Au lieu de passer des heures et des heures à bidouiller des CSS et peut-être à des centaines de lignes de code pour un seul objet (dans la mesure du possible, même avec CSS), vous pouvez simplement exporter une version vectorielle du logo Starbucks en tant que SVG et l'intégrer à votre site Web. page en seulement une minute ou deux! Cliquez ici pour voir un exemple en direct de cela. Veillez à effectuer un zoom avant avec Command + et observez l’échelle parfaite de l’image.
Pour en savoir plus sur la mise en œuvre de SVG sur votre site, consultez ces excellentes ressources:
- Résolution Indépendance Avec SVG
- Utilisation de SVG pour des arrière-plans souples, évolutifs et amusants, première partie
- Jouer avec SVG Design
Mais qu'en est-il des photos?
C'est très bien, mais étant donné que nous nous occupons depuis longtemps de conception de sites Web sans images avec une interface utilisateur, ce n'est pas vraiment une boule de courbe de pousser les choses un peu plus loin avec SVG. Le vrai problème réside dans les photos sur le web.
Les photos sont des images matricielles et, en tant que telles, elles écrasent tout simplement le rêve d’une conception Web réellement indépendante de la résolution. Peu importe ce que nous retirons de notre panoplie d’astuces en matière de conception Web, nous ne pouvons pas contourner cette limitation.
Pour le moment, cela signifie que vous fournissez différentes images à différents appareils. C'est nul, mais vous ne voulez pas que les écrans non rétiniens soient chargés dans ces images gigantesques et que vous ne vouliez pas diffuser d'images insipides sur les écrans rétiniens, c'est donc votre seule solution.
Cela peut être accompli par le biais de requêtes multimédia et de la fonctionnalité de ratio de pixels par périphérique. Hal Gatewood nous montre, à titre d'exemple, comment cibler l'iPad de troisième génération:
Qu'en est-il des images HTML incorporées?
La méthode ci-dessus est très bien, mais elle ne fonctionne qu'avec les images de fond CSS. Que faire si vous souhaitez intégrer une image à l'aide de HTML? Même plus loin, cela a également des implications drastiques pour la vidéo, alors comment pouvez-vous servir des vidéos personnalisées sur des écrans haute résolution?
Malheureusement, il n'y a pas de vraie réponse en HTML pur. Peut-être que le besoin deviendra si grand que nous verrons quelque chose comme cela à l'avenir, mais pour l'instant, vous n'avez pas de chance.
La seule solution est de recourir à quelque chose de plus puissant que JavaScript. Bdoran.co.uk a un exemple rapide sur la façon de détecter l’iPhone 4 avec JavaScript ou PHP que vous devriez vérifier.
Cela pose évidemment d’énormes problèmes aux concepteurs Web qui essaient de s’en tenir au HTML et au CSS et qui ne sont pas familiarisés avec JavaScript et d’autres technologies Web avancées. Du coup, ce groupe ne peut même pas présenter un contenu simple optimisé pour l'affichage sur la plupart des appareils.
Conclusion
Peu importe que vous aimiez Apple ou que vous détestiez absolument tout ce qu'ils représentent, la réalité est que, si vous êtes un concepteur web, la montée en puissance de l'affichage de la rétine va déclencher une tendance qui changera fondamentalement la façon dont vous créez des sites Web. .
À l'heure actuelle, nous avons quelques pistes d'action à explorer: les toiles HTML5, JavaScript, CSS3, SVG et les requêtes multimédia constituent ensemble votre arsenal d'armes permettant d'attaquer le problème de visionnage de votre contenu à plus de 264ppi.
Espérons que dans un avenir proche, nous verrons apparaître des options plus robustes permettant de diffuser différentes images et vidéos HTML incorporées aux appareils appropriés.
Laissez un commentaire ci-dessous et laissez-nous savoir vos pensées sur tout cela. Êtes-vous excité par les nouvelles possibilités ou intimidé par le territoire incertain? Allez-vous bientôt optimiser votre travail pour les écrans de rétine? L'avez-vous déjà fait?