あなたは「 反応性のあるウェブサイト 」を持っていますか？ これは、 訪問者のデバイスと画面サイズに基づいてレイアウトが変更されたサイトです。 レスポンシブなWebデザインは業界のベストプラクティスになりました。 Googleが推奨し 、Web上の何百万ものサイトにあります。 しかし、異なる画面サイズに簡単に適合するウェブサイトと本当に反応するサイトを持つことには大きな違いがあります。
私は日常的に企業がウェブサイトを再設計し、新しいモバイルフレンドリーデザインの美徳を賞賛するプレスリリースを発表するのを見る。 私がこれらのサイトにアクセスすると、実際にはさまざまな画面に合わせて拡大縮小するレイアウトがありますが、それは応答性の考え方にあります。 これはたりない。 本当に応答性の高いウェブサイトは、より小さいまたはより大きなスクリーンに合わせて拡張するだけではありません。 これらのサイトでは、次のような重要な特徴があります。
1.最適化されたパフォーマンス
誰もウェブサイトが読み込まれるのを待つことを好まず、誰かが接続が理想的ではないモバイルデバイスを使用している場合、サイトをすばやくロードする必要性がさらに重要になります。
では、サイトの掲載結果をどのように最適化しますか？ 再設計の一環として新しいサイトを開始する場合は、そのプロジェクトの一部として成果予算を作成することをお勧めします。 既存のサイトで作業していて、最初から開始していない場合は、まずサイトの掲載結果をテストして、現在の場所を確認します。
サイトがパフォーマンス面でどのような立場にあるかを判断したら、ダウンロード速度を上げるために必要な改善を開始することができます。 おそらくあなたのサイトの画像が表示されます。 サイトの読み込み速度が遅すぎると、イメージが大きすぎるため、ウェブ配信用にイメージを最適化すると 、サイトがパフォーマンスの観点から実際に役立つことがあります。
現実のところ、ウェブサイトのパフォーマンスの向上とダウンロード速度の高速化は、すべての訪問者にとって喜ばしいことです。 結局のところ、サイトが「速過ぎる」と不平を言う人は誰もいませんが、サイトの読み込みに時間がかかり過ぎると、画面に反応しているかどうかにかかわらず、
2.スマートコンテンツ階層
ウェブサイトが大画面で表示される場合、実質的な画面の不動産が利用できるため、さまざまな方法でコンテンツをレイアウトすることができます。 重要なメッセージや画像、ニュースのアップデート、イベント情報、サイトのナビゲーションを一度に画面に表示できます。 これにより、訪問者は、ページ全体の内容を簡単かつ迅速にスキャンし、重要な内容を決定することができます。
このシナリオは、サイトデザインを携帯電話のような小さな画面デバイス用に変換するとかなり変化します。 突然、あなたは以前持っていた画面の不動産の一部で作業しています。 これは、サイト上で最初に表示されるものと、それに続くものなどを決定する必要があることを意味します。一度にすべてが表示されるのではなく、おそらく1つまたは2つのものを表示するスペースがあります。 これは、階層の決定を行う必要があることを意味します。 残念なことに、画面上で何が最初に来るのかを決めるのはしばしば、次にページ自体がコード化される方法などです。 応答性の高いサイトを構築するときは、コード内の最初のものが画面に表示され、その後にコードの2番目のアイテムなどが表示されるのが最も簡単です。 残念ながら、あるデバイスで最も重要なのは別のデバイスでは重要ではないかもしれません。 本当に応答性の高いサイトでは、状況によってコンテンツの階層が変わることを理解しており、どこに表示されているのかを知る必要があります。
CSSグリッドレイアウト、FlexboxなどのCSSレイアウトテクニックの改善により、HTMLコード内のコンテンツエリアの正確な順序で邪魔されるのではなく、Webデザイナーや開発者がコンテンツをインテリジェントにレイアウトする際のオプションが増えます。 これらの新しいレイアウト技術を活用することは、デバイスの状況やサイトのユーザーのニーズが進化し続ける中で、さらに重要になります。
3.デバイスの強みと弱みを考慮した経験
デバイスに関する話題に留意してください。誰かがあなたのサイトにアクセスするために使用できるデバイスのそれぞれには、そのプラットフォームに固有の長所と短所があります。 優れたレスポンシブサイトは、さまざまなデバイスの機能と限界を理解し、それらを使用して、訪問者がその瞬間に使用している可能性のあるデバイスに最適なカスタマイズされたエクスペリエンスを作成します。
たとえば、携帯電話には、従来のデスクトップコンピュータでは見つけられない多数の機能が含まれています。 GPSはモバイル中心の機能の1つの例です（はい、デスクトップでも一般的な位置情報を取得できますが、デバイスGPSはずっと正確です）。 あなたのサイトはGPS情報を使用して、その時点での正確な段階的な方向情報や特別なオファーを正確かつ細かく送信することができます。
実際にこのプリンシパルの別の例は、使用している画面の種類を理解し、その画面に最も適した画像を送信するサイトです。 高密度の画面がある場合、その画面に高品質の画像を送ることができます。 しかし、これらの画像はあまり能力の低い画面では無意味ですが、余分な品質は失われますが、余分なファイルサイズは実際にはダウンロードされません。
本当に優れたレスポンシブサイトは、ユーザーエクスペリエンス全体を考慮し、画面のデバイスの種類やサイズだけでなく、ハードウェアの重要な側面にも基づいてそのエクスペリエンスを調整します。
4.文脈による内容
当初、レスポンシブなウェブデザインは、さまざまな画面サイズに応じたサイトのレイアウトというアイデアのためにその名前を受けましたが、画面サイズだけでは対応できません。 デバイスの長所と短所を使用した前述の例をベースにして、これらの情報だけでなく、日付や時刻などの他のデータも使用して、実際にウェブサイトの体験をカスタマイズできます。
大規模なトレードショーイベントのためのウェブサイトを想像してみてください。 応答性の高いWebサイトでは、サイトのページのレイアウトが異なる画面に合わせて変更されますが、日付を使用して表示するコンテンツが最も重要です。 イベントの前の時間帯であれば、登録情報を目立つように表示することをお勧めします。 ただし、その時点でイベントが実際に発生している場合は、登録が最も重要なコンテンツではない可能性があります。 代わりに、その日のイベントのスケジュールは、そのユーザーの即時のニーズに関連性が高いため、より重要であると断定することができます。
物事をさらに進歩させるには、デバイスのGPSを利用して、実際にトレードショーでどこにいるのかを判断することができます。 彼らの場所に基づいてインタラクティブなコンテンツを提供したり、近くのブースやセッションを開始したりすることができます。
5.アクセシビリティ
サイトが訪問者のニーズに本当に反応できるかどうかを調べる最後の例は、 ウェブサイトのアクセシビリティについて考えることです。 ウェブサイトは、障害を持つ人を含め、できるだけ多くの人々が利用できるようにすべきである。 あなたのウェブサイトは、そのコンテンツにアクセスするためにスクリーンリーダーまたは他の支援されたソフトウェアを必要とする人によって使用されるべきである。 この方法では、障害のある訪問者とは異なるが、その経験がまだ適切であることを確実にしているため、サイトはニーズに応えています。
画面サイズだけでなく、できるだけ多くのデータポイントに応答することで、ウェブサイトは単なる「モバイルフレンドリー」以上のものになる可能性があります。それは、フレーズのあらゆる意味において本当に反応的な体験になることができます。