レスポンシブ Web をデザインするにはどうすればいいですか?レスポンシブウェブデザインのメリットとデメリット

レスポンシブ Web をデザインするにはどうすればいいですか?レスポンシブウェブデザインのメリットとデメリット

最近レスポンシブ デザインについて学んでいて、これについていくつか整理してみました。写真の一部はインターネットから取得したものです。

1. レスポンシブ Web デザインが必要な理由

モバイルデバイスの普及とPCモニターのサイズの段階的な違いにより、従来のWebページは複数のデバイスの閲覧効果を満たすことができなくなりました。たとえば、従来のページは、大きなブラウザでは大きな空白領域があり、小さなブラウザやモバイルデバイスでは完全に表示できません。または、ページがモバイルデバイスのサイズに合わせて縮小され、正常に閲覧できません。クリックポイントにも影響します。多くの人は閲覧する前にページを拡大することを選択するため、ページ全体を継続的にドラッグする必要があり、ユーザーに悪い体験を与えます。

簡単に言えば、ポイントは次のとおりです。

さまざまな画面サイズ、さまざまなオペレーティングシステム、さまざまなアクセスデバイス、さまざまなニーズ

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

1つのWebサイトで複数の端末に対応します。

同じコードでも、さまざまなアクセス デバイスに合わせてデバイスを適応させることで、異なる効果を発揮できます。常にコンテンツを優先します。モバイル デバイスを優先: 目立たない js と段階的な機能強化。ブラウザ ベース: 機能とデバイス検出の段階的な機能強化。

3. レスポンシブデザインの代替案

ウェブサイトの完全に独立したモバイル バージョンを開発し、モバイル アプリケーション APP を開発します。しかし、そうすることにはいくつかの欠点があります。

デバイスの適応を通じてリダイレクトできる、Web ページの独立したバージョンを開発します。複数のページのメンテナンスが必要です。ホームページ レベルのページには適していますが、モバイル アプリケーションを開発するためのコンテンツ ページには適していません。開発コストが高く、検索エンジンへの組み込みに役立ちません。

4. レスポンシブウェブデザインのメリットとデメリット

利点:

マルチターミナルのビジュアルと操作体験スタイルが統一されています。開発、保守、運用コストが低く、さまざまなデバイス間の互換性が強力です。柔軟な操作: ページはレスポンシブデザインで、ページの必要な部分のみを変更できます。ユーザーフレンドリー: URL が変更されないなど、ユーザーは常に Web サイトに接続したままにできます。共有の蓄積: 単一の URL アドレスを通じてすべてのソーシャル共有リンクを収集します。検索エンジンの最適化: モバイル Web サイトとデスクトップ Web サイト間の接続を完了できます。リダイレクトなし: ユーザーエージェントのターゲティングは含まれません。

不十分:

互換性: ブラウザのバージョンが低いと、互換性の問題が発生する可能性があります。モバイル帯域幅トラフィック: カスタマイズされた Web サイトのモバイル バージョンと比較すると、トラフィックがわずかに大きくなります。読み込みに一定の時間がかかります: レスポンシブ デザインでは、一見不必要な HTML と CSS をダウンロードする必要があります。それ以外にも、画像がデバイスに応じて適切なサイズに変更されていなかったため、読み込み時間が 2 倍になっていました。検索エンジンの最適化: レスポンシブ Web デザインでは、検索エンジンのキーワードを決定するのは簡単な作業ではありません。そのため、一般的なデスクトップ ユーザーと比較して、モバイル ユーザーは異なるキーワードを使用する傾向があり、タイトルなどの変更がより困難になります。Google ランキング: レスポンシブ Web サイトがモバイル コンテンツのみに基づいている場合、Web サイトの Google ランキングに影響を与えることは困難です。 Google はこのような Web サイトをサポートしていないため、Web サイトをインデックスに登録しません。所要時間: レスポンシブな Web サイトの開発は時間のかかる作業です。既存の Web サイトをレスポンシブに変換する予定の場合は、さらに時間がかかる可能性があります。レスポンシブな Web サイトが必要な場合は、レイアウトを最初から再設計するのが最適です。レスポンシブ Web デザインのレイアウトは主に流動的であるため、デザイナーはデザイン スタイルをほとんど制御できません。そして今こそ、デザイナーたちがさまざまな「レプリカ」を事前に展示する時です。デザイナーは、それぞれモバイル レイアウトとデスクトップ レイアウトのワイヤーフレームとデザイン プロトタイプを表示しようとします。これら両方のレイアウトが改善されて初めて、レスポンシブ Web デザイン戦略を真に実現できるようになります。

