ほとんどのWebサイトがポートレートモードでの表示に最適化されているのはなぜですか？[閉まっている]

私はこれを理解できません。ほとんどすべてのモニターには、幅が高さよりもはるかに大きいアスペクト比がありますが、ほとんどすべてのWebサイトは逆の方向に正確に設計されていますか？私は実際にはWeb開発者ではなく、現時点で実験中ですが、この狂気は私を困惑させます!!!

編集：ポイントは、ウェブサイトの高さを制限したいということではありません。ポイントは、横向きモードで1920x1080を使用しているときに、利用可能なすべてのスペースを何らかの方法で埋めたいと思うことです。

編集2：これを見て、私が言っていることを理解してください

現在の行の最後に到達したときに、次の行を追跡せずに目がスキャンできる範囲には制限があります。最適な線幅と読みやすさに関する多くの研究（これを含む）がありました。

ある程度まで煮詰めることができるかもしれませんが、その時点で何が最適であるかを知るには、ユーザーがモニターからどれだけ離れているかを知る必要があります。そのため、ほとんどの推奨事項は、ems、文字、または単語での測定値です。ピクセル単位のサイズはフォントのサイズに依存しますが、一般的なコンセンサスは引き続き機能します。

個人的には、1080pの画面の全幅を使用するようにフォーマットされている記事を読むのは非常に困難です。きっとあなたもそうでしょう。現在の規則は、印刷レイアウトの設計ガイドラインに基づいており、レイアウトのガイドラインは実質的に変更されていません。唯一の違いは、ブラウザでページを操作できることです。

追加のコメント：（コメントで提示された質問から）

画面上でHTMLができることには制限があります。一つには、ページがありません。スクロールバーのみ。ブラウザがマークアップをどのように表示するかについて、適切な動作を設計することは非常に難しい命題です。複数列レイアウトのCSS3プロパティは、候補の推奨段階からまだ外れていません。この記事のリストで説明されているハックがあります。しかし、まだほとんどのサイトでプライムタイムの準備が整っていないだけです。

コンテンツがスクロールを必要としない限り、大丈夫です。すぐに、複数列のアプローチは、ユーザーがサイトとどのようにやり取りするかについていくつかの課題を提示する可能性があります。

現在のデファクト標準に関する解説：

質問の書き直し方法と提供した例に対処するために、Webデザインは競合する可能性のある多くの要件のバランスを取る必要があることを理解し、さらにWebサイトをプロフェッショナルに見せ続ける必要があります。デザイナーとクライアントのニーズのバランスをとるために、ほとんどの開発会社は1つの解像度で設計しています。その解決はすぐに 利用できるデータに基づいています。また、履歴Webトラフィックレコード、またはターゲット環境の知識に基づいて作成することもできます。

最も一般的な画面の幅（1024、1280、1366）は十分に近いので、最小（1024p）でデザインし、ページの中央にデザインする場合、他のわずかに大きい水平寸法でも見栄えがよくなります。すべてのフォーマットですべてを揃えることは非常に難しく、画面の幅に応じて複数のフォーマットをサポートする必要はほとんどありません。1080pユーザーの数は増えていますが、それでもサポートしなければならない人の割合は非常にわずかです。

興味のある方のために、「A List Apart」のデザイン記事のいくつかを熟読することを強くお勧めします。あなたがしたいことをするのは見た目よりも難しいという考えを始めます。1080pの設計に関する質問を投稿したとき、最初の最初の応答は「すべてを大きくする」というものでした。これは、ほとんどのWebデザイナーにとってまだ注目されていないものです。

ほとんどのウェブサイトは背が高く、幅が広いため、自然にスクロールしてより多くのコンテンツを読むことができます。私は個人的に水平スクロールバーが嫌いです。それらは廃止されるべきです！

ウェブサイトはまだ縦長であり、サイトは画面の下部を超えて広がっています。サイトの高さに制限はありません。

