Responsive VS適応設計：ユーザーにとって何が良いですか？ 適応レイアウト：それが何であるかの使い方

インターネットユーザーはサイトを閲覧します 別の機器 さまざまなサイズのスクリーン付き。 スクリーンのサイズは絶えず変化しているので、そのサイトがそれらのいずれかに適応することが重要です。 簡単に適応させるサイトを作成するための2つの主なアプローチがあります 他の種類 デバイス：

レスポンシブデザイン（RWD） — レスポンシブデザイン - 特定のプロパティ値を持つサイトデザイン、たとえば、1つのレイアウトが異なるデバイスに機能することを可能にする柔軟なメッシュレイアウト。

適応設計（AWD） - 適応設計、または動的表示デザインサイトは、固定幅のいくつかのレイアウトに基づいて、デバイスによって変わる条件を持つサイトです。

1.レスポンシブデザインテクニック

レスポンシブウェブデザインの哲学は、サイズのサイズに関係なく、サイトはあらゆるデバイスからの視聴に便利だったことです。 言い替える レスポンシブデザイン イーサンマーコッテは2011年に発明されました。 応答ウェブ設計の主な特徴は、モバイル（流体）メッシュレイアウトが自動的に反応し、スクリーンのサイズを変えるために自動的に反応し、バルーンのように吹き込むか縮小することによるものです。

レスポンシブデザイン （eng。 応答ウェブデザイン。3つの技術を組み合わせる - 柔軟なレイアウト メッシュに基づいて、 柔軟な画像 そして メディアレジスター.

柔軟性のレイアウト それは固定ピクセル値の代わりに相対的な測定単位の使用に基づいており、それによって利用可能なスペースに従って幅を調整することができます。

テキストの内容の柔軟性 デフォルトのブラウザ16PXのフォントサイズを基準にして、例えば固定サイズのフォントサイズの場合は、フォントサイズを計算することによって達成されます.12px相対サイズは42px / 16px \u003d 2.625emです。

問題 柔軟な画像 サイト上のすべての写真のIMG規則（幅：100％;最大幅：100％）を使用して解決します。 この規則は、画像がコンテナよりも広くなることはなく、大きな画面での真のサイズを超えないようにします。

メディアレジスター タイプ、幅、高さ、向き、画面解像度など、コンテンツの表示に関連するデバイスの特性に基づいてスタイルを変更します。 メディアレジスタの助けを借りて、レスポンシブデザインが作成され、そこには適切なスタイルが各画面サイズに使用されます。

図。 1.レスポンシブデザイン

追加の改修設計技術

スケーラブル ベクトルグラフィック - 品質を損なうことなく、任意のサイズにスケーリングされているSVG画像を使用し、網膜ディスプレイによく見えます。

カードインタフェース - いわゆるカードインターフェースを使用します - 丸い角を持つ長方形の数字。コンテンツ用のコンテナです。 そのようなブロックは自己十分なインターフェースユニットであり、それらをレイアウトに簡単に移動させます。

図。 2. Pinterest、マップベースのレイアウト

最も必要なだけ残す - 特にレスポンシブデザインのための良い受信。 今やますます人気があるようになっている対応性でフレンドリーなミニマルなインターフェースを作成してください。

図。 ウェブデザインのミニマリズム、ホテロック

優先順位を配置し、コンテンツを正しく隠します - 特に小さな画面を持つデバイスには、隠されたコントロールを使用してください。 ポップアップウィンドウ、タブ、オフキャンバスメニュー、およびその他の同様のテクニックは、ページ上のアイテムの数を減らすのに役立ちます。 不要な要素からスペースを解放すると、インタフェースをユーザーに便利でフレンドリーにします。

ボタン用の大きな衝突スペースを作成します - ボタンのアクティブな領域が大きいほど、ユーザーがそれと対話しやすくなります。

インターフェイスに対話性を追加します。 - ユーザーのアクションに応答して、応答アクションを作成します。デスクトップデバイス上の要素を介して、およびモバイルデバイスの項目に触れるときに機能するアニメーション。

2. Meta Tag Viewportを使用したビューポートの設定

携帯ブラウザのためのものへ オペレーティングシステム AndroidとiOSは自動的にページのページのサイズを変更していない、特別なタグが使用されます name \u003d "viewport"属性を持つ。 このタグでは、幅と初期スケールパラメータに特定の値を設定できます。