5. レスポンシブとアダプティブの違い

レスポンシブレイアウト: Fluid Web

ウェブページのレイアウトを変更してユーザーエクスペリエンスを向上させると、テストが難しくなります。

アダプティブレイアウト: 固定ブレークポイント

完全にスケーラブルな Web ページは実装コストが安く、テストも簡単で、設計により制御しやすくなります。

6. 携帯端末の画面表示要素

モバイル デバイスのブラウザー カーネル: Trident (IE)、Gecko (FF)、Presto (opera、廃止)、Webkit (Safari、Chrome)、Blink (Google)

モバイルデバイスのサイズ: iPhone (980)、iPad (1024)、Android (480*800 解像度で 980)、WinPhone (1024) など。

モバイルデバイスの解像度:

7. レスポンシブウェブデザインプロセス

ユーザー調査とデバイス仕様の見積もり

フレームワークのプロトタイプの計画とテスト

ビジュアルデザイン

フロントエンド構築

<<:  VS2019をMySQLデータベースに接続するプロセスと一般的な問題の概要

>>:  Spring Boot 階層化パッケージング Docker イメージの実践と分析 (推奨)

推薦する

CSS における zoom:1 属性の定義と機能

今日、CSS の zoom 属性は何のために使用されるのかと尋ねられました。この属性は、フローティン...

ウェブサイトアイコンを追加するにはどうすればいいですか?

最初のステップは、アイコン作成ソフトウェアを準備することです。まず、いわゆるアイコンは拡張子 .ic...

史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 1) (パート 35)

データのバックアップと復元に関する最初の記事を皆さんに共有します。具体的な内容は次のとおりです。基本...

ウェブフォーム送信方法の詳細な概要

まず、フォームを送信するいくつかの方法を見てみましょう。 1. <!--一般的な送信ボタン--...

Docker のホスト間コンテナ通信オーバーレイ実装プロセスの詳細な説明

サーバーも 2 つあります。準備:コンテナのホスト名を設定する consul: kv タイプのストレ...

別の種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...

テーブルの最大幅と最小幅を設定する際の互換性の問題と解決策の詳細な説明

テーブル内の min-width と max-width プロパティの設定 <テーブル>...

Vuexの特性と機能の詳細な説明

目次Vuex とは何ですか? Vuexの5つの特性vuex の State 機能とは何ですか? vu...

ドラミング効果を実現するJavascript

この記事では、ドラミング効果を実現するためのJavascriptの具体的なコードを参考までに紹介しま...

HTMLフォームのいくつかの送信方法の概要

最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...

HTML の水平および垂直中央揃えの問題の概要

最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...

MySQL スケジュールバックアップタスクの簡単な分析

導入実稼働環境では、データの損失を回避するために、通常、データベースは定期的にバックアップされます。...

Mybatis mysqlの削除操作では、最初のデータメソッドのみを削除できます。

バグ図のように、削除文とパラメータをデータベースにコピーして実行し、2つのデータを削除しようとしたの...

MySQL トランザクション自動コミット自動コミット操作

MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...

CSS での三角形の描画と巧妙な応用例の詳細な説明

鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...