html - メディアクエリを使用したレスポンシブUIの構築

Question

Webサイトを構築し、メディアクエリを使用して応答性を高めたい場合は、最初にモバイルインターフェイスを構築し、その後にデスクトップブラウザーのUIを構築するのが一般的な慣習です。デスクトップUIを最初に構築するよりも、これが推奨されるのはなぜですか？

Answer 1

あなたは、モバイルとデスクトップのインターフェースへのアプローチにおける重大な問題を指摘しました。

私は同意しますが、モバイルブラウザを念頭に置いてサイトを構築したため、デスクトップUIの機能が少なすぎることがわかりました。最初にデスクトップ用にビルドしてから、不要な機能をすべて削除したモバイルバージョンをビルドすると思いましたか？

私がモバイルデバイスを使用しているからといって、あなたのWebアプリケーションを完全に体験したくないという意味ではありません。実際、そうすることで、おそらく私はあなたのWebアプリケーションを完全に救済することになります。

モバイルデバイスを介してWebサイトにアクセスする人の数が増え続けると（スマートフォンとテーブルはこのカテゴリに分類されます）、一部のユーザーは他のインターネットアクセス手段を持たないことに気付くでしょう。スマートフォンやタブレットデバイスで必要なすべてを実行できるのに、なぜラップトップを購入するのですか。

代わりに、プログレッシブエンハンスメントを念頭に置いてWebアプリ（または一般的なWebサイト）にアプローチする必要があります。

1. モバイル上のユーザーにすべてのWebアプリ機能を提供する
2. デバイスの機能（ジオロケーション、タッチなど）を検出することにより、可能な場合は機能を強化します
3. 画面のビューポートに合わせてデザインを強化します。
4. ?????
5. 利益

モバイルインターフェースにすべての機能を提供することで、デスクトップからもアクセスできるようになり、メディアクエリを使用して、ユーザーがビューポートに基づいてウェブサイト/ウェブアプリとやり取りするためのコンテンツとインターフェースを可能な限り表示できるようになります。彼らは現在使用しています。

モバイルに最初にアプローチすることの主な利点の1つは、速度です。多くの場合、モバイルデバイスはラップトップやデスクトップよりも少ない帯域幅で実行されるため、可能な限り軽量にする必要があります。