レスポンシブWebデザインは、単なる弾性テンプレートや@media
クエリ以上のもの
です 。 実際、これは設計に対するまったく新しいアプローチです。 これを念頭に置いて、次のアダプティブテンプレートで回避すべき一般的な落とし穴をいくつか検討することを提案します。
画面解像度今日最も一般的な許可にこだわらないでください-明日変更されます。 そして明後日も。 今後も引き続き関連するデザインを作成するには、デザインが変更される重要なポイントではなく、これらの重要なポイントの間で何が起こるかに注目してください。
主にモバイルデバイス用に開発している場合は、サポートする最小の画面解像度に焦点を合わせて、インターフェイスの構築を開始します。 次に、デザインが「実行」されるまで、ブラウザウィンドウを拡大します。 この時点でキューポイントをマークし、@
mediaクエリの欠陥を修正し
ます 。 繰り返します。
今日の人気のあるデバイスの解像度の間の範囲の画面で優れたユーザーエクスペリエンスを提供することを確認してください-そして、将来的にユーザーを喜ばせるでしょう。 （
トレントウォルトンの記事Device-Agnostic -Translator's Noteも参照してください。 ）
スピードレスポンシブWebデザインのポイントは、あらゆるデバイスで最高のユーザーエクスペリエンスを提供することです。 ただし、サイトの読み込みが遅い場合、小さな画面でコンテンツがどれほど見栄えがよくても、画像をどれだけプロフェッショナルに引き伸ばしてもかまいません。
サイトの速度-何よりも、パフォーマンスの予算から特定の量を割り当てます。
Webpagetest.orgを使用して、3Gでもサイトがすばやく読み込まれるようにします。 ユーザーがページのコンテンツを見るまでの時間を示す「
スピードインデックス 」に特に注意してください。
画像画像のサイズを小さくすることほど、モバイルサイトを高速化するものはありません。 新しい
< Picture > HTMLタグは、今年後半に複数のブラウザでサポートされる予定です。現在のところ、PictureFillポリフィルライブラリがあります。
PictureFillを使用することをお勧めします。これにより、より積極的にサポートされる場合に
ピクチャタグに移動できますが、Adaptive Imagesなどの古いオプションもあります。
完全な適応設計には、弾性画像を実装するためのソリューションが必要です。
コンテンツを非表示にしないでくださいユーザーが必要とするすべての機能を小さな画面に収めることは困難です。 モバイルデバイスの一部の要素を非表示にできることは魅力的です。これをしないでください。 サイトにアクセスするモバイルユーザーは、サイトから必要なものをすべて入手することを期待しています。 小さな画面のデバイスを使用しているという理由だけで、彼らを罰しないでください。
これは、レスポンシブデザインの作成を困難にするものの一部です。小さな画面にユーザーに表示するすべてのものを実装するのは難しい作業です。 詳細を非表示にしないでください。 インスピレーションを得るために実績のあるユーザーインターフェイス
要素を見て、多くのテストを行って、ユーザーがサイトとどのように対話するかを確認します。
これにはより多くの時間と労力がかかりますが、ユーザーに目的を提供することで、訪問者を満足する顧客に変えることができます。