無限に長いWebページがあります（ありがとう、AJAX）、無限に広いページを見たらどうしますか？（私はデザイナーを追い詰めて殺します、ページから離れてクリックするだけでは十分ではありません、デザイナーは死ななければなりません。）

各行をスクロールして戻ると、1行が自殺します。これが、人々がページめくりアプリのような派手な本を作る理由です。そのため、スクロールする必要はありません。

前の回答を読んだ後、いくつかのポイントが欠落していることに気づいたので、それらを説明しようとします。

難しいカラムの実装

幅の広いページについて話すとき、「物理的な」新聞に見られるように、テキスト列について話していると思います。それには2つの問題があります。

まず、実際のHTML 4およびXHTML 1.0 / 1.1は、列にテキストを表示することを意図していません。Firefox（および他の通常のブラウザ）のハッキングがありますが、Internet Explhorrorでは機能しません。

次に、実際のFirefoxの実装または将来のHTML 5では、テキストを列に表示する必要がある場合、列の幅と列の数を指定する必要があります。高さを指定することはできません（たとえば、ページの高さから、ヘッダーの高さとフッターの高さを引いたもの）。ブラウザに列数を調整させます。

垂直スクロールバーを使用せず、水平スクロールバーのみを使用して列に使用可能なレイアウトを配置することは事実上不可能です。

高さ100％なし

実際のHTML / XHTMLは、ページの幅に応じて要素のサイズを調整することを目的としています。メトリックにページの高さを使用することは非常に困難です。

つまり、コンテンツを正しく表示するにはJavaScriptハックを使用する必要があります。つまり、JavaScriptを有効にしていないユーザーにとっては、Webサイトはまったく使用できなくなります。

半画面ページでの閲覧

16：9/16：10の大きな画面では、2つのウィンドウを並べて操作することは珍しくありません（Windows SevenではWin+ ←/ Win+ →）。これは、ブラウザウィンドウの幅が小さく、高さが大きいことを意味します。

固定幅と動的幅

ほとんどのWebサイトがポートレートモードでの表示用に最適化されているという仮定は間違っている可能性があります。

まず、ほとんどのWebサイトはまったく最適化されておらず、Web開発全般について何もまたはほとんど知らない人々によって作成されています。

第二に、固定幅のWebサイトと、ブラウザウィンドウの幅の割合に等しい幅のWebサイトには違いがあります。

最初のケースでは、ほとんどのWebサイトがポートレートにもランドスケープモードにも最適化されていないことに気付くでしょう。通常、幅は1024、800以下に固定されています。これは、1920 x 1080解像度の24インチ画面で表示する場合は意味がありません。

2番目のケースでは、24インチ画面で全画面モードでページを表示している場合、このWebサイトが横向きモードだけでなく縦向きモードでも正しく表示される可能性があります。

例：写真のギャラリーがあるウェブサイトを想像してください。ページにはサムネイルがあり、サムネイルをクリックすると、実物大の写真が表示されます。サムネイルがフロート左にあり、ページの動的な幅がある場合、横長モードでうまく表示されます。本格的な写真を見るのは特に素晴らしいことです。

現代のモニターが横向きモードになっているのはなぜですか？

1. ビデオ形式。HDビデオは、横向きのディスプレイに適しています。
2. 読書。左から右または右から左のいずれであっても、横向きモードの場合、スクロールすることなく完全な行の大きなブロックを読みやすくなります。

編集：コメントを確認し、元の質問の意図を再構成した後、今日最も一般的な2列と3列のレイアウトを何らかの理由で狙っているようです。このために、ウェブサイトの履歴の簡単な小さな要約：

Webサイトがポートレートモードでの表示に最適化されているのはなぜですか？

私は彼らがそれのために最適化されているとはまったく思わない。多くの場合、特定の側面を常に利用可能にすること、特定の側面を常に利用可能にすること、特定の側面を特定のコンテキスト内でのみ利用可能にすることの間の妥協です。せいぜい、あなたはそれが呼び出し最適な妥協だろう。

