Conception de la Résolution de l’écran Retina: Conseils et astuces Pour les concepteurs d’interface utilisateur

Vandelay Design peut recevoir une compensation de la part des entreprises, des produits et des services couverts sur notre site. Pour plus de détails, veuillez consulter notre page de divulgation.

Avec l’avènement des smartphones haute résolution et de l’iMac retina, il devient évident que les concepteurs de mobiles Web & doivent prendre en compte les écrans retina dans leur processus de conception. De plus en plus d’appareils sortent des tablettes avec une résolution d’affichage retina qui regroupe plusieurs pixels dans le même espace d’écran physique.

Cela signifie que le contenu sera plus net s’il est conçu correctement. Alors, comment un concepteur d’interface utilisateur devrait-il travailler pour gérer les écrans retina? Quelle technologie actuelle est disponible et quelle est la meilleure façon de gérer la plus grande base d’utilisateurs?

J’aimerais couvrir les méthodes les plus fiables pour gérer les écrans retina / hi-DPI et créer des interfaces qui fonctionnent. Si vous suivez ce guide, vous serez sûr de repartir avec des conseils applicables et des solutions pratiques à l’énigme de l’écran retina.

13" et Résolutions Macbook 15"

Manipulation des appareils Retina

La première étape consiste à vérifier les affichages d’écran basés sur des résolutions hi-DPI. Maintenant que certains appareils ont des tailles @ 3x, vous voudrez vérifier un certain nombre de résolutions d’écran avant d’afficher des images. Vous pouvez toujours être en sécurité avec des images @3x, mais elles sont également beaucoup plus grandes et nécessitent plus de bande passante pour être téléchargées.

Cette vérification peut être effectuée avec srcset mais il existe également de nombreuses méthodes différentes utilisant JavaScript. Consultez ce tutoriel pour plus d’informations.

Une bonne astuce pour les icônes prêtes pour la rétine consiste à utiliser un iconfont gratuit au lieu d’images bitmap. Font Awesome est un choix très populaire qui est entièrement gratuit, open source, et fournit une bibliothèque d’icônes parmi lesquelles choisir.

 font awesome icons page d'accueil

Un autre choix consiste à utiliser des images SVG au lieu de bitmaps. Ces SVG sont des vecteurs entièrement évolutifs qui ont lentement pris en charge le navigateur complet.

 contrôle svg de caniuse

La seule difficulté est de concevoir des SVG à partir de zéro et d’apprendre à les exporter correctement, ce qui peut être plus compliqué que de simplement utiliser des PNG ou des JPEG. De plus, le SVG n’est pas utile pour les images détaillées comme les photographies car il s’agit vraiment d’un type de fichier vectoriel.

Mais les SVG ont plus de place pour une animation personnalisée qui affiche une netteté à toutes les résolutions.

L’objectif est de décider des types de fichiers et des vérifications du navigateur au cas par cas. Certaines images sont meilleures que les JPG et certains sites Web sont meilleurs avec les vérifications de la rétine CSS vs JS. Personnellement, je préfère CSS, mais je recommande d’essayer les deux pour voir ce que vous préférez.

Images d’arrière-plan CSS

Le moyen le plus simple de gérer les arrière-plans personnalisés consiste à utiliser des images d’arrière-plan retina à l’aide de la propriété taille d’arrière-plan.

C’est souvent le moyen le plus rapide de vérifier les images de la rétine, car elles peuvent fonctionner sur tous les appareils, même les appareils non rétiniens. Cela ne fait pas de mal d’avoir une image sur-optimisée en CSS si les temps de chargement prolongés ne vous dérangent pas.

La méthode alternative consisterait à charger différents fichiers CSS basés sur des vérifications JavaScript ou des vérifications du serveur principal.

Mais la meilleure façon de gérer CSS est peut-être avec une requête multimédia CSS retina. Ces requêtes vérifient la densité de pixels et chargent différentes images d’arrière-plan pour ces appareils (en ajustant également la taille de l’arrière-plan).

CSS est généralement le moyen le plus simple de gérer les images, mais ne peut pas être utilisé pour les images in-post. Ceux-ci sont beaucoup plus délicats et doivent être téléchargés à la plus haute résolution possible ou mis à jour avec JavaScript.

Si vous n’êtes pas aussi préoccupé par les temps de chargement, optez simplement pour la plus grande résolution pour toutes vos images. Sinon, vous voudrez télécharger manuellement des images @2x et @ 3x avec une bibliothèque JavaScript gratuite telle que Retina.js.

Contrôles JavaScript

Si vous souhaitez contrôler au maximum le contenu de la résolution retina, vous aurez besoin de JavaScript. La plupart des visiteurs exécutent du code JS et c’est le moyen le plus simple de détecter les résolutions avec des méthodes JavaScript intégrées.

