レスポンシブデザイン開発を改善する7つの方法

レスポンシブデザインは急速に業界標準になりつつあり、卓越性、プラットフォーム、およびツールの完全なメリーゴーランドが必要です。 その結果、専門家の考え方、特に効率を高めるためにワークフローを適応させる方法を理解することに考え方が変わりました。



もちろん、適応プロジェクトで作業するプロセスは非常に個人的で反復的であるという事実のため、それを分析し、あらゆる場面で解決策を提供することはかなり困難です。 ただし、いくつかの一般的な方法と手法はほとんど常に適用できます。



コンテンツ構造からスケーラブルな画像まで、レスポンシブデザインを改善するための7つのテクニックを見ていきます。

1.まずモバイル版

インターフェイスデザインの主な側面を段階的に改善する「モバイルファースト」アプローチは、より効率的で革新的な作業のためにモバイル環境の限界に焦点を合わせて理解するのに役立ちます。



つまり、最初は、最も単純なデバイス向けに最適化されたデザインとコンテンツが作成されます。 次に、小さな画面とメディアクエリのサポートを備えたデバイスの設計が拡張されます。 結論として、デスクトップのテンプレートとコンテンツは改善されています。 スマートフォンからネットワークにアクセスするユーザーの数は途方もないペースで増加し続けており、 Googleでさえ「モバイルファースト」アプローチを導入しています。



モバイルデバイス用の設計は、作業の終わりではなく、出発点になるはずです。 このアプローチにより、ユーザーのニーズに焦点を合わせ、重要なコンテンツに注意を払い、最適化された高速読み込みページを設計し、すべてを段階的に改善できます。



人気のあるCSS Foundationフレームワークの背後にあるZURBチームのメンバーが述べているように：

モバイルファーストのアプローチは、モバイルデバイスの設計に焦点を当てることではなく、サイトの使いやすさを向上させ、ウェブスペースをより効率的に使用し、ウェブページ上の不要な要素を減らすためにも使用されます。

この設計手法は若く、その実装中に発生する多くの技術的な困難にもかかわらず、このアプローチを使用することは、製品に適応性があり、焦点を絞った、簡潔で有望な基盤を作成していることを意味します。

2.コンテンツ戦略

レスポンシブデザインの目標は、あらゆるコンテキストで最高のユーザーエクスペリエンスを実現することです。 アダプティブWebサイトの作成は、ユーザーがどのデバイスで表示するかに関係なく、コンテンツをさまざまな目で見て読みやすく、アクセスしやすくする絶好の機会です。 段階的な劣化を選択するか、進歩的な改善を選択するかは問題ではありません。「 コンテンツアウト 」方法論を適用すると、ユーザーを最前線に置くコンテンツ戦略の開発に役立ちます。



UXMagが言ったように：

ユーザーに特定のケースごとに適切なコンテンツを表示するには、ユーザーが旅行のあらゆる段階で適切なコンテンツを提供する戦略が必要です。

情報インフラストラクチャとコンテンツ戦略の開発とは、ユーザーとそのニーズの調査に基づいたフレームワークと構造に基づいてコンテンツを作成することを意味します。



この知識と有用なデザインを作成するために必要な最小限のコンテンツは、さらに画面や拡張機能を追加できる基礎になります。 同様に、各タイプのコンテンツがサイトの目標にどのように関係しているかに関する重要な質問に答え、どのコンテンツがこれらの目標に貢献するかを確立することも重要です。 プロジェクトの初期段階でコンテンツが適切に構成されている場合は、他のプラットフォームに簡単に転送できることを確認してください。



Content Everywhereの著者として、Sarah Wachter-Boettcherは雄弁に次のように述べています。

コンテンツをフォームとコンテンツを決定するものとして話すと、コンテンツが優先事項ではなく、基本的なものであることが明らかになります。

3.スケッチとプロトタイプ

コンテンツ戦略とツールを開発した後、 適応設計プロセスにスケッチを導入し始めます。これにより、簡単にスケーリングできるスマートで整理されたレイアウトを作成できます。



