Pourquoi la plupart des sites Web sont-ils optimisés pour l'affichage en mode portrait? [fermé]

Je ne peux tout simplement pas comprendre cela. Presque tous les moniteurs ont un rapport d'aspect où la largeur est beaucoup plus grande que la hauteur et pourtant presque tous les sites Web sont conçus exactement pour l'inverse? Je ne suis pas vraiment un développeur web et j'expérimente juste des trucs en ce moment mais cette folie me déconcerte !!!

Edit: Le fait n'est pas que je voudrais limiter la hauteur d'un site Web. Le fait est que je voudrais qu'il remplisse en quelque sorte tout l'espace disponible lorsque j'ai mon 1920x1080 en mode paysage.

Edit 2: Voir ceci pour comprendre ce que je dis

Il y a une limite à la distance que l'œil peut parcourir sans perdre de vue la ligne suivante lorsque vous arrivez à la fin de la ligne actuelle. Il y a eu un certain nombre d'études ( dont celle-ci ) sur la largeur de ligne optimale et la lisibilité.

Vous pourriez être en mesure de le réduire à des degrés, mais pour savoir ce qui est optimal à ce stade, vous devez savoir à quelle distance l'utilisateur est du moniteur. C'est pourquoi la plupart des recommandations concernent les mesures en ems, caractères ou mots. La taille en pixels dépend alors de la taille de la police, mais le consensus général fonctionne toujours.

Personnellement, j'aurais beaucoup de mal à lire un article s'il était formaté pour utiliser toute la largeur d'un écran 1080p. Je suis sûr que vous aussi. Nos conventions actuelles sont dérivées des directives de conception de mise en page d'impression, et les directives de mise en page n'ont pas changé de manière significative. La seule différence est que nous pouvons interagir avec la page dans un navigateur.

Commentaire supplémentaire : (extrait de la question posée dans les commentaires)

Il y a des limites à ce que HTML peut faire pour vous sur un écran. D'une part, il n'y a pas de pages. Seules les barres de défilement. Concevoir un comportement raisonnable pour la façon dont un navigateur doit afficher le balisage est une proposition très difficile. Les propriétés CSS3 pour la disposition multi-colonnes ne sont pas encore sorties de l'étape de recommandation candidate. Il y a des hacks pour jouer avec lui décrits dans cet article à une liste à part . Cependant, il n'est pas encore tout à fait prêt pour les heures de grande écoute sur la plupart des sites.

Tant que votre contenu ne nécessite pas de défilement, vous devriez être OK. Dès qu'elle le fait, l'approche multi-colonnes peut présenter certains défis sur la façon dont l'utilisateur interagit avec le site.

Commentaire sur la norme de facto actuelle :

Pour répondre à la façon dont vous avez reformulé votre question et à l'exemple que vous avez fourni, comprenez que la conception Web doit équilibrer un certain nombre d'exigences potentiellement conflictuelles - tout en gardant le site Web professionnel. Afin d'équilibrer les besoins des concepteurs et des clients, la plupart des maisons de développement conçoivent pour une seule résolution. Cette résolution est basée sur des données qui peuvent être facilement disponibles . Ils peuvent également être basés sur des enregistrements de trafic Web historiques ou sur la connaissance de l'environnement cible.

Les largeurs d'écran les plus courantes (1024, 1280, 1366) sont suffisamment proches pour que si vous concevez pour le plus petit (1024p) et centrez le dessin sur la page, il aura toujours fière allure sur les autres dimensions horizontales légèrement plus grandes. Il est très difficile de tout aligner correctement dans n'importe quel format, et encore moins de prendre en charge plusieurs formats en fonction de la largeur de l'écran. Les utilisateurs de 1080p sont de plus en plus nombreux, mais représentent toujours un très faible pourcentage de tous ceux qu'ils doivent prendre en charge.

Si vous êtes intéressé, je vous recommande fortement de parcourir certains des articles de design sur "A List Apart" . Vous commencerez à avoir l'idée que faire ce que vous voulez est plus difficile qu'il n'y paraît. Lorsque j'ai posté une question sur la conception en 1080p , les premières réponses initiales se sont élevées à "Agrandir tout". C'est quelque chose qui n'a pas encore été sur le radar pour la plupart des concepteurs de sites Web.

La plupart des sites Web sont plus grands que larges car vous pouvez les faire défiler naturellement pour lire plus de contenu. Je déteste personnellement les barres de défilement horizontales. Ils devraient être abolis!

Les sites Web sont toujours en portrait, le site s'étend au-delà du bas de l'écran. Il n'y a pas de limite à la hauteur d'un site.

