レスポンシブデザインとレスポンシブデザイン：どちらがユーザーにとって良いですか？一般的な「動員」：レスポンシブデザインへの切り替え

こんにちは！最近、私のプロジェクトの1つの統計を見て、レスポンシブWebサイトのデザイン、つまり、次のように見栄えのするデザインを作成する方法を学ぶ時が来たことに気付きました。静止したコンピューターラップトップとモバイルデバイスおー。自分自身を見てください、メトリカはヒントを与えます。

この写真はどうですか？おそらく、モバイルトラフィックの割合が少なくなるトピックもあれば、増えるトピックもありますが、いずれの場合も、スマートフォンやタブレットからあなたを読んだ訪問者を無視することはできなくなります。

モバイルユーザーがあなたのサイトをどのように見ているか知っていますか？幸いなことに、チェックするための優れたサービスがあります-responsinator.com

ここにあるものはすべてとてつもなく単純です。Webサイトのアドレスを入力して、モバイルデバイスでどのように表示されるかを確認します。例として、誰もがおそらくよく知っているブログをチェックしてみましょう。

アレクサンダーボリソフは美しいテンプレートを持っています、あなたはすぐにお金がデザインとレイアウトに投資されているのを見ることができます、そして少しのお金ではありません。しかし、携帯電話からブログを読むのは非常に不便であり、モバイルユーザーのバウンス率がコンピューターからサイトにアクセスするユーザーよりもはるかに高くても驚かないでしょう。

何をすべきか？ 2つの方法があります。すべてをそのままにして、他のプロジェクトが検索エンジンの結果であなたのプロジェクトをバイパスする方法を監視するか、Webサイトのデザインをレスポンシブにする方法です。

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

画面の幅によってブロックのサイズが変わると、最初はレスポンシブレイアウトと流動的なレイアウトの違いがわかりませんでした。ただし、違いがあります。

レスポンシブデザインは、幅を拡大または縮小するだけでなく、画面に合わせて調整し、ボックスのスタイルを完全に変更することもあります。

最も単純な例：コンテンツ領域が画面の全幅に引き伸ばされ、サイドバーが下にドラッグされるか、ページから完全に消えます。または、メニューが通常の水平からドロップダウンリストに変わります。

あなたのウェブサイトのためのレスポンシブデザインを作る方法

予算とCSS / HTMLの知識に応じて、いくつかのオプションがあります。

フリーランサーにレスポンシブレイアウトを注文する

私の意見では、最も正しいオプションであり、最も人気がありません。喜びは安くないからです。それでも、資金が許せば、レイアウトの複雑さを理解したくない場合は、テンプレートをモバイルデバイスに適合させるか、新しいテンプレートを作成するスタジオまたはフリーランサーを見つけることをお勧めします。そして、あなたはすでに異なる解像度のデバイスでその動作をチェックする方法を知っています-responsinator.comが助けになります。

完成したデザインを探す

NS 最近ほとんどすべての設計者は、テンプレートをモバイルデバイスに適合させようとしています。たとえば、既製のデザインを検索できます。

www.templatemonster.comは、さまざまなCMSおよびHTMLサイト向けの有料テンプレートの最も人気のあるコレクションの1つです。
www.templatemo.com-無料のモダンなデザインオプションがたくさん。

このオプションは、排他的なデザインを追いかけていない場合や、テンプレートを一意にするためにコードを独自に編集できる場合に適しています。

フレームワークを使用する

フレームワーク（フレームワーク）-テンプレートのスケルトン、そのメインファイル、およびブロックのグリッドと言えます。テンプレートの既製の「魚」を使用すると、日常の時間を無駄にしないため、デザイナーは使いやすさと時間の節約でそれらを気に入っています。フレームワークの操作方法を知っている場合は、フレームワークを使用してレスポンシブデザインを作成することは優れたソリューションです。

Habréには、あらゆる好みに対応するレスポンシブフレームワークの膨大なリストがあります。しかし、それらのほとんどは使用が非常に難しく、量が多いです。したがって、ミニマリズムが好きな人には、Beloweb.comの軽量レスポンシブフレームワークの別のリストをお勧めします。同時に、ブログをよく見てください。デザイナーやレイアウトデザイナーにとって便利な「スイーツ」がたくさんあります。

自分でレイアウトを作成する

この方法は、簡単な方法を探しておらず、自分でそれを理解したい人のためのものです。基本的に、テンプレートをレスポンシブにするには、次の2つのことを使用する必要があります。