- initial-scale \u003d 1ブラウザのページサイズが視聴領域の100％に等しくなることを示唆しています。 すなわち、物理ピクセルとCSSピクセルの間の比率は1：1となる。

- width \u003d device-widthは、ページの幅が任意のブラウザのウィンドウの100％の幅に等しくなることを示唆しています。 つまり、サイトページの幅はデバイスの幅に対応するため、スケーリングされるべきではありません。

に この例 ブラウザウィンドウの内容は物理サイズと比較して2倍になります。

タグも ユーザーがどのようにしてページの幅を増減させるかを制御するために使用できます。

このコードは、デバイス画面の3倍の幅に等しい値までページの幅を増やし、デバイス画面の幅の半分に減らすことができます。

ユーザースケーラブル属性を使用して、スケーリング機能のユーザーを奪うことができます。

3.ユニバーサルテンプレート

応答的なWebデザインを作成するために使用されるレイアウトのほとんどは、LuchokleVskiによって定義された5つのカテゴリのテンプレートのうちの1つに属します。
ほとんど流動性 （最もゴム）、
列降下 （互いの列）、
レイアウトシフタ （移動レイアウト）、
小さな調整。 （小さな変化）、
キャンバス外。 （外側の画面）
場合によっては、列のドロップやキャンバスなどのテンプレートの組み合わせをページで使用できます。

3.1。 ほとんど流動性

人気レイアウトは主にゴムグリッドからなる。 大幅または中幅のスクリーンでは、そのサイズは通常変更されず、大きな画面ではフィールドだけが調整されています。 小さな画面では、ゴムグリッドによってレイアウトが主要な内容のために再計算され、列は互いに配置されます。 テンプレートの利点は、小さな画面と大きな画面の間に1つのチェックポイントしか必要としません。

3.2。 列降下

ウィンドウの幅がすべてのコンテンツを表示できない場合、列は1つずつ配置されます。 その結果、列は互いに垂直に配置されます。 このレイアウトテンプレートのチェックポイントを選択すると、コンテンツによって異なり、各デザインオプションごとに別々に決定されます。

3.3。 レイアウトシフタ

幅が異なるスクリーンのためのいくつかのチェックポイントを提供するように、最も敏感なパターン。 このレイアウトの主な違いは、描画ツリーの再計算の代わりに、列を配置することで、コンテンツは互いに移動します。 メイン間の大きな違いによる コントロールポイントこのレイアウトをサポートすることは、さらに挑戦的な作業ですが、一般的なコンテンツレイアウトだけでなくその要素も変更される可能性があります。

3.4。 小さな調整。

テンプレートはレイアウトの変更を小さくします。たとえば、フォントサイズを調整し、画像のサイズを変更したり、コンテンツを移動したりします。 1つの列、た\u200b\u200bとえば1ページのサイトや多数のテキストの記事で構成されるレイアウトでうまく機能します。

3.5。 キャンバス外。

たとえば、ナビゲーション要素やアプリケーションメニューなど、使用されていないコンテンツが画面の外側に配置され、画面サイズを作成できる場合にのみ表示されます。 小さな画面では、コンテンツがワンクリックで開きます。

適応設計

レスポンシブデザインとは異なり、 適応デザイン （適応型Web設計）デバイスのサイズを向けた。 コントロール（回転）ポイントに基づいて、さまざまな種類のデバイス（モバイルデバイス、タブレット、デスクトップコンピュータ）に複数の静的レイアウトを使用します。 つまり、レイアウトはデバイスブラウザウィンドウの特定のサイズでロードされ、レイアウト間の遷移は急激に行われず、スムーズに発生しません。

通常、適応レイアウトには、画面の幅に応じて6つのレイアウトオプションがあります。
320
480
760
960
1200
1600.

アダプティブレイアウトでは、主な役割は機能によって再生されます。つまり、デザインを作成するときに、デバイスの官能管理などのデバイスの機能、デスクトップモニタ用の大きなスペースが考慮されます。

基本的な適応設計技術

シーケンスを貼る - どのサイトでもユーザーとの信頼関係を作成する必要があり、ナビゲートして対話するときに快適に感じました。 シーケンシャル設計は、サイトの別のページに切り替えるとき、ユーザーは他のサイトに着いたという気分がないことを意味します。 小さい詳細に注意を払って、視覚的な階層を構築し、重要な要素を強調表示します。 サイト全体でシリアルカラースキームを使用し、異なる状況、たとえば同じポップアップ通知デザインなどの項目を再使用してください。

グリッドを使用してください - 12列の構造は、列の幅とそれらの間の伸びを制御することがより好ましいです。

