Stratégies pour gérer plusieurs résolutions d'écran et ratios d'aspect en développement Web

Question

À l'époque, la résolution d'écran à privilégier était de 800 x 600 - et peut-être même 640 x 480. Puis sont arrivées les résolutions 1024 x 768, etc, etc, etc.

Mais ça devient encore pire : maintenant, nous avons non seulement différentes résolutions mais aussi des rapports d'aspect différents.

Quelles stratégies les gens utilisent-ils pour s'adapter à la gamme de tailles d'écran et de rapports d'aspect toujours croissante d'aujourd'hui?

(Au fait - je ne pensais qu'au matériel pour ordinateur portable / de bureau, mais bien sûr il y a aussi les smartphones et les tablettes à prendre en compte.)

Answer 1

Je sais que cela pourrait être une opinion quelque peu controversée, mais je la dirais quand même: Ne le faites pas

Ne concevez pas pour plusieurs tailles d'écrans ou rapports de proportion. Il y a bien sûr quelques exceptions: Les applications web lourdes comme les clients de messagerie web peuvent certainement bénéficier de plus d'espace d'écran, et sont probablement assez flexibles pour s'adapter à un large éventail de tailles d'écran de toute façon. Les versions mobiles de ces sites web, avec un design plus flexible pour accommoder l'incroyable spectre de tailles d'écran mobiles, peuvent également être utiles pour les sites avec un fort volume mobile. Cependant, si vous vous en tenez au soi-disant 'web de bureau', alors je pense que nous pouvons dire que 95% du temps, il y a des choses plus importantes à considérer que les tailles d'écran, la résolution et le rapport de proportion.

Tout d'abord, abordons le plus simple. Je ne comprends pas vraiment pourquoi vous vous soucieriez autant du rapport de proportion - ce n'est pas comme si nous nous souciions tellement de l'absurdité du 'sous le pli' de nos jours, n'est-ce pas? Le web est un support vertical - le défilement aura toujours sa place dans les sites web. Avoir tout au-dessus de la ligne magique des 600px est juste stupide.

Ensuite, résolution/taille d'écran : Encore une fois, je trouve difficile de le défendre.

Les utilisateurs avec de grands écrans n'agrandissent généralement pas leurs fenêtres de navigateur, car ils estiment que la plupart des sites web ne les exploite pas pleinement. Alors que le web s'adapte à l'utilisateur, l'utilisateur s'adapte également au web. Bien que l'on puisse soutenir qu'il s'agit là d'un problème de poule et d'oeuf, le fait demeure que les sites web sont généralement conçus pour le plus petit dénominateur commun. Je ne défends pas cette position, mais je la souligne comme la tendance dominante actuelle dans l'industrie.

Il y a certaines choses qui tout simplement ne fonctionneront pas avec des résolutions trop élevées ou trop basses. Il y a, par exemple, une petite plage de largeurs qui permet aux gens de lire confortablement à l'écran. Si c'est plus long, le mouvement de l'œil vers la ligne suivante serait ennuyeux. Trop bas et le texte semblerait serré. Le fait que le web ait été conçu pour être neutre en termes de résolution signifie que paradoxalemen... min-height et max-height aideraient, bien sûr, mais plus la plage est large, plus vous rencontrerez de difficultés. Des choses comme des éléments isolés, des images déplacées, des arrière-plans qui débordent, etc. sont inévitables pour les sites vraiment flexibles construits avec la technologie d'aujourd'hui.

Donc, mon avis est que la méthode la plus simple pour gérer plusieurs résolutions est de l'ignorer complètement - avec la technologie d'aujourd'hui, il n'y a de toute façon pas beaucoup d'options - et de concevoir pour le plus petit dénominateur commun.

Answer 2

Faites attention aux paramètres de haute résolution DPI

Je pense que l'un des problèmes les plus discutés actuellement dans le développement web côté front-end est le test sur les systèmes à haute résolution DPI. Tout le monde a appris à tester et retester sur différents navigateurs, mais les designers/développeurs n'ont pas pensé à tester sur des paramètres DPI différents.

Les paramètres DPI élevés (ou même faibles, d'ailleurs) peuvent altérer les designs lorsque les polices de caractères sont agrandies mais pas les images (ce qui peut arriver), rendre les images floues, et les objets positionnés de façon absolue peuvent ne pas apparaître à l'emplacement souhaité (ce qui serait dévastateur pour les menus CSS). Au minimum, testez vos images en haute résolution DPI et retravaillez-les si nécessaire.

Ceci n'a jamais vraiment été un problème jusqu'à récemment avec la sortie de Windows 7 et les gens achetant des ordinateurs avec des écrans haute résolution. En premier lieu, Windows 7 utilise 96 DPI par défaut (ce qui est différent du reste du monde informatique qui utilise 72 DPI comme standard). De plus, Windows 7 ajustera automatiquement les paramètres DPI et j'ai vu des gens avec un DPI à 150% de la normale (96 DPI dans Windows).

Voici un excellent lien qui discute plus en détails de ce problème : http://webkit.org/blog/55/high-dpi-web-sites/

Un excellent site web compatible avec tous les navigateurs conçu selon les normes web est l'objectif, mais n'oubliez pas le test DPI.

Answer 3

Eh bien, en essayant de ne pas trop dépasser, voici ce que je fais.

(A) Commence toujours par le ratio/résolution le plus probablement utilisé

Si Monsieur Tout-le-Monde va utiliser un ordinateur portable moderne ou un ordinateur de bureau, il a probablement AU MOINS 1024x768 (réfs: w3schools elykinnovation), ce qui vous donne une largeur utilisable d'environ 960px (vous voudrez peut-être vérifier le système de grille 960 - il y a un tas de nouveaux frameworks depuis que j'ai écrit ceci). Si vos utilisateurs sont plus susceptibles de commencer par un appareil mobile ou une tablette, pensez à eux en premier. Si c'est 50%-50%, il est généralement préférable de commencer par petit et ensuite d'augmenter, par exemple Rock Hammer ou Foundation

(B) Mise en page: fluide ou non ?

Si votre site Web pourrait bénéficier d'une largeur plus grande, choisissez un design fluide à partir de cette résolution. Faites attention car l'œil humain n'aime pas lire du texte sur de longues lignes, donc n'abusez pas du design fluide; souvent se limiter à 960px avec de larges marges est acceptable. Vous voudrez peut-être ajouter (javascript) quelques menus latéraux supplémentaires si vous avez vraiment beaucoup plus d'espace. Mais concevez votre site Web pour fonctionner sans JS autant que possible.

(C) Autres résolutions

Enfin, il est temps de vérifier que avec les résolutions les moins utilisées, les choses restent acceptables.

(D) Autres appareils, ratios et autres choses

Il n'y a pas beaucoup d'options pour les ratios différents; cela signifie souvent que vous utilisez un mobile, un ipad, un AAA ou un appareil similaire.

Mon conseil est de ... concevoir spécifiquement pour ces appareils.

Lorsque vous écrivez votre HTML, gardez à l'esprit ce dont vous aurez besoin et souvenez-vous de faire du HTML par sémantique et non pour le design. Utilisez correctement les balises sémantiques HTML5 si vous le pouvez. Évitez les balises < bold > ou similaires, et utilisez correctement les balises et les classes que vous allez styler avec du CSS à la place.

Utilisez un framework !

Mais vous pouvez quand même faire quelques conceptions différentes pour des appareils très différents. Vous n'êtes pas obligé de tout rendre responsive /dans le même design/.

Il existe plusieurs façons de servir un CSS différent en fonction du client; vous pouvez le faire :

1. côté serveur, en vérifiant le navigateur dans l'en-tête HTTP provenant du client, que ce soit avec votre serveur Web ou votre environnement de script dynamique - que ce soit python/django, php, ou quoi que ce soit d'autre
2. javascript (vous pouvez facilement avoir la taille de la fenêtre)
3. html - en particulier avec certains appareils spécifiques comme l'iphone

Vous pouvez facilement produire un design générique pour les petits (par exemple les mobiles) en suivant quelques règles simples : 1. une mise en page fluide capable de s'adapter à des largeurs très petites 2. des en-têtes/pieds de page compacts ne gaspillant pas trop d'espace 3. peu de contenu clair par 'page' 4. évitez les effets :hover car ils ne fonctionneront pas sur les appareils tactiles !!!

Si vous voulez aller plus loin, vous devez vérifier les personnalisations individuelles des appareils; un exemple est le viewport de l'iphone, consultez la bibliothèque de référence d'Apple.

C'est juste pour vous mettre sur la bonne voie. L'expérience et les besoins spécifiques guideront la suite !

Answer 4

Votre site ne peut pas fonctionner parfaitement pour chaque affichage. Même si vous aviez suffisamment d'heures dans la journée (ou devrais-je dire année/décennie) pour concevoir pour chaque affichage possible, vous devriez le refaire à chaque fois qu'un nouveau dispositif sort.

Dans mon développement, j'essaie toujours de manière religieuse d'éviter le défilement horizontal, et ce n'est pas trop difficile avec des divs flottants / des divs de largeur variable. Mais au-delà de cela, nous sommes vraiment à la croisée des chemins du "il y a une application pour ça", où vous avez besoin d'un affichage spécialement conçu pour des appareils spécifiques.

Une stratégie que j'utilise est de réduire la dépendance à un seul affichage - un client n'a probablement pas besoin de voir l'intégralité de votre page web pour faire ce qu'il est venu faire. Vous pouvez séparer les fonctionnalités en pages web plus petites / plus simples qui s'adaptent mieux aux appareils de tailles différentes.

Au travail, j'ai un peu plus de "pouvoir", pour ainsi dire - je peux développer des applications web internes qui sont "conçues pour fonctionner sur... un navigateur spécifique, des paramètres d'affichage spécifiques, etc. - utilisez d'autres configurations à vos propres risques". Cela, seulement après avoir convaincu les managers qu'il n'est vraiment pas rentable de passer une semaine supplémentaire en développement (et encore plus en mises à jour / maintenance future) juste pour satisfaire ce végétarien à l'autre bout du campus qui refuse d'utiliser IE. Dans ce cas, nous avons besoin d'un autre Timmy, pas d'une application web plus flexible qui peut bien paraître sur son navigateur préféré autre que IE.

Answer 5

C'est une question commune mais complexe, qui malheureusement n'a pas de seule meilleure solution. Tout dépend du type de contenu que vous avez. Vous pouvez utiliser une mise en page fluide, ou concevoir votre site différemment pour différentes résolutions (voir http://www.maxdesign.com.au/articles/resolution/). Pour un exemple de conception fluide, consultez ceci - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign