Avec la gamme toujours 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 vais passer 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 vision typique (http://en.wikipedia.org/wiki/Retina_Display).

Alors, comment cela affecte-t-il les images de vos thèmes?

Un moniteur typique est de 72ppi ou pixels par pouce, un écran Retina, quant à lui, varie de 135 à 300ppi. Qu’est-ce que cela signifie pour les images de votre thème, bien visualiser une image 72ppi sur votre moniteur LCD standard semble tout à fait correct, mais tirez cette même image sur un périphérique d’affichage Retina et elle apparaîtra floue à tout jamais. Comment remédier à cette situation? Lisez sur mon ami…

1. CSS3> Images

L’option la plus évidente est probablement d’utiliser CSS3, la prise en charge du navigateur s’améliorant 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 la bordure, l’ombre de la boîte et l’ombre du texte associés à RGBA lorsqu’il est utilisé ensemble, par exemple, peut 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, WTH est-ce !? Pensez aux images 72ppi, la norme actuelle en tant que @ 1x qui ont fière allure sur les écrans normaux. Maintenant, avec Retina affiche votre recherche au double de la résolution, c’est là que @ 2x entre en jeu, est-ce logique? Fondamentalement, @ 2x est la norme pour les images et les graphiques Retina qui a été mise en place par Apple.

Une fois mis en service, vous auriez votre fichier 72ppi quelque chose comme logo.png et un autre [email protected], assez simple.

COMMENT SERVEZ-VOUS CETTE IMAGE @ 2X AUX DISPOSITIFS DE RETINA?

Un script open source génial Retina.js rend incroyablement facile la diffusion d’images haute résolution sur les appareils Retina. Si une variante haute résolution de cette image existe dans ce cas [email protected], le script échangera automatiquement cette image sur place. Aussi simple que cela.

Si vous utilisez des images d’arrière-plan dans CSS, vous devrez utiliser une simple requête multimédia, quelque chose comme:

@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/[email protected]);}
}

3. Elé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, il donne à votre thème la possibilité de dire si l’appareil de l’utilisateur est capable de visualiser 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, avoir des masques transparents, changer l’opacité, s’animer avec CSS3, et bien plus encore! Il existe de nombreuses solutions payantes et open source. Personnellement je préfère l’open source Police géniale pack, il y a plus de 220 icônes actuellement, son utilisation est absolument gratuite pour un usage commercial et tellement facile à utiliser.

Alors qu’est-ce que tu attends? Commencez à appliquer ces pratiques dès aujourd’hui!

Share: