コンテンツ
レスポンシブウェブデザインは信じられないほどシンプルに聞こえます。レイアウトに柔軟なグリッドを選択し、柔軟なメディア（画像、ビデオ、iframe）を使用し、メディアクエリを適用してこれらの測定値を更新し、任意のビューポートでコンテンツを最適に配置します。実際には、それほど簡単ではないことを学びました。すべてのプロジェクトで発生する小さな問題により、頭をかきむしり、時には机に爪の塹壕を彫ることさえあります。
レスポンシブデザインウィークリーニュースレターのキュレーションを始めて以来、幸運にもWebコミュニティの多くのメンバーと話をし、彼らの経験を聞くことができました。コミュニティが本当に学びたいことを正確に知りたかったので、読者にアンケートを回覧しました。上位の結果は次のとおりです。
- レスポンシブ画像
- パフォーマンスの向上
- レスポンシブタイポグラフィ
- JavaScriptでのメディアクエリ
- プログレッシブエンハンスメント
- レイアウト
これらのトピックを念頭に置いて、私は一連のポッドキャストを実行し、業界のリーダーの何人かに彼らの考えを尋ねました。彼らの回答では、1つのポイントが満場一致でした。エキサイティングで高度なテクニックについて心配し始める直前に、基本を理解することに焦点を合わせてください。基本に立ち返ることで、デバイスやユーザーのコンテキストが許す限り機能を重ねて、すべての人に堅牢なインターフェースを構築することができます。
「それで...これらの高度な技術はどうですか？」あなたが尋ねるのを聞きます。スティーブン・ヘイは、次のように述べたときにそれを最もよく要約していると思います。「究極のRWDテクニックは、高度なRWDテクニックを使用しないことから始めることです。構造化されたコンテンツから始めて、上に向かって進んでください。デザインが壊れ、コンテンツがそれを指示する場合にのみブレークポイントを追加します...それだけです。」
この記事では、基本から始めて、状況が許す限り複雑さの層を追加し、それらの高度な技術を構築します。始めましょう。
レスポンシブ画像
流体媒体は、イーサン・マルコットによって最初に定義されたとき、RWDの重要な部分でした。幅：100％; 、最大幅：100％;今日でも機能しますが、レスポンシブ画像のランドスケープははるかに複雑になっています。画面サイズ、ピクセル密度、サポートするデバイスの数が増えるにつれ、私たちはより優れた制御を切望しています。
3つの主な懸念事項は、レスポンシブ画像コミュニティグループ（RICG）によって定義されました。
- 有線で送信する画像のキロバイトサイズ
- 高DPIデバイスに送信する画像の物理サイズ
- ビューポートの特定のサイズに合わせたアートディレクションの形式での画像の切り抜き
Yoav Weissは、Indiegogoの助けを借りて、Blinkの実装に関する作業の大部分を実行しました。これはGoogleのWebKitのフォークであり、これを読むまでにChromeとFirefoxで出荷されます。 Safari 8はsrcsetを出荷しますが、sizes属性はナイトリービルドにのみ存在し、picture>はまだ実装されていません。
私たちのWeb開発プロセスに新しいものが登場すると、始めるのが難しい場合があります。例を段階的に見ていきましょう。
img！-画像をサポートしていないすべてのブラウザのフォールバック画像を宣言します-> src = "horse-350.webp"！-srcsetのすべての画像サイズを宣言します。 w記述子を使用して画像の幅を含め、各画像の幅をブラウザに通知します。--> srcset = "horse-350.webp 350w、horse-500.webp 500w、horse-1024.webp 1024w、horse.webp 2000w "！-サイズはブラウザにサイトのレイアウトを通知します。ここでは、64em以上のビューポートの場合、ビューポートの70％を占める画像を使用します-> size = "（min-width：64em）70vw、！-ビューポートがそうでない場合大きい場合、37.5em以上のビューポートの場合は、ビューポートの95％を占める画像を使用します->（最小幅：37.5em）95vw、！-ビューポートがそれよりも小さい場合は、ビューポートの100％を占める画像-> 100vw "！-常に代替テキストがあります。--> alt ="馬 "/>
パフォーマンスの観点から、sizes属性でmin-widthまたはmax-widthのどちらを使用するかは重要ではありませんが、ソースの順序は重要です。ブラウザは常に最初に一致するサイズを使用します。
また、デザインに対して直接定義されるサイズ属性をハードコーディングしていることを忘れないでください。これにより、今後問題が発生する可能性があります。たとえば、サイトを再設計する場合は、すべてのimg>またはpicture>に再度アクセスして、サイズを再定義する必要があります。 CMSを使用している場合、これはビルドプロセスの一部として克服できます。
WordPressにはすでに役立つプラグインがあります。 WP標準画像の種類でsrcsetを定義し、中央の場所でサイズを宣言できるようにします。ページがデータベースから生成されると、img>のメンションがすべてスワップアウトされ、画像のマークアップに置き換えられます。
基本
- 本当に画像を含める必要があるかどうかを考えてください。画像のコアコンテンツですか、それとも装飾的ですか？画像が1つ少ないと、読み込み時間が速くなります
- ImageOptimを使用して含める必要のある画像を最適化する
- サーバーまたは.htaccessファイルで画像の有効期限ヘッダーを設定します（「パフォーマンス」の詳細を参照）
- PictureFillは、画像のポリフィルサポートを提供します
高度な
- jQueryのLazyLoadプラグインを使用して画像を遅延ロードします
- 特徴の検出には、HTMLImageElement.SizesとHTMLPictureElementを使用します。
- Githubにある高度なPictureFillWPプラグインを使用すると、カスタム画像の幅とサイズの値を定義できます。
パフォーマンス
ページで最も速く認識されるパフォーマンスを得るには、サーバーからの最初の応答内でページの上部をレンダリングするために必要なすべてのHTMLとCSSが必要です。そのマジックナンバーは14kbであり、最初のラウンドトリップ時間（RTT）内の最大輻輳ウィンドウサイズに基づいています。
GuardianのフロントエンドテクニカルリードであるPatrickHamannと彼のチームは、フロントエンドとバックエンドの技術を組み合わせて使用して、1000ミリ秒の障壁を打ち破ることができました。 Guardianのアプローチは、必要なコンテンツ（記事）が14kbのマジックナンバー内でできるだけ早くユーザーに配信されるようにすることです。
プロセスを見てみましょう：
- ユーザーがニュース記事へのGoogleリンクをクリックする
- 単一のブロッキング要求が記事のデータベースに送信されます。関連するストーリーやコメントは要求されません
- 重要なCSSを含むHTMLが読み込まれます
- 頭の中で>
- 「マスタードを切る」プロセスが実行され、ユーザーのデバイス機能に基づく条件付き要素が読み込まれます
- 記事自体に関連する、または記事自体をサポートするコンテンツ（関連する記事の画像、記事のコメントなど）は、遅延読み込みされます。
このように重要なレンダリングパスを最適化すると、ヘッド>の長さが222行になります。ただし、ユーザーが目にするようになった重要なコンテンツは、gzip圧縮されたときにまだ14kbの初期ペイロード内にあります。このプロセスが、1000ミリ秒のレンダリングの障壁を打破するのに役立ちます。
条件付きで遅延読み込み
条件付き読み込みは、デバイスの機能に基づいてユーザーエクスペリエンスを向上させます。 Modernizrのようなツールを使用すると、これらの機能をテストできますが、ブラウザがサポートを提供すると言っているからといって、必ずしも完全なサポートを意味するわけではないことに注意してください。
1つの手法は、ユーザーがその機能を使用する意思を示すまで、何かの読み込みを保留することです。これは条件付きと見なされます。ユーザーがアイコンにカーソルを合わせるかタッチするまでソーシャルアイコンの読み込みを保留するか、ユーザーが専用のマッピングアプリケーションへのリンクを好む可能性が高い小さなビューポートにiframeGoogleマップを読み込まないようにすることができます。もう1つのアプローチは、「マスタードを切る」ことです。これについて詳しくは、上記のボックスアウトをご覧ください。
遅延読み込みとは、記事、コメント、その他の関連記事の一部である画像など、常にページに読み込むことを意図しているものとして定義されますが、ユーザーがコンテンツの利用を開始するためにそこにある必要はありません。
基本
- ファイルのgzipを有効にし、すべての静的コンテンツに有効期限ヘッダーを設定します（netm.ag/expire-260）
- Lazy LoadjQueryプラグインを使用します。これにより、ビューポートに近づくとき、または一定期間後に画像が読み込まれます
高度な
- FastlyまたはCloudFlareを設定します。コンテンツ配信ネットワーク（CDN）は、静的コンテンツを自分のサーバーよりも速くユーザーに配信し、いくつかの無料枠があります
- http2対応ブラウザーでSPDYを有効にして、並列httpリクエストなどのhttp2機能を利用します
- Social Countを使用すると、ソーシャルアイコンを条件付きで読み込むことができます
- Static Maps APIを使用すると、画像のインタラクティブGoogleマップを切り替えることができます。 netm.ag/static-260でBradFrostの例を見てください。
- Ajax Include Patternは、data-before、data-after、またはdata-replace属性のいずれかからコンテンツスニペットをロードします
レスポンシブタイポグラフィ
タイポグラフィとは、コンテンツを簡単に消化できるようにすることです。レスポンシブタイポグラフィはこれを拡張して、さまざまなデバイスやビューポートで読みやすくします。ジョーダン・ムーアは、そのタイプは彼が気にしないことの1つであることを認めています。必要に応じて画像を1つか2つドロップしますが、優れたタイプであることを確認してください。
Stephen Hayは、各ブラウザまたはデバイスの製造元が特定の解像度またはデバイスに対して適度に読み取り可能なデフォルトを作成しているため、HTMLフォントサイズを100％に設定することを提案しています（読み取り：そのままにしておきます）。ほとんどのデスクトップブラウザの場合、これは16pxです。
一方、ムーアはREMユニットとHTMLフォントサイズを使用して、特定のコンテンツ要素の最小フォントサイズを設定します。たとえば、記事の署名記事を常に14pxにする場合は、それをHTML要素の基本フォントサイズとして設定し、.byline {font-size：1rem;}を設定します。本文を拡大縮小するとき：font-size：ビューポートに合わせて、.by-lineスタイルに影響を与えません。
読み上げ行の長さも重要です。45〜65文字を目指してください。コンテンツを確認するために使用できるブックマークレットがあります。デザインで複数の言語をサポートしている場合は、行の長さも異なる場合があります。 Mooreは、：lang（de）の記事{max-width：30em}を使用して、そこでの問題をカバーすることを提案しています。
垂直方向のリズムを維持するには、コンテンツブロック、ul>、ol>、blockquote>、table>、blockquote>などに対してmargin-bottomを行の高さと同じに設定します。画像の導入によってリズムが中断された場合は、Baseline.jsまたはBaselineAlign.jsを追加して修正できます。
基本
- フォントは100％の本文に基づいてください
- 相対的なem単位で作業する
- 余白を線の高さに設定して、デザインの垂直方向のリズムを維持します
高度な
- Enhance.jsまたは遅延フォント読み込みでフォント読み込みのパフォーマンスを向上させる
- セマンティック見出しにはSass @ includesを使用します。
- 多くの場合、h2マークアップを必要とするサイドバーウィジェットでh5スタイルを使用する必要があります。 BeardedのTypographicMixinを使用してサイズを制御し、以下のコードでセマンティックを維持します。
.sidebar h2 {@include heading-5}
JavaScriptでのメディアクエリ
メディアクエリを介してさまざまなビューポートのレイアウトを制御できるようになって以来、JavaScriptの実行にもそれを結び付ける方法を模索してきました。特定のビューポートの幅、高さ、向きでJavaScriptを起動する方法はいくつかあり、一部の賢い人々はEnquire.jsやSimple StateManagerなどの使いやすいネイティブJSプラグインを作成しています。 matchMediaを使用してこれを自分で作成することもできます。ただし、CSSとJavaScriptでメディアクエリを複製する必要があるという問題があります。
Aaron Gustafsonには、CSSとJSでメディアクエリを管理して照合する必要がないという巧妙なトリックがあります。このアイデアは元々ジェレミーキースからのものであり、この例ではグスタフソンがそれを完全に実装しました。
getActiveMQ（netm.ag/media-260）を使用して、body要素の最後にdiv＃getActiveMQ-watcherを挿入し、非表示にします。次に、CSS内で＃getActiveMQ-watcher {font-family：break-0;}を最初のメディアクエリfont-family：break-1;に設定します。 2番目のfont-family：break-2; 3番目などに。
スクリプトはwatchResize（）（netm.ag/resize-260）を使用して、ビューポートのサイズが変更されているかどうかを確認してから、アクティブなフォントファミリを読み戻します。これを使用して、ビューポートで許可されている場合にdl>にタブ付きインターフェイスを追加したり、ライトボックスの動作を変更したり、データテーブルのレイアウトを更新したりするなどのJS拡張機能をフックできます。 netm.ag/active-260でgetActiveMQCodepenをチェックしてください。
基本
- さまざまなビューポートのJavaScriptを忘れてください。ユーザーがすべてのビューポートからアクセスできる方法で、コンテンツとWebサイトの機能をユーザーに提供します。 JavaScriptは必要ありません
高度な
- メディアクエリの事前定義されたリストとしてBreakupを使用し、getActiveMQ-watcherのフォントファミリのリストの作成を自動化することにより、Gustafsonのメソッドを拡張します。
プログレッシブエンハンスメント
プログレッシブエンハンスメントに関する一般的な誤解は、「まあ、私はこの新機能を使用できない」と人々が考えるというものですが、実際にはその逆です。プログレッシブエンハンスメントとは、1つのブラウザでのみサポートされているか、ブラウザがない場合でも機能を提供できることを意味します。時間の経過とともに、新しいバージョンが到着すると、ユーザーのエクスペリエンスが向上します。
Webサイトのコア機能を見ると、それをHTMLとして配信し、サーバー側にすべての処理を実行させることができます。支払い、フォーム、いいね、共有、メール、ダッシュボード-それはすべて行うことができます。基本的なタスクが構築されたら、その上に素晴らしいテクノロジーを重ねることができます。これは、失敗したものをキャッチするためのセーフティネットがあるためです。ここで説明した高度なアプローチのほとんどは、プログレッシブエンハンスメントに基づいています。
レイアウト
柔軟なレイアウトは簡単に言うことができますが、さまざまなアプローチがあります。 ：nth-child（）セレクターを使用して、マークアップの少ない単純なグリッドレイアウトを作成します。
/ *グリッドのモバイルの最初の幅を宣言します * / .grid-1-4 {float：left;幅：100％; } / *ビューポートが37.5em以上の場合、グリッドを要素ごとに50％に設定します * / @media（min-width：37.5em）{。grid-1-4 {width：50％; } / *最初の要素の後に2つおきの要素でフロートをクリアします。これは、グリッド内の3番目、5番目、7番目、9番目...を対象としています。 * /。grid-1-4：nth-of-type（2n + 1）{clear：left; }} @media（min-width：64em）{。grid-1-4 {width：25％; } / *前のクリアを削除します * /。grid-1-4：nth-of-type（2n + 1）{クリア：なし; } / *最初の要素の後、4番目の要素ごとにフロートをクリアします。これは、グリッド内の5番目、9番目...を対象としています。 * /。grid-1-4：nth-of-type（4n + 1）{clear：left; }}
レイアウトに位置とフロートを使用することに別れを告げます。それらはこれまで私たちに役立ってきましたが、レイアウトのためのそれらの使用は必要なハックでした。これで、すべてのレイアウトの問題を解決するのに役立つ2人の新しい子供がブロックに加わりました。FlexboxとGridsです。
Flexboxは個々のモジュールに最適で、各モジュール内のコンテンツのレイアウトを制御します。 Flexboxを使用してより簡単に実現できる、私たちが提供しようとしているレイアウトがあります。これは、レスポンシブサイトではさらに当てはまります。詳細については、CSSTricksのFlexboxまたはFlexboxPolyfillのガイドをご覧ください。
CSSグリッドレイアウト
グリッドは、マクロレベルのレイアウトに適しています。グリッドレイアウトモジュールは、CSS内でレイアウトを記述するための優れた方法を提供します。現時点ではまだドラフト段階ですが、レイチェルアンドリューによるCSSグリッドレイアウトに関するこの記事をお勧めします。
最後に
これらは、レスポンシブプラクティスを拡張するためのいくつかのヒントです。新しいレスポンシブな仕事に取り組むときは、一歩下がって、基本が正しく理解されていることを確認してください。コンテンツ、HTML、レイヤーの改善されたエクスペリエンスから始めてください。デザインをどこに置くことができるかに制限はありません。
この記事はもともとの260号に掲載されました ネットマガジン.
