Share
Le nouvel iPad est sorti le mois dernier et arbore notamment un incroyable écran Retina avec une résolution de 2048 par 1536 pixels. Dès l'annonce de cette annonce, l'attention s'est tournée vers les développeurs d'applications natives et leur travail pour adapter les applications à une résolution plus élevée..
C'était sans doute le mauvais objectif. Relativement peu a été pensé en termes de Web, et comment cela ressemblerait sur le nouvel écran Retina dans la perspective de l'annonce. Cela nous a laissé un site Internet avec un texte incroyablement net, mais ridiculement terrible, des images de faible qualité. Il est temps d'optimiser. Dans ce didacticiel, nous allons donc définir une stratégie pour concevoir en fonction de l'affichage Retina..
C’est assez évident, mais certains l’ignoreront peut-être. Avec les avancées significatives en CSS, l'utilisation d'images dans la structure d'un site peut être assez minime, voire inexistante. Cela confère à ces sites un avantage considérable en ce qui concerne la compatibilité Retina Display, car le texte et les graphiques générés par CSS seront redimensionnés sans perte de qualité. Pour la même raison, le texte est nettement meilleur sur un écran Retina.
Un site sur lequel je travaillais n'avait pas besoin d'une seule mise à jour de son thème pour bien paraître sur l'écran Retina; le manque d'images signifiait qu'il n'y avait rien à mettre à jour. Bien sûr, tous les sites ne seront pas totalement sans images, mais en minimiser leur utilisation, vous réduirez les efforts d’optimisation pour l’affichage Retina..
Généralement, cette tactique comporte une étape: minimiser l’utilisation des images là où elle n’est pas vraiment nécessaire.
Naturellement, le site Web d’Apple est optimisé pour offrir un affichage incroyablement net et net sur l’écran Retina. Dans les jours qui ont précédé l'annonce de l'iPad, Apple a commencé à mettre à jour son propre site Web afin d'offrir des images réactives. les éléments qui ont changé selon que vous naviguiez sur un nouvel iPad ou non.
La méthode d'Apple est simple en principe. Le site Web se charge normalement, mais il utilise ensuite JavaScript pour remplacer les images pertinentes lorsque vous naviguez sur un nouvel iPad. Si vous visitez un nouvel iPad, vous obtiendrez les images optimisées, tandis que tout autre navigateur affichera les paramètres par défaut..
Un exemple de ceci est le texte du héros d'Apple sur la page produit de l'iPad, en utilisant le code suivant dans le fichier lui-même..
Par souci de simplicité, je ne partagerai pas leur script proprement dit, mais essentiellement, il vérifie d'abord si le navigateur est sur un périphérique doté d'un écran Retina, puis vérifie l'existence d'une image 2x (nous y reviendrons dans une minute). et, si les deux conditions précédentes sont vraies, affiche l'image 2x.
La convention de suffixe 2x désigne la contrepartie "Retina" du fichier. image.png serait image_2x.png. Cela vient d’iOS, qui affiche automatiquement un @ 2x image dans une application native lorsqu'elle existe. Malheureusement, nous, concepteurs de sites Web, ne bénéficions pas du luxe de la recherche et de l'affichage automatiques. Nous devons donc proposer des méthodes pour émuler cela avec nos propres scripts et requêtes..
Cela a cependant un prix. En utilisant cette méthode, l’utilisateur final charge tous les deux l'image non-rétine et rétine, ce qui signifie que la page se termine avec une taille de fichier accrue. De plus, les scripts d'Apple signifient qu'un plus grand nombre de demandes sont envoyées vers et depuis le navigateur, ce qui augmente le temps de chargement des pages. Bien sûr, si vous continuez à minimiser l’utilisation des images, ce problème sera également réduit..
Alors que Apple utilise JavaScript, une méthode quelque peu efficace, il existe une alternative; Utilisation de requêtes de média CSS pour indiquer la condition de style à la densité de pixels du périphérique.
Avant de commencer, il est important de noter que, finalement, l'affichage de l'iPad est toujours de 1024x768 px en "pixels CSS". Je vais laisser Dave Hyatt expliquer.
La plupart des auteurs de sites Web ont traditionnellement considéré le pixel CSS comme un pixel de périphérique. Cependant, alors que nous entrons dans ce nouveau monde à haute résolution, où toute l'interface utilisateur peut être agrandie, un pixel CSS peut finir par afficher plusieurs pixels à l'écran. Par exemple, si je règle un facteur de zoom de 2x, 1 pixel CSS sera en fait représenté par un carré 2 × 2 de pixels de périphérique..
Par conséquent, la méthode que nous utilisons ne ciblera pas l'iPad en fonction de sa résolution, car elle ne fonctionnerait tout simplement pas. À toutes fins pratiques, la résolution de l'iPad est toujours de 1024x768 px selon le navigateur, et le ciblage de cette résolution ciblerait également toutes les générations précédentes d'iPad. De même, cibler la nouvelle résolution 2048x1536 px avec des requêtes de médias n'aurait aucun effet sur le nouvel iPad..
Au lieu de cela, nous pouvons cibler en utilisant le min-device-ratio-pixel question. Cette requête indique au navigateur de charger un style spécifique basé sur le rapport pixels de périphérique aux "pixels CSS" susmentionnés. Dans le cas de l'iPad équipé d'un écran Retina Display, il s'agit de deux (1024: 2048 et 768: 1536 simplifiés à 1: 2).
Par conséquent, nous pouvons charger une feuille de style "rétine" en fonction du taux de pixels du périphérique..
Évidemment, nous utilisons le préfixe WebKit puisque le navigateur de l'iPad est Safari, un navigateur WebKit, mais aussi parce que la requête multimédia semble être uniquement disponible via WebKit pour le moment. Étant donné que les styles sont en cascade (comme le nom "CSS" vous l'indiquera), en commandant simplement la balise ci-dessus correctement, les règles de cette feuille de style écraseront celles des périphériques classiques spécifiés précédemment..
Si vous ne souhaitez pas tout placer dans une feuille de style distincte, vous pouvez utiliser des requêtes de média intégrées pour spécifier des parties de votre feuille de style uniquement pour les appareils équipés de Retina Display, comme suit:
Accentsconagua
@media (-webkit-min-device-pixel-ratio: 2) #element background-image ('image-2x.png'); Remarque: Bien que l'utilisation du schéma de nommage "2x" soit un moyen utile d'organiser vos images, ne vous sentez pas obligé de le faire. Vous pouvez nommer vos images comme vous le souhaitez et, contrairement aux applications natives, elles n'ont même pas besoin d'être similaires à distance..
Bien sûr, l’utilisation de cette requête multimédia n’est en aucun cas spécifique à l’iPad. En fait, la même logique sera déclenchée lorsque vous naviguez sur votre site sur tout appareil possédant une densité de pixels similaire et qui utilise le même rapport de pixels entre CSS, y compris l'iPhone 4 et l'iPhone 4S. Si vous souhaitez cibler uniquement l'iPad, vous pouvez simplement combiner la requête de ratio de pixels avec une requête de largeur, pour spécifier uniquement les périphériques équipés de Retina Display de la résolution de rapport de l'iPad..
Il ne s'agit pas que votre site ait une belle apparence sans optimisation, mais une meilleure apparence. avec. Il vous suffit de visiter un site riche en images, mais non optimisé, pour comprendre à quel point les images non rétiniennes sont terribles sur le nouvel iPad. Et, en fin de compte, vous devez réellement assister aux résultats. Si vous n'avez pas accès à un nouvel iPad, je vous recommande vivement de vous rendre dans un Apple Store pour y jeter un coup d'œil..
Bien qu'Apple ait vendu des millions d'unités, dans le vaste schéma des navigateurs, cela reste un problème mineur. Cependant, avec le potentiel de l’écran Retina-équipé MacBook à l'horizon pour cet été, mettre le travail maintenant à portée de main pourrait vraiment rapporter plus tard.
