Responsive Designのサーバー側には何が含まれますか？

Question

レスポンシブなCSSデザインのサイトを開発する場合、サイトはクライアントの画面サイズに基づいて情報が表示される方法を変更します。多くの場合、画面サイズが小さくなると、情報が少なく表示されます。

あなたは、デスクトップ用に設計されたサイトを持っているとします。サーバーサイドのコードでは、いくつかのデータベースクエリを作成し、そのページでその情報を何らかの形で表示します。

あなたのCSSデザインは応答性があり、一部の情報は小さな画面のデバイスには表示されません。その情報の一部は、データベースクエリからのものではないと言います。つまり、モバイルデバイスがこのページを読み込むと、画面サイズのために結果情報がエンドユーザーに表示されないため、サーバー側コードは不要なデータベース呼び出しを行っています。

レスポンシブデザインは、通常、デバイスの画面サイズに基づいて表示される情報を判断するためにCSSメディアクエリを使用します。レスポンシブルデザインのための効果的で効率的なサーバーサイドコードを書くための良いアプローチは何ですか？

Answer 1

AJAXを使用して、画面サイズに関するパスデータをサーバー側のPHPに渡すことを検討しましたか？その後、対応するCSSデザインに基づいてクエリを実行します。 JavaScriptをサポートしていない携帯端末やブラウザを無効にするブラウザを使用している場合、問題が発生します。さらにメンテナンスも必要です。CSSを多少変更して表示すると、スクリプトを同期して更新する必要があります。

一般的に、私は、CSSのメディアクエリは、さまざまなサイズのコンテンツの表示を最適化するために使用されるものであり、コンテンツの「損失」は無視すると考えています。これは、追加のクエリ/計算/コンテンツがロードされていても隠されている可能性があります。これは、ユーザーが縮小してブラウザで操作して最大化すると、フルページが新しく表示されるということです。彼らはコンテンツの完全なセットを持っていない場合でも、ページを更新しない限り、彼らはそれをフルに活用することはありません。

私はあなた自身に尋ねる必要があると思います - バックエンドでいくつかのクエリを保存する価値のある追加の構築とメンテナンスの努力ですか？

Answer 2

@ jakobudクライアント側とサーバー側の機能検出をモバイルおよび/またはレスポンシブデザインのコンテキストで組み合わせる方法について説明している以下の記事とプレゼンテーションをご覧ください。

Adaptation: why responsive design actually begins on the server

Pragmatic responsive design

Detector: Combining browser and feature detection in your web app

Answer 3

私はあなたが私が持っていた同じ懸念を持っていると思うように私は、応答デザインの私の探査の初期にあなたの質問を見つけました：私はこのすべてを入れている場合まず最初に適切な素材を提供するために多くの努力を払っていなければなりません。

しかし、レスポンシブデザインの動きを理解すると、それはどのように表示されるかを並べ替えることによって、すべてのデバイスサイズに敏感に比例するデフォルトのWebページを提供することです。

あなたのウェブリソースが、PCやラップトップでフルバージョンで表示されたインタラクションや情報が完全に非実用的または不適切なものになるようなものであれば、あなたのサイトのモバイル版やネイティブスマートフォンアプリ。その時点で、ブラウザを検出してwww.example.comからmobile.example.comにリダイレクトする何らかのサーバー側を行うことができます。