適応的および応答Webデザイン

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

レスポンシブデザインはのためのサイトの開発だけではありませんモバイルデバイスここでは、異なる画面サイズ（ビューポート）にレイアウトを適応させることです。

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

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

残念なユーザー

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

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

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

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

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

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

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

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

メインのHTML構造：

住民サイトデモ

ロゴ

それがCSSに関しては、Max幅をインストールするとき、それは良い考えになるでしょう、それはサイトが巨大なスクリーンでのスケーリングから停止するのを止めるでしょうが、ページの削減からは保持されません。一定の幅から流動幅に切り替えるときの主な質問の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％のスケールでの画素単位の画素幅です。初期スケールプロパティは、ページが最初にロードされたときにスケールを管理します。最大スケール、最小スケール、およびユーザースケーラブルなプロパティで、ユーザーがページの拡大縮小できる方法を制御します（詳細）。

今日、ほとんどの人はモバイルガジェットを通してネットワークに行きます - このサイトの最適化に関連して、タブレット、電話が新しいレベルにもなります。ユーザーがモバイル機器に最適化されていないことを確認した場合：画像を表示できず、フォントは小さくて読みませんが、デザインは100％のうち99件目になり、出発します。もう一つの快適なものを探しています。そして、リソースが非並列化されていること、つまり検索クエリには対応していません。したがって、ページ設計は必ずしもさまざまなモバイル機器に適合されなければならない。サイトのモバイル版、それを作る方法、そしてそれが適用するのが良い方法は何ですか？この記事でもっと読む。

そのため、モバイル版のサイトを適応させるための4つの重要な方法があります。

方法初 - 適応設計

適応テンプレート画面のサイズに応じて、サイトの写真を変更することをお勧めします。原則として、それらは標準1600,1500,1280,1100,1024および980ピクセルに設定されています。実装のためにクエリを適用します。それ自体は変わらない。

この方法の利点は次のとおりです。

シュート自体がスクリーンパラメータに対して調整されているので、便利な開発、そして更新はスクラッチからの設計を必要としないので、CSSとHTMLを修正するのに十分です。
1つのURLアドレス - ユーザーが複数の名前を記憶する必要はありませんが、リダイレクト（あるアドレスから別のアドレスへのリダイレクト）はWebマスターの作業を複雑にする可能性があり、検索エンジンはソートとランク付けが簡単です。単一のアドレスを使って。

もちろん、適応パターンはそれらの欠点を持ち、それはこれにより利点以上のものがあります。それにもかかわらず、多くの開発者はこの概念、例えばGoogle Corporationに準拠しており、そのサイトのモバイル版は適応設計を持っています。それで、短所：

Adaptive Designは、PC上のモバイルデバイス上の同じタスクをサポートしていません。これが、例えば、ユーザーが通貨の過程または最寄りのATMに関する重要な情報である可能性が最も高い銀行のウェブサイトのモバイル版である場合、そのような設計は十分です。しかし、さまざまなセクションやサブセクションを持つ複雑な構造化リソースである場合は、訪問者に訪問者を訪れることはほとんどありません。
遅い負荷は嫌いにお気に入りのサイトを回します。これは、アニメーション、ビデオ、ポップアップウィンドウ、その他のアクティブな要素が豊富に存在するリソースに特に当てはまります。大きな重量のために、ページは単に「ブレーキ」し、ユーザーは怒って去り、そしてサイトの検索位置は落下することです。
モバイル版を無効にすることはできないことで、別の重大な欠陥があります。そのようなレイアウトによっていくつかの要素が非表示になっている場合は、オフにできるサイトとは異なり、それを開くことができず、通常のドメインに移動することはできません。

それにもかかわらず、このようなモバイル版のサイトの特別なスキルやコストなしで、リソースを任意のガジェットに適応させることができます。しかし、リストされている欠陥を考慮して、複雑なナビゲーションとアニメーションなしで、最小限の情報とマルチメディアを持つ小さな単純なリソースを考慮して適しています。複雑なサイトの場合、他の2つの方法が適しています。

2番目の方法はサイトの別のバージョンです。

この方法は非常に一般的であり、しばしば成功は、携帯機器のサイトを知覚にもっと便利にします。その本質は、アプリケーションの下に描画され、別のURLまたはサブドメインに配置されたページの別のバージョンを作成することです。たとえば、m.vk.comなどです。この場合、主な機能は保存されますが、サイトのデザインのように異なるように見えます。この方法の利点は明らかです。

便利なユーザーインターフェース。
バージョンはメインリソースとは別に存在するため、簡単に変更して編集を行います。
低い重量のために、別のバージョンのサイトは適応パターンよりもはるかに速く機能します。
ほとんどの場合、モバイルでページのメインバージョンに切り替えることは可能です。

しかし、ここでの欠点はありませんでした。

いくつかのアドレス - デスクトップおよびモバイル版のサイト。ユーザーに2つのオプションを覚えておくことはどうですか？ Webウィザードはしばしば携帯電話に異なるバージョンから規定されていますが、このページがモバイルバージョンに存在しない場合、ユーザーはエラーを受け取ります。それはまた2つの同一のリソースをランク付けするのが難しい検索エンジンでは困難を有するので、これは直接プロモーションに影響を与えます。
ユーザーがそれにエラーが発生した場合、コンピュータからのサイトのモバイル版はばかげて見えるように見えます。
このバージョンはより頻繁にドリルされたデスクトップですので、ユーザーは非常に限られた機能を受け取ります。しかし同時に、何かが足りない場合、訪問者はページのフルバージョンに到達することができます。

一般に、別のモバイルサイトはそれ自体を正当化し、モバイルデバイスのリソースを適応させるための最も一般的な方法です。例えばAmazonには主要なオンラインストアの中で人気があります。

3番目の方法 - Ress-Design.

Google検索エンジンは積極的にモバイルデザインの方向をサポートしています。それは、携帯電話やタブレットの下にサイトを適応させるのが最も難しい、費用がかかりますが効果的な方法です。それはressと呼ばれます。これは、各デバイスごとに別々にダウンロードできるモバイルアプリケーションをターゲットにしているリソースです。 Android - GooglePlayとApple - iTunesで。

そのようなアプリケーションは高速で、無料で便利で、さまざまな種類の情報を収容する能力を持っていますが、電話やインターネットトラフィックのメモリはブラウザを介してサイトを訪れるときのように食べられません。リンクが常に画面上にあるので、それらは簡単に移動します。ブラウザのアドレスバーに挑戦された名前を入力する必要はありません。

もちろん、ここでは、ここでは、開発の困難さ、多数のプログラマーの労働コストなど、いくつかのレイアウトオプションを作成する必要性など、その欠点があります。時々モバイルデバイスはアプリケーションによって認識されません。定期的な技術サポートが必要で、欠陥を修正しています。それにもかかわらず、このオプションはその生産的で中断されていない仕事のために提案された3つの3つの最善と考えられています。

モバイルサイトを作るための最も安い方法

上記の方法のすべては、長くて複雑でさえも、まだWeb Masterの仕事を有給しています。そのような開発の急性必要性がわからない場合は、サイトのシンプルで無料のモバイル版に合わせます。それを簡単にする方法？

適応設計用に特別なテンプレート（プラグイン）をダウンロードしてください。たとえば、WP Mobile Detector、Wordpress Mobile Pack、WPSmart Mobileなどです。彼らはあなたが電話でサイトを正しく表示するのを助けますが、あなたはいくつかのヒントを受け取るでしょう、あなたはいくつかのヒントを受け取るでしょう、そしてそれはページをモバイル版に適応させるために修正されるべきです。

もちろん、この方法は深刻な資源にはほとんど適していません。むしろ、この無料の機会は、小さくて最も単純なサイト、ブログ、ニュースフィードを対象としています。また、Google検索エンジン、Yandexがモバイルバージョンにとって深刻な要件を満たすことを忘れないでください。したがって、そのような方法を使用して位置を下げることが非常に大きい可能性があります。

この方法では、最も可能性の高い、広告バナー、ポップアップバナーが切断されますが、ページはすぐに、「遅れ」なしでロードされます。

モバイルバージョンの原則

それは問題ではない、サイトのモバイル版は無料で作成された、またはウェブマスターの状態を使用して作成されていますが、それはRESSシステム上または適応型テンプレートを使用して行われます。最も重要なことは、その効果的な仕事のために、いくつかの非常に重要な原則を遵守する必要があります。それで、サイトのモバイル版は何になるべきですか？それを生産的、効率的で生産的にする方法？

私たちはあまり量を削除します