5.応答と適応的なWebデザインの違いは何ですか

図。 4.さまざまなデバイス上の応答と適応的な設計

応答的なレイアウトを作成するために、Media RecorderとGrid要素の相対寸法が使用され、％に設定されます。 適応設計では、サーバースクリプトは最初にデバイスの種類を決定します。これにより、ユーザーがサイトにアクセスしようとしている（デスクトップPC、電話またはタブレット）、その後最も最適化されているページのバージョンを正確にロードします。 固定PX寸法はグリッド要素に設定されています。

したがって、これらのテクニック間の主な違いは、すべてのデバイスの1つのレイアウト、各タイプのデバイスの1つのレイアウトの1つのレイアウトです。

6.便利なサービスとツール

Windows用のAndroidエミュレータ、Linux、Mac OS X.IOSシミュレータはMac OS Xユーザーにのみ使用可能で、Xcodeパッケージの一部です（無料でダウンロードできます。 Macアプリ。 お店）。

任意のWebサイトで実行されているPHPスクリプトは、画面のサイズを決定し、その下の画像のサイズをカスタマイズします。これは、最終的には小さな画面で小さな画像サイズを示します。

高さと幅のCSS値の物理的な寸法、およびモバイルデバイスのピクセル比の値のコンプライアンステーブル。

メディアレジスタと応答Webデザインを使用したWebサイトのコレクション。

CSSフレームワーク12列のマークアップ、最大960px。 Chrome、Safari、Firefox、つまり7以上、ブラウザのモバイルバージョンがサポートされています。

Webアプリケーションを開発するためのツールのセット。 LANGEN、12列のアダプティブマークアップ、モバイルデバイス、タブレット、モニター、複数のコンポーネント、ボタン、ドロップダウンメニュー、自分の入力フィールド、リスト、ヘッダー、ラベル、アイコン、アレット、タブ、プログレスバー、ポップアップTIPS、「アコーディオン」、「カルーセル」など、さまざまなJavaScriptプラグイン、ブートストラップスタイルの使用を含めて、既に作成されたHTMLの使用を含む、足場のサポート。

グリーティング、ランダムな訪問者、そして通常のブログの読者のウェブサイト！

このサイトの存在中は、テンプレートを数回変更し、自分のスクラッチから自分のものを作成しました。
新しいテンプレートを選択するときの主なタスクの1つは、すべての画面解像度の下での適応型サイトレイアウトです。

ショートプラン記事：

前の記事では、私はすでにそれについて書いています、そしてなぜ彼が必要としていました。 しかし、この適応性を達成する方法は？

これにはさまざまな方法があります。 誰かがJavaScriptを使用しています。 しかし、私は最も簡単かつ正しい方法が適応的であると私は信じています cSSを使用する。.

適応型サイトのレイアウトを作成する方法

最初に、 適応型サイトデザインを調べる必要がある場合は、タグ間 次のコードを挿入します。

私が適応的なサイトのレイアウトを作ろうとしたときに私が正しくそれをしなかったことだったのだったのは何ですか！
モバイルブラウザの問題は、サイトレイアウトのスケーリングにおけるモバイルブラウザの問題、さらには適応的であっても。

想像して、私はデザインを描く、それから私は必要なスタイルと要求をすべて処方し、異なる権限を持つサイトの適応性をチェックします。 すべてが良いようです！ しかし、スマートフォンでブログを開くと、そのサイトが単純に現れたことがわかりました。 モバイル機器には適応しておらず、単にフォント、写真などのサイズが小さくなりました。

どうして？ 私はクラスを正しく処方したかどうか、最終的にはJavaScriptを介してPXのブラウザウィンドウの幅をチェックしたという点に達しました。 私は衝撃を受けた。 ラップトップをチェックするとき、私は1024pxの結果を受け取り、私がスマートフォン上のサイトを開くと同じ結果について！

しかしこれはできません！

それが判明 上記のコードを登録しないと、モバイルブラウザはサイトが適応的であることを理解していません そしてそれが携帯電話の小さな画面に見えるようにサイトページを単に減らすことを試みる。

彼の愚かさと不能のために、私は多くの時間を失いました。 しかし今、私は永遠に思い出しました））。

適応レイアウトCSSメディアリクエスト

CSSを使用して適応性を作成するには、メディア要求を使用する必要があります。

それは好きなのですか？ はい、とても簡単です。 CSSファイルでは、次のような要求を登録する必要があります。

