コンテンツ
最近、誰もがレスポンシブWebデザインについて話しているようですが、それには正当な理由があります。 Web対応デバイスの数が増え続け、それぞれが異なる機能と機能を備えているため、固定幅のWebサイトを構築することはもはや賢明ではありません。
真実は、そうではありませんでした。しかし、これまでは、画面の解像度、帯域幅、入力方法など、さまざまな前提を考慮したエクスペリエンスを設計することがベストプラクティスと見なされていました。 960ピクセル幅のウェブサイトをデザインしたことがあり、それを友人の小さな画面のネットブックで表示するためだけに（そして、はい、私はここで苦痛な経験から書いています）、これが特に賢いアプローチではなかった理由を理解できます。現在、スマートフォンとタブレットが混在しているため、従来の方法が目的に適していないことは明らかです。
ありがたいことに、CSSメディアクエリの出現と、ウェブはそれ自体がメディアであるという認識の高まりは、プラットフォームの真の性質を受け入れ始め、その普遍性が弱点ではなく強みであることを認め始めていることを意味します。
次の5日間で、この事実を認識するテクニックを紹介します。 レスポンシブウェブデザイン。 Ethan Marcotteによって開発されたこの製品は、流動的なレイアウト、柔軟な画像、メディアクエリを組み合わせて、遭遇するあらゆる環境に適切に適応するサイトを構築するのに役立ちます。
簡単なメディアギャラリーを作成する方法を紹介することで、このアプローチを示します。私の例では、米国を横断した最近の遠征を記録する小さなWebサイトを作成しますが、コードとデザインを自分のニーズに合わせて自由にカスタマイズしてください。
未知のための設計
このチュートリアルの多くは、レスポンシブデザインの開発面を中心に説明します。ただし、コードを掘り下げる前に、無限のレイアウトを持つ可能性のあるWebサイトをどのように設計するかを考えてみましょう。
今、私はインターフェースを設計できるという点で幸運です そして それらを現実のものにするフロントエンドコードを開発します。もちろん、これはユニークなスキルではありません。自分で仕事をしているのであれば、おそらく同じです。ただし、流動的なデザインを作成するときに、コンテンツがどのように適応してリフローできるかを理解することは確かに有利です。
私はまた、自分の役割がより専門化されているより大きなチームの一員として働いています。このような環境では、ビジュアルデザイナーは、ワイヤーフレームを魅力的で魅力的な（サインオフされた、ピクセルパーフェクトな）コンプに変換することに専念することができます。また、開発者が別々に配置され、これらのレイアウトを無駄のない効率的なマークアップとCSSに変換することも珍しくありません。
ただし、設計がさまざまな環境にどのように適応するかを評価し始めると、このような線形で分離されたワークフローはすぐに崩壊します。新しいツールやテクノロジーと同様に、より協調的で機敏な作業方法も検討する必要があります。レスポンシブウェブサイトを設計するときに遭遇する最も難しい問題の多くは、会話、実験、反復によって簡単に解決できます。
設計への実用的なアプローチ
だからといって、特定のデバイスの範囲外でデザインがどのように機能するかを設計者が考える余地がないわけではありません。
Clearleftでは、デスクトップの観点からビジュアルデザインを開始します。まず、包括的なデザイン言語と視覚的美学を定義することから始めます。多くの場合、コンテンツのコア部分を中心に最初の調査を行います。たとえば、食品サイトを設計している場合は、レシピページから始めます。ニュースサイトの場合は、ストーリーページ。
これはサイトの重要なページであるだけでなく、活版印刷パレットを構築するのに十分な構造化されたコンテンツが含まれている可能性があります。また、この段階で頭の後ろにある場合でも、レイアウトがどのように適応するかについても検討します。
デザインのストレステストを行うための便利な方法の1つは、そのようなページを取得して、より狭い（〜320px幅）画面に適合させることです。この幅で機能させるには、デザインのいくつかの側面を再考する必要があることに気付くでしょう。ここではいくつかの例を示します。
- タイポグラフィ： 大きな見出しは、より広いレイアウトでうまく機能しますが、小さな画面では、多くの垂直方向のスペースを占める可能性があるため、追加のスクロールが必要になります。行の長さが変わると、行の高さやその他の活版印刷の処理も考慮する必要があります。
- リンク： デザインはタッチスクリーンデバイスでどのように機能しますか？これらを検出する簡単な方法はまだありませんが（つまり、デザインのすべての側面で考慮に入れる必要があります）、より狭い画面用にデザインすると、リンクやその他のインタラクティブな要素のターゲット領域について考える機会が得られます。 。 iOSガイドラインでは、これらを少なくとも44ピクセル/ポイントの正方形にすることを推奨しています。これは、目標とするのに適した数値です。
- ナビゲーション： これは、特にサイトに多くのセクションと深い階層がある場合、レスポンシブデザインの中でおそらく最も厄介なコンポーネントになります。 Brad Frostは、現在検討されているナビゲーションへのいくつかの異なるアプローチの要約を書いています。
- 余分なコンテンツ： 一部のコンテンツは必要ありませんか？他のコンテンツは特定のシナリオでのみ表示する必要がありますか？ユーザーがたまたま使用しているデバイスに基づいてコンテンツを非表示にすることは推奨していませんが、条件付き読み込み（今週後半で説明します）などの手法を使用すると、必要な場合にのみ補完的なコンテンツを読み込む小さなページを提供できます。
2つの対照的なレイアウトを設計することで、設計が適応するという考えが強化され、潜在的な落とし穴が早期に解消されます。これは作業の倍増のように聞こえますが、すべてのページをピクセル単位の精度で設計しているわけではないことに注意してください。代わりに、スケーラブルな設計言語の構築に重点を置いています。これは、コードでの実装を開始すると進化し、個々のモジュールとコンポーネントに基づいたものです。
レイアウトにとらわれない
当然のことながら、これまでWebを印刷物のように扱ってきた業界では、固定幅のレイアウトが、私たちが作成する成果物の多くに浸透してきました。適応性のある媒体の設計を開始するにつれ、媒体の流動性を認識しながら問題を解決し、アイデアを伝達できる新しいアプローチが検討されています。これが私のお気に入りのいくつかです：
- ページ説明図： ワイヤーフレームはレイアウトを暗示することがよくありますが（したがって、特定のタイプのデバイスを想定します）、ページの説明図はこの想定を取り除き、代わりに優先順位の観点からドキュメントに配置された個々のコンポーネントを説明します。
- スタイルタイル： クライアントとデザインのアイデアを伝えるとき、私たちは「ウェブサイトの絵」を提示していることに気付くことができます。注意しないと、クライアントは当然、他のデバイスでもデザインがどのように見えるかを示す概念を確認するように求められます。これにより、複数のデバイス用に複数のページを作成するという持続不可能な状況に陥る可能性があります。サマンサウォーレンはこの問題について考え、スタイルタイルを考え出しました。これらは、ムードボード（ただし曖昧さは少ない）と完全に実現されたコンプ（ただし精度は低い）の間のどこかにあり、タイポグラフィ、ボタンスタイル、マストヘッド処理を伝えるのに役立ちます。彼らはまた、クライアントとのより成熟したレベルの議論を奨励します。
- デザインゲームを動員する： この演習は、共同設計ワークショップで非常にうまく機能します。この演習では、特定のページに表示される可能性のある要素をポストイットに書き留めます。これらは、携帯電話で線形化されているように見えるかのように、重要度の高い順に壁に貼り付けられます。結果として生じる議論は、いくつかの驚くべき結論を生み出すかもしれません。たとえば、ナビゲーションがページ上で最も重要なコンポーネントではないことに気付くかもしれません。これは、ページ上部のスキップリンクがフッターのナビゲーションにリンクするデザインに続く可能性があります。
もちろん、すでに使用しているツールの余地はまだありますが、広義のWebサイトを設計する場合、レイアウトはもはや知られていないことに留意する必要があります。
プログレッシブコーディング
ありがたいことに、私たちが取り組んでいる例のビジュアルデザインについて心配する必要はありません。これは、大変な作業が行われたためです。代わりに、完全にレスポンシブなWebサイトにデザインをコーディングすることに集中できます。
始める前にもう1つ。私たちが取り組んでいるメディアの創設原則である普遍性を覚えておくことが重要です。つまり、今日のWeb対応デバイス用に構築するだけでなく、昨日および明日のデバイスとの互換性を確保することも意味します。 John Allsoppは、この原則が彼の投稿The Next 60Billionで重要である理由を説明しました。
「この次の60億人は、電力やネットワークへのアクセスが断続的になる可能性のあるインド、アフリカ、中国の田舎の子供たちです。スマトラ島の10年前のWintelボックスの誰かです。何百もの異なる言語を話し、何十もの異なる言語を話す人々です。書記体系。家族で初めて読み書きができるのは人々です。世界中の人々の20％が読み書きができません。それでも。’
Web標準、アクセシビリティ、控えめなJavaScriptなど、私たちの専門分野で定着しているさまざまなファッション（より良い言葉を求めて）を調べることで、Webの理解をたどることができます。これらはすべて、同じテーマのバリエーションです。プログレッシブエンハンスメントです。同じことがレスポンシブウェブデザインにも当てはまります。を構築するには 本当に レスポンシブウェブサイトは、下位互換性があるだけでなく、将来的にもフレンドリーなサイトを構築することです。
マークアップに飛び込む
さて、前文はもう十分です。テキストエディタを開きます。私たちのデザイナーは、デスクトップ指向のデザインを提供してくれました。また、これが狭いビューポートでもどのように表示されるかの例を提供してくれました。
これらを別々にコーディングしたくなるかもしれませんが、別のアプローチを提案します。デザインを構成する個別のコンポーネント（またはパターン）を1つのページに配置することで、パターンポートフォリオを作成できます。これにより、任意のページレイアウトの範囲外でコンポーネントを開発でき、後で回帰テストのために参照できるものが得られます。いくつかの異なるデバイスでの初期マークアップを見てみましょう。
マークアップされたパターンポートフォリオを見る
まあ、私は気になります-私たちはすでにレスポンシブウェブサイトを持っています！私たちのコンテンツは、派手な新しいiPadであれ、廃棄されたフィーチャーフォンであれ、各デバイスの範囲に適応しています。 Lynxのようなテキストのみのブラウザでも動作します。
普遍性の根底にある原則のおかげで、ウェブは デフォルトでレスポンシブ。これはすばらしいことですが、これからコードに対して行うことは、このネイティブの適応性を損なう可能性があることも意味します。
明日： 慎重に踏み込み、レスポンシブデザインの最初の側面であるタイポグラフィと流体グリッドの適用を開始します。