ビューポートメタタグ
これは、訪問者がサイトにアクセスしたデバイスのタイプを決定し、正しい画面幅を設定します。このコードをサイトの先頭にコピーするだけです。

@メディアルール
そのおかげで、cssファイルの同じブロックに異なるスタイルを書き込むことができます。これは次のようになります。

#left（width：600px; float：left; margin-right：10px;）＃right（width：400px; float：right;）@ media only screen and（max-width：1010px）（＃left、＃right（width ：98％;フロート：なし;マージン：10px自動;））

この例では、ブロック＃左幅は600ピクセルで、ブロックの左側に配置されます＃右幅400ピクセル。ただし、モニターの解像度が1010ピクセル未満の場合は、両方のボックスから折り返しを削除し、画面幅の98％に拡大します。

このように、次の画面サイズのルールを作成する必要があります。

iPhone3-5直立用320px
iPhone3-4の場合は水平方向に480px
水平位置のiPhone5の場合は568px
垂直位置のスマートフォンの場合は384px
水平位置のスマートフォンの場合は600px
水平位置のiPad用768px
iPad直立用1024px

解像度の完全なリストは、responsinator.comまたはサイトのYandex.Metricaレポート（セクションテクノロジー/ディスプレイ解像度）にあります。一言で言えば、サイトのレイアウトに精通している人にとって、この問題を理解することは難しくありません。

ご存知のとおり、有料コースへのリンクを提供することはめったにありません（私自身が使用したことのないものを推奨することは決してないため）が、これは私が今まで見た中で最高のレイアウトチュートリアルです。私のブログテンプレートがさまざまな画面解像度に適応するだけでなく、以前のバージョンよりも軽くなり、より適切に最適化されたのは、Mikhailのおかげです。サーチエンジン.

ちなみに、携帯電話で記事を読んでいる場合は、書いてください、すべてが整っていますか、すべてが便利ですか？今日は以上です。質問や追加がある場合は、コメントへようこそ。いつものように、誰でも参加できます。

現代のウェブサイトのレスポンシブデザインその品質の主要な指標の1つです。

インターネットへのアクセスに使用されるモバイルデバイスのシェアが絶えず増加していることは周知の事実です。この傾向は、インターネット全体と特にRunetの両方に典型的です。

また、訪問者、読者、潜在的な購入者を失いたくない場合は、タブレットからスマートフォンまでのモバイルデバイスにサイトが正しく読みやすく反映されていることを確認する必要があります。

さらに、検索エンジンは、モバイルデバイスに適合したサイトをより忠実にランク付けします。これは、サイトにそのような要件を直接課すGoogleのPSに特に当てはまります。

レスポンシブウェブサイトのデザインとは

レスポンシブデザインの意味は、サイトに投稿された資料をさまざまなデバイスで快適に表示および読み取ることができることです。

見やすさを評価するための主な基準は次のとおりです。

表示エリア。
コンテンツの幅。
フォント、画像、ビデオウィンドウのサイズ。
アクティブな要素。

言い換えれば、テキストは読みやすく、写真やビデオがはっきりと表示され、メニュー項目やリンクが表示され、アクセス可能で、理解しやすいものでなければなりません。

あなたのウェブサイトをレスポンシブにする方法

さまざまな画面解像度のデバイスで表示するためにサイトの応答性を確保するには、いくつかの方法があります。主なものは次のとおりです。

レスポンシブウェブサイトのテンプレート。
サイトのモバイル版。
インストール特別なアプリケーションユーザーのデバイス上。

経験によれば、最適な解決策は作成することですレスポンシブテンプレート..。他の2つの方法もこの問題を解決しますが、最初の方法よりも著しく劣っています。

モバイル版のサイトを使用する場合、労力、費用、時間は、アダプティブテンプレートの作成と改良に匹敵します。

ただし、運用中は、モバイル版のサイトの関連性を維持し、情報をメインサイトと同期するためのアクションが追加されます。また、SEOプロモーションのために、重複などの追加の質問が追加されます。

モバイル版の利点は、不要な要素、効果、広告、サブスクリプションなどがすべて削除されることです。このサイトはモバイルデバイスで正しく表示されるだけでなく、できるだけ早く読み込まれます。これが主な利点です。
そのようなバージョンはそれ自体に大きなポータル、サイトを可能にしますソーシャルネットワーク、大企業サイト..。

モバイルデバイスへのアプリケーションのインストールは、あなたにまったく依存しません。まず、すべてのデバイスがそれを展開できるわけではありません。第二に、それは追加の知識と行動を必要とし、すべてのユーザーが余分な面倒に同意するわけではありません。

