Vos pensées sur la conception de sites web pour 16:9 écrans
J'ai de la conception des applications web principalement pour une utilisation de bureau (pas de Pda, téléphones, etc) par des collègues et des clients. Comme de plus en plus d'utilisateurs sont équipés de 16:9-type d'écrans, les traditionnelles présentations de l'écran ne sont plus ergonomiques.
Par exemple, une longue verticale navi barre ne peut pas s'complètement ou une forme complexe pourriez avoir besoin de faire défiler dans l'ordre de se déplacer vers le prochain champ de saisie.
Comment êtes-vous face à ce développement? Êtes-vous à une diffusion plus à l'horizontale ou à coller avec l'ancienne présentation? Il n'est pas vraiment un problème?
Mise à JOUR
Merci pour toutes les réponses. Je les ai trouvés utiles. Voici quelques réflexions qui me sont apparues:
-
Je prends le point que le format 4:3 peut-être encore le plus largement utilisé, mais je pense que cela va changer.
-
Aussi, la plupart des utilisateurs que je visite ici dans la société ont tous leurs fenêtres agrandies (vraiment!) donc, l'idée de dimensionnement du navigateur pour s'adapter le contenu n'est pas à l'y aider.
-
Dans mon cas, la plupart des applications web impliquent la recherche et l'affichage des informations ou des données d'entrée (certains peuvent impliquer de grandes et de formes complexes). C'est surtout l'entrée de données des applications qui je suis préoccupé. Peut-être l'AJAX et des Onglets de commandes peut être un moyen d'avancer là.
- Excellente question +1
Vous devez vous connecter pour publier un commentaire.
Surtout la résolution a tout simplement augmenté horisontally sur la planche quand on regarde écran large adoption. 1024x768 ordinateurs portables aller 1280x800, 1600x1200 aller 1920x1200 et ainsi de suite. La taille verticale est toujours disponible comme d'habitude.
Il est temps que je mette à jour cette réponse à s'adapter aux changements sur comment, où et avec ce que les gens de surfer sur le web. Je suis de tendance sensible des conceptions qui sont de fluide à un certain degré, mais grâce à des requêtes de média et d'autres techniques utiles pour le concepteur beaucoup plus de contrôle sur la présentation de ré-écoulement, tout en ont encore la capacité de s'adapter à n'importe quel affichage/taille de l'écran.
L'adaptation et de l'effondrement du contenu lorsque le mode disponible est inférieur à une certaine limite, et en gardant le texte à un maximum de largeur de ligne, mais en expansion et la réorganisation les autres éléments sont des choses que je ai commencé à faire.
Ce n'est pas seulement limitée à la réduction d'un site à un appareil mobile, mais également de s'adapter et adapter des éléments sur un navigateur en plein écran sur un téléviseur hd ou tout simplement pour remplir et regardez bien sur une petite tablette avec une taille semblable à un netbook.
Je n'ai pas encore personnellement comprendre l'utilisation de la traditionnelle "fluide" layouts où un centre de texte de la colonne de 2000 pixels sans hésitation, à l'exception de web applications où vous avez excel-comme les matrices de données d'écran ou une image de grande taille plutôt que le réel contenu du texte. Personnellement, j'ai trébuché sur un trop grand nombre de ces sites où la marge est trop petit, et si j'ai élargir le navigateur, la marge n'augmente pas, même à pleine 1920 largeur et est encore trop petit, concepteur imposé un mal de marge sur moi et je ne peux pas le fixer par de moins que de modifier le site du CSS avec le navigateur outils de dev ^^
Les premiers pas dans une conception sensible pour moi était de prendre l'infâme 960px de largeur fixe j'aime tant de choses et de s'adapter en trois étapes lorsque la vue était plus petite. Cela fait qu'il est agréable sur les appareils de petite taille de l'écran du téléphone. Cependant, mon défi actuel est de l'élargissement de la conception de passé autour de la 1200px marquer l'endroit où les choses deviennent trop large à mon goût et un autre élément de ré-écoulement qui doit être fait - mais de nombreux sites dépourvue de tout contenu même de l'utiliser pour ça...
En tant qu'utilisateur et designer, j'ai hate de largeur fixe sites. Beaucoup de sites pourrait être faite de liquide, mais pas parce que c'est "la voie de la facilité". Suit alors toutes sortes de rationalisations qui sont équipés (pun intended) à l'appui de ce point de vue.
Newsflash: de Courtes longueurs de ligne est un mythe qui date de début du journal de recherche. Voir ce résumé pour plus de détails et de faire votre propre jugement.
Très large des lignes peut être illisible pour certains (je ne trouve pas ça comme un problème, personnellement), mais ~900px mises en page fixes avec trois colonnes, de telle sorte que chaque ligne est d'environ huit à dix mots.
J'ai toujours essayé de la conception raisonnable de redimensionnement en regardant les données démographiques d'un site (par exemple, via Google Analytics) et de voir qui tend à visiter...
16:9 écrans ne sont pas vraiment limité à la verticale si vous pensez à ce sujet. Dans mon expérience avec ces moniteurs, leurs résolutions natives sont généralement de 1920 x 1080. L'espace vertical est encore plus grande que la plupart des résolutions (1024x768, 1280x1024, etc..)
J'ai cependant commencé à écrire de la mise en page liquide pour gérer l'espace horizontal. Certains concepteurs de sites web, comme pour le bâton avec 960px de largeur fixe. Tout dépend de ce que vous essayez de présenter à l'utilisateur.
Voici quelques principes que je recommande en tant qu'utilisateur, mais aussi en tant que web designer et développeur:
Encore, il n'est pas recommandé tout simplement de flux de contenu à 100% de la largeur du navigateur, la plupart du temps. Et je pense que les écrans deviennent de plus en plus, vous verrez beaucoup moins de gens maximiser les fenêtres du navigateur, de toute façon.
En plus des autres commentaires...
La plupart des utilisateurs ne sont pas à l'aide de moniteurs à écran large encore. Plus important encore, de nombreux utilisateurs qui N'utilisent grand écran moniteurs n'ont pas leurs navigateurs web agrandi.
Je ne vous inquiétez pas beaucoup sur les vieux écrans ces jours et à chaque fois que 800px n'est pas assez j'ai changer facilement de 1000px. Cependant, vous ne devrait pas concevoir intentionnellement pour quelque chose de plus large, à l'instar de 1920x1080. Le nombre d'utilisateurs avec de tels écrans n'est pas tant que ça. Même si ce n'était pas le cas, trop large conceptions affecter la facilité d'utilisation. Lire des textes étirée horizontalement pour ~1500px n'est pas vraiment agréable.
Une chose à considérer est votre application de la posture. Est-il un souverain application, où l'utilisateur serait attendu à consacrer toute leur attention à elle pendant un certain temps? J'ai récemment redessiné une page de notre application web qui permet à l'utilisateur d'effectuer des traductions dans d'autres langues. Dans ce cas, l'utilisateur allait être "la plongée" à cette partie de l'application pendant un certain temps, j'ai donc enlevé la navigation habituelle des éléments qui pourraient être une source de distraction pour permettre plus de biens immobiliers pour la tâche à portée de main.
Dans ce cas, l'utilisateur de la base a été limitée aux personnes à l'intérieur de mon entreprise, que je connaissais avaient tous les moniteurs à écran large, de sorte qu'il était facile de prendre la décision d'aller de large. En général, je dirais que l'on doit encore concevoir pour les non-moniteurs à écran large, mais dans les cas où il y a un avantage significatif, faire la conception capable de prendre avantage de l'espace supplémentaire. J'ai vu quelques pages qui ont été énoncées pour les écrans, mais utilisé du JavaScript pour détecter si la page est plus large et réorganiser certains éléments de la page si elle l'était. De cette façon, la configuration par défaut est toujours utilisable, mais les utilisateurs avec de larges écrans et JavaScript serait d'obtenir une meilleure utilisation de leur espace.
Je fais tout mon développement sur 30" surveiller et de le prévisualiser sur un écran 20" comme un rapide test de cohérence. Lors d'une récente demande de libération que j'ai fait, j'ai eu un JS envoyer les stats de ce que mon public cible a l'aide, et je reviens avec beaucoup d'aléatoire des nombres plus petits que 1024x768. De la centaine de stats que j'ai recueillis, seulement 5 ou 6 utilisateurs étaient en cours d'exécution en plein écran sur quelque chose de plus grand qu'un écran 1440x900.
De la conception de votre site, de sorte que c'est la contenu, pas à quoi il ressemble. Ensuite, vous pouvez fournir d'autres feuilles de style CSS pour l'utilisateur de choisir à partir.
Cela peut parfois être plus difficile pour le concepteur. Par exemple, à l'aide de tableaux de mise en page ne fonctionne pas.
S'il vous plaît ne pas.
Design pour 4:3, peut-être de 800 à 900 pixels de large max.
De nombreux ordinateur que j'utilise (comme presque tous les un à mon travail) sont en 4:3. Seulement mon ordinateur portable est en 16:9 (16:10 je pense, mais assez proche).
Je n'aime pas avoir mon navigateur web aussi large que mon écran, c'est un gaspillage de l'espace. Vous ne pouvez pas lire le texte que large. Sur mon bureau, 4:3 LCD (qui je suis en ce moment), la largeur est de 14". Vous ne pouvez pas lire de 14" de large texte, l'œil perd la trace de la ligne, c'est sur. C'est une horrible douleur. La plupart des sites de restreindre la largeur du contenu réel. StackOverflow de la colonne de contenu principale pour moi est d'environ 8", une grande taille de lecture.
Donc, quand vous allez en 16:9, les choses empirent. Maintenant, au lieu du 14" vous pourriez avoir 16". C'est énorme. Que comptez-vous faire avec tout ce que l'espace? Vous ne pouvez pas simplement mettre du texte, sauf si vous voulez avoir deux articles côte à côte (comme les deux colonnes des journaux) et je doute que vous voulez faire. Cela signifie que vous venez de le remplir avec des bêtises sans importance. Plus encadrés, plus ad colonnes. Fondamentalement, vous êtes forçant contenu pour remplir l'espace.
Tout le monde ne fonctionne 1920x1080. Pas tout le monde garde son navigateur web agrandi. Le remplissage de près de la moitié de mon écran avec des colonnes sans importance ne fait pas appel à moi.
Dans mon cours de conception, nous avons eu une règle-de-pouce que la longueur de la ligne ne doit pas être supérieure à 40 fois la hauteur de la ligne. La raison en est évidente: quand vos yeux remonter au début de la ligne suivante, vous voulez être sûr que c'est la ligne suivante, pas la même ligne de nouveau ou à la suivante, plus un.
Pour cette raison, j'ai toujours utiliser de largeur fixe de conception. Mon moniteur actuel a une surface active de 43 cm de large. Hauteur de la ligne sur ce page est de 5 mm. Si ce serait l'utilisation la conception de fluide le ratio de la longueur de la ligne /hauteur de la ligne serait inacceptable 84.
Et les choses sont encore pires sur les écrans 30 pouces.
Je m'en tiens à l'élaboration de la majorité, qui est toujours à l'aide de 4:3 moniteurs. Si je voulais créer 16:9-contenu spécifique, je serais probablement fournir un lien vers le "Enhanced pour le grand écran des moniteurs" version, un peu comme l'étiquette à l'arrière de Dvd à partir de l'époque où elles n'étaient pas toutes anamorphique.
Voici un lien vers un autre DONC, la question qui pourrait contiennent quelques infos utiles.
livre-recommandation-web-interface utilisateur-conception
Ne pas assumer la résolution verticale est OK sur l'écran large. 1440x900 semble être un populaire résolution, et tandis qu'il est plus grand que 1024 x 768, c'est nettement plus courte que la résolution de 1280x1024.
Aussi, ne pas assumer tous ces nouveaux écrans larges sont utilisés correctement. J'ai vu pas mal de configurations où le moniteur n'est pas utilisé à sa résolution native. Les gens ne sont pas conscients que quelque chose est incorrect, ou ils apprécient les très gros caractères, même si cela rend les choses un peu floue.
N'oubliez pas que juste parce qu'un utilisateur dispose d'un écran large, cela ne veut pas dire qu'ils ont leurs fenêtres maximisées soit.
J'ai toujours utiliser 964px que ma largeur pour les sites web. Approximatif, variable d'un site à l'autre, mais je la garde en vertu de 1024px de large, en prenant en considération les barres de défilement verticale. Il exploite le site est pas trop grand pour un 800px de large écran, mais il est juste assez grand pour faire joli sur une résolution de 1024, et 1280px de large écrans.
J'ai trouvé dans mon expérience, que même les utilisateurs qui utilisent plutôt les grands écrans larges (j'ai moi-même d'avoir une double 22" (1680x1050) pour les écrans, je préfère encore une mise en page à largeur fixe, à environ 1024px de large pour une meilleure lisibilité.
Je suis très aversion de lire de très grandes amplitudes de texte, et je tiens à le garder au "livre de la largeur". La plupart des sites que je trouve attrayant, et ont une large base d'utilisateurs sont autour de ces tailles.
Espère que cette aide.
La vaste majorité des utilisateurs du web sont encore sur le standard, non-moniteurs à écran large (voir les stats et mon commentaire ci-dessous), donc je ferais de conception pour eux. Personnellement, je optimisé pour la résolution 1024x768.
http://www.thecounter.com/stats/2009/January/res.php
Comme un utilisateur régulier de moniteurs à écran large, je ne veux pas voir les concepteurs de rendre leurs sites plus large. J'ai 24 pouces écrans larges (1920 x 1200) et quand je suis parcourant le web j'ai l'habitude de courir deux navigateurs de l'autre côté. Si quoi que ce soit, rendant certains sites un peu plus étroites serait le mieux. La plupart des sites fonctionnent très bien en 960 pixels, mais c'est ennuyeux quand je pop un site ouvert plus large ou faites défiler pour voir tout.
Veuillez considérer la rapide croissance de l'audience de netbook utilisateurs qui sont à l'aide de 1024 x 600 écrans. Je pense que cela devrait être votre minimum de taille de conception pour les projets en cours.