レスポンシブウェブデザインのための7つのベストプラクティスのヒント

公開: 2016-01-06

モバイルウェブは着実に成長しており、Googleは応答性に基づいてページをランク付けすることを確認しているため、ウェブサイトがさまざまなデバイスや画面サイズに適応できることが重要です。

しかし、レスポンシブWebデザインとは、単にレイアウトを拡大または縮小して適応させるだけではありません。それは、コンテンツと機能を維持しながら、さまざまな方法で単一のWebサイトを配信することです。

それを念頭に置いて、レスポンシブWebデザインの7つのベストプラクティスのヒントを次に示します。

1.レスポンシブだと思う

レスポンシブウェブデザインが始まったとき、デザイナーは最大の画面を計画することから始め、次に最小の画面に達するまで縮小しました。多くの場合、それらには、小さな画面に収まるようにうまく分解されなかった派手な要素が含まれていました。そのため、モバイルバージョンは、オリジナルの骨抜きにされたコピーであり、やや後付けのように感じました。レスポンシブウェブデザイン-watered-down 今日、モバイルデバイスは多くのWebサイトで最大のトラフィック量を占めているため、モバイルユーザーは、他のユーザーと同じ品質のブラウジングエクスペリエンスを期待し、それに値します。しかし、それは大きな画面サイズも無視する必要があるという意味ではありません。多くの人は今でも大きなデスクトップを使用しており、1日を通してさまざまな画面間を移動する人が増えています。

これに取り組む最善の方法は、「モバイルファースト」アプローチを採用し、最初に最小の画面用に設計し、次に画面サイズを大きくするにつれて必要に応じて要素を追加することです。

人気のあるブレークポイントの設計に焦点を当てますが、その間のギャップも考慮に入れてください。新しいデバイスが毎日市場に出回っており、今日ほとんど使用されていない画面サイズが来月の新しい大きなものになる可能性があります。また、タブレットをポートレートモードで使用している人を検討することを忘れないでください。これは、レーダーの下に滑り込んで、押しつぶされたデスクトップや、無駄なスペースが多い基本的なモバイルレイアウトのように見える可能性があります。

2.内容に注意してください

「サイズに合わせる」アプローチの罠にはまらないでください。このアプローチでは、コンテキストを考慮せずにすべての要素をページに合わせることに重点が置かれます。最も重要なコンテンツと機能に集中し、どの要素がチョップに直面しているかについて残忍であることから始めます。さまざまな画面サイズに移動するときは、各段階でそれらが含まれていることを確認してください。長い間考えなければならない場合は、おそらくそこにある必要はありません。レスポンシブウェブデザインコンテンツ必要なコンテンツと機能が明確になったら、レイアウトの作業を開始できます。画面サイズの多様性は、「折り畳みの上」という従来の概念がほとんどなくなっていることを意味します。人々はスクロールに慣れています-FacebookやTwitterのようなサイトの出現はそれに気づいています-したがって、スクロールを促進するようにサイトを設計しますが、画面の上部に向かって最も重要な情報を保持します。これには、連絡先の詳細、CTA、およびeコマースサイトでは非常に重要な[バスケットに追加]ボタンが含まれます。

ユーザーにとっての重要性に基づいて要素に優先順位を付けます。デスクトップ上の画像の横にテキストを収めることができる場合は、モバイルデバイスでユーザーの注意を引くのに最適な要素を慎重に検討し、それが最初になるようにします。プレビューページに付随するブログ画像などの他の要素は、モバイルバージョンから完全に除外して、コンテンツ自体に焦点を当てることができます。

3.スケーラブルなナビゲーションを試す

ナビゲーションはレスポンシブウェブデザインの最も難しい側面の1つですが、最も重要な側面の1つでもあります。ほとんどのウェブデザインルールとは異なり、これは一貫性を保つ必要のない1つの場所です。大画面で使用される大きくて複雑なメニューはモバイルでは機能しないため、画面ごとに異なる種類のナビゲーションを作成することはまったく問題ありません。サイズ。レスポンシブウェブデザインナビゲーション隠しナビゲーションは多くのモバイルサイトで人気があり、ハンバーガーなどのシンプルなアイコンがメニューの存在を示します。メニューを下のコンテンツの上にスライドさせるか、画面全体にオーバーレイすることができます。もう1つのオプションは、水平方向のスワイプをふっくらさせることです。この場合、コンテンツは画面の横から明らかに消え、ユーザーはスワイプしてコンテンツを表示できます。

