私はモバイルファーストのデザインがほぼ必須であると述べている多くの情報源を読みましたが、それは、3Gおよび4Gを介したダウンロード速度が一般に遅いモバイルの読み込み時間が速いなどの明らかな利点があることは否定できません。

しかし、画像が非常に少ない小さなWebサイトを構築している場合はどうでしょう。

このテーマに関する他の意見や、例外があると人々が考えるかどうかについて聞きたいと思います。個人的には、最初にデスクトップ用に設計/コード化し、そこから縮小することを好みます。しかし、最初にモバイル向けに設計/コーディングすることが本当に重要なのでしょうか、それとも特定の状況で問題になるほど最終結果が重要ではないのでしょうか。

純粋にデザインの観点から見ると、最初にモバイルバージョンから始めるのが理にかなっています。

設計プロセスの最も難しい部分は常に剪定であり、追加することはありません。したがって、自分で許可する画面領域が小さいほど、デザインで何が重要であり、どの情報を実際に表示する必要があるかについて、より多くのことを考える必要があります。また、テキストやその他のアイテムが小さくなるため、アクセシビリティについても考えさせる必要があります。

「ライト」バージョンを設計したら、次に、設計要素などの追加の要素を追加し、不動産を取得するにつれて、要素を拡大することができます。@Djangoで指摘されているように、設計から機能を除外しないでください。

あなたのサイトでは、例はメニューです。メニュー項目をそのままにして、標準の手順であるハンバーガーアイコンに置き換えることにしました。しかし、メニュー項目がページで最も重要なものの1つである場合、クリックの背後にそれらを隠したくないでしょう。

傍注：あなたのサイトの青の赤は色覚異常にとって本当に悪いです、これを変更することを検討してください。

モバイルファーストがベストプラクティスです。これは法律ではありません。モバイルを「使用する必要がある」理由を理解している場合は、特定のプロジェクトでモバイルを使用しない理由について情報に基づいた決定を下すことができます。

「モバイルファースト」がデザイン/ UX とビルド自体に関連していることは注目に値します。モバイルファーストのデザインはユーザーのサイトを高速化しませんが、モバイルファーストの開発はスピードアップします。

両方を見てみましょう。

モバイル初のデザイン

モバイルファーストの設計とは、機能と使いやすさを必要なものに絞り込めるようにすることです。その背後にある考え方は次のとおりです。デスクトップを最初に設計するのではなく、考え出したすべての機能を320pxの幅のディスプレイに入れ、優れたUXを維持するのに苦労し、まずモバイルから始めます...

モバイルのすべての機能によってUXが乱雑になったり損傷したりしている場合は、ユーザーが本当にすべてを必要としているのか疑問に思われるはずです。それらのいくつかを取り除き、実際にエクスペリエンスを改善できますか？もしそうなら、なぜあなたはそれらを持っていますか？結局のところ、それらは必須ではないかもしれませんし、おそらくあなたのサイトにあるべきではありません。

理論的には、これにより機能を絶対に必要なものに絞り込み、それをスケールアップして美しいデスクトップエクスペリエンスにすることができます。

開発が最初のモバイル

モバイルファースト開発では、まずモバイルバージョンを作成してから、大きな画面に例外を設定します。これがモバイルユーザーにとってより良い（そしてより速い）理由は、ウェブサイトに2つの画像があり、1つはデスクトップ用、もう1つはモバイル用です。デスクトップを最初にコーディングすると、CSSは次のようになります。

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

これはlarge.jpg、CSSが切り替える前に、モバイルユーザーが実際にをダウンロードすることを意味します。これは非常に悪いです。

モバイルは最初は次のようになります。

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

モバイルユーザーがダウンロードすることはありませんlarge.jpg。

以前に理解していなかったとしても、それが少しわかりやすくなることを願っています！

「モバイルファースト」の原点

レスポンシブデザインに関する「モバイルファースト」の考え方は、モバイルデバイスのブラウザーがデスクトップデバイスにあるブラウザーよりもはるかに機能が低い時代から来ています。それらの多くはメディアクエリをまったくサポートしていなかったため、ファンシーなデスクトップデザインを構築し、狭いビューポートのメディアクエリを使用してスタイルを維持するという考えは、表面上は平坦になりません。

メディアクエリのサポートがないことは、実際には最初のメディアクエリです。

