5

Not Your Parent's Mobile Phone: UX Design Guidelines For Smartphones - Smashing Magazineの「Data Transfer and Pricing」セクションを読んでいるときに、以下のものが気になりました。

最近、レスポンシブ Web デザインについて多くのことが言われています。このアプローチでは、データ転送を最小限に抑えるといういくつかの課題が生じます。Jason Grigsby は、詳細について非常に優れた記事を書いています。要約すると、レスポンシブ デザインの魔法のソースの一部である CSS メディア クエリは、モバイル デバイスへのデータ転送のオーバーヘッドを軽減するためにほとんど何もしません。不要な画像のサイズを変更したり隠したりするには、完全な画像をブラウザーにダウンロードする必要があります。さらに、JavaScript ライブラリなどのリソースが、ユーザーに対して有効にされていなくても、モバイル デバイスにダウンロードされる可能性があります。

Smashing mag の記事で言及されている Jason Grigsby による長い記事を読んでいるときに、このような問題を回避するためのベスト プラクティスに従っている人がいるかどうかを知りたいです。

4

3 に答える 3

3
  1. さまざまな理由から、Google が jQuery ライブラリをホストできるようにするのは良いことです。ここを読む
  2. Javascript 関数を多数のファイルに分散させないでください。クライアントが取得する必要があるファイルが少ないほど、高速になります。複数のファイルとは、複数のリクエストを意味します。
  3. 多くの場合、HTML マークアップの最後にスクリプトを含めると効果的です。これにより、HTML マークアップの読み込みが速くなり (ページの生成が速くなり)、その後 JS ファイルがフェッチされます。
  4. CSS にスプライト シートを使用する方法を学びます。スプライト シートは基本的に、必要なさまざまな画像を含む大きな画像です。単一の大きな画像は、1 つのカラー テーブルのみを保持する必要があるため、その部分の合計よりも小さくなります。また、ここでも、取得するファイルが少ない = リクエストが少なくなります。
于 2011-11-17T16:48:06.103 に答える
2

この投稿にはいくつかの良いものがあります: http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

編集：いくつかのリンク

https://developer.mozilla.org/en/Web_Development/Responsive_Web_design

http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

http://www.html5rocks.com/en/mobile/mobifying.html

それらのリソースがそのビューに関連していない場合、同じサイトがモバイルから表示されたときに不要なリソースのダウンロードを回避するためのベストプラクティスはありますか?

リソースの条件付き読み込みについて質問している場合は、yepnope.jsを確認してください。

于 2011-11-17T16:54:06.507 に答える
0

コンテンツ適応のためのバックエンド ソリューションをお勧めします。私たちのサイトでは、Apache Mobile Filter を使用して、モバイル ユーザーやタブレット ユーザーに関係のない余分なコンテンツを削除したり、画像のサイズを変更して読み込み時間を短縮したりしています。

画像の遅延読み込み (ビューポートの近くにあるときにのみ画像を読み込む - jQuery 遅延読み込みを確認してください) やソーシャル共有ボタンのオンデマンド読み込み ( TechCrunch.comなど) など、検討できるフロントエンド手法は他にもあります。

于 2012-02-13T21:16:13.503 に答える