このようなアプリケーションは通常、作成者を信頼し、作成者に新しいアプリケーションを期待するユーザーによってインストールされます。有用な情報..。これは、電子メールのサブスクリプションをいくらか思い出させます。

要約すると、サイトのレスポンシブデザインを作成することが、小規模または中規模のサイトにとって最も収益性の高いソリューションになると結論付けています。

レスポンシブサイトのレイアウト

レスポンシブデザインを作成するには、テクノロジーに頼る必要がありますアダプティブレイアウト..。その本質は次のとおりです。
テンプレートを「ゴム」にする

つまり、ページ幅に厳密にバインドするのではなく、相対的な単位を使用します。つまり、テンプレートを比例圧縮可能、つまり「ラバー」にします。

このために、ページ幅が設定されます cssプロパティ max-widthではなくwidthであり、すでにこの値に関連しているため、他の要素の幅はパーセント（％）で選択されます。

画面幅の「ブレークポイント」を定義する

決定するコントロールポイント（CT）画面幅は、さらなるアクションを計画するために必要です。

例えば。
最大画面幅は1000ピクセルです。タブレットの画面幅-800ピクセル、スマートフォン-420ピクセル。

これらのコントロールポイント（CT）は、他の種類サイト。たとえば600ピクセルで十分な場合もあり、テンプレートの「ゴムのような」ため、低解像度での表示品質が提供されます。

各CTスキャンの画面レイアウトの計画

これらのコントロールポイントに従って、モバイルデバイスに正しく反映されるように、サイト上の個々のブロックの場所を配置します。

これを行うには、一部のブロック、たとえばサイドバーをメインコンテンツブロックの下に配置する必要がありますが、広告、スライダー、スプラッシュ画面などのセカンダリブロックは完全に破棄できます。

このような問題の解決の詳細については、WebFormMySelfチームによるレスポンシブデザインの無料コースをご覧ください。

メディアクエリ

ブレークポイントを設定するには、メディアクエリを使用する必要があります。これらのディレクティブは、さまざまな画面解像度でサイトページのコンテンツの表示を制御するためのCSS3標準です。
このディレクティブは次のようになります。

@media only screen and（max-width：520px）（.art-Header-jpeg（高さ：80％;表示：なし;）。art-Logo（位置：固定;上部：10px;）。art-Logo-text（表示：なし;）..... .. ..... cssステートメント.....）

WordPressのレスポンシブブログテンプレート

WordPressブログのレスポンシブテンプレートは、いくつかの方法で提供できます。

適切なプラグインをインストールします。
既製のレスポンシブテンプレートを購入します。
既存のテンプレートを自分で調整するか、スペシャリストにサービスを注文してください。

時代に遅れないようにすることを決心し、私も自分のブログを適応させる準備を始めました。インターネット上のWordPressテーマ適応プラグインについてはたくさんあります詳細な情報..。私は人気のあるプラグインの作業と要件に精通し、それらの使用は私のブログにとって最善の解決策ではないと判断しました。

お金さえあれば、インターネットで最新のレスポンシブテンプレートを購入するのも非常に簡単です。しかし、あなたはテンプレート自体が好きで、あなたのすべての願いを満たす必要があります。

要するに、私は3番目のオプションに落ち着き、自分のテンプレートを自分で適応させることにしました。

レスポンシブWordPressテンプレートを自分で

モバイルデバイスにデザインを適応させるという原則に慣れてきたので、大胆にビジネスに取り掛かりましたが、html、css、phpに関する知識が十分ではないと感じました。

そして、私はすでに既製のテンプレートを購入することに傾倒し始めましたが、その瞬間、2人のAndreevBernatskyとKudlaiの「個人ブログからプレミアムテンプレートへのWordPressマスター」のコースに関する情報を受け取りました。このコースのブロックの1つには、モバイルデバイス用の既製のテンプレートの適応に関するレッスンが含まれていました。

コースの価格は、新しい最新のレスポンシブテンプレートの価格と同等でした。そして、この金額をコースの購入に費やして、既製のテンプレートの代わりに知識を得ることにしました。おもう。投資が正しく、完全に正当化されたこと。

モバイルデバイスと固定デバイスのサイト読み込み速度をチェックするためのGoogleサービス-https：//developers.google.com/speed/pagespeed/insights/
ここでは、サイトの読み込みを高速化するための対策に関する推奨事項も示されています。