Il y a maintenant des pages Web infiniment longues (merci AJAX), que feriez-vous si vous voyiez une page infiniment large? (Je pourrais traquer et tuer le concepteur, cliquer loin de la page n'est pas suffisant, le concepteur doit mourir.)

Faire défiler puis revenir en arrière pour chaque ligne en conduira une au suicide. C'est pourquoi les gens font des livres fantaisie comme des applications de tournage de pages, pour que vous n'ayez pas à faire défiler.

Après avoir lu les réponses précédentes, je constate que plusieurs points manquent, je vais donc essayer de les décrire.

Implémentation de colonnes difficile

Lorsque vous parlez de pages de grande largeur, j'imagine que vous parlez de colonnes de texte, comme ce que vous voyez dans un journal "physique". Il y a deux problèmes avec cela.

Premièrement, HTML 4 et XHTML 1.0 / 1.1 réels ne sont pas destinés à afficher du texte dans des colonnes. Il existe des hacks pour Firefox (et peut-être d'autres navigateurs normaux), mais cela ne fonctionnera pas dans Internet Explhorror.

Deuxièmement, dans l'implémentation actuelle de Firefox ou dans le futur HTML 5, si le texte doit être affiché dans des colonnes, vous devez spécifier la largeur de la colonne et le nombre de colonnes. Il n'est pas possible de spécifier la hauteur (à, par exemple, la hauteur de la page, moins la hauteur de l'en-tête et la hauteur du pied de page), et laisser le navigateur ajuster le nombre de colonnes.

Cela rend pratiquement impossible d'avoir une disposition utilisable en colonnes avec seulement une barre de défilement horizontale, sans la verticale.

Aucune hauteur à 100%

Le HTML / XHTML actuel est destiné à ajuster la taille des éléments en fonction de la largeur de la page. Il est très difficile d'utiliser la hauteur de page pour les mesures.

Cela signifie que vous devrez utiliser des hacks JavaScript pour afficher correctement le contenu. En d'autres termes, pour les personnes qui n'ont pas activé JavaScript, votre site Web sera complètement inutilisable.

Navigation avec page demi-écran

Avec de grands écrans 16: 9/16: 10, il n'est pas rare de travailler avec deux fenêtres côte à côte ( Win+ ←/ Win+ →dans Windows Seven). Cela signifie que la fenêtre du navigateur aura une petite largeur et une grande hauteur.

Largeur fixe vs largeur dynamique

Votre hypothèse selon laquelle la plupart des sites Web sont optimisés pour la visualisation en mode portrait peut être erronée.

Premièrement, la plupart des sites Web ne sont pas optimisés du tout et sont écrits par des personnes qui ne connaissent rien ou peu du développement Web en général.

Deuxièmement, il existe une différence entre les sites Web à largeur fixe et les sites Web dont la largeur est égale à un pourcentage de la largeur de la fenêtre du navigateur.

Dans le premier cas, vous remarquerez que la plupart des sites Web ne sont optimisés ni pour le mode portrait, ni pour le mode paysage. Habituellement, la largeur est fixée à 1024, 800 ou moins, ce qui n'a aucun sens lorsque vous les visualisez sur un écran de 24 pouces avec une résolution de 1920 × 1080.

Dans le second cas, si vous visualisez la page en mode plein écran sur un écran 24 pouces, il y a des chances que ce site s'affiche correctement en mode portrait ainsi qu'en mode paysage.

Exemple: imaginez un site Web avec une galerie de photos. Sur une page, il y a des miniatures, et lorsque vous cliquez sur une miniature, vous voyez une photo à pleine échelle. Si les vignettes sont flottantes, avec une largeur dynamique d'une page, elles s'afficheront bien en mode paysage. Ce sera particulièrement agréable de voir les photos en taille réelle.

Pourquoi les moniteurs modernes sont-ils orientés en mode paysage?

1. Format vidéo. La vidéo HD évoluera mieux pour les écrans orientés paysage.
2. En train de lire. Que ce soit de gauche à droite ou de droite à gauche, il est plus facile de lire de gros blocs de lignes complètes sans aucun défilement lorsqu'il est orienté en mode paysage.

EDIT: Après avoir examiné votre commentaire et recadré l'intention de votre question d'origine, il semble que vous visiez en quelque sorte la disposition à deux et trois colonnes qui est la plus courante aujourd'hui. Pour cela un bref petit résumé de l'historique du site:

Pourquoi les sites Web sont-ils optimisés pour la visualisation en mode portrait?

Je ne pense pas du tout qu'ils soient optimisés pour cela. C'est souvent un compromis entre avoir certains aspects toujours disponibles, certains aspects souvent disponibles et certains aspects disponibles uniquement dans un certain contexte. Au mieux, vous pourriez lui appeler un compromis optimal.

Le fait de pouvoir placer le contenu de base, la navigation attendue et le contenu secondaire dans chaque page à côté du contenu spécifique au contexte est la raison pour laquelle les dispositions à deux et trois colonnes sont aussi omniprésentes qu'elles le sont. Dans les premiers jours du Web, de nombreux sites ont expérimenté des mises en page qui offraient ce qui tentait d'apparaître sous la forme de mises en page à colonne unique, en utilisant des listes de navigation dynamiques (ou des menus, comme vous voulez les voir), qui se masquaient et élargissaient la zone de lecture de la contenu principal. Mais il s'agissait d'un défi en deux parties: a) les défis techniques liés au manque de compatibilité entre les navigateurs; b) convivialité: il était souvent considéré par les utilisateurs, même si (un gros si) le défi technique était surmonté, comme un jeu de chasse ou de intuition inutile (pour la navigation) et de destruction (satisfaction de l'expérience car certaines solutions modifiaient le comportement contextuel par défaut de clics de souris).

Pour surmonter cela, la plupart des sites ont adopté une norme de facto et en ont accepté les conséquences. Soit deux colonnes affichant la navigation dans l'une et le contenu dans l'autre, soit une troisième colonne est ajoutée afin que le contenu de navigation secondaire non essentiel puisse toujours être affiché (que ce soit son aide contextuelle, ses notes ou sa publicité, ou plus récemment les flux de communication montrant une personne en direct) activité liée au site ou au contexte). Le contenu réel du contexte est coincé au milieu.

C'est ce qu'on appelle la disposition à largeur fixe. Il existe des dispositions pleine largeur ou également appelées fluide. Il y a une raison pour laquelle une largeur fixe est utilisée. La première est que la résolution de votre moniteur affecte la convivialité. Si vous avez un énorme moniteur comme je le fais à 27 ", le site aurait l'air horrible. Tout le texte, les images et tout serait tellement étalé, il serait difficile pour moi de comprendre la mise en page ou le site. Une mise en page fixe permet une belle conception. La mise en page fluide est principalement utilisée dans les listes ou le type de données des sites. Par exemple, eBay utilise la mise en page fluide dans ses annonces car elle offre une meilleure expérience. Les forums pourraient également bénéficier d'une mise en page fluide. Mais les blogs, les créations, les photos, ou les sites commerciaux bénéficient beaucoup mieux des sites à largeur fixe.

Je ne sais pas avec certitude, mais je suppose que la plupart des "documents" imprimés sont conçus pour être imprimés en orientation portrait, et beaucoup de gens désignent encore des sites Web comme des "documents" - cela pourrait être une chose culturelle? Une autre explication possible est que la largeur du moniteur varie plus que la hauteur du moniteur ...

Je suppose qu'en général il est déconseillé de poster une réponse dans un fil qui n'a pas vu d'activité depuis longtemps. Je pense cependant qu'il y a des choses pertinentes qui n'ont pas encore été mentionnées.

Tout d'abord, permettez-moi de mentionner l'extension Firefox suivante que j'ai découverte il y a plusieurs mois: Column Reader

https://addons.mozilla.org/en-US/firefox/addon/column-reader/

Pourquoi faisons-nous défiler verticalement?

À titre de comparaison: considérons une langue écrite dans des colonnes verticales. Pour une langue comme celle-ci, les moniteurs à écran large actuels sont idéaux. Voilà comment cela fonctionne: vous faites défiler perpendiculairement à la direction de vos lignes. Les pages du livre sont au format portrait car nos lignes sont horizontales.

Comme cela a été souligné dans les réponses précédentes: les capacités de refusion des moteurs de mise en page de notre navigateur sont réglées pour refluer verticalement.

capacité multi-colonnes

L'équipe de développement d'un navigateur peut choisir d'ajouter la fonctionnalité multi-colonnes de la manière suivante: Rendez d'abord la page entière comme une seule colonne, puis coupez-la en bandes avec la hauteur de pixel de l'espace de fenêtre disponible, et affichez ces bandes sur le côté. de côté. Mais quelle largeur faites-vous les colonnes? Même lorsque très peu de largeur est utilisée pour le texte réel, souvent la page code pour une couleur d'arrière-plan particulière pour toute la largeur de l'espace de fenêtre disponible.
Ensuite, le moteur de rendu doit jouer en toute sécurité et allouer tout l'espace horizontal à une seule colonne.

Est-il possible pour les webdesigners d'implémenter une disposition à plusieurs colonnes de redistribution?
Cela se heurterait à de graves difficultés. Vous devez obtenir la hauteur et la largeur de l'espace Windows disponible, et faire le découpage et l'agencement des bandes en colonnes en Javascript. Ensuite, vous devez décider quoi faire avec les images coupées en deux.

Faire face à ce genre de chose, c'est ce que fait un moteur de mise en page. Essayer de créer une bibliothèque Javascript qui facilite la redistribution de la disposition multi-colonnes, c'est créer un moteur de rendu en Javascript. Cela crée une plate-forme dans une plate-forme.

Taille du moniteur

Je trouve frustrant qu'en fait, les écrans d'ordinateur aient rétréci ces dernières années. Les grands moniteurs avaient 1200 pixels de hauteur, aujourd'hui seulement 1050. Oui, ils sont plus larges, mais pour le texte, cet espace ne peut pas être utilisé.

De plus, en orientation portrait, ces moniteurs sont trop étroits.
J'ai une configuration à deux moniteurs, avec les deux moniteurs en orientation portrait, les deux moniteurs sont 1200x1600px. Pour moi, ces 1200 pixels sont un minimum.

Une instruction conditionnelle en CSS

Une remarque sur les dispositions à largeur fixe.

J'adore la commande CSS qui permet au concepteur Web de s'adapter à une large gamme de largeurs tout en évitant les barres de défilement et en maintenant la lisibilité: "max-width". (Il existe quatre commandes comme celle-ci: largeur minimale, largeur maximale, hauteur minimale, hauteur maximale). Pour un div contenant du texte, spécifiez une largeur maximale de, disons, 65em.

Vous obtenez un if / else.
Si l'espace disponible est inférieur à 65em, le texte est redistribué en conséquence: pas de barre de défilement horizontale Si l'espace disponible est supérieur à 65em, le div contenant est défini à 65em.

Les moniteurs à écran large n'ont vraiment pris leur envol qu'au cours des 2 dernières années - ils étaient les options les plus chères.

Du point de vue de la conception, il a toujours été considéré qu'avoir une page Web (document) durait longtemps, de sorte qu'un utilisateur devait faire défiler vers le bas est largement supérieur à faire défiler quelqu'un pour plusieurs raisons. Premièrement, c'est la façon dont la plupart des documents informatiques ont tendance à fonctionner, c'est donc un modèle plus "normal"; vous avez une touche de bas de page, mais pas une touche de page en travers. Deuxièmement, nous avons des roues de souris presque omniprésentes de nos jours, donc faire défiler vers le haut / bas est une activité très facile, beaucoup plus facile que de faire défiler.

Enfin, comment choisissez-vous la résolution d'écran large que vous souhaitez atteindre - mon bureau est 1920x1080; mon ordinateur portable est 1440x900. Pour lequel concevez-vous?

Bien qu'il soit vrai que la plupart des moniteurs ont une orientation paysage qui sont vendus aujourd'hui, vous devez également tenir compte du fait que lorsque vous concevez un site Web, vous n'avez aucun moyen de savoir exactement quelle résolution d'écran le spectateur utilisera. Il y a encore 15% des utilisateurs d'Internet qui fonctionnent avec une résolution d'écran de 1024 ou moins. Cela ne laisse pas beaucoup de place à l'expansion horizontale avant de devoir faire défiler pour voir les informations. De plus, certains utilisateurs ne surfent pas sur Internet dans une fenêtre entièrement maximisée. La seule solution à ce problème consiste à développer une conception dynamique basée sur la taille de la fenêtre du navigateur. Si vous avez déjà tenté de le faire, vous seriez très hésitant à le réessayer à moins que cela ne soit absolument nécessaire car c'est une douleur royale. Il existe de nombreuses autres raisons d'avoir une largeur plus petite, comme cela a déjà été mentionné.

Il y a de nombreuses raisons:

• Les documents composés principalement de texte sont traditionnellement au format portrait, de sorte que le Web les conserve.

• Il est plus facile de lire des lignes de texte plus courtes. Je n'ai pas de citation, mais c'est un conseil de conception très courant, au point d'être une norme plus qu'une directive.

• Une conception qui privilégie l'étroit est plus flexible. J'aime fenêtrer mon navigateur sur seulement la moitié du plein écran de mon moniteur à écran large, et mettre quelque chose d'autre (généralement un éditeur de texte ou une autre fenêtre de navigateur) à côté. Ce n'est pas parce que je peux avoir une page Web de 1 920 pixels de diamètre que je veux toujours qu'elle le soit. C'est en fait un peu présomptueux de la part d'un concepteur de sites Web de faire des hypothèses sur la façon dont je vais (ou devrais) voir sa page. Me donne de mauvais flashbacks sur "Cette page est optimisée en 800x600 sur IE6."

• Un meilleur choix serait un design liquide qui évolue à n'importe quelle largeur, et CSS le fait bien fonctionner pour le texte (la plupart du temps, dans la plupart des navigateurs modernes, peut-être). Mais les images, la vidéo intégrée, le flash et d'autres objets intégrés modernes bousillent toujours ce genre de conception sans beaucoup de travail. Étant donné le choix entre une conception de mise à l'échelle flexible qui prend beaucoup de temps pour obtenir le droit par rapport à une conception éprouvée et à largeur fixe étroite, un grand nombre de personnes opteraient pour le chemin le plus facile (le moins cher).

• Le choix le plus flexible est quelque chose comme iGoogle, un canevas de composant WebPart réglable par l'utilisateur. Ensuite, votre texte peut être aussi large ou étroit que vous le souhaitez, avec des blocs de texte et d'images organisés comme vous le souhaitez. Maintenant, j'aimerais que vous imaginiez le cauchemar de chaque site que vous visitez nécessitant une personnalisation avant d'être lisible.

Pour l'instant, la norme de conception Web pour les sites est de développer en 960px de large pour s'adapter à une résolution d'écran de 1024px et plus (sans barre de défilement horizontale). C'est l'exigence minimale car tout le monde n'utilise pas un nouveau moniteur 24 pouces brillant. (pensez aux tablettes et netbooks qui sont de nouveaux matériels avec de petites résolutions)

Vous devez garder à l'esprit que la résolution d'une conception de site Web est affectée par l'audience ciblée et doit être adaptée en conséquence.

De plus, en termes de convivialité, les lignes de texte doivent avoir une largeur d'environ 11 à 14 mots (peut être plus si vous adaptez la hauteur de ligne) afin que tous les sites Web ne puissent pas gérer la conception fluide.

Au mieux, si vous ne voulez pas donner à vos visiteurs l'impression que la page en dehors de la zone de contenu n'est pas vide, vous pouvez ajouter des rayures de texture / couleur qui s'étendent au-delà et qui s'adaptent à la taille de l'écran de l'utilisateur. (comme sur http://www.cnn.com/ qui ne s'applique qu'à l'en-tête, mais vous pouvez le faire pour toute la page)

Pourquoi la plupart des sites Web sont-ils optimisés pour l'affichage en mode portrait?

Pourquoi imprimons-nous du papier en mode portrait alors que le paysage est également une option parfaitement viable?

Comme beaucoup de gens l'ont dit, il est plus facile de lire un plus grand nombre de lignes courtes que de lire deux ou trois lignes longues.

En dehors de cela, si vous remplissiez 1280 * x pixels avec du contenu, la page Web serait encombrée et personne ne saurait ce qui doit être adressé. Une page Web doit effectuer une tâche spécifique, pas CHAQUE tâche.

Les tendances du Web 2.0 nous apprennent à mettre moins d'informations sur une page et à rendre l'appel à l'action clair et concis. Cette philosophie de conception communément acceptée est l'exact opposé de ce que vous proposez.

Il y a BEAUCOUP de raisons de développer une résolution de 1024, mais je pense que le facteur d'encombrement est l'un des plus importants.

J'ai remarqué que vous utilisez ce qui semble être Windows 7, donc la réponse est: Win+←

Sur une note sérieuse cependant: La principale raison pour laquelle les sites Web sont optimisés verticalement est qu'il est plus facile de coder une mise en page de largeur statique en CSS et de la faire paraître correcte entre les navigateurs sur plusieurs plates-formes. Des largeurs de fluide sont utilisées occasionnellement, mais elles ne se prêtent pas à la lisibilité.

Lorsque vous regardez un film ou jouez à un jeu, c'est génial d'utiliser tout votre espace horizontal avec des trucs, mais avec la lecture, vous ne voulez vraiment qu'une petite colonne de texte pour que les yeux puissent numériser naturellement sans avoir à tourner la tête. Ajouter plus de conneries à gauche et à droite d'une page Web aura tendance à distraire du contenu principal de la page, de nombreux concepteurs laissent donc simplement vide pour avoir un espace blanc attrayant.

De plus, ce n'est pas parce que vous avez un bel écran que la majorité des gens ont un bel écran large. La taille du navigateur de Google est une excellente ressource pour vérifier les tailles de mise en page .

Votre moniteur est mal orienté. Le moniteur d'un programmeur doit être plus haut que large, en mode portrait plutôt qu'en mode paysage.