@media画面と（最小幅：1440px）および（最大幅：1599px）（）

このコードは、 "（）の間の囚人のスタイルが1440pxと最大1599pxの最小幅の画面に働くことを意味します。

つまり、画面の解像度に応じて適応する必要があるサイト要素のスタイルは、各可能なスクリーン幅ごとに別々に指定する必要があります。

適応型レイアウトで最も重要な画面解像度

• 320 px - モバイル機器（縦向き）;
• 480 px - モバイル機器（横向き）;
• 600 px - 小錠剤。
• 768 px - タブレット（縦向き）;
• 1024 px - タブレット（横向き）/ネットブック。
• 1280 PXなど - PC。

適応レイアウト時に強調して特別な注意を払う必要があるというこれらの許可のためのものです。 これらはスクリーン解像度の最も一般的なタイプです。

ブートストラップ適応デザイン

ブートストラップの適応レイアウトを作成するために使用するのが非常に便利です。 利便性は、ブロック、ボタン、テーブルなどを適応させるためのすべてのスタイルがあることです。 BootstPapですでに綴られています。 どの要素が割り当てられているクラスを見つける必要があります。

始めるには、Bootstrapの新鮮なバージョンをダウンロードしてあなたのサイトに接続してください。 WordPressへのスタイルとスクリプトの接続はそれ自身の特性を持っています。

ブートストラップのレイアウトは、ブロックまたは画面の幅が12の等しい部分に分割されているという事実によって特徴付けられます。 そして特定のクラスユニットの割り当ては、ブロックの幅を希望の部品数と等しく設定できます。

たとえば、このような設計により、8部のコンテンツ幅に1つのワイドブロックを選択できます。

ブロックの幅は画面幅に応じて自動的に計算されます。 また、モバイル機器を閲覧すると、これらのブロックが互いにシフトされます。

また、希望の部品数で、indentブロックをめっきりすることもできます。 たとえば、このようなデザイン：

画面左側にインデントを持つ10部のブロックが作成されます。

あなたが理解しているならば、ブートストラップを使って仕事をすることは非常に速く機能します。 これらのスタイルは正しく正しく機能し、そのサイトには何もない曲線があります。

将来的には、BoosSrapとの仕事で数レッスンを投稿する予定です。 したがって、この瞬間を見逃していないことをお勧めします。

サイトの適応性を確認してください

しかし、問題は発生します：サイトの適応性を確認する方法は？ ここでは、CSS、接続ブートストラップ、および目的のクラスを使用するためのメディア要求によって規定されていました。 そして、すべての画面解像度で、サイトが正しく適応されていることを確認しますか。

非常に正確で最も重要なこと 無料サービスこれは、適応型サイトに従事しているウェブマスターと頂点からの尊重と感謝の値です。

さて、あなたの記事は何ですか？ すべてクリア？ そうでなければ、コメントに書いて、私たちは一緒に理解します。

はい、適応的なサイトのデザインを作るために、あなたはうまくいく必要があります。 しかし、これらの作品はあなたのサイト検索エンジンに対する好ましい態度、そしてあなたのサイトの最も重要な訪問者に報いられます。

雑誌開発者を粉砕するための人気のあるオンライン出版物の極めて価値のある記事の翻訳「対応Web設計技術、ツールおよびデザイン戦略」の翻訳。

1月には、Adaptive Designに関する記事を掲載しました。 "レスポンシブWebデザイン：それが何であるか、そしてそれを使う方法とその使い方（Adaptive Web Design：それがどのようなものと使うか） Adaptive Webデザインは彼に多くの注意を引くことを続けていますが、それがどれほど異なるかを考える 伝統的な方法 ウェブサイトの開発、それを試していないデザイナーや開発者にとっては難しいように思われるかもしれません。

このため、適応型サイトを作成するときに便利なリソースのレビューをコンパイルしました。 レビューに含まれています 詳細ガイド独自の適応サイトを作成するために必要な実用的なアドバイスを含む、アプローチ、ツール、記事。

レスポンシブウェブデザイン

1. CSS遷移とメディアクエリ
CSS遷移とメディアクエリ

Elliot Jay Stocksは、CSSメディアクエリとCSS遷移を組み合わせる方法について詳しく説明します。 主な考え方は次のとおりです。 メディアを使う クエリでは、サイトが同時に動作する方法を確認するために、ブラウザの幅を常に変更します。 しかし、それがあなたのメディアクエリのうちの1つのうちにうまくいくたびに、スタイル間のハードトランジションが表示されます（たとえば、デスクトップの場合はタブレットの場合）。 Animationを使用してこれらのハードトランジションを滑らかにするためにCSSトランジションを使用しないのはなぜですか？