さらにいくつかのサービスについて簡単に説明したいと思います。しかし、賢明な詳細な記事に出くわし、緊張するのではなく、それへのリンクを提供することにしました-http：//habrahabr.ru/post/189726/。

この出版物が気に入ったら、ソーシャルネットワークで友達と共有してください。
記事にコメントを追加できます。

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

レスポンシブデザイン（RWD） — レスポンシブデザイン-特定のプロパティ値を使用してサイトを設計します。たとえば、1つのレイアウトをさまざまなデバイスで機能させる柔軟なレイアウトグリッドなどです。

アダプティブデザイン（AWD）-レスポンシブデザイン、またはダイナミックディスプレイ-いくつかの固定幅レイアウトに基づいて、デバイスに応じて条件が変化するサイトをデザインします。

1.レスポンシブデザイン手法

レスポンシブウェブデザインの哲学は、画面サイズに関係なく、どのデバイスからでもサイトを簡単に表示できることでした。段階 レスポンシブデザイン 2011年にイーサンマルコットによって発明されました。レスポンシブウェブデザインの主な特徴は、流動的なグリッドにより、レイアウトが画面のサイズ変更、バルーンのように膨らんだり狭くなったりすることに自動的に反応することです。

レスポンシブデザイン（eng。 レスポンシブウェブデザイン）3つのテクニックを組み合わせます- 柔軟なレイアウトグリッドベース、 柔軟な画像と メディアクエリ.

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

テキストコンテンツの柔軟性これは、ブラウザのデフォルトのフォントサイズである16pxを基準にしたフォントサイズを計算することで実現されます。たとえば、固定フォントサイズ：42pxの場合、相対サイズは42px / 16px = 2.625emです。

問題 柔軟な画像サイト上のすべての画像にimg（width：100％; max-width：100％;）ルールを使用して解決しました。このルールにより、画像がコンテナよりも広くなることはなく、大画面で実際のサイズを超えることもありません。

メディアクエリ画面の種類、幅、高さ、向き、画面の解像度など、コンテンツの表示に関連するデバイスの特性に基づいてスタイルを変更します。メディアクエリは、各画面サイズに適切なスタイルを適用するレスポンシブデザインを作成します。

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

追加のレスポンシブデザインの秘訣

スケーラブルベクトルグラフィックス -品質を損なうことなく任意のサイズに拡大縮小し、Retinaディスプレイで見栄えのするsvg画像を使用します。

カードインターフェース-いわゆるカードインターフェイスを使用します-コンテンツのコンテナを表す角が丸い長方形。このようなブロックは、インターフェイスの自己完結型のユニットであり、レイアウト内を簡単に移動できます。

米。 2. Pinterest、地図ベースのレイアウト

必需品だけを残す特にレスポンシブデザインの場合は、良いトリックです。今日人気が高まっているレスポンシブでフレンドリーなミニマリストインターフェースを作成します。

米。 3. Hotellook、ウェブデザインのミニマリズム

コンテンツに正しく優先順位を付けて非表示にする-特に画面が小さいデバイスの場合は、非表示のコントロールを使用します。ポップアップ、タブ、キャンバス外メニュー、および同様のトリックは、ページ上の要素の数を減らすのに役立ちます。不要な要素のスペースを解放することで、インターフェースをユーザーフレンドリーにします。

ボタン用の大きなクリック可能なスペースを作成する-ボタンのアクティブエリアが大きいほど、ユーザーはボタンを操作しやすくなります。

インターフェースに双方向性を追加する-ユーザーアクションに応答して、応答アクションを作成します-デスクトップデバイスの要素にカーソルを合わせたとき、およびモバイルデバイスの要素に触れたときに機能するアニメーション。

2.ビューポートメタタグを使用してビューポートを設定する

にモバイルブラウザ手術室用 Androidシステム iOSはサイトページのサイズを自動的に変更しませんでした。特別なタグが使用されています属性名は「ビューポート」です。このタグでは、幅と初期スケールパラメータに特定の値を設定できます。

--initial-scale = 1は、ブラウザのページサイズがビューポートサイズの100％に等しくなることを意味します。つまり、物理ピクセルとcssピクセルの比率は1：1になります。

--width = device-widthは、ページ幅がブラウザのウィンドウ幅の100％に等しくなることを意味します。つまり、サイトページの幅はデバイスの幅に対応しているため、拡大縮小する必要はありません。

NS この例ブラウザウィンドウのコンテンツは、物理サイズの2倍になります。

タグも付けますユーザーがページ幅を増減できる量を制御するために使用できます。