Vous trouverez de nombreux tutoriels gratuits pour détecter les écrans retina JavaScript, mais ce n’est que la moitié de la bataille. Une fois que vous connaissez la résolution de l’écran, vous devrez ensuite mettre à jour les images en conséquence.

Je recommande d’utiliser une solution pré-construite pour gagner du temps et des maux de tête pendant le processus.

Les développeurs ne veulent jamais réinventer la roue. Donc, si quelqu’un d’autre a déjà résolu ce problème, pourquoi devriez-vous vous embêter à partir de zéro?

La seule raison de lancer votre propre solution est si vous avez besoin de fonctionnalités personnalisées. Dans ce cas, consultez les liens ci-dessous pour voir comment vous pouvez implémenter une vérification JS retina personnalisée.

Sinon continuez à faire défiler et récupérez l’une des bibliothèques JS gratuites que j’ai répertoriées dans la section suivante.

  • 5 Façons de prendre en charge les écrans Retina Haute Densité
  • Images retina 2x faciles avec jQuery
  • Servez des graphiques Retina Sur Votre site Web

Outils Retina Open Source

Il existe des dizaines d’outils retina personnalisés pour détecter et gérer les images retina. Ce ne sont pas toujours les plus faciles à mettre en œuvre, mais ils peuvent rendre votre public beaucoup plus heureux à long terme.

Alors, lequel devriez-vous choisir pour commencer? Il n’y a vraiment pas de mauvaise réponse.

J’aimerais fournir certains des outils les plus populaires et vous donner la chance de choisir ce qui fonctionne le mieux pour votre site.

Rétine.js

 retinajs javascript open source

La Rétine.js library est une base de code JavaScript open source gratuite qui détecte automatiquement les résolutions de la rétine et les tailles d’écran. Le script vérifie également s’il existe une image haute résolution existante conformément aux directives de conception d’Apple, et si c’est le cas, il basculera pour afficher la version haute résolution.

Les conventions de nommage suivent un suffixe de @2x avant le type de fichier. Donc, si vous avez my_image.jpg vous voudrez aussi avoir [email protected] dans le même dossier.

C’est l’un des scripts les plus simples car il est vraiment prêt à l’emploi. Mais cela nécessite également une certaine connaissance du contenu de la rétine pour qu’il fonctionne parfaitement. Si vous ne faites que commencer, c’est vraiment un excellent script et vous ne pouvez pas vous tromper avec la fonctionnalité par défaut.

Rétine jQuery

 plugin jquery js retina

Une autre option est jQuery Retina alimenté par la bibliothèque jQuery. Cela fonctionne un peu différemment car il fonctionne sur des attributs de données HTML5.

Vous transmettez simplement une valeur d’URL d’image à l’attribut data-retina dans chaque balise d’image qui nécessite une alternative à l’image retina. Cela nécessite plus de codage en dur, mais c’est aussi le plus facile à restaurer avec des options personnalisées. La page GitHub contient plus d’informations avec les étapes de base pour l’installation.

WP Retina 2x

 plugin wp wordpress retina @2x

Si vous êtes un utilisateur de WordPress, WP Retina 2x pourrait être une excellente alternative à l’ajout d’un plugin JS de GitHub. Le plugin WP Retina fonctionne directement avec WordPress pour vérifier les images de la taille de la rétine et les remplace automatiquement.

C’est une autre solution plug-and-play où vous activez simplement le plugin et le laissez fonctionner. Super facile à utiliser et certainement une solution propre pour les utilisateurs WP non techniques.

Dense.js

 densejs plugin jquery

Ce que j’aime le plus dans le Dense.la bibliothèque js prend en charge les ratios de périphériques variables. Tous les écrans retina ne sont pas simplement 2 fois plus grands. D’autres ratios peuvent inclure 1,5 x ou 3x.

Ce plugin détecte automatiquement la densité d’écran utilisée et ajuste vos images en conséquence. Il y a beaucoup d’options, donc la personnalisation n’est pas un problème. Consultez le GitHub pour commencer et les documents en ligne pour plus d’informations.

Si vous recherchez plus de ressources d’affichage retina, je recommande également ces plugins.

  • Requêtes multimédia CSS pour iPads & iPhones
  • Images adaptatives en HTML
  • Swipebox jQuery Lightbox
  • Plugin Grails Retina Images
  • Choisir Une Solution d’Image Réactive

Espérons que ce matériau offre plus que assez pour vous aider à gérer les images et les médias sur les écrans Retina. Puisque CSS s’adapte automatiquement à toutes les résolutions, vous n’avez vraiment pas à vous soucier de choses comme les marges ou les largeurs de page.

Mais les supports sur page tels que les icônes et les photos devront être conçus sur mesure pour les appareils Retina.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.