レスポンシブデザインとは何ですか? (解説動画とインフォグラフィック)

レスポンシブWebデザイン

それはXNUMX年かかりました レスポンシブWebデザイン (RWD)以来主流になる キャメロンアダムスが最初に紹介されました コンセプト。 アイデアは独創的でした。表示されているデバイスのビューポートに適応するサイトを設計できないのはなぜですか。

レスポンシブデザインとは何ですか?

レスポンシブウェブデザイン(RWD)は、サイトを作成して、携帯電話からデスクトップコンピューターまで、さまざまなデバイスで最適な表示エクスペリエンス(サイズ変更、パン、スクロールを最小限に抑えた読みやすさとナビゲーション)を提供することを目的としたウェブデザインアプローチです。モニター)。 RWDで設計されたサイトは、流動的なプロポーションベースのグリッド、柔軟な画像、および@mediaルールの拡張であるCSS3メディアクエリを使用して、レイアウトを表示環境に適合させます。

Wikipedia

言い換えれば、画像のような要素は、それらの要素のレイアウトと同様に調整することができます。 これは、レスポンシブデザインとは何か、そしてなぜあなたの会社がそれを実装すべきなのかを説明するビデオです。 最近再開発しました DK New Media レスポンシブで現在取り組んでいるサイト Martech Zone 同じことをするために!

ビューポートのサイズに基づいて編成されたスタイルの階層が必要なため、レスポンシブサイトを構築する方法は少し面倒です。

ブラウザはサイズを自己認識しているため、スタイルシートを上から下にロードし、画面のサイズについて該当するスタイルを照会します。 これは、サイズの画面ごとに異なるスタイルシートを設計する必要があるという意味ではなく、必要な要素をシフトするだけです。

モバイルファーストの考え方で運用することが、今日のベースライン標準です。 クラス最高のブランドは、サイトがモバイルフレンドリーかどうかだけでなく、完全なカスタマーエクスペリエンスについても考えています。

Monetate CEO、Lucinda Duncalfe

これは、複数のデバイス用にXNUMXつのレスポンシブデザインを作成することの潜在的な利点を示すMonetateのインフォグラフィックです。

レスポンシブウェブデザインのインフォグラフィック

レスポンシブサイトの動作を確認したい場合は、 Google Chrome ブラウザ(Firefoxにも同じ機能があると思います) DK New Media。 今すぐ選択 表示>開発者>開発者ツール メニューから。 これにより、ブラウザの下部に多数のツールが読み込まれます。 開発者ツールのメニューバーの左端にある小さなモバイルアイコンをクリックします。

レスポンシブテストクローム

上部のナビゲーションオプションを使用して、ビューを横向きから縦向きに変更したり、事前にプログラムされたビューポートサイズをいくつでも選択したりできます。 ページをリロードする必要があるかもしれませんが、レスポンシブ設定を確認し、すべてのデバイスでサイトの見栄えを良くするための、世界で最もクールなツールです。

3のコメント

  1. 1

    ウェブデザインはもはやウェブマスターの選択ではありません、それは今彼らにとって必須です。 この有益な投稿を共有していただきありがとうございます。

  2. 2

    このよく説明された記事をダグラスに感謝します。 内容的には同意せざるを得ない。 ほとんどのサイトでは、レスポンシブ レイアウトを作成するだけでは不十分です。 レスポンシブなコンテンツが必要です。 ただし、より基本的な Web サイトの場合は、これを処理する方法に関する十分に文書化された記事を使用します。

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.