このコードは、ページ幅をデバイス画面幅の最大3倍に増やし、デバイス画面幅の半分に減らします。

user-scalable属性を使用して、ユーザーがスケーラブルにならないようにすることができます。

3.汎用テンプレート

レスポンシブウェブデザインの作成に使用されるレイアウトのほとんどは、LukeWroblewskiによって定義された5つのテンプレートカテゴリのいずれかに分類されます。
主に流動的（最もゴム状）
カラムドロップ（互いに下の列）
レイアウトシフター（移動レイアウト）
小さな調整（小さな変更）
オフキャンバス（オフスクリーン）。
場合によっては、ページで列ドロップやオフキャンバスなどのテンプレートを組み合わせて使用することがあります。

3.1。主に流動的

人気のレイアウトは主にラバーメッシュで構成されています。大画面または中サイズの画面では、通常同じサイズのままです。大画面では、余白のみが調整されます。に小さな画面流体グリッドにより、メインコンテンツのレイアウトが再計算され、列が上下に積み重ねられます。テンプレートの優れている点は、小さな画面と大きな画面の間にブレークポイントが1つだけ必要なことです。

3.2。カラムドロップ

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

3.3。レイアウトシフター

さまざまな画面幅に対して複数のブレークポイントを提供するため、最も応答性の高いテンプレート。このレイアウトとの主な違いは、レンダリングツリーを再計算して列を相互に配置する代わりに、コンテンツが移動されることです。主要なブレークポイント間の大きな違いのため、このレイアウトを維持することはより困難であり、コンテンツの全体的なレイアウトだけでなく、その要素も変更する必要がある場合があります。

3.4。小さな調整

テンプレートは、フォントサイズの調整、画像のサイズ変更、コンテンツの移動など、レイアウトに小さな変更を加えます。単一ページのサイトやテキストの多い記事など、単一列のレイアウトでうまく機能します。

3.5。オフキャンバス

ナビゲーションやアプリケーションメニューなど、めったに使用されないコンテンツは画面外に配置され、画面サイズが許す場合にのみ表示されます。小さい画面では、コンテンツはワンクリックで開きます。

4.レスポンシブデザイン

レスポンシブデザインとは異なり、 アダプティブデザイン（アダプティブウェブデザイン）はデバイスサイズに焦点を当てています。さまざまなタイプのデバイス（モバイルデバイス、タブレット、デスクトップコンピューター）、制御（変曲点）に基づいています。つまり、レイアウトはデバイスのブラウザウィンドウの特定のサイズで読み込まれ、レイアウト間の遷移はスムーズではなく、飛躍的に発生します。

通常、レスポンシブレイアウトには、画面の幅に基づいて6つのレイアウトオプションがあります。
320
480
760
960
1200
1600.

機能はレスポンシブレイアウトの中心です。つまり、モバイルデバイスのタッチコントロールやデスクトップモニターの広いスペースなど、デバイス固有の機能が設計で考慮されます。

基本的なレスポンシブデザインテクニック

一貫性に固執する-どのサイトでも、ユーザーがナビゲートしたり対話したりするときに快適に感じることができるように、ユーザーとの信頼関係を構築する必要があります。一貫性のあるデザインとは、ユーザーがサイトの別のページに移動したときに、別のサイトにいるように感じないことを意味します。細部に注意を払い、視覚的な階層を構築し、重要な要素を大胆にします。サイト全体で一貫した配色を使用し、トースト通知の同じデザインなど、さまざまな状況で同じ要素を再利用します。

グリッドを使用する-列の幅と列間の間隔を制御するには、12列の構造が推奨されます。

5.レスポンシブWebデザインとレスポンシブWebデザインの違いは何ですか

米。 4.デバイス間でのレスポンシブでレスポンシブなデザイン

レスポンシブレイアウトは、メディアクエリと、％を使用して指定されたグリッドアイテムの相対サイズを使用します。レスポンシブデザインでは、サーバー側スクリプトは最初にユーザーがサイトへのアクセスに使用しているデバイスの種類（デスクトップ、電話、またはタブレット）を判別し、次にそのサイトに最適なページのバージョンを正確に読み込みます。グリッド要素には固定ピクセルサイズが与えられます。

したがって、これらの手法の主な違いは、レスポンシブデザイン（すべてのデバイスに1つのレイアウト、レスポンシブデザイン）、デバイスの種類ごとに1つのレイアウトです。

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

Windows、Linux、およびMac OS X用のAndroidエミュレーター。iOSシミュレーターは、Mac OS Xユーザーのみが利用でき、Xcodeパッケージの一部です（Mac App Storeから無料でダウンロードできます）。

