Stratégies pour gérer plusieurs résolutions d'écran et proportions dans le développement Web
À l'époque, 800 x 600 était la résolution d'écran à concevoir - et peut-être 640 x 480. Puis, 1024 x 768, etc., etc.
Mais la situation empire: nous avons maintenant non seulement des résolutions différentes, mais également 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 pour ordinateur portable/de bureau, mais bien sûr, il y a aussi les téléphones intelligents et les tablettes.)
Je sais que ce serait une opinion quelque peu controversée, mais je le dirais quand même: Don't
Ne concevez pas pour plusieurs tailles d'écran ou proportions. Il y a bien sûr quelques exceptions: les applications Web lourdes telles que les clients de messagerie Web peuvent certainement faire plus d'espace sur l'écran et sont probablement suffisamment flexibles pour s'adapter à une large gamme de tailles d'écran de toute façon. Les versions mobiles dudit site Web, avec une conception plus flexible pour s'adapter à l'incroyable spectre de tailles d'écran mobiles, peuvent également aider les sites à volume mobile élevé. Cependant, si vous vous en tenez à ce que l'on appelle le `` site Web de bureau '', 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 souciez autant du rapport d'aspect - ce n'est pas comme si nous nous soucions que beaucoup pour le non-sens `` en dessous du pli '', n'est-ce pas? Le Web est un support vertical - le défilement aura toujours sa place dans les sites Web. Tout avoir au-dessus de la ligne magique de 600 pixels est tout simplement stupide.
Ensuite, résolution/taille d'écran: Encore une fois, j'ai du mal à défendre.
Les utilisateurs avec de grands écrans ne maximisent généralement pas leurs fenêtres de navigateur, car ils constatent que la plupart des sites Web n'en profitent pas. Alors que le Web s'adapte à l'utilisateur, l'utilisateur s'adapte également au Web. Bien que vous puissiez affirmer qu'il s'agit d'un problème de poulet et d'oeufs, le fait demeure que le 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 en la désignant comme la tendance actuelle de l'industrie.
Il y a certaines choses qui ne fonctionnent tout simplement pas avec une résolution trop élevée ou trop basse. Il existe, par exemple, une petite gamme de largeurs qui permettent aux gens de lire confortablement à l'écran. Plus longtemps et la quantité de mouvement pour l'œil vers 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é prises pour ceux qui souhaitent créer des mises en page fluides. min-height et max-height serait utile, bien sûr, mais plus la gamme est large, plus vous rencontrerez de difficultés. Des choses comme des éléments orphelins, des images déplacées, des arrière-plans qui s'épuisent, 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 gérer plusieurs résolutions est de l'ignorer complètement - avec la technologie d'aujourd'hui, il n'y a pas beaucoup d'options de toute façon - et de concevoir le plus petit dénominateur commun.
Attention aux paramètres PPP élevés
Je pense que l'un des problèmes les plus inconnus auxquels est confronté le développement Web frontal aujourd'hui est le test 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 compris les tests sur différents paramètres DPI.
Les paramètres DPI élevés (ou même faibles, d'ailleurs) cassent les conceptions lorsque les polices sont mises à l'échelle mais que les images ne le sont pas (ce qui peut arriver), peuvent rendre les images floues/floues et les objets positionnés de manière absolue peuvent ne pas apparaître à l'emplacement souhaité (ce qui serait dévastateur pour les menus CSS.) Si rien d'autre, testez vos images à haute résolution et restituez-les si nécessaire.
Cela n'a jamais vraiment été un problème jusqu'à récemment avec la sortie de Windows 7 et les gens qui achètent des ordinateurs avec des moniteurs haute résolution. Tout d'abord, Windows 7 utilise 96DPI par défaut (ce qui est différent du reste du monde informatique qui utilise 72DPI comme standard. De plus, Windows 7 ajustera automatiquement les paramètres DPI et j'ai vu des personnes avec un DPI de 150% de la normale) (96 DPI sous Windows).
Voici un excellent lien pour discuter de ce problème plus en détail: http://webkit.org/blog/55/high-dpi-web-sites/
Un excellent site Web multi-navigateur conçu avec les normes Web est l'objectif, 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 probablement utilisé
Si votre Joe moyen va être sur un ordinateur portable moderne ou une machine de bureau, il a probablement AT MOINS 1024x768 (réfs: w3schoolselykinnovation ), cela vous donne à peu près une largeur utilisable de 960 px (vous voudrez peut-être vérifier le système 960grid - il y a beaucoup de nouveau framework depuis que j'ai écrit ceci pour la première fois.) Si vous les utilisateurs sont plus susceptibles de commencer avec un appareil mobile ou une tablette, pensez-y d'abord. Si c'est 50% -50%, il est généralement préférable de commencer par un petit, puis de grandir, par exemple Rock Hammer ou Foundation
(B) Disposition: fluide ou non?
Si votre site Web pourrait bénéficier d'une plus grande largeur, choisissez un design 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 de la conception fluide; s'en tenir souvent à 960 px avec de grandes marges est acceptable. Vous voudrez peut-être ajouter (javascript) quelques menus secondaires supplémentaires si vous avez vraiment beaucoup plus d'espace. Mais concevez votre site Web pour fonctionner autant que possible sans JS.
(C) Autres résolutions
Enfin, il est temps de vérifier qu'avec les résolutions les moins utilisées, les choses 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 mobile, un iPad, un AAA ou un appareil similaire.
Mon conseil est de ... concevoir spécifiquement ces appareils.
Lors de l'écriture de votre HTML, gardez à l'esprit ce dont vous aurez besoin et n'oubliez pas de faire du HTML par sémantique et non pour la conception. Utilisez si possible des balises sémantiques HTML5. Évitez les balises <bold> ou similaires et utilisez correctement les balises et les classes que vous allez styliser avec CSS.
Utilisez un cadre!
Mais vous pouvez toujours faire quelques conceptions différentes pour des appareils très différents. Vous n'avez pas à tout faire de manière réactive/dans le même design /.
Il existe plusieurs façons de servir un CSS différent selon le client; tu peux le faire:
- 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 dynamique - que ce soit python/Django, php, ou quoi que ce soit d'autre
- javascript (vous pouvez facilement obtenir la taille de la fenêtre)
- html - en particulier avec certains appareils spécifiques tels que l'iphone
Vous pouvez facilement produire une conception générique pour les petits appareils (par exemple mobiles) en suivant quelques règles simples: 1. disposition fluide capable de s'adapter dans de très petites largeurs 2. en-tête/pieds de page compacts ne pas trop gaspiller trop d'espace 3. peu, contenu clair par 'page' 4. évitez: les effets trop car ils ne fonctionneront pas sur les appareils tactiles !!!
Si vous voulez aller plus loin, vous devez vérifier les personnalisations des appareils individuels; un exemple est la fenêtre d'affichage de l'iphone, voir Apple ref library .
C'est juste pour vous aider à démarrer. L'expérience et les besoins spécifiques guideront le reste!
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 devriez le faire à chaque fois qu'un nouvel appareil sort.
Dans mon développement, j'essaie toujours religieusement d'éviter le défilement horizontal, et ce n'est pas trop difficile avec des divs flottants/divs à largeur variable. Mais au-delà de cela, nous sommes vraiment au carrefour "il y a une application pour ça", où vous avez besoin d'un écran spécialement conçu pour des appareils spécifiques.
Une stratégie que j'utilise est de réduire la dépendance à un seul écran - un client n'a probablement pas besoin de voir l'intégralité de sa page Web pour faire ce qu'il est venu faire. Vous pouvez analyser la fonctionnalité sur des pages Web plus petites/plus simples qui évoluent mieux sur des appareils de tailles différentes.
Au travail, j'ai un peu plus de "puissance" pour ainsi dire - je peux développer des applications Web internes qui sont "conçues pour fonctionner sur ... un navigateur spécifique, un paramètre d'affichage spécifique, etc. - utiliser d'autres configurations sur à vos risques et périls ". Ceci, seulement après avoir obtenu que les gestionnaires conviennent que passer une semaine supplémentaire en développement (et encore plus en mises à niveau/maintenance future) juste pour apaiser un végétarien à l'autre bout du campus qui refuse d'utiliser IE vraiment ne vaut pas le coût. Dans ce cas, nous avons besoin d'un autre Timmy, pas d'une application Web plus flexible qui puisse bien paraître sur son navigateur non IE préféré.
Il s'agit d'une question courante mais complexe, qui n'a malheureusement pas de solution optimale unique. 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
Je pense que la conception de sites Web réactifs est la réponse à votre question. Jetez un œil à ces exemples et techniques ... Responsive Web Design