par Tara Hornor
Mar 21, 2014
dans le monde merveilleusement complexe qu’est la conception web, les professionnels sont confrontés à des aspects techniques très difficiles, avec la résolution d’écran sans doute l’une des plus grandes causes de maux de tête lancinants. Parfois, ce problème trompeusement petit peut sembler désespérément dépourvu de solutions, car les résolutions et les appareils changent et s’améliorent constamment., Cependant, il existe certaines bonnes pratiques que les concepteurs et les développeurs web peuvent suivre pour concevoir un site web, et un examen approfondi de la résolution de l’appareil révèle ce que ce sont.
beaucoup confondent le terme avec la taille réelle de l’écran. Cependant, comme le savent les concepteurs Web technophiles, la résolution d’écran est le terme utilisé pour le nombre de pixels qu’un écran contient horizontalement et verticalement, comme 1024 × 768, dans lequel le premier nombre se réfère aux pixels horizontaux et le second aux pixels verticaux.
crédit Photo: Design215.,com
la partie déroutante vient lorsque deux des mêmes tailles d’écran ont des résolutions d’écran différentes. Cela signifie également que différentes tailles d’écran peuvent avoir la même résolution. Par exemple, un écran de 13 pouces peut avoir la même résolution 1280 × 800 qu’un écran de 17 pouces plus grand.
la façon dont un site web est affiché sur un écran sera très différente en fonction des différentes résolutions d’écran. À titre d’exemple, deux moniteurs de bureau de 17 pouces peuvent avoir des résolutions différentes, l’un étant 1024 × 768 et l’autre 1280 × 800., La résolution inférieure (1024 × 768) affichera des éléments dans une taille plus grande pour garder l’affichage aussi net que possible, mais cela signifie également que moins de la page s’adaptera à l’écran. Le moniteur à haute résolution sera en mesure d’Afficher plus de la page du site Web, comme le pli entier plus un peu plus bas, et les éléments de la page auront l’air plus petits mais plus nets.
dans ses conseils sur les meilleures pratiques pour la résolution des appareils dans la conception, Jakob Neilson du groupe Neilson Norman souligne que vous ne voulez jamais concevoir un site web pour une taille de moniteur., D’une part, les utilisateurs avec des écrans uber, tels qu’un 30 pouces, peuvent ne jamais maximiser une fenêtre en raison de leur moniteur anormalement large. En outre, les tailles d’écran viennent dans beaucoup trop de formes et de tailles. Il est tout simplement beaucoup plus efficace de se concentrer sur la résolution.
dans le passé, il était beaucoup plus facile de savoir pour quelle résolution concevoir. Les hautes résolutions étaient très chères, de sorte que la plupart des utilisateurs ne pouvaient se permettre qu’une des trois résolutions moins chères: 640 × 480, 800 × 600 ou 1024 × 768, comme le mentionne Andrew Keir.
Crédit Photo: jorge.,correa via Compfight cc
cependant, aujourd’hui, il y a beaucoup plus d’écrans haute résolution disponibles à des prix que la majorité des consommateurs peuvent se permettre. Et puis il y a la considération supplémentaire des appareils mobiles. Avec les utilisateurs de tablettes et de smartphones à la hausse exponentielle, les concepteurs web n’ont pas d’autre choix que de considérer à nouveau ces résolutions d’écran plus petites.
heureusement, il existe quelques bonnes pratiques pour choisir la bonne résolution pour concevoir un site web., Il existe également des options de contournement pour s’assurer que si quelqu’un avec une résolution d’écran étrange ou démodée visite votre site web, il aura toujours une expérience de visualisation positive.
résolutions communes et meilleure taille pour la conception Web.
La plupart des concepteurs et développeurs web conviennent que l’une des meilleures pratiques consiste à optimiser un design pour la résolution la plus populaire auprès de votre public. Cela peut être plus difficile à définir aujourd’hui, cependant, avec autant de résolutions différentes disponibles.,
début 2012, la plupart des internautes avaient une résolution d’écran de 1366 × 768, 1024 × 768 ou 1280 × 800. Cela a changé un peu aujourd’hui, cependant, et va montrer à quelle vitesse les tailles de résolution optimales changeront au fil du temps pour la conception web.
Résolution d’Écran Minimale.
Par exemple, W3Schools montre en janvier 2014, « 99% de vos visiteurs ont une résolution de 1024 × 768 pixels ou plus. »Cela fournit un argument assez fort pour la restauration au minimum de 1024 × 768., Shaun Anderson révèle également des preuves statistiques que la plupart des visiteurs du site Web ont une résolution de cette taille ou plus.
meilleures résolutions D’écran dans le monde entier.
ce qui est intéressant dans les statistiques Qu’Anderson présente, cependant, c’est que seulement 9% dans le monde utilisent 1024 × 768 avec 30% utilisant une résolution de 1366 × 768, et environ 15% utilisant une résolution d’appareil désignée comme « autre”, ce qui est plus que probablement une utilisation mobile.
L’étude de Mobify a analysé l’activité 2012 de 200 millions d’acheteurs sur le réseau Mobify Cloud (sites Web de commerce électronique alimentés par Mobify)., L’étude a montré des résultats intéressants:
1. 19,5% des visiteurs ont utilisé une résolution netbook de 1280 × 800.
2. 13,5% utilisé 1366 × 768.
3. 11.4% utilisé la taille de l’iPhone: 320 × 480.
4. 7,8% ont utilisé 1024 × 768, ce qui l’a amené à la quatrième place.
5. 7.3% utilisé 768 × 1024, commun des iPads et des netbooks horizontaux de 10 pouces.
6. 7,3% ont utilisé des ordinateurs portables de plus grande taille 1440 × 900.
7. 6.5% utilisé 1280 × 1024, un moniteur de bureau LCD commun.
8. 6.1% utilisé 1080 P HD affiche (1920 × 1080).
9. 5,1% ont utilisé la résolution d’écran large commune de 1680 × 1050.
10. 3.,8% ont utilisé la taille de L’écran HD+ 1600 × 900.
Cliquez sur l’image pour voir l’infographie de Mobify.
Quelle est la meilleure taille?
comme déjà mentionné, beaucoup soutiennent que vous devriez au moins optimiser les conceptions de sites Web pour 1024 × 768. Cela devrait rendre un site Web assez bon sur la plupart des résolutions et des appareils. Cependant, cela peut encore causer pas mal de problèmes, en particulier avec la montée des appareils mobiles pour accéder à Internet. C’est là que les concepteurs web doivent vraiment connaître leur public et finalement concevoir pour ce public.,
Que faire si vous ne connaissez pas votre public et vous ne souhaitez pas limiter votre conception d’une résolution spécifique? Jetons un coup d’oeil à quelques meilleures pratiques pour les appareils et la conception web.
Une Introduction au SVG (Scalable Vector Graphics).
Adam Fairhead présente une idée intéressante dans son article sur WebDesignerDepot, justement intitulé « arrêtez de courir après les résolutions d’écran », et son point est exactement ceci. Fairhead estime que les concepteurs web n’ont plus à se soucier des résolutions d’écran dues au SVG ou aux graphiques vectoriels évolutifs., SVG est une technologie HTML5 qui permet d’Afficher des images (vectorielles, pour être exact) à l’aide de code, ce qui permet d’obtenir une image claire, quelle que soit la résolution de l’écran d’un utilisateur, ce qui est vraiment pratique lorsque vous créez un site web réactif.
graphiques PPI et rétine.
arrêtons-nous un instant et discutons PPI (pixels par pouce), qui fait référence à la résolution des images. Le PPI est affecté par la résolution de l’écran et la taille réelle de l’écran, déterminée par la longueur diagonale en pouces, comme le montre cet outil PPI de DPILove., Savoir quel PPI utiliser pour les sites Web a été facile dans le passé: les concepteurs de sites Web savaient que 72ppi garantirait que les images apparaissaient nettes dans un site Web, mais toujours chargées à une vitesse appropriée, simplement parce que la plupart des tailles de moniteur étaient corrélées avec les résolutions en tant que telles.
Le gros problème dans la résolution de l’écran puisque Apple est sorti avec l’iPhone4 est avec des graphismes retina. Les appareils graphiques Retina sont ceux avec une résolution bien au-dessus des écrans traditionnels. Pourquoi est-ce un problème?, Parce que les images optimisées à 72ppi apparaissent maintenant floues sur les écrans plus petits qui affichent plus de 200ppi.
les graphiques Retina dépendent de la résolution.
différentes méthodes de conversion d’un site Web en retina ont vu le jour, telles que l’utilisation de Sprites CSS ou d’images Retina dont la taille est 2 fois supérieure à leur taille d’origine pour garder l’image claire, quelle que soit la résolution. Fairhead souligne, cependant, que ces méthodes nous rendent toujours dépendants de la résolution, car à mesure que les résolutions continuent d’augmenter, le besoin de tailles d’image augmentera également.,
et cela ne résout toujours pas le problème du zoom sur une page web, par exemple sur un iPhone. Lorsque les utilisateurs essaient d’afficher la page Web à une taille zoomable, les images redeviennent floues.
la Solution SVG.
parce que SVG utilise des graphiques vectoriels, ils auront fière allure quelle que soit la résolution. Les images Bitmap (images retina) sont basées sur des pixels, de sorte qu’une image bitmap est étirée au-delà de sa résolution de pixel optimale, elle commence à apparaître floue ou « pixélisée. »Les vecteurs sont évolutifs à n’importe quelle taille car ils sont basés sur une formule mathématique, plutôt qu’une certaine quantité de pixels., Ainsi, lorsqu’ils sont mis à l’échelle, les vecteurs semblent propres à n’importe quelle taille en raison des ajustements de formule, d’où la raison pour laquelle les concepteurs les utilisent pour créer un site web réactif.
crédit Image: arrashthearcher.org
L’autre avantage de l’utilisation de graphiques vectoriels plutôt que des bitmaps est que le temps de chargement des images vectorielles est le même, peu importe la taille. Une image bitmap 2000px × 2000px prend beaucoup trop de temps à charger. Une image vectorielle 2000px ne nécessite pas de pixels individuels pour se charger, donc peu importe si le vecteur est aussi petit que 20px ou aussi grand que 4000px.
Limitations de SVG.,
alors pourquoi SVG n’est-il pas présenté comme une solution de résolution complète? Eh bien, il ne peut pas contenir d’images bitmap du tout, pour un. Et ils ne peuvent pas être trop compliqués dans la conception ou bien cela affectera le temps de chargement, même en tant que vecteur.
la dernière grande complication avec SVG est que C’est un code assez difficile à apprendre. Adam Fairhead l’explique comme ceci:
le code SVG n’est pas quelque chose que vous pouvez « voir dans votre esprit” comme lorsque vous lisez HTML. C’est une série d’instructions mappées respectivement les unes contre les autres, élément par élément, couche par couche.,
donc, si un concepteur web n’a déjà aucune connaissance du code, concevoir pour SVG pourrait être presque impossible.
sites Web en plein écran.
plus de bonnes pratiques pour la conception de l’appareil référez-vous au type de conception d’un site Web, tel qu’un site Web en plein écran, qui est une conception qui remplit toute la fenêtre du navigateur, quelle que soit la résolution de l’écran. Ce type de conception Web implique l’utilisation d’une image super grande, telle que 2560 × 1290, CSS et HTML afin que le site Web ait une bonne apparence, que ce soit sur des résolutions d’écran grandes ou petites., Absolument superbe conceptions de site web ont émergé de cette pratique:
Visitez le site web des Journées
Visitez le Keecker site
Visitez le Bosquet site web
CSS Tutoriels.
en utilisant CSS, étirer l’arrière-plan à la largeur du navigateur en plein écran peut être assez facile. De nombreux tutoriels expliquent également comment placer du HTML sur les images, par exemple lors de l’affichage de votre en-tête et de votre menu de navigation., Ce qui suit sont quelques excellents tuts:
construire une expérience mobile plein écran incroyable – Paul Kinlan
CSS Fond Plein écran (code de pointe rapide) – John Surdakowski
créer un fond plein écran pour les sites Web – vues de conception Web
Mise en page Plein écran avec Transitions de Page – Mary Lou
Limitations Plein écran.
l’un des principaux inconvénients de la conception pour les navigateurs plutôt que la résolution est que vous devez tester la compatibilité entre les navigateurs., Et cela nous ramène à un problème très familier: comme pour la résolution, vous devez connaître votre public et leurs navigateurs les plus courants. Comme avec la résolution d’écran, vous allez toujours décevoir une petite partie des visiteurs de votre site web qui utilisent des navigateurs obsolètes.
conception de site Web Responsive.
Une solution très débattue est de créer un design de site web réactif. Certains croient que les sites Web réactifs sont le nec plus ultra des meilleures pratiques en matière de résolution, car ils peuvent donner à un site Web une apparence et une sensation magnifiquement cohérentes sur n’importe quel appareil.,
un design réactif est également la mise en page préférée de Google pourmartphone, assez intéressant.
la conception adaptative est-elle une meilleure Option?
certains concepteurs pensent qu’une conception adaptative est meilleure pour la plupart des sites Web en raison du contrôle sur les éléments. Cette option utilise une disposition fixe qui change en fonction de l’appareil utilisé pour accéder au site.,
l’avantage d’une conception adaptative, comme L’explique Ravi pratap dans VentureBeat, est que le site web peut être plus facilement personnalisé pour une « expérience hautement différenciée conçue pour l’intention spécifique de votre client mobile. »Mais encore une fois, nous rencontrons le problème de la résolution des appareils avec la conception adaptative.
conception Web réactive parfaite pour les pixels.,
Responsive website design résout le problème de la conception adaptative en ce sens qu’il est fluide, ce qui fonctionne très bien pour de nombreux sites Web, en particulier ceux qui souhaitent offrir une expérience identique sur tous les appareils. Certains sites Web trouvent adaptatif et réactif trop limitant lorsqu’ils ont besoin à la fois d’une expérience flexible et personnalisée. Les conceptions réactives au Pixel près comblent l’écart entre le choix de créer un site web réactif ou un site Web adaptatif en combinant les meilleurs aspects des deux types de conception.,
jeter un œil au site Web ProStory sur Screenfly montre la flexibilité du responsive design.
tout comme le design adaptatif, le design réactif pixel-perfect permet au site web de s’adapter à certaines tailles. Il donne aux concepteurs un contrôle précis sur chaque pixel afin que le site fonctionne exactement comme souhaité sur différents appareils. Comme le design réactif, le design pixel-perfect est flexible et fluide et adapte chaque partie de la conception – images, contenu, etc. – quelle que soit la taille de l’appareil., Les concepteurs désignent simplement des points d’arrêt pour un site web précis au pixel près, quelle que soit la vue. Un bonus? Il tombe toujours sous la conception préférée de Google
comment la résolution d’écran affecte les concepteurs professionnels.
la résolution D’écran continuera d’être un facteur que les concepteurs web doivent garder à l’esprit lorsqu’ils créent un site web, car des résolutions plus élevées sont créées et la technologie web évolue. C’est pourquoi il est important pour les concepteurs de sites Web de connaître certaines bonnes pratiques ainsi que le public de leurs clients.,
différents clients veulent atteindre leur public de manière unique et offrir des expériences personnalisées en fonction de l’endroit où leur public les rencontre. Pour de nombreux clients, cela peut signifier une combinaison de fonctionnalités, telles qu’une conception de site Web réactive au pixel près avec des images SVG.
en tant que concepteur web, il est de votre devoir d’être informé de la meilleure façon d’aider votre client à atteindre ces objectifs, et la résolution de l’appareil est une pièce très importante du puzzle de la conception web.