今日のさまざまな画面サイズ、解像度、およびデバイス機能は、より多くのレイアウトを計画することを意味します。 スケッチの助けを借りて、大まかなスケッチや議論のアイデアを紹介できるため、結果として、プロジェクトの将来のフレームとプロトタイプの基礎を築くことができます。 スケッチはポータブルで手頃な価格であり、Photoshopで無限のモックアップを描くのに膨大な時間を費やすことなく、反復的で進化的なレイアウトを柔軟に作成および作成できます。 さらに、紙のレイアウトの視覚的およびコンテンツの精度は非常に低いため、最終的にどのように見えるかに注意を払うのではなく、ユーザーとのやり取りとコンテンツの流れに集中できます。 一般に、スケッチの重要な考え方は、フォームではなくコンテンツの適応性に焦点を当てることです。



スケッチには膨大なリソースがあり、 ZURBのレスポンシブ スケッチ シートにはモバイルファーストアプローチも含まれているため、フルサイズのモバイルページからデスクトップレイアウトのサムネイルサムネイルに移動できます。 または、必要に応じて、デスクトップバージョンから下に移動します。 iPadでスケッチすることもできます。 このツールは実際には重要ではありません。自分に合ったものを選択し、高速な反復を実行できます。



一連のスケッチを受け取ったら、 プロトタイプ作成に進むことができます。つまり、コンテンツ構造、ナビゲーション、マークアップ、ブレークポイントが特定のコンテキストで機能するかどうかを判断するために、単純なHTMLテンプレート（または作業ドラフトバージョン）を作成します。 それらは機能性と相互作用を改善する機会を提供し、最小限の視覚的デザインのおかげで、構造とコンテンツから注意をそらすことはありません 。 プロトタイピングには、多数のフレームワークとプラットフォームを使用するか、すべてを自分で行うことができます。



スケッチおよびプロトタイプ作成フェーズのある時点で、 パターンライブラリ（基本的な要素とパターンの動的で文書化された設計ライブラリを作成し、開始点として使用してから補足する）を作成すると良いと思うかもしれません。 このようなライブラリは、より柔軟なワークフローを提供するのに役立ち、特に一緒に作業するチームに役立ちます。 いくつかの リソース があります -最も印象的なものの1つは、Stuff and NonsenseのRock Hammerです。 開発および設計パターンのベースとして、またはアダプティブWebサイトを作成するための基礎として使用します。



Matt GriffinがA List Apartのテキストで述べたように、スケッチとプロトタイピングにより、「Webのレスポンシブデザインへのアプローチ全体を再考し、「Webサイト」と「モバイルサイト」の設計をやめることができます。コンテキストが変化したときにコンテンツの表示を決定する一連のルールを備えたコンテンツ配信システム。

4.フレームワーク

CSSフレームワークの選択は、プロジェクトのイデオロギーと個人的な好みに依存しますが、アダプティブWebサイトを作成するワークフローに導入することには多くの利点があります。 フレームワークを使用すると、開発プロセスを高速化し、ブラウザー間の互換性の標準的な問題を正規化し、グリッドベースの設計に構造化されたアプローチをもたらすことができます。 おそらく、フレームワークの主な利点は、最小限のテストとデバッグの必要性です。これは、フレームワークが特定のブラウザーに関連するエラーを修正し、ほとんどのブラウザーとモバイルデバイスで既にテストされているために可能です。



フレームワークを選択するとき、いくつかのことに注意を払うことが重要です。 開始するにはどのくらいのトレーニングが必要ですか？ どのくらいのドキュメントが利用でき、どのような条件でサポートが提供されますか？ フレームワークの機能は何ですか？



モバイルファーストアプローチを実装するフレームワークの1つは、ZURBチームのFoundationです。 その最新バージョンは、Luke Wroblewskiのモバイルファーストメソドロジに基づいてゼロから再構築されました-作成するレイアウトは、最初から小さなデバイス用に構築されます。 12列のグリッドはかなりのサイズにスケーリングでき、同時に簡単に「折りたたむ」ことができるため、モバイルデバイスに必要なすべての列が上下に収まるようにグリッドを縮小して、複雑なレイアウトを作成できます。 パーセント幅とメディアクエリの両方を介して、さまざまな画面サイズに適応します。 Foundationはより多くのデバイスをサポートし、よりインテリジェントになりました。 このフレームワークは柔軟性とパワーを兼ね備え、 Sassプリプロセッサを使用するため、フレームワークコンポーネントの追加の利点を保持しながら、すべてのプレゼンテーションクラスを削除し、選択した正確なセマンティックマークアップを記述できます。 Foundationには、ほぼすべてのコンポーネントのSassアドオンと拡張機能が付属しています。



