ラバー、アダプティブ、レスポンシブレイアウトの違いは何ですか？ それらを正しく適用する方法は？
アプローチの違いを見て、3つではなく1つの共通点を定式化してみましょう。
モバイルWebが最も空想的でさえなかったとき、インターネット全体が小さな画面のデスクトップコンピューター上にありました。 1024 x 768およびInternet Explorer 5の解像度に最適化されています！ -誇らしげにサイトに書いた。 しかし、時間が経つと画面が大きくなり、どうにかしてこれに適応する必要がありました。 最初は単なるゴム製のテーブルでした。25％の列、50％の内容、そして別の行のcolspan=3
と最小幅のスペーサーです。 私が今話していることをあなたが理解していないことを願っています。
ラバーレイアウト-これは、レイアウト全体とその個々の部分に固定幅ではなく伸縮性を求める場合です（パーセンテージ）。 最小幅と最大幅を除きます。 原則として、ウェブの高さを設定することは慣習ではありません-通常、コンテンツに合わせて調整します。 修正またはゴム？ 2000年代のレイアウトデザイナーにレイアウトについて質問し、2番目の、より興味深いものを密かに希望しました。 今では想像するのは難しいですが、かつては複雑なレイアウトという画期的なアイデアでしたが、正しい方法で最初の一歩を踏み出しました。
レイアウトテーブルはなくなりましたが、ラバーレイアウトは残ります。 あなたが弾性フロートを持っている場合、たわみ...はい少なくともグリッド！ -それはまだゴム活字です。 しかし、外側のコンテナの幅が固定されている場合-これは、内側のゴムの量に関係なく、すでに固定されています。 もう少し普遍的な修正ですが、それでもです。 一般に、主なことは、サイトがウィンドウと共に何らかの方法で移動し、中央または端からレンガを突き出さないことです。
インターネットを備えたデバイスの輪が拡大し、最初のモバイルブラウザが登場したとき、何らかの形でそれらに適応するタスクが生じました。 単純なゴムはここでは対処できませんでした-スタイルを書き直す必要がありました。 2006年の最初の1つは、Mark van den Dobbelstinによるアダプティブレイアウトテクニックです。 A List Apartの記事で、 Markはウィンドウをロードまたはサイズ変更するときにクラスを追加し、各範囲のスタイルをハンギングすることを提案しました。 Safariでメディア表現を最初に実装するまでに2年がかかりました。
10年目の初めに、適応の理由と適応方法-モバイルブラウザーとメディア表現-が登場し、アプローチに名前を付けた本が出版されました。 アーロンとイーサンのアプローチはマークのアイデアを継続しましたが、より近代的な技術では、思考の方向が多少異なりました。
「アダプティブWebデザイン」アーロンは、サイトをデバイスとブラウザーの機能に柔軟に適応させることを提案しました。 この哲学の重要な部分は、セマンティックマークアップに加えて、プログレッシブ機能が強化された控えめなJavaScriptでした。 アーロンはこれについてまったく書いていませんが、アダプティブレイアウトの主なものは特定のアクセス許可とデバイスへのバインドであることは、今日一般的に受け入れられています。 スタイルは、あるブレークポイントから別のブレークポイントに切り替わります。つまり、iPadとiPhoneのレイアウトは固定されており、それらの間のレイアウトは気になりません。
レスポンシブWebデザインEthanは、ラバーレイアウト、柔軟な画像、メディア表現という3つのことを最前線に置きました。 イーサンは、すべてのサイズとインデントを、正確さのために狂った分数でパーセンテージで指定することを提案しました。 このアプローチの特徴は、特定のデバイスではなくコンテンツに焦点を当てたサイトのスムーズな変更でした。 つまり、ラバーレイアウトはiPhoneとiPadだけでなく、その中間のどこでも見栄えがよくなります。
少し後、イーサンは「モバイルファースト」という本で別の重要な原則を策定しました。 それまでデスクトップバージョンがレイアウトを調整するための出発点として機能していた場合、彼はスキームをひっくり返してモバイルバージョンから始め、それを改善することを提案しました。 なぜそう 単純なものを複雑にするのは、複雑なものを単純化するよりも簡単だからです。 ご覧ください！ また、単に非表示にする誘惑がないため、モバイルユーザーを適応させたり奪ったりすることは困難です。
さて、明らかになりましたか？ それは適応性があり、反応が速い...うーん、いや、そうでもない。 アダプティブレイアウトテクニックとアダプティブWebデザインの哲学の間の混乱により、これらのアプローチはすべて完全に組み合わされ、それらの間に明確な境界はもはや存在しないという事実のために-このため、用語の純度に言及し、すべてに名前を付け始めましたこれは、レスポンシブデザインまたはアダプティブレイアウトです。 この概念は、他のすべての方法に対応できるように常に十分に広くなっています。
また、10年前には、ゴムを使用せずにデバイスサイズを個別に適応させるという原則が理にかなっています。 今日のさまざまなデバイスでは、特定のサイズに依存し、それらの間で緊密に切り替えることは、いつか見逃すのが非常に辛いことを意味します。 さらに、希望するアクセス許可への適応を追加するために完全にゴム製のレイアウトを気にする人はいません。
さて、どのようにタイプセットするのですか？ シンプル！ 最初に、小さなデバイスにうまく適合するモバイルラバーモックアップを作成します。 また、画面またはウィンドウのサイズが大きくなり始めると、表示されるスペースを使用してインターフェイスを改善します。 横の列が表示され、2番目に、画像のサイズが大きくなり、新しい解像度が読み込まれます。 つまり、メディア式は、最もファッショナブルな電話の画面に到達したときではなく、サイトのコンテンツとユーザーの利便性のために必要なときにスタイルを変更します。 これはまさに、高度な組版のために集中的に行うことを教えていることです。
優れたレスポンシブWebサイトを作成するには、ビューポート、メディア表現、アダプティブ画像など、 多くのニュアンスを理解する必要があります。 今日、私たちは最初の一歩を踏み出し、アプローチを見つけました。それが唯一のアプローチであることがわかりました。 残りについてお話します。