レスポンシブWEBデザイン_html/css_WEB-ITnose

私は最近レスポンシブデザインについて勉強しており、いくつかの写真はインターネットからのものです。

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

現在のモバイルデバイスの大規模な使用と PC モニターのサイズの徐々に大きな違いにより、従来の Web ページは複数のデバイスの閲覧効果に対応できなくなりました。 、従来のページなど、大きなブラウザでは大きな空白領域が発生しますが、小さなブラウザやモバイル デバイスではページを完全に表示できなかったり、ページがモバイル デバイスのサイズに合わせて縮小されたりするため、表示することができなくなります。通常の閲覧では、クリック連絡先にも影響します。多くの人は閲覧中にページを拡大することを選択するため、ページ全体を継続的にドラッグする必要があり、ユーザーのエクスペリエンスが低下します。

一言で言えば、以下の点です:

さまざまな画面サイズ

さまざまなオペレーティングシステム

さまざまなアクセスデバイス

さまざまなニーズ

2. レスポンシブ Web デザインとは

ウェブサイトは互換性があります複数の端末で。

同じコード

デバイス適応を通じて

異なるアクセスデバイスに出会う

異なる効果を表示できる

常にコンテンツファースト

モバイルデバイスファースト: 控えめな JS と段階的な強化

ブラウジングデバイスに基づく: 機能と機能の段階的な強化デバイス検出

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

完全に独立したモバイル版の Web サイトを開発し、モバイル アプリケーション APP を開発します。しかし、これにはいくつかの欠点があります:

デバイス適応を通じてジャンプできる独立したバージョンの Web ページを開発するには、複数のページを維持する必要があります。これはホームページレベルのページには適していますが、コンテンツ ページには適していません

。モバイルアプリケーションの開発、開発コストが高く、検索エンジンの組み込みには向かない

4. レスポンシブ Web デザインの長所と短所

利点:

複数の端末で統一されたビジュアルと操作体験スタイル

開発、メンテナンス、運用のコストが低いコスト

異なるデバイス間 強力な互換性

柔軟な操作: レスポンシブ デザインはページ固有であり、必要なページ部分のみを変更できます

ユーザーフレンドリー: ユーザーはいつでも URL などの Web サイトにアクセスできます変更はありません

蓄積と共有: 単一の URL アドレスですべてのソーシャル共有リンクを収集します

検索エンジンの最適化: モバイル Web サイトとデスクトップ Web サイトの間の接続を完了できます

リダイレクトなし: ユーザー エージェント リダイレクトが含まれません

欠点:

互換性: 低バージョンのブラウジング サーバーとの非互換性の問題がある可能性があります

モバイル帯域幅トラフィック: カスタマイズされた Web サイトのモバイル バージョンと比較して、トラフィックがわずかに大きくなります

読み込みに一定の時間がかかります: レスポンシブ デザインでは、不要と思われる HTML と CSS をダウンロードする必要があります。これに加えて、画像はデバイスに応じて適切なサイズに変更されないため、読み込み時間が正式に 2 倍になります。

検索エンジンの最適化: レスポンシブ Web デザインでは、検索エンジンのキーワードを決定するのは簡単な作業ではありません。したがって、通常のデスクトップ ユーザーと比較して、モバイル ユーザーは異なるキーワードを使用し、タイトルなどの変更がより困難になります

Google ランキング: レスポンシブな Web サイトがモバイル コンテンツのみに基づいている場合、その難易度は、その Web サイトの Google ランキングに影響します。 Webサイト。 Google はそのような Web サイトをサポートしていないため、Web サイトのインデックスは作成されません

費やした時間: レスポンシブな Web サイトの開発は時間のかかる作業です。既存の Web サイトをレスポンシブ Web サイトに変換する予定がある場合は、さらに時間がかかる可能性があります。レスポンシブ Web サイトが必要な場合は、スケッチから再デザインするのが最善です

レイアウト: レスポンシブ Web デザインのレイアウトは主に流動的なため、デザイナーはデザイン スタイルをあまり制御できません。そして今、デザイナーがさまざまな「レプリカ」を事前に披露する時が来ました。デザイナーは、モバイル レイアウトとデスクトップ レイアウトに分けてワイヤーフレームを表示し、プロトタイプをデザインしようとしました。両方のレイアウトが改善された場合にのみ、レスポンシブ Web デザイン戦略を真に実現できます。

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

レスポンシブレイアウト: 流体ネットワーク

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. レスポンシブ Web デザイン プロセス

ユーザーリサーチとデバイス仕様見積もり

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

ビジュアルデザイン

フロントエンド構築