アダプティブCSSフレームワークを使用するだけでは、設計と開発のすべての問題が解決されるわけではありませんが、これらのツールは時間をかけて調査する価値があり、将来のアダプティブプロジェクトの基礎として役立ちます。

5.ブレークポイント

ブレークポイントは画面（モバイル、タブレット、デスクトップ）の全体的なサイズに基づいている必要があると広く信じられています 。 ただし、特定のデバイス解像度向けに開発する場合、 モビリティ 、柔軟性、適応性を中心に構築される適応設計の可能性を完全には明らかにしていません。



コンテンツはWebの基礎であるため、デバイスに依存しないアプローチを使用し、コンテンツに応じてブレークポイントを設定することは理にかなっています。 設計を調べ、問題が実際に発生するポイントを見つけ、弱点を改善します。 新しいデバイスが常に表示されるため、新しい拡張機能ごとに新しいブレークポイントを取得しようとするのは実用的ではありません。



Elliot Jay Stocksの設計者および著者によると、このアプローチのプラスは次のとおりです。

見栄えが良いときにデザインを改善すれば、新しいデバイスのメディアクエリのアップグレードについて心配する必要はありません。

では、ブレークポイントに対する「コンテンツ」アプローチとはどういう意味ですか？

これは、コンテンツに基づいて構造の基礎を決定し、レイアウトで何が起こるかに焦点を当てることを意味します。 このアプローチでは、ページ形式でのデザイン管理ではなく、ページを組み合わせたデザイン原則に焦点を当てているため、移動するコンテキストでのコンテンツの動作の詳細についての詳細を提供します。

デザイナーのマーク・ボールトンは言います。



ブレークポイントを定義する別のアプローチは、ブラウザウィンドウの幅と高さを変更し、コンテンツをガイドとして機能させることで改善できるポイントを確認するために、 Implementing Responsive Designの著者であるTim Kadlecによって表明されました。 モバイルビュー（約300ピクセル）から始め、見栄えが良くなるまでブラウザーウィンドウを拡大します。 これが最初のブレークポイントになります -メディアクエリを設定し、問題を解決します。 ポイント間の許容範囲に達するまで、これらの手順を繰り返します。 ピクセルの代わりにREMとEMの値にブレークポイントを設定することにより（ Habrのトピックに関する質問 -およそTransl。）、柔軟性が大幅に向上します。



さらに、この方法はそれほど時間がかかりません。 ドリュートーマスは次のように述べています。

「特別な」メディアクエリを追加するには、メディアクエリを追加しなくてもコンテンツを機能させるソリューションを見つけるのと同じ時間がかかります。

「 ブレークポイントは死んだ 」という主張を擁護するのではなく、コンテンツがメディアクエリを満たす必要があると考えています。 どのデバイスでも動作するデザインを作成する唯一の方法は、すべてのデバイスを忘れることです。 さらに進んで古典的な読みやすさの理論に戻り 、それに基づいてブレークポイントを決定することもできます。

6.スケーラブルな画像

レスポンシブデザインの課題の1つは、 画像の操作です。 投影とテキストの両方に合わせて拡大縮小するには 、 移動可能でなければなりません。 この問題に関するW3Cの公式 仕様はまだ存在しないため、独自に新しいソリューションを探し、それらと連携するだけです。



そのようなソリューションの1つは、 Adaptive Imagesソフトウェアの使用です。これはFilament Groupによる実験に基づいています。 アダプティブイメージは、1つの.htaccessファイル、1つのphpファイル、1行のJavaScriptコードを使用して、訪問者の画面のサイズを決定します。 モジュールは、特定のデバイスに適した埋め込みHTMLイメージのスケーリングされたバージョンを自動的に作成、キャッシュ、および表示します。 Focal PointやReSRC.itなどのツールは、縮小された画像がどのようにトリミングされるかを考えることが重要です。小さなデバイスで表示したときに画像の主な焦点が失われないように、画像をインテリジェントにトリミングできます。