適応画像とビデオ

5.流体像
ゴム画像（ブラウザのスケーリングツール）

ゴム画像は、適応型ウェブデザインの中央テーマの1つです。 記事ではエタンマーコッテが与えられています 詳細レビュー クラシックコードフラグメントを使用してそれらを作成します iMG（最大幅：100％）、仕事の開始に必要なすべての必要な詳細と同様に。

電子メールアダプティブ文字

14.メディアクエリを使用してモバイルデバイス用の電子メールの最適化
最適化 eメール メディアクエリを使用したモバイルデバイスの場合

大きな文字を表示するには、特に大きな画像が文字に適用されている場合に、水平スクロールが必要です。 この調査では、キャンペーンモニタは、モバイルデバイス用に電子メールを最適化できる方法を説明します。 メディアクエリ そして、実際に使用するためにいくつかの有用な方法およびコードフラグメントが提案されている。

適応型Webデザインツール

あなたはデザインすることができます 適応デザイン スクラッチから、下記のツールを使用して、その作成プロセスをスピードアップして単純化するために使用します。

これは高速で小さいPolyfillです（機能のサポートされていない機能を追加するコードのフラグメント）は、IE6-IE8以降のCSS3メディアクエリからの最小幅と最大幅のプロパティをサポートするためにScott JEHLによって作成されました。

この小さな侵入から情報を使用して適応サイトを作成します。

ラピッドプロトタイピング適応設計のためのツール。 あなたは様々な人気のあるサイズのスクリーン、向き、そし\u200b\u200bてブラウザのためのCSSを設計することができます、電話（ブラックベリートーチ、Google Nexus One、iPhone、Motorola Droid）、タブレット（BlackBerry Playbook、iPad、サムスン） 銀河タブ。、Dell Streak）、モニタやテレビ（720p、1080p）。

デザイン結果をブラウザに直接表示し、Firebugなどの通常の開発ツールを使用できます。 代替のスクリーンフリーツールも試してください。

原則に基づくツール320以上 モバイル命令 （まず、モバイル機器）、ここではモバイル機器用に設計が作成され、タブレット、デスクトップPC、および大規模画面のために展開されます。 HTML5のボイラープレートへの補足として、そして別々に機能します。

これらは、多機能の高性能のモバイルWebアプリケーションを作成するためのカスタマイズ可能なテンプレートです。 クラスAクラスAのスマートフォン、Symbian、IE Mobileをサポートするためのクロスブラウザを受け取ります。 及び たくさんの モバイルブラウザのための異なる最適化

適応設計のためのフレームワーク

33. 1140 CSSグリッド

1140 CSSグリッドは、モバイルデバイスのサイズから1280pxモニタの幅のスクリーン上で動作するように最適化されています。 これはシンプルで柔軟なグリッドです メディアクエリ.

このCSSフレームワークは、最小限の努力で箱から直接小さな画面（例えば、電話）や小さな画面（たとえば錠剤）で開発するための良い基礎です。 さらに、それ自体のためのラバーCSSフレームワークを作成するための発電機があります。

フリードは、6,7,8,9,10,12および16列のゴムグリッドです。

流体グリッドは、6,7,8,9,10,12または16スピーカーのレイアウトを作成するモジュラーメッシュジェネレータです。

適応レイアウトを作成するためのCSSフレームワーク。 4つの基本レイアウトと3つのタイポグラフィセットが含まれています。

タイポグラフィに焦点を当てたゴムフレームワーク。

小さな流体グリッドは、12,16列または24列のあなた自身のゴムグリッドを作成するのに役立ち、それらの最大値と最小幅とペナルティをパーセントで設定します。

適応設計戦略

40.レスポンシブデザイナーのワークフロー
Adaptive Web Design開発者ワークフロー

Luke Wrblewskiは、主要な新聞の1つのサイトの近代化における適応Webデザインの原則の適用についてのEthan Marcotteのプレゼンテーションによって完成しました。 とりわけ、エタンはそれが適応ウェブ設計を設計するための方法論に関して、そして適応ウェブ設計の文脈におけるプロトタイピングのプロセスを表す方法を説明する。

Luke Wrblewskiは、様々なデバイスのデザインの現実について、スティーブンの干し声の間に破壊開発会議でメモを行った。

