WebのHtml5応答性

最新で人気のあるウェブデザイン言語であるHTML5は、突然デザインの世界に波を起こしました。以前はHTMLでしたが、現在はHTML5があります。ただし、両者の主な違いを見ると、実際にHTML5がHTMLとは異なり、HTMLよりも優れている点の1つは、応答性であることがわかります。 。

Webページの応答性とは、メディアごとにブラウザにロードされた後にWebページから受信した出力または応答を意味します。

HTMLでは、以前は多くの制限があり、新しいバージョンが必要になりました。 Webデザイナーには、テクノロジーの変化に合わせてWebページを作成する柔軟性がありませんでした。

最新のテクノロジーにより、ユーザーはデスクトップ、ラップトップ、携帯電話、iPadなどのWebページにアクセスできます。さらに、これらのデバイスはすべて異なるサイズで提供されています。 Webデザイナーは、すべてに適合するソリューションを探していました。それに応えて、HTML5が答えになりました。

液体レイアウト

HTML5は、HTML、CSS、JavaScriptの花束です。これにより、ユーザーは水のような液体または柔軟なレイアウトのWebページを作成できます。ご存知のように、水はその容器の形をしています。同様に、液体のレイアウトにより、設計者は指定された容器に内容物を浮かせることができます。同じウェブサイトをiPADで開くと、そのサイズに応じて調整され、モバイルで同じURLにアクセスすると、そのサイズに収まります。

私たちのウェブデザイナーが持っていたもう一つの嘆願は、コンテンツに関連していた。モバイル画面とラップトップ画面で異なるコンテンツが必要な場合はどうなりますか？この概念の背後にある心理学理論を非常に簡単な例を使って説明しましょう。あなたがあなたのオフィスにいて、突然あなたのチームが屋外のランチパーティーを計画しているとしましょう。携帯電話を引き出してウェブページを開き、近くのレストラン（zomato、dineoutなど）を探します。次に、基準に従ってそれらをフィルタリングし、要件に最も適したレストランを選択します。さて、もしあなたのチームが次の週末にランチパーティーに行くことを計画しているとしたらどうでしょう。この状況では、おそらくラップトップを開きます。同じウェブサイトのウェブページを開き、ページを見回して、ウェブサイトのオファー、フリル、アドオンを確認します。

この例では、モバイルでWebページを開いているユーザーは、おそらく急いでいて、デザインを見回す時間がないだろうと想定しています。ユーザーは、デザイナーUIではなく機能を探しています。ただし、同じWebページをラップトップ/デスクトップブラウザで表示すると、ユーザーは設計部分を理解する時間ができる場合があります。

応答性により、Webデザイナーは、デバイスの画面領域に合わせてページをスクイーズまたはストレッチし、画像またはタグを表示/非表示にすることができます。

レスポンシブウェブデザインは、ユーザーのデバイスの画面解像度に応じたレイアウト調整に従ってウェブページを開発するという概念です。これにより、Webデザイナーはレイアウトを微調整し、最初に関連情報（時間、電話番号、道順、場合によってはメニューへのリンク）を表示できます。一方、デスクに戻ると、レストランのページには、携帯電話でブラウジングしているときに気にならなかったすべてのベルとホイッスルが表示されます。

レスポンシブウェブデザイン（RWD）のレイアウトは、有限値（ピクセル、ポイントなど）ではなく、柔軟または流動的なレイアウトパラメーター（emsやパーセンテージなど）を使用して行われます。

ページの応答性を高めるために、ページの構造が変更され、HTML5の基本概念が明らかになります。 HTML5でコードを書くための基本的なガイドラインは次のとおりです。

• コンテンツはHTMLファイルになります
• 外観と配置はCSSファイルで行われます
• 検証はJavaScriptファイルで行われます

したがって、応答性を得るには、CSSファイルをデバイスの画面サイズの変更に置き換える必要がありますが、コンテンツ（HTMLページにある）は同じままです。

RWD戦略

レスポンシブウェブデザインでは、従来のグレースフルデグラデーションの代わりにプログレッシブエンハンスメントを使用します。

Graceful Degradationは、最新かつ最先端のブラウザと互換性のあるWebページの構築に重点を置いています。今後、サポートは古いブラウザに提供されますが、予想される不具合はパッケージの一部になります。

一方、プログレッシブエンハンスメントは、ブラウザではなくコンテンツに焦点を当てています。ピーナッツM＆Mチョコレートの場合のように、この概念をコンテンツアウトアプローチとして採用してください。

• ピーナッツ：リッチセマンティックHTMLでマークアップされたコンテンツ
• リッチなクリーミーなCSSでコーティング

ハードキャンディーシェルとしてJSを追加しました

RWDフレームワーク

HTML5フレームワークは、事前に定義された再利用可能なCSSおよびJSファイルと、ページのコンテンツとしてのダミーテキストを含む事前に作成されたテンプレートです。これらは、新進の開発者が基本的な設計を開始するのに役立ちます。レイアウトが定義され、デザインが作成されます。

応答性を実装するために市場で利用可能な複数のフレームワークがあります。最も人気があり、実装が簡単なのは– Twitter Bootstrap 。リストに追加するのは、Foundation、Skeleton、Boilerplate、Kickstartなどです。これらのフレームワークのほとんどは、初期レイアウト開発にグリッドシステムベースを使用しています。

Twitter Bootstrapは、モバイルファーストのアプローチを使用しており、無料で使用でき、インストールも簡単です。汎用CSSファイルはパッケージの一部であり、Webページ上のほとんどの要素とコントロールの設計に役立ちます。 Webページの作成に役立つさまざまなタイプのレイアウトを利用できます。

レスポンシブウェブデザインは最も求められているテクノロジーであり、ゆっくりとゆっくりとあらゆるウェブサイトの標準要件になりつつあります。実装のためにオンラインで利用できる十分なサポートがあり、複数のツールを試してみることができます。