新しいWebページレイアウトを作成するとき、さまざまな画面サイズのすべてのデバイス（携帯電話、タブレット、デスクトップなど）を考えます。この多様性に対応する2つの方法があります。1つは、あらゆる画面サイズに合わせて調整する完全に流動的なレイアウトを構築することです。一方、一般的なサイズに最適化するレイアウトを作成することもできます。この方法は、画面サイズが大きく異なる新しいデバイスと衝突することを避けられない可能性があり、ある程度の初期設定とターゲットサイズのテストが必要になります。
これらのルートのいずれかが他のルートよりも望ましいでしょうか、または私が考慮していない別のオプションがありますか？
回答:
レスポンシブデザイン（「アダプティブ」デザインとも呼ばれます）は、同じWebページがブラウザーの幅に応じて2つ以上の手作りのレイアウトの最適なバージョンを表示するもので、ほとんどのWebサイトで最も強力なオプションです。理由を確認するには、Webデザイナーが使用できるすべてのオプションを確認すると役立ちます。
ブラウザーの幅に関係なくコンテンツの幅が同じである固定ページ幅は、デバイス間で統一されたルックアンドフィールを提供し、より柔軟なデザインよりもコーディング、思考、および保守が少なくて済みます。
固定幅レイアウトは、すべてのブラウザーでピクセルの完全性と統一された外観を求める人々が過ぎ去った時代の遺物だと感じる人もいます。Hardboiled Web Designの著者であるAndy Clarkeは、この考え方は死んでいると感じています。
「以前は、どのブラウザでも同じように見え、同じように機能するWebサイトを作成するために懸命に戦うことが標準的な方法でした。
これはハードボイルドですか？
甘い頬、自分で子供をしないでください。これは、クラフトを進化させたり、より良いWebを構築したりする方法ではありません。このような昔ながらの考え方が私たちを引き止めています。私たちが正しいことだと知っていることをやらないことの言い訳をせざるを得ません。ウェブの現在の管理者として私たちができる最悪のことは、何でもできることを制限できるようにすることです。」
— Andy Clarke、ハードボイルドWebデザイン、 p6 [PDF版はこちらから入手可能 ]
固定レイアウトは怠inessの高さだと考える人もいますが、固定幅デザインは、流動的またはアダプティブレイアウトよりも非常にスマートなデザインチームによって選択されたままです。たとえば、Appleは現在、iPadやiPhoneと同じレイアウトをiMacに提供しています。モバイルWebブラウジングを大衆にもたらす責任を負う企業が、モバイルデバイス向けにWebサイトを最適化しないのはなぜですか？
必要だと思わないからです。
AppleはWebサイトを小さな画面に適応させる代わりに、ハードウェアとソフトウェアを構築して、それらの画面で広いWebサイトを快適に処理できるようにしました。Appleは、「モバイル向けに最適化された」エクスペリエンスは、ブラウザウィンドウではなくネイティブアプリケーションで提供するのが最適だと考えています。そのため、モバイル向けに最適化されたWebストアではなく、Apple Storeアプリを提供しています。そして、それは出版社が仕立てられたウェブサイトで雑誌アプリを提供することを奨励する理由です。Appleの現在のWebデザイン哲学は明確です：それらをすべて支配する1つのレイアウトはすべてうまくいきます。他のすべてのために、そのためのアプリがあります。
この理由だけで、固定レイアウトは相変わらず関連性があると主張する人もいます。モバイルブラウザーソフトウェアの改善と、HTMLとJavaScriptが進化し、開発者をサイロ化されたアプリストアから引き離すのを待つ間、流動的でアダプティブレイアウトはギャップを止めるだけだと言われます。
私の意見では、モバイルデバイス上でピンチタップドラッグドラッグでWebを自由にスクロールするのは、iPhoneであってもまったく楽しいものではありません。最適なWebエクスペリエンスが、使用しているデバイスに関係なく、雑用ではなく、Webサイトの閲覧、公開、および対話を楽しいものにするものであると考えている場合は、それぞれに合わせたコンテンツを提供することを認める必要があります訪問者は検討する価値があります。
ページの幅が画面いっぱいになるように流れる（多くの場合、強制最大幅まで）流動的なレイアウトは、ビューポートにより適した幅でコンテンツを配信することにより、さまざまなプラットフォームでより良いエクスペリエンスを約束します。
このクイップでCameron Mollが指摘しているように、実際には、流体レイアウトは解決するよりも多くの問題を引き起こします。
「...流体設計は、コンピューターがオフィスをペーパーレスにするのと同じように、すべてのレイアウトの問題を解決します。
— Cameron Moll、「すべてのサイトは流動的である必要がありますか？」、 2006年9月
流動的なレイアウトを採用すると、デザインの制御を放棄し、テキストのリラップ、画像のリフロー、行の長さの予測不可能な変化、テキスト、画像、ナビゲーション要素が小さな幅で一緒に押しつぶされ、列がジャンプしてフロートすることを受け入れますあなたをいじめるためだけに。
流動的なレイアウトは、怠sayなオプションでもあると言う人もいます。これは、適応型Webデザインへのショットガンアプローチです。3つまたは4つの慎重に検討された固定幅設計で調整されたエクスペリエンスを提供する代わりに、大小の画面で機能し、十分に考慮されていないすべてのギャップを埋めることを期待して、予測不可能なエクスペリエンスを提供しています間に。
これにより、流動的なレイアウトが役に立たなくなります。それらを機能させる方法があります。456ベレア聖のブログは、例えば、それは大きな何のための固定のものを使用した後に所定の幅に流体レイアウトを採用しています。幅が非常に狭い場合、サイドバーはドロップダウンして、小さな画面で読みやすくする単一の列を使用します。しかし、これはもはや流動的なレイアウトではありません。より良いものです。それは応答デザイン。
「レスポンシブ」または「アダプティブ」レイアウト-同じWebページが訪問者のブラウザー幅に応じて2つ以上の細工されたレイアウトの1つのバージョンを表示する場合-は、Webサイトを最高の外観にすることを目的としたプログレッシブエンハンスメントの重要な部分ですすべての訪問者に対応できます。
アダプティブWebデザインの作者であるアーロン・グスタフソンの言葉を借りれば、アダプティブレイアウトを採用することは「優れたカスタマーサービス」です。サイトをうまく設計すれば、訪問者が大騒ぎしていることに気付かずに、完璧に細工された体験を提供すべきだと彼は言います。
「ウェブデザイナーやデベロッパーとして、私たちはその丁寧で控えめなウェイターと同じように仕事をするよう努力する必要がありますが、それは簡単な作業ではありません。特定のユーザーのニーズがサイトに到着したときにそれを知る方法がありません。代わりに、それらのニーズを満たすために上昇する必要があります。ありがたいことに、プログレッシブエンハンスメントのユーザーおよびコンテンツ中心のアプローチ（グレースフルデグラデーションの最新ブラウザーアプローチとは対照的）により、これは簡単に達成できます。」
— Aaron Gustafson、Adaptive Web Design、 p12 [PDF版はこちらから入手可能 ]
Webデザイナーとしての私たちの仕事は、訪問者に順応することであり、Appleが信じているように私たちに順応させることではないという認識は、Webデザインのかなり最近の開発です。私の意見では、それはある種のルネッサンスです。私たちは、長年の印刷デザインから良い習慣を選び取り終えました。ここで、印刷されたページの事前定義されたスペース内で作業することによって課せられた束縛を捨てなければなりません。
ブラウザを固定キャンバスとして扱ったところ、定義済みのキャンバスがまったく存在しないことを受け入れました。これは、訪問者の統計に間違いなく表示されるようになった画面サイズの巨大な組み合わせからますます明らかになっています。 。新しいデバイスをそれぞれターゲットとする固有の「ページサイズ」として扱うのではなく（そして新しいデバイスが登場したときに部隊を結集する必要があります）、より将来性のある規約に従うことができます。
特定の携帯電話やタブレットを考える代わりに、「大」、「中」、「小」というバンドの観点から考えることができます。そして、それらのバンドで最高に見えるサイトを設計します。新しいデバイスが出てくると、それらは1つのバンドまたは別のバンドに収まり、2つのバンドの境界線上にある場合でも、固定または流体を使用した場合よりもエクスペリエンスをさらに制御できますレイアウト。
でレスポンシブウェブデザイン、イーサンMarcotteが武器に、このコールを提供しています：
「手放す必要がある。
それぞれが特定のデバイスまたはブラウザーに合わせて調整された、切り離されたデザインを作成するのではなく、同じエクスペリエンスのファセットとして扱う必要があります。言い換えれば、より柔軟なだけでなく、それらをレンダリングするメディアに適応できるサイトを作成できます。
つまり、レスポンシブWebデザインを実践する必要があり ます。デザイナーとして必要なコントロールを放棄することなく、ウェブに固有の柔軟性を受け入れることができます。すべての作業に標準ベースのテクノロジーを組み込み、オンラインデザインに対する哲学を少し変更することにより」
— Ethan Marcotte、レスポンシブウェブデザイン、 p8 [PDF版はこちらから入手可能 ]
しかし、どのバンドを使用していますか？Ethan Marcotteは、レスポンシブWebデザインで次の3つを推奨しています。（彼らが何をしているのかを学び、警告を理解するには、は本つかむ。）
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Joni KorpiのLess Frameworkなど、適応型Webサイトの構築を支援するために設計された一連のCSSフレームワークもあります。
任意のブレークポイントを使用する代わりに、おそらくサイトのデザインにバンドを指示させる方が良いでしょう。ブラウザの画面幅を縮小し、デザインが破損するたびに、その幅を「ブレークポイント」の1つにする必要があります。デザインがすべての幅で適切に表示されるまで、幅を縮小し、CSSメディアクエリでブレークポイントを追加し続けます。そうすることで、デザインは、設計しようとしたほんの一握りの画面サイズではなく、すべてのデバイスで見栄えがよくなります。Chromeを使用している場合、開発者ツール（[表示]> [開発者]> [開発者ツール]）をオンにしてブラウザーの幅を減らすと、右上隅の現在の幅がわかりやすく表示されます。
考慮すべきもう1つの一般的なアプローチは、モバイルファーストレスポンシブデザインです。このスタイルでは、コアスタイルシートが最小のデバイスのスタイルを処理し、メディアクエリが他の方法ではなく大きな画面幅を処理します。これにより、特に多くのCSS背景画像を使用する場合、モバイルデバイスのパフォーマンスが向上します。（同じ方法でブレークポイントを構築します-ブラウザーの幅を最小にして開始し、上に向かって作業します。実際のデバイスをできるだけ多くテストして、オープンデバイスにアクセスすることを検討してください。ラボ）
要するに、うまくいけば、アダプティブデザインは、Webデザイナーと共同ガーデンWebユーザーの両方として目を見張って体験する喜びです。たとえば、日本の企業Information Architectsのサイトを見てみましょう。
アーロン・グスタフソンが予測したように、同じページにデザインが表示されるまで、自分が料理されていることすら知りません。
いずれの場合も、この体験はこれほど楽しいものではありません。コンテンツの読み取りを開始するためにページについて考えたり、操作したりする必要はありません。画面上で奇妙に見える理由に時間を費やしたり、タップしてからナビゲーション要素を確認するためにズームインしたりする必要はありません。君は。そして、それがレスポンシブデザインがほとんど常に他のオプションに勝る理由です。
現在推奨されている最善のアプローチは、さまざまなデバイスと画面サイズ/解像度を単一のアプローチで満たす必要がある「レスポンシブWebデザイン」と呼ばれるものを使用することです。
レスポンシブWebデザインの方法、理由、理由の概要を説明した素晴らしい記事は、http：//www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and-にあります。リソース/
どの程度スタイルがデザインに影響するかによります。サイズの柔軟性を制限する多くの要因、顧客の要件、サードパーティのコンテンツがあります。
見栄えが良く、あらゆるサイズにスケーリングするすべてのユーザーにとって非常に使いやすいサイトを構築できる場合、それは素晴らしいです！
次のオプションは、垂直メニュー、ナビゲーション補助などの特定の要素によって決定される最小幅のスタイルを持ち、メインのコンテンツを持つことです使用し、列のサイズを変更して残りの使用可能なスペースを埋めることです。それでも、特定のコンテンツ（バナー広告、ウィジェット、ビデオなど）によっては必ずしも簡単ではありません。
ほとんどのサイトで終わるのは、固定幅の共通分母レイアウトです。最低公分母とは言わなかったことに注意してください。自分の統計またはw3schoolsの統計を見ると、85.1％の人が1024ピクセル以上の幅のディスプレイを持ち、98.9％が少なくとも1024ピクセルの幅を持っていることがわかります。1024ピクセル幅のレイアウトの実装の容易さと必要な労力について考えてみましょう。そうすれば、1.1％多くの人が水平にスクロールする必要がなくなり、デザインされたWebサイトでこれが非常に一般的な選択肢である理由がわかります。
もちろん、あなたの聴衆を考慮してください、それはw3schoolsの訪問者と一致しないかもしれません。あなたのニーズに合っていない訪問者を意図的に疎外することもできます。Stuck In Customsは非常に幅広に設計されています。ターゲットは、主に大型ディスプレイで動作するグラフィックや写真に興味がある人たちだからです。また、経験がより大胆になります。