任意のWebサイトで実行されるPHPスクリプトは、画面サイズを検出し、それに合わせて画像のサイズを変更します。その結果、小さな画面では画像サイズが小さくなります。

物理デバイスのサイズと高さと幅のcss値、およびモバイルデバイスのピクセル比の値との対応の表。

メディアクエリとレスポンシブウェブデザインを使用したウェブサイトのコレクション。

12列のレイアウトに基づくCSSフレームワーク、最大960px。 Chrome、Safari、Firefox、IE7以降でサポートされています。モバイル版ブラウザ。

Webアプリケーションを開発するためのツールのセット。 LESS言語、12列のレスポンシブマークアップ、モバイルデバイス、タブレット、モニターのサポート、多くのコンポーネント、ボタン、ドロップダウンメニュー、独自の入力フィールド、リスト、ヘッダー、ラベル、アイコン、アラート、タブ、進行状況バー、ツールチップ、アコーディオン、カルーセルなど、さまざまなJavascriptプラグイン、すでに生成されたHTMLへのBootstrapスタイルの適用を含むスキャフォールディングのサポート。

今日のWeb開発者とマーケターは、レスポンシブデザインをますます選択しています。これにより、どのデバイスでも表示できるページを作成できます。このアプローチは、レスポンシブサイトを「愛する」Googleの観点からは十分に優れていますが、ユーザーのニーズに適応できる唯一のオプションとはほど遠いものです。

いわゆるアダプティブデザインは昨日登場していませんが、ユーザーエクスペリエンスにもたらす改善のおかげで本格的に登場したのはつい最近のことです。

2種類の設計のどちらが最適かを理解するには、両方の方法の長所と短所を明確に理解し、さまざまな種類のサイトとデバイスに最適なソリューションを理解する必要があります。

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

レスポンシブウェブデザインは、メディアクエリ、または画面解像度、サイズ、その他の特性に応じてさまざまなスタイル（またはスタイルシート）を設定できるCSS3モジュールを使用して、ユーザーのデバイスのインターフェイスをスケーリングしています。

申し込みこの方法柔軟な、または「ゴム」構造のサイトに適しています。そうしないと、開発者はタブレット用のサイトの再設計に多くの時間とリソースを費やし、携帯電話この柔軟性の欠如を補うために。

構造の変化とは別に、レスポンシブデザインには他にもいくつかの利点があります。

1.リソースの同じ外観さまざまなブラウザさまざまなプラットフォームで
2.サイトのURLは同じで、SEOの最適化に貢献します
3.開発者は1つのサイトのみを維持する必要があるため、設計とコンテンツに費やす時間が短縮されます。

レスポンシブデザインの長所は明らかですが、この方法には多くの短所があります。これらの最大のものは読み込み速度であり、装飾に必要な高解像度の画像やその他のビジュアルによって大幅に遅くなります。外観資源。

レスポンシブアプローチを選択した場合、複雑なビジュアルによってモバイルデバイスへの読み込みが遅くなる可能性があるため、デザイナーは常にこの要因によって制限されます。

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

レスポンシブデザインの動作は少し異なります。ユーザーがサイトを表示しているデバイスに基づいて、ユーザーをカテゴリに分類します。

レスポンシブデザインテクノロジーを使用して作成されたサイトは、デバイスのサイズに関係なく同じように見えますが、レスポンシブリソースは、ユーザーがサイトにアクセスするデバイスを決定し、このタイプのデバイス用に特別に開発されたバージョンを示します。

レスポンシブサイトサーバーは、リソースのサムネイルコピーを表示するのではなく、ユーザーのデバイスタイプを識別し、最も重要なUI要素と低品質の画像のみを含むブログの簡略版を表示します。

言い換えれば、サーバーは、サイト自体を最適化するのではなく、すべてのハードワークを引き継ぎます。レスポンシブデザインの利点には、次のようなものがあります。

画像は圧縮されてユーザーのデバイスに適合されるため、はるかに高速に読み込まれます
サーバーがユーザーデバイスのタイプを検出し、対応するプログラムコードをロードするため、サイトのロードが高速になります
開発者は作成できるので創造的な自由を楽しんでいます異なるバージョンウェブサイトを適切なデバイスタイプに合わせて調整し、モバイルフレンドリーにします。

