Avec la gamme sans cesse croissante de produits d’affichage Retina actuellement uniquement d’Apple, il est grand temps de vous assurer que votre thème WordPress a l’air chaud sur ces appareils. Dans cet article, je passerai en revue les différentes options dont vous disposez pour ajouter la prise en charge de la rétine à vos thèmes.
Qu’est-ce que la rétine ?
Retina Display est un nom de marque utilisé par Apple pour les écrans à cristaux liquides qui ont une densité de pixels suffisamment élevée pour que l’œil humain ne puisse pas remarquer la pixellisation à une distance de visualisation typique (http://en.wikipedia.org/wiki/Retina_Display).
ALORS, EN QUOI CELA AFFECTE-T-IL LES IMAGES DANS VOS THÈMES ?
Un moniteur typique mesure 72 ppi ou pixels par pouce, un écran Retina, quant à lui, varie de 135 à 300 ppi. Qu’est-ce que cela signifie pour les images de votre thème, l’affichage d’une image de 72 ppi sur votre moniteur LCD standard semble très bien, mais tirez cette même image sur un périphérique d’affichage Retina et elle apparaîtra floue à tout va. Comment remédier à cette situation ? Lisez sur mon ami…
1. CSS3 > Images
L’option la plus évidente est probablement d’utiliser CSS3, avec la prise en charge du navigateur de mieux en mieux de jour en jour – l’utilisation des propriétés CSS3 est une évidence. Des choses comme les dégradés d’arrière-plan linéaires, le rayon de bordure, l’ombre de la boîte et l’ombre du texte associés à RVBA lorsqu’ils sont utilisés ensemble, par exemple, peuvent créer de beaux boutons comme l’exemple ci-dessous. Sans l’utilisation d’images, moins il y a de requêtes HTTP, plus votre site se charge rapidement.
2. @2x images
@2x, c’est WTH !? Pensez aux images 72ppi, la norme actuelle en tant que @1x qui a fière allure sur les écrans normaux. Maintenant, avec Retina, vous voyez pratiquement le double de la résolution, c’est là que @2x entre en jeu, c’est logique, non ? Fondamentalement, @2x est la norme pour les images et les graphiques Retina qui a été mise en place par Apple.
Une fois utilisé, vous auriez votre fichier 72ppi quelque chose comme logo.png et un autre logo@2x.png, assez simple.
COMMENT SERVEZ-VOUS CETTE IMAGE @2X AUX DISPOSITIFS DE LA RÉTINE ?
Un impressionnant script open source Retina.js rend incroyablement facile la diffusion d’images haute résolution sur des appareils Retina. Si une variante haute résolution de cette image existe dans ce cas logo@2x.png, le script échangera automatiquement cette image sur place. Aussi simple que cela.
Si vous utilisez des images d’arrière-plan en CSS, vous devrez utiliser une simple requête multimédia, par exemple :
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#menu-icon { background-image: url(../images/icons/menu@2x.png);}
}
3. Éléments img en ligne
Disons que vous avez une grande galerie de photos et qu’il est tout simplement hors de question de créer deux versions de chaque image. Un autre excellent script open source est Foresight.js, cela donne à votre thème la possibilité de dire si l’appareil de l’utilisateur est capable d’afficher des images haute résolution avant qu’il ne soit demandé au serveur. Il vérifie également si l’appareil de l’utilisateur dispose actuellement d’une connexion réseau suffisamment rapide pour les images haute résolution. En fonction de l’affichage de l’appareil et de la connectivité réseau, foresight.js demandera l’image appropriée à afficher.
4. Polices d’icônes
Les polices d’icônes sont tout simplement géniales, elles sont infiniment évolutives, peuvent être changées en n’importe quelle couleur, ont des masquages transparents, changent l’opacité, s’animent avec CSS3, et bien plus encore ! Il existe de nombreuses solutions payantes et open source. Personnellement, je préfère le pack open source Font Awesome, il y a plus de 220 icônes actuellement, il est absolument gratuit à utiliser pour un usage commercial et il est tellement facile à utiliser.
Alors qu’est-ce que tu attends? Commencez à appliquer ces pratiques dès aujourd’hui !