Web サイトはウィンドウのサイズを変更して展開する必要がありますか?
https://stackoverflow.com/questions/27381
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私は純粋にユーザビリティの観点からこの質問をしています。ブラウザウィンドウのサイズを変更するときに、Web サイトを表示領域全体に拡大/伸縮する必要がありますか?
明らかな欠点があることは承知しています。
- 幅の広いテキスト列は読みにくい
- パーセントを使用して HTML/CSS を記述するのは面倒な場合があります
- 画像の幅が広すぎたり、長すぎるテキストのブロックが追加された場合、デザインが制限を超えて引き伸ばされてしまう可能性があります。(html/css をコーディングするのは面倒です)
私が思いつく唯一の長所は、ブラウザに組み込まれているフォントのサイズ変更を使用するユーザーが、両側に空白がある、わずか数語の長さの列を扱う必要がないことです。ただし、これは何よりもブラウザーの問題である可能性があると思います (Firefox 3 ではズームできます) すべて テキストだけでなく、いつでも便利です)
編集:スタック オーバーフローは固定幅であることに気付きましたが、コーディングの恐怖はサイズを変更します。ジェフはどちらの方法にも強いこだわりを持っていないようです。
解決
生の HTML はまさにそれを行います。データを変更して、ランダムなサイズのウィンドウで適切にレンダリングされないようにしていませんか?
昔は誰もが VGA スクリーンを持っていました。現在、そのような解決策は最も珍しいものです。将来、どのような解決策が一般的になるか誰にもわかりません。そして、なぜ特定の最小幅または高さを期待するのでしょうか?
ユーザビリティの観点から見ると、ユーザーに特定の解像度を要求することは、その解像度を使用していないユーザーのエクスペリエンスを低下させるだけです。ここから得られるもう一つのことは、 は 固定幅？私のフォントがデザイナーのフォントと異なるために正しくレンダリングされない固定サイズのウィンドウ (ポップアップ) をたくさん見てきました。
他のヒント
Web サイトの拡大縮小に関しては、ブラウザの「ズーム」機能を使用して適切に拡大縮小できる固定サイズの Web サイトが好きです。1920 解像度のモニターでは、小さなフォントを含む幅の広いページは望ましくありません。ズーム時に適切に拡大縮小するために Web デザイナーが何かをする必要があるかどうかはわかりませんが、FF3 のズームは素晴らしいですが、IE7 のズームは役に立ちません...
デザインは常識的な範囲内で流動的である必要があります。
CSS を使用する min-width そして max-width プロパティ (IE7 以降を含むすべてのブラウザで機能します) を使用して、デザインが過度に拡張されるのを防ぎます。
重要なことは、テキストのブロックを決して幅を広げすぎないことです。ウィンドウが拡張されると、読みにくくなるため、テキストのブロックが無限に伸びて一致することはできません。
人々が言っているように、それは実際にはサイトがどのような情報を表示しているかによって異なります。2 つの良い例は、StackOverflow と Google Images です。
stackoverflow が画面に合わせて拡大された場合、目が長い行をスキャンするのは難しいため、長い回答は読むのが面倒になります。これは次のとおりです。 その通り なぜ新聞はすべて段組みを使うのか、そしてなぜ本はすべて同じような幅なのか。
Google 画像では、基本的にコンテンツが幅 200 ピクセルの画像の束であるため、ブラウザの幅に合わせて拡大されても、完全に読み取ることができます。
基本的に、目は長いテキスト行を読むことを嫌うということを念頭に置き、それに基づいてデザインを作成してください。フォント サイズを大きくすると、すべてのレイアウトがそれに合わせて適切に拡大縮小されるようにサイトをデザインできます (これを行うサイトは www.geektechnique.org だけです。 ctrl and -/= または ctrl+scrollwheel, 、フォントサイズに応じてレイアウトの幅が変わります）
多くのことが好きだと思います:場合によります。私は通常、両方を行います。一部のコンテンツは、見栄えを良くするため、またはより多くのスペースを確保できない場合に固定幅のままになります。他のものは、便利だと思われる場合は 100% に設定されます。
これは、Web サイトのデザインがどれだけ複雑かに応じて決定する必要があります。グラフィックまたはコンポーネントの観点（コンテンツ div の量）のより複雑な要素によって、Web サイトがどの程度拡張できるかが決まります。一般に、ほとんどのグラフィック デザイナーの Web サイトはグラフィックを多用しているため、拡張できないことがわかります。ただし、情報 Web サイトは、画面上の読み取り可能なスペースを最大限に活用するために拡大縮小され、使いやすさのために複雑ではありません。それは本当に好みの問題です。
サイトの内容によると思います。SOFlow、フォーラム、その他のサイトは、多くの詳細を読み取ることに重点を置いているため、そのための情報が増えることは、私の考えでは大きな利点です。垂直スクロールは少ないほど良いです。
ただし、閲覧レベルの要求がそれほど要求されないサイトでは、個々の商品を表示するだけのブログや小売サイトであっても、幅を固定することで内容をより簡潔に保つことができます。
私は完全に流動的なデザインの大ファンです。長すぎるテキスト行に関するユーザビリティに関する苦情については...ブラウザ ウィンドウのサイズが原因でウィンドウが長すぎる場合は、ウィンドウを広くするのと同じくらい簡単にウィンドウを狭くすることができます。
注記：ブラウザのズーム機能を使用すると、固定レイアウトではテキストが押しつぶされてしまいますが、流動レイアウトではテキストが画面全体を占めることができます。
おそらくこれは単なるブラウザの問題ですが、流体を支持する議論であることは間違いありません
段落の幅がディスプレイよりも大きいと、Web サイトはまったく使用できなくなります。一行読むたびに、水平スクロールバーを前後に動かす必要があります。大学でWebデザインの学科をやっているのですが、教科書には画面の幅に合わせたデザインと書いてあります。 流動的なレイアウト.
私は流動的なレイアウトを使用して大きなクラスのプロジェクトをデザインしていますが、固定幅よりも少し面倒です。おそらく他の学生は誰もそれを使用しないでしょうし、マーカーも気付かないだろうし、私たちが真似しているプロのサイトも流動的ではありません。
ずっと流動的だと思います。 ユーザーは、ウィンドウを拡大した結果が気に入らない場合はいつでも小さいサイズのウィンドウに戻ることができますが、固定レイアウトについては何もできません。
大きな画面を使用するユーザーが何かをしたせいで、自分のサイトが醜く見えるという考えが本当に本当に嫌なら、少なくともそれは真実で美しいものです。 ピクセルベースの固定レイアウトは決して使用しないでください。 CSS には、「em」のような適切なテキスト相対サイズ単位があり、ページの一部をフォント サイズに合わせて拡大縮小し、他の部分 (画像など) は「自然な」サイズのままにすることができます。
これらを使用して、柔軟性に欠ける FF3 の「すべてをスケール」に依存せずにページを適切にスケールさせてみてはいかがでしょうか。FF3 は実際には愚かなピクセルベースの固定レイアウトを使用するサイトの単なる回避策です。
多くの人は、「これは味の問題」や「ハイピクルディスプレイの大きなフォントが好きではない」などを言っています。ピクセルの数はそれとは関係ありませんが、味の問題ではありません。これは DPI の問題であり、ディスプレイの解像度とフォント サイズに直接関係します。レイアウトがフォントの DPI に合わせて拡大縮小される場合 (たとえば、ems で指定され、SVG を使用することによって)、どのようなディスプレイでも最適に動作する、非常に美しく鮮明な Web サイトが完成します。
これはスタイリングの好みの問題です。実装によっては、どちらも同様に使用できます。画面が十分に広い場合は、列も使用できます。個人的には、画面上に 1 つの狭い列のテキストが表示されるのが煩わしいと感じます。
2012 年の編集:はい、Web サイトは、表示されているウィンドウのサイズに対応する必要があります。
これについて詳しくは、次のような場所がたくさんあります。
おそらく、固定設計と流動的な設計の間には妥協設計があるでしょう。サイトを流動的にデザインできますが、CSS プロパティを設定できます max-width 1024 (またはその他) まで。これは、次の場合に流動的なレイアウトが得られることを意味します。 window width 1024 未満であり、 fixed width それが大きいとき。
そうすれば、狭い画面のユーザー (私の 800 ピクセルの eee 701 など) は、すべての行を読むために水平スクロールバーを操作する必要がなく、広い画面のユーザー (ブラウザ ウィンドウのサイズを変更する方法がわからない) は 500 文字幅にならずに済みます。 , 1文字高の段落。
