RessによるレスポンシブWebデザインの改善

この投稿はNetBiscuitsが後援しました。 SitePointを可能にしてくれたスポンサーをサポートしてくれてありがとう！キーテイクアウト

レス、またはレスポンシブWebデザインサーバー側コンポーネントは、サーバー側のインテリジェンスを組み込むことにより、従来のレスポンシブWebデザインを強化します。このサーバー側のコンポーネントは、デバイスの機能を検出し、ウェブサイトの最適なバージョンを提供し、より効率的でパーソナライズされたユーザーエクスペリエンスにつながります。
• Ressは、特定のデバイスに関連するデータのみを送信し、負荷時間を短縮し、全体的なパフォーマンスを向上させることにより、Webサイトのパフォーマンスを向上させることができます。また、デバイスの機能に基づいて画像やその他のメディアファイルの配信を調整して、これらのファイルがウェブサイトのロード時間を不必要に遅くすることを防ぎます。
RESを実装するには、より高いレベルの技術的専門知識が必要であり、サーバーサイドのプログラミングとデバイスの検出が必要なため、よりリソースを集められる可能性がありますが、最終的にはユーザーエンゲージメントの増加につながり、収益が増加する可能性があります。 RESSは、他のWebデザイン手法と組み合わせて使用​​でき、既存のWebサイトと新しいWebサイトの両方で実装できます。
個別のモバイルWebサイト
• 時間、予算、正気が重要でない場合は、モバイルユーザーとデスクトップユーザー向けに個別のサイトを構築できます。コンテンツは、デバイスのために再パッケージ化および合理化できます。残念ながら…

デスクトップまたはモバイルのいずれかの日はもうなくなっています。画面サイズ、ピクセル密度、処理速度、ネットワーク機能、HTML5機能を備えた多種多様なデバイスがあります。そして、私たちのほとんどは、ウェアラブルをまだ考えていません！ブランドは、あらゆる不測の事態に対応するために多数のサイトを作成する必要がありますか？

ユーザーのデバイスを識別することは困難です。ユーザーエージェント文字列は、解析するのが難しいことで有名であり、画面の寸法、ネットワーク速度、またはその他の機能については何も教えません。

通常、各サイトに個別のURLが必要です。 www.site.comおよびM.Site.com。ユーザーは自分のデバイスのために間違ったサイトに行き着くことができ、注意しないと、検索エンジンが複製コンテンツに対してペナルティを科します。 1つのWebサイトを管理するのは困難です。ここで、いくつかのサイトを構築および展開し、それらが同時に更新されるようにする必要があります。おそらく、開発者は試練を乗り切るでしょうが、コンテンツエディターは異なるビューを対象とする複数の資産に対処しますか？ とはいえ、ターゲットエクスペリエンスを提供するため、AmazonやeBayなどの企業にとって、個別のサイトは依然として魅力的な選択肢です。

レスポンシブWebデザイン

あるいは、デザイナーと開発者は、ブラウザのViewPortの寸法に応答するデザインを使用できます（通常、小さなデバイスの画面全体）。モバイルファーストアプローチを使用して、このサイトは、おそらくハンバーガーアイコンからアクセスされる小さなテキストとメニューを使用して、デフォルトの線形レイアウトを実装します。寸法が増加すると、デザインを再入力して、追加の列、より大きなフォント、より多くの間隔、常に可視メニューなどを表示できます。 RWDは、別々のビューで発生した多くの問題を解決します。 1つのセットのコンテンツを備えた単一のサイトがあり、無限のさまざまな画面サイズに応答できます。残念ながら…