コンテキスト固有のコンテンツと並んで各ページにコア、予想されるナビゲーション、およびセカンダリコンテンツを配置できるため、2列および3列のレイアウトがそのまま普及しています。Webの初期の頃は、多くのサイトが動的なナビゲーションリスト（または表示したいメニュー）を使用して、単一列レイアウトとして表示しようとしたレイアウトを試しました。メインコンテンツ。しかし、それは2つの部分に分かれた課題でした。b）使いやすさ：直感的でない、または不必要な狩猟ゲーム（ナビゲーション用）および破壊（いくつかのソリューションがマウスクリック）。

これを克服するために、ほとんどのサイトは事実上の標準を採用し、結果を受け入れました。一方のナビゲーションと他方のコンテンツを表示する2つの列、またはセカンダリの非コアナビゲーションコンテンツを常に表示できるように3番目の列を追加します（コンテキスト関連のヘルプ、メモ、広告、または最近のライブストリームを示す通信ストリーム）サイトまたはコンテキストに関連するアクティビティ）。コンテキストの実際のコンテンツは中央に固定されています。

これは固定幅レイアウトと呼ばれます。全幅レイアウトまたは流動体とも呼ばれます。固定幅が使用される理由があります。1つは、モニターの解像度が使いやすさに影響することです。私のように27インチの巨大なモニターを持っていると、サイトは恐ろしく見えます。すべてのテキスト、写真、すべてが非常に広がっているので、レイアウトやサイトを把握するのは難しいでしょう。固定レイアウト流体レイアウトは、サイトのリストまたはデータタイプで主に使用されます。たとえば、eBayは、より良いエクスペリエンスを提供するため、リストで流体レイアウトを使用します。フォーラムは、流体レイアウトの恩恵も受ける可能性があります。または、固定幅のサイトのほうがビジネスサイトのメリットが大きくなります。

確かなことはわかりませんが、印刷されるほとんどの「文書」は縦向きで印刷されるように設計されており、多くの人が今でもウェブサイトを「文書」として設計しています。別の可能な説明は、モニターの幅がモニターの高さよりも大きく変化することです...

一般的には、長い間アクティビティを見ていないスレッドに回答を投稿することはお勧めできません。ただし、まだ言及されていない関連事項がいくつかあると感じています。

最初に、数か月前に発見した次のFirefox拡張機能について言及しましょう。ColumnReader

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

なぜ垂直にスクロールするのですか？

比較のために、縦の列に書かれた言語を考えてみましょう。そのような言語では、現在のワイドスクリーンモニターが理想的です。それがどのように機能するかです：あなたはあなたの線の方向に垂直にスクロールします。書籍のページは、行が水平であるため、縦長形式です。

以前の回答で指摘されているように、ブラウザーのレイアウトエンジンのリフロー機能は、垂直にリフローするように調整されています。

マルチカラム機能

ブラウザの開発チームは、次の方法で複数列の機能を追加することを選択できます。最初にページ全体を単一の列としてレンダリングし、次にそれを利用可能なウィンドウスペースのピクセル高さでストリップにカットし、それらのストリップを横に表示します。バイサイド。しかし、列の幅はどれくらいですか？実際のテキストに非常に小さな幅が使用されている場合でも、多くの場合、ページは使用可能なウィンドウスペースの幅全体に対して特定の背景色をコード化します。
次に、レンダリングエンジンは安全に動作し、水平方向のスペース全体を1つの列に割り当てる必要があります。

Webデザイナーがリフローする複数列レイアウトを実装することは可能ですか？
それは深刻な困難に陥ります。使用可能なウィンドウスペースの高さと幅を取得し、Javascriptでストリップを列にカットして配置する必要があります。次に、2つの部分にカットされた画像の処理方法を決定する必要があります。