新世代の高密度網膜ディスプレイの出現により、適切なスケーリングのための画像最適化の重要性が高まっています。 レスポンシブ網膜イメージを作成する1つの方法は、 CSSスプライトを使用することです。 高解像度ディスプレイで作業するには、通常の解像度（@ 1x）と高解像度（@ 2x）の2つの画像が必要です。つまり、CSSでファイル、セレクター、リンクを複製します。 ただし、CSSスプライトを使用する場合、「高解像度の属性を含むすべてのセレクターの@ 1xスプライトファイルへのリンクを再定義するだけで済みます」とMaykel Loomansは言います 。 この手法により、ネットワーク要求の数が減り、スタイルシートのサイズが小さくなり、Retinaのより効率的な画像作成プロセスが可能になります。



ただし、CSSスプライトは、CSSでタグ付けされた画像でのみ機能します。 Webページ上の画像について、Imulusは、最後に@ 2xが付いた画像へのパスをサーバーで確認する非常に便利なRetina.jsプラグインを開発しました。



もう1つのヒントは、 Icon Fontsを使用して不要な画像をトリミングすることです。これにより、 スケーリング 、編集、および保守が非常に簡単になり、Webサイトが軽量になります。



適切なスケーリングを必要とするもう1つのメディアリソースはビデオです -それは柔軟で、画面から画面にスケーリングする必要があります。 ここではすべてが画像よりも少し複雑ですが、jQueryプラグイン（ Fitvid.jsやFluidvid.jsなど ）は開発を容易にするのに役立ちます。

7.ミニファイ

美しいレスポンシブWebサイトを作成するのに時間がかかりましたが、パフォーマンスを最適化するために何かをしましたか？ 画像、JavaScript、CSS、ライブラリ-これらはすべてダウンロードする必要があります。つまり、読み込み時間が長くなり、HTTPリクエストの数が増えます。



縮小化とは、コードから不要な文字を（機能を失うことなく）削除して、サイズを縮小し、ダウンロード速度を向上させることです。 これらの不必要な文字は、スペース、タブ、改行、コメントである場合があります。これらは、コードを最小化するために削除されますが、その品質はすべて変更されませんが、全体の重量は減少します。 重量をさらに減らすために、縮小レベルを設定して（特にJavaScriptの場合）、変数と関数名をより積極的に1文字に置き換えます。 独立したWeb開発者Michael Beckwithは、CSSファイルとJavaScriptファイルの縮小されていないコピーをサイトの作業用コピーとして保存し、「戦闘」バージョンでは縮小されたコピーを使用することをお勧めします。



CSSTidy 、 Minify 、 JSMin 、 YUI Compressor、 SquishIなどのツールを使用して、CSSおよびJavaScriptファイルを最小化できます。 これらのツールを比較することもできます。 最終的に、縮小ツールの選択は、コードとワークフローに依存します。



コードの縮小に加えて、 CSSとJavaScriptを共通ファイルに組み合わせて、HTTP要求の数を減らすことができます 。 スクリプトが異なるページで異なる場合、これは非常に困難になる可能性がありますが、応答時間を短縮するためには価値があります。 パフォーマンスを最適化する別の方法は、 Gzip圧縮を有効にすることです。 サーバーでのアクティベーション後、ブラウザは.htmlファイルではなく.zipファイルを送信します。次に、ブラウザはアーカイブをダウンロードして解凍し、ユーザーにコンテンツを表示します。その結果、100キロバイトのhtmlファイルをダウンロードする代わりに、圧縮後に15キロバイトのファイルがダウンロードされます。これは、サイト訪問者がよりコンパクトで高速な圧縮コンテンツを操作し、ダウンロード時間が短縮されることを意味します。読み込み時間の短縮は収益に直接影響することを忘れないでください。そのため、一度にいくつかの利点があります。



PS翻訳に関するコメントはPMで受け付けています。



PPSまた、ユーザビリティとUXの世界で興味深い出版物のダイジェストをブログに投稿し始めました。突然、誰が気にします。