私たちは皆、今日、webデザインドメインでこの言葉”応答性”をたくさん聞いています。 人々は非常にお勧めしますし、応答性の高いデザインを使用することの重要性の上にga-gaを行きます。 しかし、プロのブログやwebmasteringの分野の初心者は、しばしば応答性の高いウェブサイトとどのように開発するかについてのすべてのこの話題を手に入れる
人々は、多くの場合、画像ファイル（例えばPSD）に基づいて自分のウェブサイトのテーマを作成します。 すべてのウェブサイトのデザインはイメージとして始まりますが、そのデザインは応答性の原則に準拠し、モバイルに優しいことに非常に注意する必 のは、件名にディップを取ると、この問題についてのすべてを見つけることができます。
まあ、ウェブサイトの応答性は、それが見られているデバイスに応じて表示を調整する能力を指します。 人々のほとんどは、デスクトップPcを使用するために使用される日はなくなって–今そこにデバイスのすべての種類があります。 デスクトップ、ラップトップ、ネットブック、タブレット、ミニタブレット、電子書籍リーダー、スマートフォンやそうではないスマートフォン！ フィュー！ あまりにも多くの心配することはありません！
これらのデバイスはすべて、独自の画面サイズと解像度を持っています。 「厳格な」webサイトは、さまざまな画面サイズに適応することはできません（または、応答することはできません）。 ブラウザでの水平スクロールバーの外観は、ウェブサイトが応答しないことを最も顕著な兆候の一つです。
これとは対照的に、応答性の高いテーマを持つウェブサイトは適応することができ、コンテンツが任意の画面サイズで読みやすいことを確認します。
応答テーマは、ウェブサイトのコンテンツが訪問者によって使用されることができることを主な目的で表示を調整します。 この目標を達成するために、ウェブサイトは（サイドバーのような）それのアクセサリーコンポーネントの一部を非表示にし、他のコンポーネント（例えば、画像、フ)
あなたのウェブサイトのテーマがどのように応答性を知ることは非常に簡単です。 ただ、コンピュータのモニタや携帯電話の画面の異なるサイズでそれを開きます。 あなたのウェブサイトが大丈夫で、すべてのコンテンツが読みやすい場合、あなたのウェブサイトは応答します。 Webサイトをテストするための異なる種類のデバイスがない場合は、オンラインテストを使用して応答性を確認することもできます。
一般的な答えは、はい、それは非常に重要であるということです。 しかし、あなたは応答1でそれを変換するためにあなたのウェブサイトの変身を行うために決定を下す前に–あなたはあなたのウェブトラフィック このデータから、あなたのウェブサイトがモバイルデバイスから受信しているどのくらいのトラフィックを見つけるようにしてください。 通常、ウェブサイトはデスクトップ/ラップトップで使用するように設計されていますが、タブレット/携帯電話などのデバイスから大量のトラフィッ
現在、アジアのウェブサイトはモバイルデバイスからのトラフィックの平均27％を受信しています。 モバイルデバイスが比較的はるかに人気があるので、この割合は、ヨーロッパやアメリカのような地域のウェブサイトのためにはるかに高
CSSだけで簡単に応答性を達成できることに驚くでしょう。 現在のCSS標準では、異なる画面タイプのウェブサイトをスタイル化することができます。 これは、異なる画面サイズに対して別々のCSSルールを持つことができることを意味します。 たとえば、
@media screen and(max-width:320px){
。primary-sidebar{display: none}//画面サイズが320px以下の場合はサイドバーを非表示にします
}
@media screen and(min-width:1024px){
body{font-size:12px}//1024pxより大きい画面サイズのフォントサイズを設定します
}
このようなカスタマイズされたCSSルールは、画面上で利用可能なスペースに応じて、あなたのウェブサイトの外観を制御します。
あなたのウェブサイトやブログのレスポンシブデザインのために行くことにした場合、あなたは次の利点を期待することができます:
- モバイルデバイスのユーザーがそれを使用できるようになり、新しい情報を返すことを決定する可能性があるため、あなたのウェブサイト上のトラフィッ モバイルユーザーがウェブサイトのコンテンツを使用できない場合、彼らは戻ってこないでしょう！
- あなたがオンラインでお金を稼ぐためにあなたのウェブサイト上の広告を使用する場合–応答性の高いウェブサイトは、モバイルデバイス上でも
- プラットフォームごとに異なるバージョンのウェブサイトやブログを開発する必要はありません。 これはより多くの版がより多くの保全時間を要求するので維持で時間をまた節約する。
- 異なるタイプのデバイス用に複数のバージョンを開発すると、Googleが重複Urlをインデックス化する危険に直面します。 同じコンテンツを指す異なるUrlは、重複Urlと呼ばれます。 Googleは重複したUrlに重い罰を置く内容が余りに重複していることを信じる。 応答性のウェブサイトのデザインは、このようなペナルティからあなたを保護します。
- 同じwebサイトがすべてのブラウザエージェントで機能するため、正しいエージェント検出を心配する必要はありません。
- ソーシャルメディアウェブサイトでのURL共有は、ウェブサイト上のすべてのページに関連付けられているURLが一つしかないため、簡単になります。
レスポンシブデザインには大きな欠点はありませんが、追加のCSSルールによりCSSファイルのサイズが増加し、結果としてダウンロード時間が長くな しかし、より高速なインターネットが世界中で利用可能になっていると、私はこれが本当の問題を提起するとは思わない。
レスポンシブデザインでは、異なる画像は異なる画面サイズには使用されません。 代わりに、同じ画像は、デバイスの画面に収まるようにCSSを介してサイズ変更されます。 そのため、モバイルデバイスは、デスクトップ接続で提供されるのと同じ高解像度の画像をダウンロードする必要があります。
今、我々はレスポンシブデザインは、モバイルインターネット接続に少し余分な負担をかけるかもしれないことを知っている、それはあなたがあなたの現在の（応答または非応答）デザインが動作しているどのくらいの速さをテストすることができることが重要です。 これをテストするための最良のオンラインツールは、GoogleのPageSpeedです。 このツールは、デスクトップとモバイルデバイスの両方であなたのウェブサイトをスコアすることができます。
Googleのウェブサイトのほとんどは現在応答しています。 例えば、Chromebookのウェブサイトは、応答性の高いデザインを使用しています。 しかし、Googleは、インターネットに関連する何かの先駆的な会社です。 より多くの他の企業がレスポンシブデザインの重要性を認識しているように、ウェブサイトは、この新しいパラダイムにシフトしています。 Wendy’s restaurant chain、インバウンドマーケティング会社HubSpot、新聞Boston Globeのウェブサイトを見て、いくつかのインスピレーションを得てください。
はい、まだレスポンシブデザインを採用していない多くの主要なウェブサイトがあります。 例としては、CNNとBBCが含まれます。 これらは大規模なウェブサイトであり、応答性を組み込むための完全な再設計には多額の投資が必要な場合があります。 それが、これらのメディアハウスがまだ反応していない理由かもしれません。
いいえ、それは本当に高価ではありません。 あなたがWordPressに基づいてウェブサイト/ブログを所有している場合は、利用可能な応答テーマがたくさんあります。 ワードプレスのデフォルトのテーマ（すなわちTwentyThirteen）も応答するように設計されています。 WordPressとBloggerが提供する無料のテーマのほとんどは応答性があります。 しかし、サードパーティのテーマを使用している場合は、その応答性を確認する必要があります。