ミニマリズム - サイトのモバイル版の開発者がどのように努力するべきであるか。花、ボタン、バナー、そしてあなたが希望の素材を検索して壊れる必要がある情報を知覚することがどれほど難しいかを想像してみてください。モバイルデザインはシンプルできれいにする必要があります。スペースを区切る（たとえば、ブランド化された）、2~3色を選択してください。そのうちの1人が白だったら小さな画面のスペースを理解可能で読みやすいゾーンに共有します。ユーザーがプレスする場所を明確に知っているように仮想キーを表示する必要があります。これは製品ですが、ここではデータの塗りつぶしの形式です。

デスクトップバージョンで便利なすべてのオプションはすべてユーザーのユーザーを容易にしますが、ここで困難をもたらすでしょう。最も重要な要素だけを残します。アニメーション、広告バナー、マルチメディア、最も可能性が高い、作業現場やアプリケーションのみを遅くし、主なことから気をそらすでしょう。

並びに

整列レベルはそれほど急激には低くはありません、ユーザーは問題を生じさせるのであれば、ユーザーは重要な単語の終わりだけを受け取ります。一般的に受け入れられているのは、左端と垂直方向の位置合わせです。電話でニュースフィードをどのようにスクロールするかを想像してください。あなたはそれを上から下にしますが、左または右側にはありません。

協会

長い遷移の可能性がない場合は、いくつかのステップを1つに組み合わせるようにしてください。たとえば、このサイトにはいくつかの段階でデータが必要です。名前、次に住所、通り、アパートなどが各個々のセルにあります。ユーザーがたくさん仲良くしようとするように強制しないように小型セルのうち、2名と住所のみに記入するように提供します。

そして分離

逆に、あまりにも多くの情報を切断する必要があります。たとえば、ドロップダウンメニューでは、配信が実行される80都市を超えるリストがあります。ユーザーがこの巨大なリストをスクロールする必要がないように地域別にそれらをグループ化します。地域の中心地や地域へのカーソルを妨げると、別の都市のリストが消えます。

ユーザーがお探しのものを正確に知っている場合は、固定が便利です。たとえば、都市、数、または日付。 2番目のオプションは、長い複雑な名前に適していますが、同じ名前にたくさんのバリエーションがある場合に適しており、それぞれがユーザーを目標にもたらします。訪問者がヘルプが必要な場合は、自動配分のオプションが頻繁に使用されます。たとえば、編み物のためのサイトは編み針を買うことを提供します。ユーザーは検索クエリ "Metal Spins"を紹介し、プロンプトで「5 mm」、「4.5 mm」針状針などを見ています。

オートコンプリート

この商品は、何かがオンラインで売られているサイトであり、その人が電話から購入した場合、標準的な支払い方法、配達などを記入する必要があります。コンピュータは、プロセスショッピングをできるだけ速くそして便利にする必要があることを意味します。

このフォームにはすでに完成したデータが含まれている場合がありますが、最も人気のある答えに頼ることができます。たとえば、今日の日付、現金支払い方法、都市がある地域で働いている場合は、都市を挿入してください。それらは変更することができますが、ターゲットに入ると、ユーザーの時間が保存されます。

すべてが読まれる、すべてが表示されています

サイトのモバイル版を作成する、すべての電話機が異なります。おそらくあなたのサイトは小さな画面から表示されますので、フォントは簡単で読みやすくなければならず、ボタンはかなり大きいので、別のページに着信しないように、特に大きく、大きく、大きく開くべきであるインターネット - マガジンについて話しています。

いくつかの統計

モバイルデバイスへのサイトの適応について話すことは、このプロセスがプロモーションにとってどのように重要なのかを理解するために統計に頼らないことは不可能です。

数字は以下の通りです。今日、人口の87％は、明らかに、最年少の子供といくつかの高齢者を除いて、ガジェットによって使用されています。経済学者は今後5年間のモバイルコマースの成長を100回予測しています。同時に、モバイルデバイスで動作するようになっているサイトの21％しかありません。それはインターネットトラフィックと電子商取引市場が小さな第5部にのみ占められていることを意味します。

これらの数について考えてください。リソースを調整するのは理にかなっていますか？もちろんはい。さらに、この市場にはあまり空いている空き容量があるが、あなたはそれにあなた自身のセグメントを取ることができます。

モバイル版が必要な場所

モバイル版を使用すると、高評価を得ようとしている任意のプラットフォームにとってお勧めがあります。結局のところ、これはユーザーへの直接的な影響であり、あなたのサイトに滞在するための快適な条件を作成します。