そのようなことを処理することが、レイアウトエンジンの機能です。複数列レイアウトのリフローを容易にするJavascriptライブラリを作成しようとすると、Javascriptでレンダリングエンジンが作成されます。それはプラットフォーム内のプラットフォームを作成しています。

モニターサイズ

事実上、ここ数年でコンピューターのモニターが縮小したことはいらいらします。大きなモニターの高さは1200ピクセルで、現在は1050のみです。はい、幅は広くなっていますが、テキストの場合はスペースを利用できません。

また、縦向きでは、これらのモニターは狭すぎます。
両方のモニターを縦向きにして、両方のモニターが1200x1600pxのデュアルモニターセットアップを使用しています。私にとって、これらの1200ピクセルは最小です。

CSSの条件ステートメント

固定幅レイアウトに関する注意。

私は、スクロールバーを避けて読みやすさを維持しながら、ウェブデザイナーが広い範囲の幅に対応できるようにするCSSコマンドが大好きです： "max-width"。（そのような4つのコマンドがあります：min-width、max-width、min-height、max-height）。テキストを含むdivの場合、たとえば65emの最大幅を指定します。

if / elseを取得します。
使用可能なスペースが65em未満の場合、テキストはそれに応じてリフローされます。水平スクロールバーなし使用可能なスペースが65emを超える場合、含まれるdivは65emに設定されます。

ワイドスクリーンモニターは、過去2年で実際に発売されたばかりで、以前はより高価なオプションでした。

設計面では、Webページ（ドキュメント）が長くなるため、ユーザーが下にスクロールしなければならないことは、いくつかの理由で誰かをスクロールさせるよりもはるかに優れていると常に考えられてきました。まず、これはほとんどのコンピューター文書が機能する傾向があるため、より「通常の」パターンです。ページダウンキーはありますが、ページオーバーキーはありません。第二に、最近ではほぼどこにでもあるマウスホイールがあるため、スクロールアップ/ダウンは非常に簡単な操作で、スクロールするよりもはるかに簡単です。

最後に、どのワイドスクリーン解像度を使いたいかをどのように選択しますか？私のデスクトップは1920x1080です。私のラップトップは1440x900です。あなたはどちらを設計しますか？

ほとんどのモニターは現在販売されている向きが横向きであることは事実ですが、ウェブサイトを設計するとき、視聴者が使用している画面解像度を正確に知る方法がないことも考慮する必要があります。幅1024以下の画面解像度で操作しているインターネットユーザーの15％がまだ存在します。これにより、情報を表示するためにスクロールする必要がある前に、水平方向に拡張する余地があまりありません。さらに、完全に最大化されたウィンドウでインターネットをサーフィンしないユーザーもいます。この問題の唯一の解決策は、ブラウザウィンドウのサイズに基づいて動的なデザインを開発することです。あなたがこれをやろうとしたことがあれば、王室の痛みとして絶対に必要でない限り、あなたはそれを再び試みることを非常にためらうでしょう。すでに述べたように、幅を小さくする理由は他にもたくさんあります。

いくつかの理由があります。

• ほとんどのテキストのドキュメントは伝統的にポートレート比であるため、ウェブはそれを保持します。

• 短いテキスト行を読む方が簡単です。引用はありませんが、ガイドラインよりも標準であるという点で、非常に一般的な設計アドバイスです。

• ナローを優先するデザインは、より柔軟です。私は自分のブラウザを私のワイドスクリーンモニターのフルスクリーンの半分だけにウィンドウ化して、その横に何か他のもの（通常はテキストエディタまたは別のブラウザウィンドウ）を置くのが好きです。私はちょうどので、できる 1920ピクセルでWebページを持っている間では、私は常にそれになりたいわけではありません。実際には、Webデザイナーが自分のページをどのように表示する（または表示する）かについての仮定を立てるのは少しむずかしいです。「このページはIE6の800x600で最適に表示されます」への悪いフラッシュバックを与えてくれます。