どちらを選択しても、一貫性を完全に否定しないでください。メニューは、機能が異なっていても、視覚的特性の点で他のバージョンと同じように感じる必要があります。

4.すべての画像について

Webサイトの画像の品質は、訪問者のサイトの第一印象の大部分を占めるため、非常に重要です。ただし、大きな画像は、帯域幅の機能が低いモバイルデバイスのダウンロード速度に悪影響を及ぼします。レスポンシブウェブデザイン画像コンテンツと同様に、画面サイズごとに各画像を含めるかどうかを疑問視し、複数の大きな画像を含むスライダーなどの要素を再検討しながら、絶対に必要なものだけを含める必要があります。

残りの画像を最適化し、アダプティブサイジングで柔軟にし、適切な形式を使用して保存します。とにかく画像はおそらく全画面表示になるため、モバイルで「画像の拡大」機能が必要になる可能性は低いことを忘れないでください。画像ギャラリーを含める必要がある場合は、長スクロールナビゲーションを選択するか、水平スワイプを使用して画像ギャラリー間を移動します。

5.タイポグラフィを考える

中画面または大画面で機能する多くの書体は、小さい画面サイズに縮小すると正しく読みにくくなるため、選択するタイポグラフィは慎重に検討する必要があります。そのため、常に異なる画面で徹底的にテストしてください。レスポンシブウェブデザインタイポグラフィ見出しのバランスを慎重に取り、機能を明確にする必要がありますが、大きすぎると過度に優勢に見える可能性があり、背景色とフォントの間に十分なコントラストがあることを確認してください。

さまざまな画面サイズに移動するときは、コンテンツの行の長さに注意してください。行が長すぎると、読みにくくなる可能性があります。行の長さを約60〜75文字に保ち、より広い画面では、サイドバーまたは画像でスペースを埋めます。

6.タッチスクリーン用に最適化

レスポンシブウェブデザインは、さまざまな画面サイズを考慮する必要があるだけではありません。また、さまざまな入力方法に合わせて最適化する必要があります。また、タッチスクリーンは扱いにくい場合があるため、ボタンのサイズとリンクに余裕を持たせて、約44ポイント四方のクリック可能な領域を目指してください。レスポンシブウェブデザインタッチスクリーンまた、タッチスクリーンのユーザーエクスペリエンスを最適化する必要があります。はい、その性質上直感的ですが、スワイプジェスチャなどの微妙なナビゲーション補助機能は貴重な追加機能です。

7.実際のデバイスでテストする

最後に、設計の計画は重要なステップですが、理論だけに頼らないでください。デザインとCSSブレークポイントのチェックに役立つモバイルエミュレーターがありますが、実際のテストに勝るものはありません。これらのエミュレーターの多くは、さまざまな画面サイズのみを複製し、さまざまなオペレーティングシステムの機能は複製しません。レスポンシブウェブデザインテストさまざまなサイズの画面とさまざまなユーザーがいることを確認し、デザインを徹底的にテストします。これにより、多くの場合、新鮮な視点が生まれ、正しい方向に進んでいることを確認したり、どこで改善できるかを示したりします。

レスポンシブウェブデザインは絶えず進化し成長しており、ここでは表面をかじっただけです。この分野のベストプラクティスも頻繁に変更されているため、最新の開発に遅れずについていくことが重要です。多くのユーザーは、デバイスの帯域幅が弱く、解像度が低く、処理能力が小さいため、サイトはシンプルで、よく整理され、クリーンで、使いやすく、さまざまな画面で見栄えがする必要があります。

モバイルファースト開発の実践を開始する時が来ました。これがあなたがする必要がある理由です。