モバイルバージョンがなければ、存在できません。

ニュースポートは、電話から仕事や勉強に至るか勉強している大部分です。
ソーシャルネットワーク - 同じ理由で、さらに通信要因があります。これは、便利でわかりやすいチャットを作成する必要があります。
参照、ナビゲーションなどのサイト。何かを検索している間に人々が対処されています。
オンラインショップは、買い物に時間を過ごしていないバイヤーを引き付け、モバイルインターネットを通してすべてを購入する能力です。

投獄の代わりに

今日、モバイル技術は積極的な成長と開発の段階で、市場でのリーダーシップのために努力しています、あらゆる会社はそのインターネットリソースが一貫していることを確実にしなければなりません。ユーザー要求が成長するため、サイトは常にアップグレードしてさまざまなデバイスに適応する必要があります。人が1つまたは別のリソース上にあるのが不便であるならば、彼は製品や価格についての情報を得ることができないこと、命令については、配達について学び、そのサイトがすべてが可能になることを見つけるでしょう。したがって、競争力のあるレスリングで勝つためには、柔軟で便利で機能的で機能的であり、興味深いリソースを持つことが重要です。

AndroidやiOSのWebサイトのモバイル版を助けることができます。これを行うには、上記のRedesignメソッドのいずれかを選択して、サブドメイン上の新しいサイトを作成し、リダイレクト、フリーテンプレートを使用して、またはモバイルアプリケーションを作成することによって、ユーザーが簡単に行くことができるようにすることができるようにします。そしてページ上にいます。

著者から： サイトの適応設計は、それ自体に注意を払っているデザインへの全く新しいアプローチですが、伝統的な開発方法とは異なる量を考えると、最初に初心者Webデザイナーや開発者にとって非常に優れているようです。この記事では、Adaptive Webデザインの開発と実装に関連する最も重要な瞬間のいくつかを強調し、あなたの人生、友達、少し簡単にします。

このサイトの作成への古典的なアプローチは次のようになります：開発単位、Webデザインのブロック、レイアウトブロックなど。ただし、過去数年間で、すべてがカーディナルウェイを変更し始めました：「Webデザイン」という用語「徐々に固定されている、「適応デザイン」としての時間は、専門家の心の中で徐々にシフトをするという位置を強化しています。

大となり、ウェブデザインは非常に明確に認識されるべきではなく、ほとんど産業標準と考えられている適応設計の急速な発展は、さまざまなツールやプラットフォームの全体的なカルーセルにつながりました。

適応性の概念

「適応的なデザインとは何ですか？彼は何に適応していますか？」 - たぶん人は不公平です。私はあなたに答えます：使用されるデバイスの種類に。 Adaptive Designは、インターネットに接続されているさまざまなガジェット上のWebページの適切な認識を提供します。

スクリーン形式と使用される許可にかかわらず、同じサイトはラップトップ、スマートフォン、タブレットなどに最適です。同時に、右ボタンを見逃さないように個々のブロックを拡張するために、ユーザはすべてのフォーマットのWebページを表示することを均等に便利にする必要があります。

各適応プロジェクトが個人と反復的であるという事実のために、すべての機会を決定し、仕事の効率を向上させるためにすべてのプロセスを分析します。それにもかかわらず、そのサイトの適応設計の実装、改善、および作成のための一般的な成功戦略および技術があり、それはほとんどすべての場合に適用することができます。

戦略「モバイルファースト」

この開発戦略は2009年にLyuho Wroklevsky - Webデザインの著者、Bagcheckソーシャルネットワークの著者であるBagcheckソーシャルネットワークの著者である。

開発へのLyukoblevskiのアプローチによって提供され、3つの理由から「モバイルファースト」（「最初の事務監視」）と呼びました。

モバイル環境を使用すると、画面上の多数のスペースの「ゴミ」が原因で発生する障害を集中させて取り除くことができます。

モバイル市場は狂ったペースで開発する傾向があります。

モバイル環境は、さまざまな機能（カメラ、マルチタッチジェスチャー、GPS、加速度計、地理位置）に関連付けられています。

それ以来、ウェブデザインは自信を持ってこのアプローチに向かってシフトされました。最初に多くのWebデザイナーとWeb開発者が最初に、サイトのモバイル版の適応的な設計を行う方法について考えてから、すでにデスクトップ開発に従事しています。