この方法の魅力は、レスポンシブWebサイトを作成するのが簡単ではないという事実によって影が薄くなっています。デザインをに適応させたためさまざまなデバイス、開発に費やす時間が大幅に増加します。さらに、サイトを改善する必要がある場合は、サイトのすべてのバージョンに変更を加える必要があります。したがって、予算が少なく、アダプティブサイトをサポートするスペシャリストのチームがいない場合は、今のところこのアイデアを放棄することをお勧めします。

どのオプションが何に適していますか？

説明した2種類のデザインのいずれかを好む場合でも、まずユーザーの利便性について考える必要があることを理解することが重要です。

ユーザーがすべてのデバイスで同じ構造を持つリソースを操作する方が便利な場合は、レスポンシブデザインを選択してください。ユーザーがテクノロジーに精通していて、将来に向けて優れた基盤を築きたい場合は、レスポンシブデザインが最適なソリューションになります。

レスポンシブレイアウトは、ユーザーの行動、プラットフォーム、画面サイズ、デバイスの向きに基づいてページデザインを変更し、最新のWeb開発の不可欠な部分です。これにより、コストを大幅に節約し、解像度ごとに新しいデザインを描くのではなく、個々の要素のサイズと場所を変更できます。

この記事では、Webサイトの基本的な要素とそれらを適応させる方法について説明します。

画面解像度の調整

原則として、デバイスをさまざまなカテゴリに分類し、それぞれにタイプセットすることができますが、時間がかかりすぎます。5年後にどのような標準になるか誰が知っていますか？さらに、統計によると、さまざまな解像度があります。

デバイスごとに個別にコーディングを続けることができないことが明らかになります。しかし、それでは何をすべきでしょうか？

部分的な解決策：すべてを柔軟にする

もちろん、これは理想的ではありませんが、ほとんどの問題を解決します。

Ethan Marcotteは、柔軟なレイアウトの使用法を示すための簡単なテンプレートを作成しました。

一見、すべてが簡単に見えるかもしれませんが、そうではありません。ロゴを見てください：

画像全体を縮小すると、ラベルが読めなくなります。したがって、ロゴを保持するために、画像は2つの部分に分割されます。最初の部分（イラスト）は背景として使用され、2番目の部分（ロゴ）は比例してサイズ変更されます。

h1要素には背景として画像が含まれ、画像はコンテナ（ヘッダー）の背景に揃えられます。

柔軟な画像

画像の操作は、レスポンシブデザインを操作する際の最大の課題の1つです。画像のサイズを変更する方法はたくさんあり、それらのほとんどは実装がかなり簡単です。 1つの解決策は、CSSでmax-widthを使用することです。

Img（最大幅：100％;）

画像の最大幅は画面またはブラウザウィンドウの幅の100％であるため、幅が小さいほど画像は小さくなります。 IEではmax-widthがサポートされていないため、width：100％を使用することに注意してください。

提示された方法はレスポンシブ画像を作成するための優れたオプションですが、サイズのみを変更することにより、画像の重みを同じままにし、モバイルデバイスでの読み込み時間を長くします。

別の方法：レスポンシブ画像

フィラメントグループによって提示された技術は、画像のサイズを変更するだけでなく、小さな画面上の画像の解像度を圧縮して、読み込み時間を短縮します。

この手法では、Githubで利用可能ないくつかのファイルが必要です。まず、JavaScriptファイルを取得します（ rwd-images.js）、ファイル .htaccessと rwd.gif（画像ファイル）。次に、小さなHTMLを使用して、大小の解像度を結び付けます。最初に、接頭辞が付いた小さな画像 。NS（画像がレスポンシブであることを示すため）次に、data-fullsrcを使用して大きな画像にリンクします。

480ピクセルより広い画面の場合、より高い解像度の画像が読み込まれます（ largeRes.jpg）、そして小さな画面ではそれがロードされます（ smallRes.jpg).

iPhoneと iPod Touch特別な機能があります。大画面用に作成されたデザインは、スクロールや追加のモバイルレイアウトを使用せずに、解像度の小さいブラウザで縮小するだけです。ただし、画像とテキストは表示されません。

この問題を解決するために、メタタグが使用されます。

初期スケールが1の場合、画像の幅は画面の幅と等しくなります。

カスタマイズ可能なページレイアウト構造

ページサイズを大幅に変更するには、一般的に要素のレイアウトを変更する必要がある場合があります。これを行うのは便利です別のファイルスタイルを使用するか、より効率的には、CSSメディアクエリを使用します。ほとんどのスタイルは同じままで、変更されるのはごくわずかなので、これは問題にはなりません。