- ブライアン・リーガー

モバイルを第一に考えていますか？

モバイルデバイス用のブラウザーがデスクトップの対応物に追いついてきたという事実にもかかわらず、「モバイルファースト」は依然としてスタイルを記述する最も論理的な方法です。

「以前のスタイル宣言を取り消すことを避ける」という観点から考えるのが好きです。ほとんどの場合、スタイルを書き出して後でオーバーライドするのではなく、付加的なアプローチをとることで、スタイルシートがよりコンパクトになります。ほとんど/すべてのデバイスに適切なスタイルはメディアクエリの外側にある必要がありますが、特定のビューポートにのみ関連するスタイルはメディアクエリの背後にある必要があります。

「デスクトップファースト」アプローチを比較します。

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

「モバイルファースト」アプローチ：

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

結果は同じですが、後者の方がコンパクトです。Brad Frostの7 Habits of Highly Effective Media Queriesから恥知らずにコピーされたサンプルスタイル。

「デスクトップファースト」が他の方法よりも適切な場合は、いくつかのまれな例外があります。これらの中で最も注目に値するのは、レスポンシブテーブルなどを実行している場合です。ビューポートが広いとテーブルのデフォルトスタイルが必要になりますが、ビューポートが狭いとすべてが上書きされ、コンテンツを垂直に積み重ねることができます。

スタイルシートを分解しないでください

絶対にすべきでないことの1つは、レスポンシブスタイルを個別のCSSファイルに分割し、リンク要素でメディア属性を使用することです。これは、UAがすべてのリンクされたスタイルシートをダウンロードするという望ましくない結果をもたらします（つまり、ダウンロードの速度は向上しません）。

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

したがって、コードは最初にモバイルである必要がありますが、設計へのアプローチはどうですか？

それは問題ではないと私は思う。デザインに関連するすべてのビューポートのためのレイアウトをしなければならない行うこと（これはあなたが必要な場合があります任意のマイナーのブレークポイントでわずか2かのように多くのあなた一度5などの因子として関与するかもしれません！）、順番は最後には問題ありません。多くの設計者は、デスクトップレイアウトから開始するための規律を欠いており、モバイルレイアウトから開始する方が簡単であることに気づきます。

デスクトップレイアウトから始めたい場合は、その輝かしい空白のすべてを、そのページのコンテンツを強化しない混乱で埋めるという誘惑を回避する必要があります。電話を持っている笑顔の女性の800x600ストックフォトが本当に必要ですか？無駄な綿毛をダウンロードするためにモバイルユーザーに余分な費用がかかるだけであり、デスクトップユーザーが過去をスキップする視覚的な注意散漫にすぎません。

私はあなたのウェブサイトwww.cosmosdesign.co.nzをさまざまな画面サイズでテストしましたが、すべての画面で問題なく動作しました。モバイルファーストデザインについての質問に関して、私はあなたのデザインアプローチが画像、コンテンツなどのような他の多くの要因と共にターゲットオーディエンスを考慮する必要があると言いたいと思います。ターゲットオーディエンスが主にデスクトップ/ラップトップでこのWebサイトを使用する場合確かにあなたのアプローチを続行しますが、それが主に電話とタブで表示されるウェブサイトであるなら、あなたはあなたの戦略を再考する必要があります。

また、Bootstrapを使用してレスポンシブなウェブサイトを設計することも検討できます （他の多くのオプションも利用できます）。また、モバイルフレンドリーサイト用に画像を最適化して、読み込み時間を短縮することもできます。

私にとってモバイルを最初に行う主な理由は、モバイルサイトがデスクトップバージョンのすべてを実行しない状況を回避するためです。電話で実行できるもののモバイルバージョンでは実行できないため、何かを実行するために電話でデスクトップバージョンを要求しなければならないWebサイトがたくさんあります。それは私からのがらくたのバグです。

そうは言っても、ほとんどの企業がそうであるように、後でモバイル機能を省かない限り、デスクトップファーストは問題ないと思います。

また、多くの設計フレームワークにより、これはかなり簡単になっています。マテリアルデザインライトを使用して、かなり複雑なデスクトップファーストのアプリを作成しました。モバイルフレンドリーバージョン用に変更したとき、ほんの数点を変更するだけで済みました。ほとんどの作業は既に行われています。