「レスポンシブ」なWebデザインを検討すべきではないのはなぜですか?


9

これはプログラミングの問題というよりはグラフィックデザインの問題のように思えるかもしれませんが、実際のグラフィックデザインよりもはるかに技術的/プログラミング上のメリットがあると思います。

「レスポンシブ」ウェブデザインのコンセプトは、CSS3のメディアクエリを使用して表示デバイスのサイズを検出し、それに応じてCSSルールを調整することを中心に展開されます。これは、多くの展開ケース(特にモバイル)の空白を埋めます。

私はメディアクエリの使用がゆっくり浮上していると思います(多くの人はそれについて本当に知らないことがわかりました)が、採用が遅い理由があるのか​​どうか疑問に思っています。Webアプリケーションには非現実的ですか?基本的な落とし穴になるかもしれない、私が見逃しているものはありますか?


2
多くの人々は単に無知であり、新しい方法を学んでいません。
レイノス

@Raynosですが、学習はとても楽しいです!
Nic

1
時間が経過するにつれてインターネットの速度が向上し、応答性がもはや本当の問題ではなくなり、努力がもはや正当化されないためです?
WinW 2011

1
webmasters.SEに移行しますか?
Peter Taylor

回答:


9

実際に機能させるには、フープをジャンプする必要があります。私が開発しているサイトでは@media (max-width:800px)、電話やその他の小さな画面用のスタイルシートを定義するために使用しました。しかし、iPhoneなどでは使用されていませんでした。

電話ブラウザの開発者は、人々が小さな画面を考慮に入れず、レンダリングエンジンに嘘をついていることを想定していることがわかります(iPhoneは幅が900pxを超えると主張していますなど)。嘘をつく。ブラウザーの実装者と戦っているところまでたどり着くと、努力の価値があるかどうか疑問に思い始めます。


したがって、Zurb FoundationとTwitter Bootstrapはどちらもこれをかなりうまく処理します。オンデマンドの切り替えを処理するには、少しのJavaScriptが必要です。DPI設定などもあります。これらのCSSフレームワークを使用すると、非常に簡単になります。または、少なくともそれらの一部。
Berin Loritsch

この質問と回答は6年前のものであり、現在の採用率を反映していない可能性があることに注意してください。
Peter Taylor

あ、ごめんなさい。なんらかの理由で昨日メインフィードにありました。日付を確認するつもりはなかった。
Berin Loritsch 2017

4

私は皆のために話すことはできませんが、私自身の経験から、時間とお金が決定的な要素になっています。私の同僚と私は常に最新のものを見ていますが、異なるサイズのデバイス用に異なるレイアウトを設計して実装することは大変なことです。特に、私の3歳のnokia 5800では、すべてのWebサイトが正常に表示されます。サイドバーのコンテンツを取得するにはスクロールする必要があるバーです。中小企業や自営業者向けのウェブサイトを設計、実装しています。

有効である可能性のあるもう1つの理由は、独自の個別のサイトマップ(http://www.google.com/support/webmasters/bin/answer.py?hl=ja&answer=34648)を使用して、モバイルバージョン用に完全に個別のWebサイトを提供することですは、サイトを維持するための簡単でエントリーレベルの方法です。


まあ、デプロイされたサイトや中間サイクルのサイトにレスポンシブデザインを導入することは間違いなく難しいと思いますが、他のモバイルサブドメイン全体を用意するよりも、このようなものを実装する方がはるかに簡単だと思います。幸いにも、Railsは継承されたテンプレートを使用してこのタスクを少し抽象化しています。
Nic

まあ、私は競争相手に我々の場合には、クライアントが実際にモバイル版を外部委託することを追加する必要があります:(私は個人的にも、テンプレートではなく、別のサイトとなるだろう。
Pelshoff

2

データを確実に回復することが保証できれば、問題はありません。

しかし、想像してみてください。誰かがデスクトップコンピュータのウィンドウ付きブラウザにWebページをロードします。全画面を開いてすべてを読むように強制しますか、それともサイズを縮小したウィンドウに合わせて最大化すると、多くの空白スペースが表示されますか?ページの読み込み時に、CSSを1回提供します。

電話を回転させると横向き/縦向きモードを切り替える電話ブラウザはどうですか?単に解像度が小さすぎて、通常はズームインを使用しているブラウザについてはどうでしょうか。すでに報告されているように、解像度が小さすぎてページが読めなくなっています。

適切な普遍的でスケーラブルなCSSを作成するという標準的なガイドラインに従い、ブラウザがページを適切な解像度にスケーリングできるようにします。


9
CSS3には、異なる画面サイズの動的ルールを可能にする新機能があり、自動的に変更されます。
Steffan Donal

@Ruirize Exactly-コンテンツを動的に適合させるルールを持つ静的CSSを使用します-わかりました。画面サイズのコンテンツを静的に設定するルールを持つ動的に生成されたCSSをリクエストします-いいえ。
SF。

2
OPはメディアクエリの使用について話している。メディアクエリは(とりわけ)画面サイズに基づいて動的に調整する。余分なファイルは読み込まれません。
Travis Northcutt

1
@SF .: Googleカレンダーウィンドウのサイズを変更してみてください(古い青色のテーマではなく、新しい赤色のテーマです)。
リーライアン

2
@SF:元の投稿はメディアクエリについて話していましたが、ヘッダーやw / eに基づいて異なるCSSを提供していませんでした。
Pewpewarrows、2011
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.