たとえば、色、背景、フォントとともに、＃wrapper、＃content、＃sidebar、＃navを定義するメインスタイルシートがあります。メインスタイルによってレイアウトが狭すぎたり、短すぎたり、広すぎたり、高すぎたりする場合は、それを定義して新しいスタイルを含めることができます。

style.css（メイン）：

/ *子スタイルシートに継承される基本スタイル* / html、body（background ... font ... color ...）h1、h2、h3（）p、blockquote、pre、code、ol、ul（） / *構造要素* / #wrapper（width：80％; margin：0 auto; background：#fff; padding：20px;）＃content（width：54％; float：left; margin-right：3％;）＃サイドバー-左（幅：20％;フロート：左;マージン-右：3％;）＃サイドバー-右（幅：20％;フロート：左;）

mobile.css（子）：

#wrapper（width：90％;）＃content（width：100％;）＃sidebar-left（width：100％; clear：both; / *新しいデザインの追加スタイル* / border-top：1px solid #ccc ; margin-top：20px;）＃sidebar-right（width：100％; clear：both; / *新しいレイアウトの追加のスタイル* / border-top：1px solid #ccc; margin-top：20px;）

ワイドスクリーンでは、左右のサイドパネルが側面にぴったりとフィットします。狭い画面では、これらのブロックは利便性を高めるために上下に配置されています。

CSS3メディアクエリ

CSS3メディアクエリを使用してレスポンシブデザインを作成する方法を見てみましょう。 min-widthは、特定のスタイルが適用されるブラウザウィンドウまたは画面の最小幅を指定します。いずれかの値がmin-width未満の場合、スタイルは無視されます。 max-widthはその逆です。

@media screen and（min-width：600px）（。hereIsMyClass（width：30％; float：right;））

メディアクエリは、最小幅が600ピクセル以上の場合にのみ機能します。

@media screen and（max-width：600px）（。aClassforSmallScreens（clear：both; font-size：1.3em;））

この場合、クラス（ aClassforSmallscreens）は、画面の幅が600ピクセル以下の場合に機能します。

min-widthとmax-widthは、画面幅とブラウザウィンドウ幅の両方に適用できますが、デバイス幅のみを操作する必要がある場合があります。たとえば、小さなウィンドウで開いているブラウザを無視するには。これには、min-device-widthとmax-device-widthを使用できます。

@media screen and（max-device-width：480px）（.classForiPhoneDisplay（font-size：1.2em;））@media screen and（min-device-width：768px）（。minimumiPadWidth（clear：both; margin-bottom ：2px solid #ccc;））

特にiPadの場合、メディアクエリには次の特性があります。 オリエンテーション、その値は次のいずれかになります風景（水平）または 肖像画（垂直）：

@media screen and（orientation：landscape）（。iPadLandscape（width：30％; float：right;））@ media screen and（orientation：portrait）（。iPadPortrait（clear：both;））

また、メディアクエリの値を組み合わせることができます：

@media screen and（min-width：800px）and（max-width：1200px）（。classForaMediumScreen（background：＃cc0000; width：30％; float：right;））

このコードは、幅が800〜1200ピクセルの画面またはブラウザウィンドウでのみ実行されます。

のスタイルで特定のシートをロードする異なる意味メディアクエリは次のように実行できます。

JavaScript

ブラウザがCSS3メディアクエリをサポートしていない場合は、jQueryを使用してスタイルの置換を整理できます。

オプションのコンテンツ表示

小さな画面に収まるように要素を縮小および交換する機能は素晴らしいです。そうではありません最良のオプション..。モバイルデバイスの場合、通常、より幅広い変更があります。ナビゲーションが簡単になり、コンテンツに焦点が絞られ、列ではなくリストまたは行になります。

マークアップは次のとおりです。

メインコンテンツ

style.css（メイン）：

#content（幅：54％;フロート：左;マージン-右：3％;）＃サイドバー-左（幅：20％;フロート：左;マージン-右：3％;）＃サイドバー-右（幅：20 ％; float：left;）。sidebar-nav（display：none;）

mobile.css（簡略化）：

#content（width：100％;）＃sidebar-left（display：none;）＃sidebar-right（display：none;）。sidebar-nav（display：inline;）

画面サイズが縮小されている場合は、たとえば、スクリプトまたは代替スタイルファイルを使用して空白を増やしたり、ナビゲーションを置き換えて利便性を高めることができます。したがって、要素の表示と非表示、画像や要素のサイズ変更などの機能を備えているため、デザインを任意のデバイスや画面に適合させることができます。

密閉