モバイルの最初の戦略は、スートポイントがインターネットの低速で動作しているモバイルバージョンの構造と内容の作成、および簡易バージョンの改善と最適化と同時に、より速い中断ポイントへの移動を想定しています。。

Web開発における現代動向とアプローチ

ウェブサイトの建物内の傷から急速成長アルゴリズムを学ぶ

したがって、あらゆる種類の装置の革新的かつ効率的な動作が保証される。サイト開発者はユーザーのニーズに焦点を当て、最適化された高速ページを作成し、重要な内容に注意を払ってください。ちなみに、Googleさえアプローチ「モバイルファースト」を使用しています。

コンテンツアウトコンテンツ戦略

適応設計を作成する目的は、どのコンテキストでも最高のユーザビリティを確保することです。これはコンテンツを分析する優れた理由で、すべての種類のデバイスで簡単にアクセスでき、読みやすくします。

モバイルの最初の問題戦略を使用しない人の多くは、「最初のコンテンツ」戦略を好みます。これは、もちろん、正しいことは正しいですが、この電話を文字通り認識してはならず、すべてのコンテンツが準備ができるまでデザインの開発を開始しないでください。

適応デザインデザインを作成する段階で、そしてその完了後に、充填は継続的に作成され、議論されるべきです！有名なデザイナーのCennyddボウルズは、「デザインとコンテンツは手に手をつないでください」と述べた。彼らはお互いを補完する必要があります。

それはかなり別の問題です - 戦略「最初の事は内容の構造です。まず第一に、あなたは彼が世界に伝えようとしているサイトの使命を正確に決める必要があります。そして、その充填方法、各要素の作成、タイプ、および目的の構造を徹底的に検討し、同時に角の先頭にユーザーを取り付ける必要があります。

リソース上のパスの各段階で必要なコンテンツを各ユーザーに提供する必要があるという戦略が必要です。このサイトの構造は、目標視聴者の行動とニーズに関する研究に基づいているべきです。

サイト開発の初期段階では、将来的にはよく構造化されたコンテンツがある場合は、他のプラットフォームやデバイスに簡単に転送できます。もちろん、それは傷つけず、適応設計の例 - ナビゲートするサンプル。

スケッチとプロトタイプを作成する時間を保持します

この問題を解決するには、適応設計を行う権限の下で、組織化されたレイアウトの作成を開始する必要があります - スケッチは将来簡単に拡大縮小されます。

それらの機能、許可およびスクリーンサイズを持つさまざまなデバイスは、多数のレイアウトを意味します。スケッチを作成すると、プロジェクトの将来のプロトタイプの基本が許可されます。これにより、議論のために様々なアイデアについて話し合うことが可能であり、サイトフレームの基礎を形成するラフスケッチを作ります。

スケッチの準備ができたら、ワーキングドラフトバージョンのサイトまたはHTMLテンプレートの作成に移動できます。このプロセスはプロトタイピングと呼ばれ、相互作用と機能性を向上させるために最小限の視覚設計を意味します。

この戦略は、適応設計を作成するためのアプローチ全体を再考するのに役立ちます。今、あなたは「モバイルサイト」と「Webサイト」を開発しませんが、コンテキストに応じて、コンテンツの配信とそのプロビジョニングを決定する一連の規則を持つ柔軟なシステムの開発に集中します。

私はこの記事が経験豊富なWebデザイナーの両方で役立つことを願っています。

さて、伝統的な別れはついに：それが閲覧している装置に関係なく、サイトを便利で、便利で慣れ親しんでください。新しい会議、友達に！

P.：あなたはすでにブログを更新しましたか？

Web開発における現代動向とアプローチ

ウェブサイトの建物内の傷から急速成長アルゴリズムを学ぶ

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

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

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

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

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

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

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

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

定義の混乱

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

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

アプローチの特徴

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

実際に

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

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

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

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

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

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

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

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

適応画像とビデオ

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

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

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

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

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

適応型Webデザインツール

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

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

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

ラピッドプロトタイピング適応設計のためのツール。あなたは、さまざまな人気サイズのスクリーン、向き、オリエンテーション、ブラウザのためのCSSを設計することができます（ブラックベリートーチ、Google Nexus One、iPhone、Motorola Droid）、タブレット（BlackBerry Playbook、iPad、Samsung Galaxy Tab、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は、様々なデバイスのデザインの現実について、スティーブンの干し声の間に破壊開発会議でメモを行った。