1. スクリーンサイズは、デバイスの機能を粗く示し、プロセッサの速度、ネットワーク帯域幅、またはHTML5サポートのレベルについては何も教えてくれません。大きなモニターを持つユーザーは、ダイヤルアップ接続で20年前のPCをまだ使用している可能性があります。
同じページと資産が（ほとんど）すべてのデバイスに配信されます。メディアクエリ内のCSSバックグラウンド画像を使用して画像読み込みを制限することは可能です。クライアント側の適応技術は、ページのレンダリングを遅くすることもでき、これに対処する必要があります。たとえば、ユーザーが遅い接続にある場合でも、大きな画像を高密度の網膜画面に配信できます。
2. いくつかのオプションは、クライアントのみに実装するのは簡単ではありません。コンテンツを再要素することは困難です。数ページで長い記事を分割します。すべてのデバイスは、小さな画面で読むのが非現実的であっても同じページを受け取ります。
3. 平均Webページは2MBを超えています。多くはレスポンシブウェブデザインを使用していますが、低電力のデバイスでサイトが
レスポンシブ
4. であることはわかりません。迅速で応答性の高いWebサイトを作成することは、パフォーマンスに基づいてGoogleレートサイトのサイトでより不可欠になりました。 したがって、個別のWebサイトは困難であり、レスポンシブなデザインはすべての問題を解決できません。考慮できる3番目の方法はありますか？ ress：レスポンシブWebデザインサーバー側コンポーネント
Ressは2011年にLuke Wroblewskiによって提案されました。このコンセプトはレスポンシブWebデザインを使用しますが、必要に応じて修正されたコンテンツを提供するために機能検出を補完します。たとえば、できます：

帯域幅が制限されている場合、小さな画面に小さな画像を提供します

または

• デバイスが高速接続でHTML5サポートを持っている場合にのみビデオ要素を提供します。 iOSやますますAndroidデバイスでフラッシュゲームや広告を提供しないでください。
電子書籍リーダーのグレースケール画像に切り替えます。
接続が遅い場合のAJAXポーリングリクエストの頻度を減らします。
• デバイスがアニメーションをサポートしていない場合、不必要なCSS3エフェクトを削除します。SVGが利用できない場合のPNG画像へのフォールバック。
ユーザーが特定の場所または国にいるときに追加情報を提供します。

特にサーバーでは、機能の検出が困難であるため、Ressは広く使用されている技術になりませんでした。新しいブラウザーまたは機能がリリースされるたびに、検出コードを検証、更新、および維持する必要があります。幸いなことに、NetBiscuitsなどのサードパーティサービスがあります これはあなたのために大変な仕事をし、最新のデバイス情報で常に更新されています。 最初のステップ：NetBiscuitsアカウントへのサインアップ - サービスを評価するための30日間の無料トライアルがあります。 NetBiscuitsトラッキングコードをWebサイトテンプレートに貼り付け、数秒待って、魅力的なデバイスと訪問者のフロー分析チャートを表示します。

クライアント側のデバイス検出api

追跡コードは、650を超えるハードウェア、ブラウザー、オペレーティングシステム、ネットワーク検出パラメーターを公開するDCSという名前のグローバルJavaScriptオブジェクトも定義します。例： 帯域幅スコアを評価します - ゼロ（非常に遅い）から20（通常はエッジ/HSPA）から60（3g）から120（4g/wifi）までのランク：

<span>var bandwidthScore = dcs.get('bandwidth.score'); // integer</span>

デバイスにタッチスクリーンがあるかどうかを特定します。

<span>var touchScreen = dcs.get('browser.cantouch'); // boolean</span>

高密度ピクセル比で：

<span>var pixelRatio = dcs.get('internal.browserpixelratio'); // real</span>

デバイスには電話会議施設がありますか？

<span>var canCall = dcs.get('browser.cantelmakecall'); // boolean</span>

SVGはサポートされていますか？ Smil Animationsは利用できますか？

<span>var svg = dcs.get('browser.css.cansvg'); // boolean
</span><span>var svgSmil = dcs.get('browser.css.cansvgsmil'); // boolean</span>

ユーザーの配置場所をご覧ください。

<span>var county = dcs.get('internal.countrycode'); // 2-character string, e.g. "US"</span>

互換性のあるHTML5ビデオ形式を提案します。

<span>var videoFormat = dcs.get('video.suggestvideoformat'); // object</span>

どのブラウザが使用されているかを検出します。

<span>var browser = dcs.get('browser.model'); // string, e.g. "Firefox 38"</span>

そして、それが最新リリースかどうか：

<span>var latest = dcs.get('browser.islatestrelease'); // boolean</span>

サーバー側のデバイス検出api

デバイスの検出は、送信前に応答を変更できるサーバーで最も便利です。コードは、PHP、Java、および.NET用に提供されます。 PHPの例… デバイスはH264 HTML5ビデオをサポートし、合理的な接続を持っていますか？

<span><span><?php
</span></span><span><span>if ($dcs->video->canhh264 && $dcs->internal->bandwidthscore > 150) {
</span></span><span>	<span>echo '<video src="video.mp4" controls></video>';
</span></span><span><span>}
</span></span><span><span>?></span></span>

