Si vous n'avez pas encore pris note, le Web va haute définition. Des images aux arrière-plans aux éléments de l'interface utilisateur, la haute définition est la nouvelle norme.
Cela a commencé avec certains écrans de la rétine et à haute résolution, mais l’accès à des connexions plus rapides a également souligné ce phénomène, offrant un meilleur accès aux sites Web HD à partir de tout appareil. Pensez-vous et concevez-vous en haute définition? Voici quelques points à considérer.
Qu'est-ce que la HD, vraiment?
L'indication la plus courante pour la HD est le terme d'affichage de la rétine. Rendu populaire par les appareils Apple, ce terme est devenu synonyme d’écrans haute définition. Cela concerne une technologie assez spécifique pour les appareils.
Paula Borowska pour Designmodo a l'une des descriptions les plus faciles à comprendre:
- Le pixel de périphérique est la plus petite unité physique affichée.
- La densité de pixels est le nombre de pixels affichés dans un espace donné.
- La résolution est le nombre de pixels sur toute la largeur ou la hauteur de l'espace visible.
- Les pixels par pouce, appelés ppp ou dpi, font référence au nombre de pixels que vous obtenez lorsque vous divisez la largeur physique de l'écran par le nombre de pixels horizontaux affichés.
- Un DPI élevé est une densité d'affichage de 200 pixels par pouce ou plus.
La plupart des appareils que vous achetez aujourd'hui, des téléphones mobiles aux tablettes en passant par les ordinateurs portables, ont probablement un écran haute définition. (Et la réalité est que même si vous avez un appareil sans écran HD, avoir un site Web haute définition ne fera pas de mal.)
Images
Vous pouvez commencer par penser à la haute définition en matière d’images. La sauvegarde de chaque image de 600 pixels de large à 72 ppp est terminée. Cela ne suffira pas sur les écrans d'aujourd'hui.
La norme de base pour la HD est de 200 ppp. C'est plus du double de ce que vous auriez pu économiser précédemment. Ajoutez à cela le fait que les écrans s'agrandissent avec 1920 par 1080 et croissent rapidement. Selon W3Schools.com, les écrans les plus courants mesurent 1024 x 768 pixels ou plus, plus de 30% des utilisateurs travaillant sur un écran haute définition.
Il en va de même pour les petits écrans. Les appareils populaires tels que l'iPhone 6 (401 ppi) et le Samsung Galaxy S5 (577 ppi) offrent également une capacité HD.
Donc, quand il s'agit d'images, elles doivent être nettes. Vous ne vous en tirerez pas avec des images floues ou pixelisées. Enregistrement à l'ancienne résolution standard laissera votre dessin à plat, tandis que les images haute résolution apparaîtront plus polies. L'inconvénient de l'utilisation de ce type d'image est la vitesse. une qualité supérieure équivaut à des temps de chargement plus longs. Enregistrez au plus près des spécifications et évitez de télécharger trop de fichiers image.
Astuce amusante: Utilisez la tendance de l'image floue à votre avantage si vous vous inquiétez des temps de chargement. Il y a moins de données à lire et vous pouvez économiser un peu plus et obtenir la netteté désirée avec d'autres éléments plus petits à haute résolution.
Vidéo
La vidéo est la tendance visuelle incontournable de 2016. Il semble que partout où vous allumez, il y a de l'action en mouvement sur les pages d'accueil du site Web. Comme pour les images, il doit être de haute qualité.
Pour la plupart des concepteurs et des sites Web, cela signifie s’en tenir à une vidéo en boucle plutôt courte afin d’empêcher le chargement du hoquet. D'autres optent pour des vidéos plus longues et distraient les utilisateurs de l'attente avec une animation de chargement. Une vidéo de haute qualité nécessite un enregistrement, une compression et une sauvegarde de haute qualité.
La planification de la lecture de la vidéo dans la conception du site nécessite également beaucoup de planification. Une vidéo de héros en plein écran, par exemple, doit être tournée horizontalement pour s'adapter à l'écran. Pour faciliter l'utilisation, de simples éditeurs vidéo vous aideront à ajuster les images par rapport au format; choisissez 16: 9 pour un écran large ou 4: 3 pour un rendu plus carré.
Astuce amusante: Utilisez? Still video? pour un effet dramatique élevé. Voici l’idée: filmez quelque chose qui est essentiellement statique avec juste un petit mouvement en arrière-plan. Vous obtiendrez une expérience utilisateur agréable sans alourdir votre conception.
Illustrations et fonds
La HD importe également ici en ce qui concerne les illustrations et les arrière-plans. N'oubliez pas que tous les détails (ou leur absence) sont visibles dans l'espace haute définition. Vous devrez donc vous assurer que chaque partie du design contribue à l'esthétique générale.
En ce qui concerne les illustrations ou les arrière-plans, les détails sont importants. Concentrez-vous sur une conception pratiquement parfaite au pixel près, adaptée à la conception et ne s'effondrant pas à l’échelle. Pour ce faire, le moyen le plus simple consiste à privilégier la simplicité.
Bien qu'il soit facile de créer une illustration compliquée ou un arrière-plan texturé, simple est probablement une meilleure option. Si vous souhaitez ajouter plus d'intérêt, envisagez d'intégrer un petit élément animé à la conception, ou pimentez-le avec des options de couleurs plus vives que celles que vous utiliseriez normalement.
Et puis, il y a le composant technique: vous devez utiliser un format d'image évolutif pour que tout soit mis à l'échelle comme prévu et à son potentiel Full HD.
Astuce amusante: Ajoutez un soupçon d'animation à l'arrière-plan sur une longue boucle. Les visiteurs qui naviguent rapidement peuvent le manquer, mais la petite récompense ne manquera pas de ravir les utilisateurs assidus et ceux qui restent longtemps.
Icônes et éléments
En ce qui concerne toutes les icônes et tous les éléments d'interface utilisateur de votre site Web, vous devez connaître six lettres: SVG et CSS. Et tous ces éléments seront probablement classés dans l'un de ces deux types.
SVG, ou graphiques vectoriels évolutifs, est un vecteur essentiel pour le Web. Vous pouvez utiliser SVG pour enregistrer des formes, des icônes et de nombreux autres éléments de l'interface utilisateur. Les images sont lues par les navigateurs modernes - il y en a d’anciens qui ne fonctionnent pas (nous parlons à quelques-uns d’entre vous qui travaillent sur Internet Explorer) - en tant que texte et rendu de la même manière que HTML.Scott Murray a une très bonne introduction sur son blog si vous voulez entrer dans le vif du sujet, celui de SVG.
Les éléments CSS sont du code pur et vont évoluer et style avec la conception. (Vous n'avez probablement pas besoin de dessiner des boutons dans Photoshop et de les coller dans votre site.) W3Schools.com propose un didacticiel de base sur la création et l'utilisation d'éléments CSS.
Voici ce qui concerne SVG et CSS: les éléments se déplacent avec votre site. C'est ce dont vous avez besoin dans un cadre réactif. Rien ne pourra tuer votre conception de site Web haute définition plus rapidement qu'un tas de boutons pixellisés.
Astuce amusante: Vous n'avez pas à réinventer la roue pour trouver des éléments astucieux SVG ou CSS. Découvrez ces boutons SVG de Tympanus ou le générateur de boutons CSS.
Conclusion
La haute définition distinguera votre site Web de tous ceux qui ne le font pas. Les utilisateurs commencent à s'attendre à une expérience HD sur chacun de leurs écrans, des téléviseurs aux ordinateurs en passant par les téléphones. Votre site Web doit répondre à ces attentes.
La bonne nouvelle est que vous pouvez apporter de petits changements sur le chemin pour y parvenir. Faites attention à vos images, vidéos et autres éléments de l'interface utilisateur pour vous assurer que vous affichez des pixels et que chaque visuel est transparent et de haute qualité.