アダプティブWebデザインに関する議論とさまざまな観点

これらの記事は、これらの記事はチュートリアルではありませんが、Adaptive Webデザインテクニックを使用する必要がある理由に関する貴重な情報を提供することができます（そしてこれを行う必要がない場合）。

ツールやテクニックとしてではなく、適応設計の優れたデザインへの紹介。 Jeremy Keithは、Adaptive Web設計を既存のワークフローへのステップとして簡単に追加できないと主張しています。 ピクセルの完全化を達成する代わりに、プロポーションの完成度を達成しなければなりません。

公開は、適応設計の分野でベストプラクティスを蓄積するための哲学と戦略の組み合わせです。

メディアクエリを使用するWebサイトの定期的に更新されたコレクション。

9シリーズでは、ビッグウェブショーJeffrey ZeldmanとDan Benjaminはエタンマーコッテを招待して適応デザインを議論しました。

記事への優れた追加は、開発者が経験を共有してレズポンシブツールレビューを記述する適応デザインについてのブログになります。

応答ウェブデザイン。

レスポンシブデザイン

cSS3

タグを追加する

誰もがAdaptive Webデザインについて話します。 しかし、これは誰もが彼のために必要なものを理解することを意味しますか？

応答設計は、モバイルデバイス用のサイトの開発だけでなく、ここでは異なる画面サイズ（ビューポート）にレイアウトを適応させることです。

このレッスンでは、このテクニックの最良の概念については、適応型Webデザインで横たわっている基本原則を調べます。 その後、大規模な画面で完全にスケーリングされる適応型ウェブサイトを作成します。 回答者のWebデザインは、iPhone、iPad、BlackBerry、およびその他のスマートフォンやインターネットアクセスのあるタブレットなどのモバイルデバイスを使用すると、非常に人気がありました。

サイトが特定のデスクトップまたはモバイルデバイスの下に構築されないことを理解することが重要です。 ここではレイアウトがさまざまなサイズに適応する能力が重要です。

残念なユーザー

いくつかの人々は、カット機能性と彼らが重要であると考えるコンテンツを排除し、それはユーザーにとって正常です。 しかし、セカンダリページに切断または移動した情報が私にとって最も重要なコンテンツではないことがわかります。

まず、それを理解する必要があります 住民デザインこれはモバイルデザインの懸念だけではありません。 第二に、良い適応的な場所の開発には、メディア要求の助けだけでなく、大量の時間と労力が必要です。 巨大で絶えず増加する数のWebデバイスを使用すると、あなたのウェブサイトにユーザーエクスペリエンスを効果的に促進する機会を与えることが非常に重要です。

応答Webサイトの場合、私たちは同じコードを使うことができます デスクトップコンピューターそしてモバイルデバイス。 各デバイスのコンテンツを別途調整する必要がないため、これは便利です。 しかし、モバイルユーザーに不要なことを考えると、多くのWebサイトはその内容を隠します。 それには2つの問題があります。

• まず、サイトを通して見ているモバイルユーザーを効果的に罰する。
• 第二に、CSSの非表示スタイルは、コンテンツがロードされていないことを意味するわけではありません。 特に不良な接続を持つ人のために、それは特に有効性に影響を与えるかもしれません。

したがって、ウェブサイトを開発するための最良のアプローチは、まず第一に、モバイルまたは小型機器の設計を検討することです。 したがって、あなたはあなたのウェブサイトが与えるべき最も重要な情報に集中することができます。 そして、必要に応じて、あなたのメッセージのレイアウト、大きな画像、およびメディア要求がすでに既存の小さな画面設計に適用される条件付きロード方法を使用することができます。

ステップバイステップガイド

このレッスンでは、大規模画面と小規模画面の間で完全にスケーリングされているWebサイトを作成しました。 すべての画面サイズにすべてのコンテンツを保存します。 そしてメディア要求の助けを借りて、ナビゲーションは水平から切り替えられます 垂直ディスプレイ小型機器用。

適応設計における柔軟性の重要な要素は流体レイアウト幅です。 必要なのは、ラッパー、コンテンツ、および列の幅を作成するだけです。これは、さまざまな幅に適応されます。 それについての新しいものは何もありませんが、今はこれまで以上に重要です。 タスクを複雑にしないように、ナビゲーション、主画像、および2列からなる流体ページを作成します。これは、さまざまなサイズのデバイス上の場所を考慮に入れます。 また、repod.min.jsも含まれています。これにより、メディア要求はIE6-8で機能します。

