Stratégies pour gérer plusieurs résolutions d’écran et les proportions dans le développement Web

À l’époque, 800 x 600 était la résolution d’écran à concevoir – et peut-être 640 x 480. Ensuite, 1024 x 768, etc., etc.

Mais alors, la situation s’aggrave: nous avons maintenant non seulement des résolutions différentes, mais aussi des proportions différentes.

Quelles stratégies les gens utilisent-ils pour s’adapter à la gamme toujours croissante de tailles d’écran et de proportions?

(BTW – Je ne pensais qu’au matériel de bureau / ordinateur portable, mais bien sûr, il y a aussi des smartphones et des tablettes à prendre en compte.)

Je sais que ce serait un avis quelque peu controversé, mais je le dirais quand même:

Ne pas concevoir pour plusieurs tailles d’écran ou formats d’image. Il y a bien sûr quelques exceptions: les applications Web lourdes telles que les clients de messagerie Web peuvent certainement faire plus de place à l’écran, et sont probablement assez flexibles pour accueillir un large éventail de tailles d’écran. Les versions mobiles de ce site Web, avec une conception plus flexible pour répondre à l’incroyable éventail de tailles d’écran mobiles, peuvent également être utiles pour les sites avec des volumes mobiles élevés. 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 à prendre en compte que les tailles d’écran, la résolution et les proportions.

Tout d’abord, abordons le plus facile. Je ne comprends pas vraiment pourquoi vous vous soucieriez tellement de l’aspect ratio – ce n’est pas comme si nous nous soucions beaucoup plus du non-sens du «sous le pli», 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 de 600px est juste stupide.

Ensuite, résolution / taille de l’écran: Encore une fois, je trouve difficile à défendre.

Les utilisateurs ayant de grands écrans ne maximisent généralement pas les fenêtres de leur navigateur, car ils trouvent que la plupart des sites Web n’en profitent pas. Tandis que le Web s’adapte à l’utilisateur, l’utilisateur s’adapte également au Web. Bien que vous puissiez prétendre qu’il s’agit d’un problème de la poule et de l’œuf, le fait est que ce site Web est généralement conçu pour le plus petit dénominateur commun. Je ne défends pas cette position, mais plutôt la signalant comme la tendance actuelle dans l’indussortinge.

Certaines choses ne fonctionnent tout simplement pas avec une résolution trop élevée ou trop faible. Par exemple, il existe une petite gamme de largeurs permettant aux utilisateurs de lire facilement à l’écran. Plus longtemps et la quantité de mouvement pour l’œil à la ligne suivante serait ennuyeux. Trop bas et le texte apparaîtrait à l’étroit. Le fait que le Web ait été conçu pour être neutre en termes de résolution signifie que, paradoxalement, peu de dispositions ont été sockets pour ceux qui souhaitent créer des configurations fluides. min-height et max-height aideraient bien sûr, mais plus la gamme est large, plus vous rencontrerez de difficultés. Des éléments tels que des éléments orphelins, des images déplacées, des arrière-plans qui manquent, etc. sont inévitables pour des sites vraiment flexibles construits avec la technologie d’aujourd’hui.

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

Méfiez-vous des parameters DPI élevés

Je pense que l’un des problèmes les plus discutés auxquels le développement Web frontal est confronté aujourd’hui est celui des tests sur les systèmes à haute résolution. Tout le monde a appris à tester et à tester et à tester sur différents navigateurs, mais les concepteurs / développeurs n’ont pas encore testé les différents parameters DPI.

Les parameters DPI élevés (voire faibles) interrompent les conceptions lorsque les fonts sont mises à l’échelle, mais pas les images (ce qui peut se produire), les images peuvent sembler floues et les objects positionnés de manière absolue serait dévastateur pour les menus CSS.) Si rien d’autre, testez vos images en haute résolution et re-les rendre si nécessaire.

Cela n’a jamais vraiment été un problème jusqu’à récemment avec la sortie de Windows 7 et les personnes achetant des ordinateurs avec des moniteurs haute résolution. Tout d’abord, Windows 7 utilise 96DPI par défaut (ce qui est différent du rest du monde informatique qui utilise 72DPI en standard. De plus, Windows 7 ajustera automatiquement les parameters DPI et j’ai vu des personnes avec DPI de 150% de la normale). (96 DPI dans Windows).

Voici un excellent lien pour discuter de cette question plus en détail: http://webkit.org/blog/55/high-dpi-web-sites/

Un excellent site Web multi-navigateur conçu avec des standards Web est l’objective mais n’oubliez pas les tests DPI.

