タブレットや携帯電話でインターネットにアクセスするユーザーが増えています。 これは、ご存知のとおり、コンピュータで見栄えのする優れたWebページをデザインするだけでは不十分であることを意味します。各モバイルデバイスでも表示する必要があります。 問題？ さまざまな画面サイズと解像度。 そのため、すべてのメディアに正しく適応するデザインを作成することは非常に困難です（有名な 応答設計、次のように翻訳 アダプティブデザイン).
これらの特性を備えたデザインを作成する際に留意すべきいくつかのヒントを次に示します。 注意を払う！
アダプティブデザインのヒント
- 簡単なテンプレートを作成する単純に、私は当たり障りのないという意味ではありません。 私はについて話している 構造 あなたのウェブサイトのHTML：それが明確であるほど良いです。 コンピューターの画面はXNUMXつの縦の列に収まる可能性があることに注意してください。 携帯電話の画面では、XNUMXつだけに収まります。 それについて考え、要素をどのように再配置するかを考えてください。
- 不要なものをすべて排除するjQueryエフェクト、Flashアニメーション、およびページの読み込みを遅くするその他のコードは避けてください。 このタイプのコンテンツが少ないほど、Webの読み込みが速くなります。
- スタイルを定義する 各「サイズ」のcss表示されているデバイスに基づいて実行されるtiny.css、small.css、big.css（たとえば）を作成します。 例えば：
@import url（tiny.css）（min-width：300px）;
@import url（small.css）（min-width：600px）;
@import url（big.css）（min-width：900px）;
- 最も使用される解像度320ピクセル / 480ピクセル / 720ピクセル / 768ピクセル / 900ピクセル / 1024ピクセル
- テンプレートを柔軟にする可能な場合は常に、固定金額ではなくパーセンテージで作業してください。 ここにいくつかの参照同等物があります：200px = 15'38％/ 300px = 23'07％/ 800px = 61'5384615384％
- タイポグラフィ これまで以上に重要デバイスの画面が小さすぎて、テキストだけが表示される場合があります。 そのため、サイトで最適なフォントを慎重に選択して、サイズを小さくしても読みやすさが失われないようにする必要があります。 さらに、よりニュートラルなフォントを、Webに必要なキャラクターを与える個性を持つ他のフォントと組み合わせる方法を知る必要があります。 したがって、最初のヒントは、使用するフォントの選択に時間を費やすことです。
- 使用 高品質の画像スペースが狭くなると、画像が付随します。 縮小しても品質が低下せず、拡大縮小しても同じように機能するものを選択します。 画像の品質が悪いと、Webサイトの見栄えが悪くなります。
- あなたの画像が常に見られること フルcssにimg（幅：100％;）コードを追加して、写真が途切れるのを防ぎます。 このようにして、画像に与えられる高さを再計算して、画像の幅がXNUMXパーセント表示されるようにデバイスに指示します。
- すべて低い 同じURLルートフォルダー内の同じindex.htmlファイルがすべてのデバイスで機能するため（適応設計を正しく行う場合）、www.mysite.com / mobileのようなサブドメインについては忘れてください。 あなたはすでに利点を知っています：サブドメインが少ないほど、ページの読み込みが速くなります。
- サポートを活用する：想像力を働かせてくださいデスクトップコンピュータからウェブサイトにアクセスすることは、iPadや携帯電話からアクセスすることと同じではありません。 最初のものでは、落ち着いてリラックスした方法でナビゲートします。 後者の場合、アイドル時間にそれを行い、退屈したらすぐにウィンドウを閉じます。 これらの条件を利用して、ユーザーを楽しませ、ユーザーがあなたに捧げようとしている数分で楽しんでもらいましょう。 多分彼が家に帰ったとき、彼はもっとリラックスした方法であなたを再び訪ねることに決めるでしょう。
- インスピレーションを得ます デジタル出版物では、なぜこのアドバイスがあるのか不思議に思うでしょう。 非常に簡単： デジタル雑誌 （良い）サポートを活用する方法を知っていて、その設計は非常にインテリジェントです。 それらに触発されて、離れにくいウェブサイトを作りましょう。
詳しくは - デジタル雑誌
ソース- スプリオ、960.gs、柱状
あまり賛成できないことがあります。
ポイント5では... 200px = 15,38％以降...この参照比較は親メジャーなしでは実行できないため、ピクセルあたりのサイズはパーセンテージのような相対的なメジャーではありません。
幅のある画像を指定してください：100％間違っています、私はそれが推奨されるべきではないと思います。 画像は幅と高さでより適切に定義されるため、サーバーは情報の処理にかかる時間が短縮され（サイズを計算する必要がありません）、ページの読み込み速度が向上します（適応型またはレスポンシブWebデザインで非常に重要なことです）。 ）。
鼻のタッチですが、私はすでに含めます...網膜スクリーンの画像。 レスポンシブウェブデザインを行う場合、モバイルおよびタブレットビューの大部分がこれらの画面を使用するため、網膜ディスプレイに画像を使用することが必須です。 したがって、ハーフスロットルでそれらの設計に力を注ぐことには意味がありません。
残りの部分に良い
ポイント5では、コンテキストを説明し、1300、3、200のいずれかである300列の合計1000pxのレイアウトについて説明します。
あなたがそれをパーセンテージに渡すと、彼らの場合、彼らはあなたが言うように、15,38％（（200 * 100）/ 1300）（以下のXNUMX進数、国際システム：P）
しかし、500pxのレイアウトについて話し、3つの列があり、200つは200、もう100つは200、もう40つは200pxの場合、パーセンテージは同じではなくなります。この場合、100px = 500％（（XNUMX * XNUMX）/ XNUMX）
それらは次のようになります：200px = 40％および100px = 10％
さあ、私がコメントしていたように、それらはあなたが示しているものの参照ではなく、1300pxのレイアウト上の参照にすぎません。
よろしく
なんて失敗だ、あなたは世界で絶対に正しい！ 再度、感謝します ;）