メインのHTML構造：

それがCSSになると、最大幅をインストールすると良い考えになります、それはサイトがスケーリングから停止するのを止めるでしょう 巨大なスクリーンしかし、それはページの減少からは成り立ちません。 一定の幅から流動幅に切り替えるときの主な質問の1つは画像です。 CSSでは、この問題に対する簡単な解決策があります。 画像幅を100％に設定してください。 また、小さな画面でのOperaの平らな画像とSafarisの画像を避けるために、画像の高さに自動を追加します。

/ * Layout * / #Wrapper（幅：96％;最大幅：920px;マージン：自動; PADDING：2％;）#main（幅：60％; margin-右：5％; whoat：左;）は脇に（幅：35％; float：右;）/ *ロゴH1 * /ヘッダーH1（身長：98px;幅：216px; float：左;表示：ブロック：URL）0 0いいえ繰り返し; text-indent：-9999px;）/ *ナビゲーション* / header nav（float：right; margin-top：40px;）ヘッダNAV LI（Display：Inline; Margin-Left：15px;）ヘッダNav UL a a（テキストデコレーション：なしカラー：＃333;）＃333;）＃333;）＃333;）#SKIPTO LI（バックグラウンド：#CCC;）/ *ホーム写真* / #Banner（float：左; Margin-Bottment：15px;幅：100％;）#Banner IMG （幅：100％;高さ：自動;）

あなたのイメージはその親要素に完全な幅で表示され、それと縮小されます。 最大幅画像がそのコンテナの最大幅を超えないようにしてください。

大きな画像を使用すると、起動時刻に影響を与える可能性があります。 したがって、小さな画面では、ユーザーの画面サイズのサイズを決定する画像の応答方法があり、必要なものに応じてより多くの画像を与える。 この方法はまだ理想を呼び出すのが難しいですが、それでもそれを考慮する価値があります。

メインナビゲーションを切り替える

ナビゲーションを変更する必要がある理由は、結果として生じる最小化であり、それは繊細さとボタンを押すことの困難さにつながる可能性があります。 この方法を使用すると、ユーザーの人生が促進されます。 #mainと脇に変更したセクションを1つの列に接続するために変更したコードでも気付くこともできます。

/ *メディアクエリ* / @media画面と（最大幅：480px）（#skipto（display：block;）ヘッダーナース、#main、aside（float：左; left：左;左; margin：0 0 10px; width： 100％;）ヘッダナビゲーションLI（マージン：0;背景：#CCC; DISPLAY：ブロック; Margin-Bottment：3px;）ヘッダーNAV A（ディスプレイ：パディング：10px; text-align：center;）

あなたはいくつかのモバイルデバイスでは、あなたのウェブサイトはこの画面のサイズに対して自動的に圧縮されることに気付くでしょう。 この瞬間は、不快なコンテンツを隠すために画面のサイズを大きくする必要があるときに問題になりつつあります。

メディア要求を完全にエフェクトに入力できるようにするには、通常のモバイル、最適化された、レスポンスサイトには、次のようなものが含まれている必要があります。

幅の認識は視野領域のサイズに対して責任があります。 特定のピクセル数、幅\u003d 960、またはデバイス幅の値にインストールできます。これは、100％のスケールでの画素単位の画素幅です。 初期スケールプロパティは、ページが最初にロードされたときにスケールを管理します。 最大スケール、最小スケール、およびユーザースケーラブルなプロパティで、ユーザーがページの拡大縮小できる方法を制御します（詳細）。

応答（応答性）および適応型（適応）設計などの用語が使用されている。 最近 よく十分です。 それが判明したように、これら2つの概念はほとんど同じです。 この記事では、即応的で適応的なデザインが何であるかについて説明します。そして、それらの違いは何ですか。

瞬間から始めて タブレットコンピュータ そして、スマートフォンは一般の人々に利用可能になり、より多くの頻度で、タッチコントロール、小さな画面でデバイスを使用して表示されます。 そのような装置の所有者の使用には多くのインターネットリソースが急激に不適切でした。
モバイルデバイスのためのサイトの作成には2つの根本的に異なるアプローチがあります：適応Webデザインと応答Webデザイン。 それらのそれぞれを別々に検討してから、それらの使用と機能を比較しましょう。

レスポンシブデザインとは