Eh bien, en essayant de garder la réponse pas trop longtemps, c’est ce que je fais.

(A) Toujours partir du rapport / résolution le plus probable

Si votre ordinateur doit être sur un ordinateur portable moderne ou sur un ordinateur de bureau, il a probablement AU MOINS 1024×768 ( réf : w3schools elykinnovation ), ce qui vous donne une largeur utile de 960px (vous devriez vérifier le système 960grid – il y a un beaucoup de nouveau cadre depuis que je l’ai écrit pour la première fois). Si vos utilisateurs sont plus susceptibles de commencer avec un appareil mobile ou une tablette, leur première préoccupation. S’il s’agit de 50% à 50%, il est généralement préférable de commencer par de petites tailles, puis de grandir, par exemple. Marteau ou Fondation Rock

(B) Disposition: fluide ou non?

Si votre site Web peut bénéficier d’une plus grande largeur, choisissez une conception fluide à partir de cette résolution. Veillez à ce que l’œil humain n’aime pas lire le texte sur de longues lignes, alors n’abusez pas du design fluide; coller souvent à 960px avec de grandes marges est acceptable. Vous voudrez peut-être append (javascript) des menus latéraux supplémentaires si vous avez vraiment beaucoup plus d’espace. Mais concevez votre site Web de manière à fonctionner sans JS autant que possible.

(C) Autres résolutions

Enfin, il est temps de vérifier que les résolutions les moins utilisées sont toujours acceptables.

(D) Autres appareils, ratios et autres

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

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

Lorsque vous écrivez votre code HTML, gardez à l’esprit ce dont vous avez besoin et n’oubliez pas de faire du HTML par sémantique et non pour la conception. Utilisez correctement les balises sémantiques HTML5 si vous le pouvez. Évitez les balises ou similaires et utilisez correctement les balises et les classes que vous allez définir avec CSS.

Utilisez un cadre!

Mais vous pouvez toujours faire quelques designs différents pour des appareils très différents. Vous n’avez pas à faire tout ce qui est réactif / dans le même design /.

Il existe plusieurs façons de servir un CSS différent selon le client. tu peux le faire:

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

Vous pouvez facilement créer une conception générique pour les petits appareils (par exemple, les appareils mobiles) en suivant quelques règles simples: 1. disposition des fluides capable de s’ajuster sur de très petites largeurs; par ‘page’ 4. évitez les sur-effets car ils ne fonctionneront pas sur les appareils tactiles !!!

Si vous souhaitez aller plus loin, vous devez vérifier les personnalisations de chaque périphérique. un exemple est la fenêtre iphone, voir la bibliothèque Apple Ref .

C’est juste pour commencer. L’expérience et les besoins spécifiques conduiront le rest!

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 chaque affichage possible, vous devrez recommencer chaque fois qu’un nouvel appareil sortira.

Dans mon développement, j’essaie toujours d’éviter le défilement horizontal, et ce n’est pas trop difficile avec des divs flottants / div en largeur variable. Mais au-delà de cela, nous sums vraiment à la croisée des chemins: il y a une application spécialement conçue pour des appareils spécifiques.

L’une des stratégies que j’utilise est de réduire la dépendance à un seul écran – un client n’a probablement pas besoin de consulter l’intégralité de votre page Web pour faire ce qu’il a fait. Vous pouvez parsingr des fonctionnalités sur des pages Web plus petites et plus simples, qui évoluent mieux sur des périphériques de tailles différentes.

Au travail, j’ai un peu plus de “puissance” – je peux développer des applications Web internes “conçues pour fonctionner sur un navigateur spécifique, sur des parameters d’affichage spécifiques, etc. – utiliser d’autres configurations à votre propre risque “. Ceci, seulement après avoir fait accepter aux gestionnaires de consacrer une semaine supplémentaire au développement (et plus encore aux mises à niveau / à la maintenance future) simplement pour convaincre un végétarien à l’autre bout du campus qui refuse d’utiliser IE ne vaut vraiment pas le coût. . Dans ce cas, nous avons besoin d’un autre Timmy, et non d’une application Web plus flexible qui puisse paraître correcte sur son navigateur non-IE préféré.

Il s’agit d’une question courante mais complexe, qui n’a malheureusement pas la 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 selon les résolutions (voir http://www.maxdesign.com.au/articles/resolution/ ). Pour un exemple de conception fluide, jetez un coup d’ œil à ceci – http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

Je pense que le web responsive est la réponse à votre question. Jetez un coup d’œil à ces exemples et techniques.