• より良い選択は、任意の幅に拡大縮小するリキッドデザインであり、CSSはテキストに対してうまく機能します（ほとんどの場合、ほとんどの最新のブラウザーではおそらく）。しかし、画像、埋め込みビデオ、フラッシュ、およびその他の最新の埋め込みオブジェクトは、多くの作業なしで常にそのようなデザインを台無しにします。正しく動作するのに長い時間がかかる柔軟なスケーリング設計と、実際の狭い固定幅設計を選択することを考えると、かなり簡単な（より安価な）パスを選択する人はかなりいます。

• 最も柔軟な選択肢は、ユーザーが調整可能なWebパーツキャンバスであるiGoogleのようなものです。次に、テキストを好きなだけ広げたり、狭くしたり、テキストや画像のブロックを好きなように配置したりできます。今、私はあなたが訪問するすべてのサイトの悪夢が読める前にカスタマイズを必要とすることを想像してほしい。

現在のところ、サイトのWebデザイン標準は960ピクセル幅で開発し、1024ピクセル以上の画面解像度（水平スクロールバーなし）に対応することです。誰もが光沢のある新しい24インチモニターを使用するわけではないため、これは最小要件です。（小さな解像度の新しいハードウェアであるタブレットとネットブックを考えてください）

Webサイトのデザインの解決は、対象となる聴衆の影響を受けるため、それに応じて調整する必要があることに留意してください。

また、使いやすさの観点から、すべてのWebサイトが流動的なデザインを処理できるわけではないため、テキストの行は約11から14ワード幅（行の高さを調整すればもっと大きくなる可能性があります）

コンテンツゾーンの外側のページが空でないという感覚を訪問者に与えたくない場合は、せいぜい、ユーザーの画面のサイズに合わせて拡張するテクスチャ/カラーストリップを追加できます。（http://www.cnn.com/のように、ヘッダーにのみ適用されますが、ページ全体に適用できます）

ほとんどのWebサイトがポートレートモードでの表示に最適化されているのはなぜですか？

ランドスケープも完全に実行可能なオプションであるのに、なぜポートレートモードで紙を印刷するのですか？

多くの人が言っているように、2行または3行の長い行を読むよりも、多数の短い行を読む方が簡単です。

それ以外に、1280 * xピクセルをコンテンツで埋めると、Webページが乱雑になり、対処する必要があるものが誰にもわかりません。Webページは、すべてのタスクではなく、特定のタスクを実行する必要があります。

Web 2.0の傾向により、ページに表示する情報を減らし、行動を促すフレーズを明確かつ簡潔にすることができます。この一般的に受け入れられている設計哲学は、あなたが提案しているものの正反対です。

1024の解像度で開発する理由はたくさんありますが、クラッターファクターはより重要なものの1つだと思います。

答えはあるので、私は、あなたがWindows 7のように見えるもの使用していることに気付きました：Win+←

ただし、ウェブサイトが垂直方向に最適化される主な理由は、CSSで静的な幅のレイアウトをコーディングしやすく、複数のプラットフォームでクロスブラウザに見えるようにすることです。流動的な幅は時折使用されますが、読みやすさには向いていません。

映画を見たりゲームをしたりするとき、すべての水平方向のスペースを使い切るのは素晴らしいことですが、読書では、頭を回す必要なく目が自然にスキャンできるように、本当に小さなテキストの列だけが必要です。Webページの左右にさらにがらくたを追加すると、ページの主要なコンテンツから気が散る傾向があるため、多くのデザイナーは空白のままにして魅力的な空白を作成します。

また、優れたモニターを使用しているからといって、大多数の人がワイドスクリーンモニターを使用しているわけではありません。レイアウトサイズを確認するための優れたリソースは、Googleのbrowsersizeです。

モニターの向きが間違っています。プログラマーのモニターは、横ではなく縦に、幅よりも高くなければなりません。