web-dev-qa-db-ja.com

流動的なウェブサイトはもう作る価値がありますか?

私は今ウェブサイトを作っています、そして私はそれを流動的にするべきかどうか決定しようとしています。固定幅のWebサイトは作成がはるかに簡単で、一貫性のある外観にするのもはるかに簡単です。

正直に言うと、個人的には、モニターの幅いっぱいに広がる滑らかなWebサイトを見るのが好きです。私の質問は、ほとんどの最新のブラウザでは、コントロールを保持してマウスホイールをスクロールし、基本的にWebサイトのサイズを変更できるという事実から来ています。

では、流動的なWebサイトを作成するのは面倒ですか?

218
Adam

それはあなたの聴衆とあなたのコンテンツに依存します。

以下は私が尊敬するサイトであり、模倣する例です。

流体の例:

Amazon

ウィキペディア


静的な例:

アップル

eBay

[〜#〜] msn [〜#〜]

StackOverflow

[〜#〜] msdn [〜#〜]


Some Mix It Up!

[〜#〜] cnn [〜#〜]

私はほとんどの場合、静的を好むと思います。より多くのブラウザで見栄えを良くするのは簡単です。また、読みやすくなっています。

52
Bobby Ortiz

ウェブサイトを流動的にしますが、最小/最大幅の属性を追加することは、私にとって両方の長所のようです。流動性をサポートしますが、一定の幅(たとえば、800ピクセルと1200ピクセル)に制限します。

それはあなた次第です-ここに考慮すべきいくつかの事柄があります:

  1. 行が非常に長い場合、テキストは読みにくくなります。
  2. オーディエンスの解像度は通常よりも大きいか小さい場合があり、「間違った」静的な幅を選択するとユーザーを悩ますことになります。
  3. 流動的なサイトを維持することは可能ですが、静的なサイトよりもはるかに難しくする必要はありません。
43
Nick Presta

絶対に。ページのサイズを変更しなければならないのは、巨大なモニターを持っている人にとっては大きな不便です。レイアウトによっては少し危険な場合もあります。どんなに些細なことでも、実際にはあなたのサイトの人々の意見に影響を与えることはほとんどありません。

また、ネットブックには奇妙な解像度があり、サイトの設計が難しくなっています。たとえば、私はこれを1024x600で書いています。

最近のブラウザでも、特にmin-およびmax-heightはCSSで、新しいグラデーションなどはCSS3で、画像スケーリングは近い将来大きな問題にはなりません。

以下のコメントに応えて、私はこの特定のケースで長所が短所を上回っていると思います-IE6はどこでも問題です。対処する必要があります。

37
Lucas Jones

ほとんどのコンピューターユーザーは、ブラウザーをズームインする方法さえも知らないことに注意する必要があります。ほとんどのユーザーは、私たちが持っているコンピューターの理解からは程遠いです。私たちは常にその事実を覚えていなければなりません。

16
Alex Baranosky

テキストベースのアプリ:No。テーブルベースのアプリ:はい

流動的なレイアウトの長所

  1. 大きなモニターを持っている人は、画面のスペースを使用できます。
  2. ページに多くの情報がある場合、大きなモニターを持つユーザーにとっては簡単です。

流動的なレイアウトの短所:

  1. 流体幅のテキスト列は、幅が広すぎると読みにくくなります。新聞でコラムを使用する背景には、次の理由があります。次の行へのスキップがずっと簡単になります。
  2. CSSの制限のため、実装は(やや)困難です。

表形式のデータ(iTunes、dbマネージャーなど)を表示している場合、流動的な幅が適切です。テキスト(記事、wikiページなど)を表示している場合、流体の幅が悪いです。

9
August Lilleaas

IPhoneの観点から見ると、コードブロックを使用する場合、固定幅レイアウトは問題があります。ワイドコードブロックのスクロールバーが表示されないため、ブロックの右端を読み取ることができません。

それ以外の場合は、デザインしているサイトの種類と、さまざまなサイズの画面やウィンドウでどのように見えるかは簡単な問題だと思います。前述のように、最大​​幅を設定するオプションがありますが、同じ注意がコードブロックとiPhoneに適用されます。両方を設計しましたが、どちらかを好むことはありません。

ただし、流動的なレイアウトでブラウザのサイズを操作するときにボックスが動き回るのを見るのは楽しいですが、簡単に面白くすることができます。

最も重要なことは、Webサイトまたはアプリケーションの主要なユースケースを考慮することです。人々がモバイルデバイスでのみそれを使用することを期待していますか?携帯電話、ネットブック、デスクトップ?

Ethan Marcotteによる「Responsive Web Design」をご覧ください。 http://www.alistapart.com/articles/responsive-web-design/

メディアクエリを使用した、真に流動的なレイアウトの使用を示す優れた記事。ユーザーエージェントごとに別々のフロントエンドを構築する必要がある場合もありますが、メディアクエリは、ユーザーエージェントごとに複数の解像度を提供するのに最適なツールである場合もあります。

6
Elijah

何をしようとしているかによって異なります。 SOを見てください。それは固定幅であり、素晴らしいです。実際、もしそれが流動的であれば、それはちょっとしたPITAでしょう。一部のサイトは流動的なレイアウトで見栄えがよくなりますが、個人的には、流動的な適切な理由がない限り、固定された状態で行きます。

5
Jason

コメントには多くの良い点がありますが、あなたの質問から、あなたは本当に流動的なデザインが好きで、それを作成したいようです。それはあなたのサイトです。

すべてのソリューションの長所と短所に注意してください。

4
allesklar

ポイントまで-はい。

ある程度の幅があります。幅が広すぎると読みにくいテキストになります。大きなモニターを持っている場合は簡単にテストできます。メモ帳をつかんで、改行を入れずにテキストを貼り付けてください。

ただし、サイズを小さくする場合は、流動的であることをお勧めします。携帯電話のブラウザは、「通常の」ウェブサイトをよりうまく表示できるようになりましたが、幅に制限がある場合があるため、サイトが少し狭いスペースに収まる場合にメリットがあります。

個人的には、ブラウザーをモニター上に置いておきたいのですが、モニターの幅の半分(24インチ)だけにします。それにうまくフィットするサイトは非常に優れています。

これは主にユーザーの便利なケースだと思います。すべてのサイトが流動的であることの恩恵を受けるわけではありませんが、少なくとも最大幅(800pxなど)まで流動的である場合、多くのテキストコンテンツを持つサイトが最も恩恵を受けると思います。

3

序文:プロのウェブアーティストではありません。

携帯電話や超ワイド画面のサイズ、特にかなり複雑なものの場合は、あまりにも多くの手間がかかりすぎて物事を流せないことがわかりました。

通常、固定幅のサイトを何らかの方法で設計します。通常、[600,1200]で区切られます。

また、コンテンツの非常に広い列は読むのが面倒です。列の行ごとに最適な単語数を示唆する研究があることを覚えているようです。

2
Paul Nathan

このようにすることができます。

#メインレイアウトを滑らかにし、 'max-width:1140px'を適用して中央に配置します。

これにより、大きな画面では「長い行」のテキストは表示されず、小さな画面ではWebページが適切に解決されません(800x ***以下を除く)。

私は新しいプロジェクトにこのメソッドを実装しましたが、それは魅力的なものです。

a.t.b .. :)

2
iAnuj

はい。ページのズームは優れていますが、主にテキストを大きくするために使用され、テキストがビューポートを埋めるのではありません。確かに、本文のテキストがすでに広すぎる場合は、ズームダウンして収まるようにするのが普通です。

ズームされているかどうかに関係なく、テキストをビューポートに合わせる場合は、リキッドレイアウトが必要です。

「長い線が読みにくい」という点は、固定幅のデザインを正当化しようとするデザイナーによってしばしば誇張されます(*)が、実際には紙のように画面上でそれほど強く保持されていないようです。もちろん、適切な行送り/行の高さを設定することは重要であり、最大幅は、長い行の最悪の超過を抑制するために使用できます。 (フォント相対em単位で設定します。)IE6ではmax-widthを取得できませんが、それはかつての災害ではありません。 (それらの人を本当に気にするなら、少しのJavaScriptで修正できます。私はしません。)

(*高度にグラフィカルなレイアウトでは実際にはあまり機能しません。しかし、StackOverflowのような単純なレイアウトの場合、流動しない理由はありません。Tsk@SO、えっ!)

2
bobince

はい、流動的なウェブサイトは作成する価値があります
あなたが言ったように、設計段階で適切に計画を立てると、見た目も合理的です。

Ctrl + Scrollbarの影響についてのあなたの疑いは大したことではありません。この機能は主にアクセシビリティのためであり、サイズを大きくすることでテキストを読みやすくします。

ただし、ピクセル(px)ですべてのサイズを指定した場合は発生しません。適切な調整は、「em」を使用してサイズを指定する場合にのみ行われます。だから、あなたはそれをオン/オフにする方法を持っています

1
Narendra Kamma

流動的/修正された決定は、ウェブサイトのcontentにも基づいている必要があると思います。

  1. 大量の単純な情報(ニュースポータルなど)があるサイトの場合は、流動的なレイアウトを使用することをお勧めします。

  2. Webサービスの外観と動作は固定ディメンションでより良くなるため、インターフェイス要素がその場所にあり、常に移動しているわけではないことを常に把握できます。

1
Sergei

私は大多数に反対し、ノーと言うつもりです。理由:ウィキペディアのような流動的なサイトは、その長い行の長さのために大きな画面で読むのが悪夢です(ただし、その引用は、最高の状態で読むのを難しくしますが)。

画面の解像度に関連してテキストのサイズを調整するメカニズムがないため、問題が実際に発生します。より大きな解像度でテキストを自動的に大きくすることができれば、一般的に読みやすさで最高と見なされている1行あたり80奇数文字の近くに留まることができます。

画像やその他の固定サイズの要素の問題もあります。大きな画像を作成し、必要に応じてブラウザーに縮小させることができますが、多くのブラウザーでダウンロード時間が長くなる、画質の問題など、他の問題が発生します。

0
DisgruntledGoat

ユーザーに画面移動やズームをさせるのではなく、ユーザーの画面上でうまくスケーリングできるのはいいことだと思います。ユーザーがスマートフォンからウルトラモバイルPCに至るまで、さまざまなデバイスからWebをサーフィンしているとき、それぞれが独自の、場合によっては標準ではない解像度で、ユーザーエクスペリエンスを高いレベルで維持することが重要だと思いますサイトはそのような画面で表示されます。テキストの長さに関しては、一定の比率で区切ることができるため、レイアウトにうまく収まります。サイトを流動的に書くのに役立ち、コーディングの保守性に役立つフレームワークもあると思います。

0
luvieere

流体設計-本当に流体-は難しいです。とても厳しい。それはページ幅の問題だけではありません-フォントは拡大縮小できますか?また、すべてがフォントで拡大縮小しますか?理想的には:

  • サイズはemではなくpxで定義する必要があります
  • ...これはフォントだけでなく要素サイズにも当てはまります!
  • フォントサイズまたはズームレベルの変更を考えると、ページ要素は互いに同じサイズである必要があります

私たちの主力製品は流動的であり、特に多くのユーザー生成コンテンツを含むため、デザイナーとしての私の観点からは苦痛です。

たとえば、画像-固定幅のサイトでは、幅が半分になり、見栄えの良い画像を作成できます。流動的なサイトでは、この画像は空白の海で失われる可能性が高く、かなり孤独に見えます。

人生は一度楽になるはず_border-radiusおよびその他のCSS3プロパティがより有効になりますが、残念なことに、私たちの中心的な聴衆は政府の労働者であり、すべてがまだ使われていますIE F @!* ING 6!


質問に答えるには、「それだけの価値はありますか?」 はい、正しく実行した場合。

シナリオは次のとおりです。固定幅のサイトを選択します。上司が最新の1920x1600ラップトップでクライアントに表示し、「この男の画面ではすべてが小さく見える」と苦情を言います。

0
Keith Williams

私は<800pxに固定されているのが大好きです。狭い列を読むのが簡単で、willどこでも動作します。つまり、ハイパーテキストを表示するウェブサイトを作成しようとしている場合...アプリケーションのフロントエンドを表示するウェブサイトは、別のワームの缶が完全にあると思います...

0
tychoish

私は800px-1000pxの固定最大幅を持っているサイトのファンですが、横にスクロールせずに、またテキストがあまりにも多くなるためズームアウトせずにコンテンツを読むことができるように縮小することもできます読むのが小さく、目が痛い。だから、これは私が誇りに思うことができるサイトを構築したいので、私は通常私が努力したいです。

0
shingokko