レスポンシブデザイン（Responsive Web DesignまたはRWD）は、サイトが計算で開発されているデザインを作成するためのアプローチです。最小限のレサイゼと不要なスクロールを備えたサイトの便利な表示幅広いデバイス Respestive Designには、次の機能があります。

• 「サンプル」デザイン要素を決定するためにJavaScriptを接続することなく、レスポンシブデザインレイアウトを排他的にHTMLとCSSに使用する場合。
• 応答レイアウトによって、さまざまなデバイス上のサイト要素がどのように見えるかを決定します。 ただし、これらの要素は他の要素に隠されていない/その動作、およびそれらによって実行される機能は変更されません。
• レスポンシブデザインの3つの基本原則：
  1. モジュラーグリッド内のすべての要素の位置。
  2. レイアウトとメディアファイル（画像を含む）のすべての要素は "rubber"（柔軟な）です - それらの寸法は画面のサイズによって異なります。
  3. メディアクエリの操作 - 設定できるCSS3モジュール 様々なスタイル 画面の解像度、そのサイズ、その他の特性に応じて（またはスタイルシートでも）。
• 応答設計は、適応マークアップ（適応設計と混同しないように）を使用して作成されます。 適応マークアップ（Adaptive Layout）は、サイトにいくつかのスタイル、モジュラーグリッド上の要素の場所、およびデザイン要素のスタイルのオプションのオプションがいくつかあります。 これらのオプションは、画面のサイズを変更するときに互いに置き換えられ、同時にいくつかの遷移点が形成されます。 異なる種 マークアップ/サイトスタイル。
• レスポンシブデザインは、ページ上の要素のオブジェクトモデルを使用した作業を意味するものではなく、マーキングの種類が変更されたときにブロックとオブジェクトの階層とネスティングのシフトを意味しません。

適応デザインとは何ですか

Adaptive Web DesignまたはAWDは、サイトレイアウトの異なる操作またはそのマークアップを使用した設計に基づくデザインです。

• 適応設計の場合、サイト要素は隠されていて、他の人に置き換えられます。 個々のWebサイト要素の動作と機能は異なる場合があります。
• 適応設計では、JavaScriptはサイト上のオブジェクトの動作と機能を制御するためにどこにでも使用されます。
• Adaptive Designでは、ページ上の要素オブジェクトモデルを使用する必要があり、異なるデバイスに対する階層/ネスティングのシフトを意味します。
• 同じ種類のサイトとその機能を提供することは必須ではありません。 別のブラウザ。 上記のような設計は特定の種類の装置に適合されているため、古いバージョンのプログラムではサポートされていない新しいテクノロジを使用することが可能です。

定義の混乱

Runetでは、応答的で適応的な設計の概念は互いにほとんど識別されています。 これらのアプローチは主に適用されるタスクと異なることを理解する価値があります。

適応マーキングと適応設計は根本的に異なることです。 サイトの適応マークアップは、さまざまなデバイス上の要素のスタイルを変更することを意味し、レスポンシブデザインに使用されます。 適応設計は、Webサイトの前面を設計および作成するための独立したアプローチです。

アプローチの特徴

どのような重要な側面では、応答性と適応的な設計は劇的に異なります。
スピードサイト。 ユーザーがそのデバイスで作業するために、ユーザーがサーバーからデザインの部分のみをダウンロードする必要があるため、適応設計の原則に登録されたサイトを数倍高速にロードできます。 応答的な設計の場合、訪問者が使用する装置に関係なく、ユーザはすべてのスタイルや画像がロードされるまで待つことが強制されます。
開発の複雑さ。 適応型デザインを持つサイトの作成には、開発者からより高いプロフェッショナルレベルが必要です。 特に、JavaScriptを使用した堅調な作業経験。
SEOの側面 噂によると、Googleははるかに忠実な忠実な遺跡は、適応的なサイトを指します。

実際に

実際には、適応性とは対照的に、即応したレスポンシブデザインはかなり頻繁に満たしています。 明らかなように：結局のところ、最初に実装やマスターが簡単です。マーケティング担当者で販売されているテンプレートの介護は答え、そして適応的ではありません。
適応設計は、深刻で多機能の製品で使用されることが多いです。 最も明白な例：In. モバイルバージョン VKontakteネットワーク、Googleからのメール。

P.S. あなたが注意を払うならば、私たちのサイトのレイアウトはデザインのレスポンシブデザインの一例です。 コンピュータ上で確認するには、ブラウザウィンドウの幅を変更してみてください - モバイルルックに移動してサイトマークアップスタイルが徐々に変換される方法に気付くでしょう。