このデバイスはAJAXをサポートし、JavaScriptのパフォーマンスをiPhone 5（スコア100の参照デバイス）よりも優れていますか？

<span><span><?php
</span></span><span><span>if ($dcs->browser->canajax && $dcs->hardware->performance->js > 100) {
</span></span><span>	<span>echo '<script src="moderndevice.js"></script>';
</span></span><span><span>}
</span></span><span><span>?></span></span>

すべてのデバイスで簡単に開発し、完全に動作するソリューションがない場合がありますが、Ressは応答性の高いWebデザインで発生するパフォーマンスの問題の多くを解決する良い妥協点を提供します。優れたデバイス検出サービスだけが必要です。

ressを使用したレスポンシブWebデザインの改善に関するよくある質問 Ressと従来のレスポンシブWebデザインの主な違いは何ですか？

​​

従来のレスポンシブWebデザイン（RWD）は、クライアント側（ブラウザー）にのみ依存して、デバイスの画面サイズに基づいてWebサイトのレイアウトを適応させます。一方、Ress（サーバーサイドコンポーネントを使用したレスポンシブWebデザイン）は、クライアント側の応答性とサーバー側のインテリジェンスを組み合わせています。これは、サーバーがデバイスの機能を検出し、ウェブサイトの最適なバージョンを送信し、より効率的でテーラードユーザーエクスペリエンスをもたらすことを意味します。

RessはWebサイトのパフォーマンスをどのように改善しますか？

Ressは、デバイスに送信される不要なデータの量を減らすことでWebサイトのパフォーマンスを改善します。従来のRWDでは、デバイスに表示されない要素のデータを含むすべてのデータが送信されます。ただし、Ressを使用すると、サーバーは特定のデバイスに関連するデータのみを送信し、負荷時間を短縮し、全体的なパフォーマンスを改善します。すべてのタイプのデバイスと互換性があるように設計されています。 Ressのサーバー側コンポーネントは、Webページを要求するデバイスの機能を検出し、それに応じて最適化されたバージョンのサイトを提供できます。これにより、デスクトップからスマートフォンまで、すべてのデバイスでシームレスなユーザーエクスペリエンスが保証されます。読み込み時間が短くなり、ユーザーエクスペリエンスが向上すると、直帰率が低下し、ユーザーエンゲージメントが高くなります。これは、ウェブサイトをランキングするときに検索エンジンが考慮する要因です。さらに、Ressは、検索エンジンボットによるコンテンツのより効率的なクロールとインデックス作成を可能にします。 。サーバー側のプログラミングとデバイスの検出が含まれ、複雑な場合があります。さらに、新しいデバイスとブラウザに対応するためにデバイス検出データベースを定期的に更新する必要があるため、RESS Webサイトをメンテナンスすることは、よりリソース集中的になります。

Ressは、既存のWebサイトと新しいWebサイトの両方に実装できます。ただし、Ressを既存のWebサイトに統合するには、サイトのアーキテクチャとコードに大幅な変更が必要になる場合があります。これは、時間がかかり、複雑な場合があります。 Ressは、デバイスの機能に基づいて、画像やその他のメディアファイルの配信を最適化できます。サーバーは、画像のサイズを変更したり、より効率的な形式に変換したり、機能が限られているデバイス用に完全に省略したりできます。これにより、メディアファイルがウェブサイトの読み込み時間を不必要に遅くしないようにします。ウェブサイトと利用可能なリソース。サーバー側のプログラミングとデバイスの検出が必要なため、初期の実装はより高価になる可能性がありますが、パフォーマンスとユーザーエクスペリエンスの向上は、ユーザーエンゲージメントの増加と、長期的には潜在的に高い収益につながる可能性があります。

RESは、他のWebデザインの手法と組み合わせて使用​​できますか？

​​

はい、Ressは、プログレッシブエンハンスメントや適応設計などの他のWebデザイン技術と併せて使用できます。これらの手法は、より堅牢で柔軟なWebデザインソリューションを提供することによりRESを補完できます。 RWDの柔軟性とサーバー側コンポーネントの効率を組み合わせることにより、Ressはよりカスタマイズされた効率的なユーザーエクスペリエンスを提供します。さまざまな機能を備えたより多くのデバイスが出現し続けるにつれて、これらのデバイスに適応できるRessのような技術の必要性は増加するだけです。

以上がRessによるレスポンシブWebデザインの改善の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。