モバイルファースト開発の実践を始めなければならない理由

レスポンシブWebサイトのコーディングを試してみた場合、次の問題が発生します。1つの小さな単純なCSSプロパティを変更すると、さまざまな画面サイズのレイアウトが変更されます。

これにより、最新のマージン値がタブレットや電話のサイトを破壊していないことを確認し、再確認する必要があります。 もちろん、さまざまな画面サイズの特定のオーバーライドを使用して、この問題を簡単に修正できます。 しかし、プロジェクトの過程で、CSSファイルは問題の例外でいっぱいになります。 次に、例外の例外があり、後で例外の例外の例外があります。

それはすぐに複雑になり、あなたはあなた自身のコードと戦うことになり、多くのプロジェクト時間を消費し、そしてゆっくりとあなたの正気を失います。

しかし、恐れることはありません！ モバイルファースト開発は、頭痛、例外の例外、およびページの読み込みの遅延からあなたを救うためにここにあります。

デスクトップファースト開発で何が起こるか

レスポンシブウェブサイトのデスクトップバージョン用に最初に開発することは、CSSドキュメントの自然な流れに反します。 CSSファイルは上から下に直線的に読み取られるため、すべてのCSSプロパティは、ドキュメントのさらに下に適用された新しいスタイルによって上書きされます。

大画面用に開発し、CSSドキュメントのさらに下にモバイルスタイルを追加すると、2つの問題が発生します。

1. デスクトップのスタイル（ドキュメントの上位）に加えられた変更は、新しいスタイルがモバイルサイトに対して明示的に上書きされていない場合、モバイルサイトの表示方法を変更します。 軽薄なCSSの余分な行を作成すると、多くのプロジェクト時間が消費され、DRYコードの原則に反します。
2. モバイルデバイスは、すべてのデスクトップスタイルをレンダリングすることにより、ページの読み込みを開始します。 巨大なデスクトップバージョンのレンダリングが完了すると、モバイルスタイリングが適用されます。 これにより、余分なリソースが読み込まれます。つまり、モバイルデバイスは、完全に読み込まれたページを配信するのにさらに時間がかかります。

これは、モバイルファーストの開発がその日を節約するためにやってくるところです。 この方法は、CSSの正しい順序（モバイルからデスクトップ、上から下）を促進し、デバイスが必要なときに必要な情報のみを適用するようにします。

これらの問題のいくつかの解決策を見てみましょう。

モバイルデバイスのレンダリングはどのように見えるか

画像は簡単にウェブサイトのサイズの最大の要因であり、デバイスがWi-Fiに接続されていない場合、ダウンロードに永遠に時間がかかります。 モバイルスタイリングから余分な画像を削除することは、サイトの速度を向上させるためにできる最善のことです。

最初にモバイルに移行するということは、モバイルデバイスに少数の小さな画像のみを提供することを意味します。 以下の例では、デスクトップファーストとモバイルファーストの両方の方法で実装された同じCSSドキュメントを作成しました。

デスクトップファーストの方法を使用している場合、モバイルデバイスは次の順序でレンダリングされます。

1. 最初のスタイルを読んでください。
2. 大きな（間もなく置き換えられる）画像をダウンロードします。
3. 要素をレンダリングします。
4. モバイルスタイルをお読みください。
5. 小さい画像をダウンロードします（大きい画像を置き換えます）。
6. 要素を再度レンダリングします。

ただし、モバイルファースト方式を使用する場合、デバイスは次の順序でレンダリングします。

1. 最初のスタイルを読んでください。
2. 小さな画像をダウンロードします。
3. デスクトップのみのスタイリングをスキップします（適用されないため）。
4. 要素を1回レンダリングします。

Webサイトでは、完成したページをブラウザに提供する前に実行する手順が少なくなるだけでなく、使用されていない軽薄な画像への余分な呼び出しも削除されます。

モバイルファーストの開発では、メディアクエリが最大幅から最小幅に変わることに注意してください。 最大幅のクエリは1000px未満のすべてのデバイスに適用され、最小幅のクエリは1000pxを超えるデバイスに適用されます。

min-widthにスワップすると、大きなデバイス用に作成した新しいスタイルが、小さなデバイスでのサイトの外観に影響を与えることを防ぐバリアが作成されます。 これにより、レスポンシブWebサイトの読み込み速度が向上し、デスクトップのみのメディアクエリ内で変更したものがモバイルレイアウトに影響を与えないようになります。 ウィンウィンです！

自分と戦うのをやめなさい

CSSファイルがデスクトップ、タブレット、モバイルの3つの主要部分にコメント化されているプロジェクトに取り組んでいるとしましょう。

残念ながら、デスクトップファーストの方法を採用しており、電話のサイトの読み込みが遅くなっています。 画像のサイズを縮小し、ブラウザのキャッシュを追加し、HTML（グロス）を縮小することも試みました。 しかし、サイトはまだ初めての訪問者のためにスラッグしているので、修正する必要があります。

デスクトップファーストの方法でサイトを構築したため、.header要素のCSSは次のようになります。

私たちの目標は、モバイルに送信されるスタイリングの量を減らすことです。 まず、要素に適用されているもののインベントリを作成し、独自のスタイルを上書きするときに注意する必要があります。

まず、モバイルファーストのアプローチに切り替えましょう。 モバイルをデフォルトのメディアクエリなしのスタイルにします（注：本番環境ではこれを行わないでください。サイトが破損し、クライアントが不機嫌になります）。

それが私たちのサイトの速度に最大の影響を与えるので、私たちの画像をもう一度見てみましょう。

モバイルデバイスにバックグラウンドをロードしていないため、そのプロパティを削除できます。 後で実際に必要になったときに、より大きなデバイスの画像を追加します。 同じことがmargin-bottomプロパティにも当てはまり、実際にモバイルに適用する必要があるプロパティは2つだけになります。

タブレットセクションに移動します。タブレットはレンダリングされる次のセクションであるため、背景属性とパディングをデスクトップスタイルからタブレットスタイルに移動する必要があります。

次の画像に示すように、私たちの目標は、プロパティが変更された場合にのみ上書きし、変更が必要な場合にのみ新しいプロパティを追加することです。

ずっといい！ モバイルデバイスが新たに最適化されたCSSをどのようにレンダリングするかを調べることにより、デスクトップファーストの方法と比較して、モバイルファーストの開発が小型デバイスに与える影響の大きさがすぐに明らかになります。

難なく終わらせた

デスクトップファーストを開発すると、修正するよりも多くの問題が発生します。 「モバイルファーストの開発方法に切り替えることで、ハードではなくスマートに作業できます。 」

レスポンシブサイトを開発する際、デフォルトでは、メディアクエリ内にないものはすべて表示されることに注意してください。 デフォルトの（メディアクエリされていない）スタイリングをモバイルデバイスに対応させることにより、Webサイトのサイズによって最も影響を受けやすいデバイスに送信できる情報の量を最小限に抑えることができます。

デスクトップとタブレットは、99.999％の時間、高速インターネット接続に接続されているため、大量の情報を高速で渡すことができます。 電話は、低速のインターネット接続を介して情報をロードする可能性が最も高いです。 最も機密性の高いデバイスに対応するようにスタイルシートを調整することで、顧客に可能な限り最高のWebサイトを提供できます。