web-dev-qa-db-ja.com

Webアプリの固定幅とフルブラウザー

私はWebアプリケーション(ネットワーク管理アプリケーション)の設計の初期段階にいます。また、固定幅レイアウト(たとえば960px)と可変レイアウト(ブラウザーの全幅)のどちらを使用するかを実際に決めることはできません。

ビューが1つしかないWebアプリ(Googleの例、マップ、リーダー、Gmail、新しいGoogleグループ)は、ブラウザ全体の幅になる傾向があるようです。きっとある種のキャンバス+パレットのパターンを忠実に守っていると言えるでしょう。

複数のビューがあり、互いに非常に異なる可能性があるという点で、「Webサイト」により似ているアプリケーションの場合、固定幅レイアウト(たとえば、tender.com)を選択しているようです。

デスクトップアプリに慣れているユーザーは、メインビューが異なる「フルブラウザー」アプリに慣れていないと感じるかもしれません。率直に言って、メインウィンドウのレイアウトが大幅に変化するさまざまなモードを備えた単一のデスクトップアプリは考えられません(例を歓迎します)。

したがって、固定幅のレイアウトを使用することに傾いています。これは、ユーザーが上部のタブの1つを押したときに、「アプリ」のコンテンツがまったく異なるもの(何かのリストから)に変化しても怒鳴らないためです。たとえば、ネットワークトポロジビューに何か)。私の仮定は間違っていますか?

やや関連:

ウェブサイトの場合、可変幅レイアウトと固定幅レイアウトのどちらが良いですか?

16
jrydberg

サーファーがCtrl -+(またはCmd -+)を押してフォントサイズを大きくしたときに、より大きなモニターを利用したかったので、私は流動的なレイアウトを好んで使用していました。はるか昔の2008年頃、Ctrl -+を押すと、固定幅のページは本当に見栄えが悪くなりました。他にサイズが大きくなることはありません。テーブルとdivは同じ幅を維持し、テキストがオーバーフローしました。

ただし、現在のブラウザでは、Ctrl -+を押すと、「フォントサイズを大きくする」コマンドではなく「ズーム」のように機能するようになりました。ページ全体が均等に拡大されます。現在、私は好む:

  • 流体幅の使用グリッドまたはテーブルのようなデータまたはその他の情報が表示されているページ。重要な決定要因は、ユーザーがブラウザーのウィンドウを拡大した場合に、ユーザーがより多くの情報を表示するかどうかです。 Googleマップ、リーダー、Gmailについて言及しましたが、これらはすべて、ユーザーが画面を大きくすることでメリットを得られるアプリのIMOの優れた例です。

  • 固定幅の使用説明ページのページまたはブラウザのサイズを変更したページでは、追加情報は表示されません。例は、この非常にstackexchangeページと AppleのiMac ページです。

FWIW、私は流動的な幅の設計が説明的なページの価値よりも厄介であることを発見しました。

11
Hisham

ヒシャムの意見には全般的に同意しますが、流動的なデザインについての重要な考慮事項は、表示されるコンテンツの種類です。コンテンツが流動的に機能するかどうかではなく、グリッドやテーブルのデータがそれほど多くない場合もあります。

Gmailが機能する理由は、メールは主にテキストであり、折り返しが良いためです。ただし、テキストの最適な行の長さは通常約70文字であるため、すべてのユーザーにとってシームレスには機能しません。画面幅が22インチ以上の私たちの場合、メールメッセージの行の長さが長すぎます。大きなメールメッセージでは、複数の行を追跡するのが難しくなります。そのため、Hishamの2番目のポイントは理にかなっていますが、追加の理由でそれほど多くありませんテキストに関する情報。

テキストのサイズとUIの幅を設定して、ほとんどの読者が行ごとに最適な数の文字を表示できるようにするため、実際にはテキストの固定幅がより適切な選択です。ズームは一般的にすべてを大きくし、テキストサイズを増やすだけではないので、固定幅のデザインは完全性をよりよく保持することが期待できます。

5
jameswanless

それは、a)アプリとb)ユーザーに完全に依存します。とはいえ、本当のアプリケーションの場合、フルブラウザインターフェイスの使用はおそらく有用性に制限があると思います。デスクトップ上であっても、拡大されたサイズの恩恵を受けることができる何らかの「キャンバス」領域がない限り、多くのアプリが全画面表示になることはありません。

1つの例外は、おそらくモバイルデバイス用のWebアプリを作成することです。この場合、既に制限されている画面サイズにより、フルスクリーンレイアウトに移行します。

1
DA01

これは短い答えですが、本当です:

アプリがMockingBirdや280 SlidesのようなリッチなデスクトップクラスのWebアプリである場合は、ブラウザーの幅と高さ全体を使用しますが、ページ全体にスクロールバーを使用しないでください。

一方、WebアプリがGoogle検索、Twitter、Facebook、またはおそらくこのWebサイトのようなものである場合は、固定レイアウトまたは流動的なものを検討してください。

0
rightfold