ケーススタディ: モバイル Web 製品を最適化するための 4 つの重要なポイント

モバイルデバイスの使用は世界中で日々増加しています。複数の異なるデバイスにわたって優れた Web エクスペリエンスを作成するという課題には、さまざまなソリューションがあります。しかし、どのようなプロジェクトであっても、これらのソリューションのうちどれが最も適切なのでしょうか。この質問に答えるために、Mobile First の著者である Luke は、Bagcheck アプリをケース スタディとして使用し (注: Bagcheck は検索および発見ビジネスに従事する革新的な企業です)、モバイル バージョンとデスクトップ バージョンを別々に設計することを選択した理由を説明し、比較を通じてモバイル Web 製品を最適化するための 4 つの提案を抽出します。全文は次のとおりです。

私はレスポンシブ Web デザインの概念の支持者でありファンです。しかし、よく次のような質問を受けます。モバイル ユーザー向けにレスポンシブな Web ソリューションを提供するために、流動的なグリッド、柔軟な画像、メディア クエリを使用する代わりに、Bagcheck の別のモバイル バージョンを構築したのはなぜですか?

当社の Bagcheck サイトでは、Web サイトのパフォーマンスと Web サイトの開発速度が 2 つの重要な問題です。私たちが下した決定の多くは、サイトのパフォーマンスと開発速度の両方を可能な限り高速化することに重点が置かれていました (結局のところ、私たちはスタートアップでした)。サイトのパフォーマンスを重視する中で、「何が必要か」という概念にも細心の注意を払っています。つまり、さまざまなデバイスやユーザーに何かを提示する必要があるということです。私たちは最適化作業を行うのが大好きです。デュアル テンプレート システムを使用すると、ソース順序、メディア、URL 構造、アプリケーション設計などの側面を最適化できます。

私たちは当初、Bagcheck をコマンドライン インターフェイスとして構築し、そこからモバイル Web エクスペリエンスを作成し、その後すぐにデスクトップ Web エクスペリエンスを作成しました。このプロセスは、おそらく私たちが使用した開発方法にも影響を与えたと思われます。

また、私はコーディングはできますが、主にデザイナーとして活動していることも付け加えておきます。私はデザイン要素に重点を置いているため、この記事にはできるだけ多くの技術リソース リンクを含めるように努めます。さらにリソースや実装のアイデアをお持ちの場合は、ぜひ私に送ってください。

ソース順序

レスポンシブ Web デザインの核となるのは、同じ HTML コードを異なるデバイスに適用し、特定のデバイス自体のパフォーマンスに応じて外観表示を動的に調整 (主に CSS を通じて) することです。 HTML タグにはリソースの順序があり、通常、これによって Web ページがブラウザーによってどのようにレンダリングされるかが決まります。 JavaScript と CSS のテクニックを使用して HTML 要素の位置を変更することは可能ですが、複数の異なるデバイス上で HTML 要素を信頼性の高い方法で再配置することは非常に困難です。

ウェブサイトのナビゲーション メニューという簡単な例を見てみましょう。画面が大きく、マウスやキーボードで入力できるデバイスの場合、いくつかの理由から、ナビゲーション メニューをウェブページの上部に配置するのが一般的です。

デバイスの画面には十分な空白スペースがあり、ページの実際のコンテンツが画面から溢れ出ることはありません。

通常、Web サイトに表示するコンテンツを決定するには、いくつかの主要なカテゴリとアクションを使用する必要があります。

これらの主要なカテゴリとアクション セットが画面/ブラウザーの端に揃っていると、アクセスが速くなる可能性があります。サイト全体のナビゲーションをページの上部に配置するのが理にかなっているため、リソースをマークアップする順序が最初に考慮すべき事項になります。

ただし、画面が小さく、タッチ入力を使用するデバイスでは、サイト全体のナビゲーションをページの下部に配置する方が合理的です。その理由は次のとおりです。

画面が小さいデバイスには十分な空白がないため、Web ページの実際のコンテンツが Web サイト全体のナビゲーション ボタンによって画面から押し出されてしまいます。

画面が小さく帯域幅の狭いデバイスの場合、ユーザーはサイトのナビゲーションよりもサイト コンテンツへの即時アクセスを重視します。

人間工学的な要素により、ユーザーは画面の下部にある興味のあるターゲットをクリックしやすくなります。

したがって、モバイル デバイスの場合、Web サイトの全体的なナビゲーション ボタンを Web ページの下部に配置するのが合理的です。つまり、メニュー マークアップはリソース順序の最後になる可能性があります。異なるデバイスで同じ HTML コードを使用する場合、リソースの順序を変更することはできません。デュアル テンプレート システムを使用すると、Bagcheck の構築時に異なるマークアップを提供でき、モバイル デバイス上のアセットの順序が変わります。次の図は、モバイル デバイスとデスクトップ デバイス用に生成した 2 つの異なる UI インターフェイスを示しています。

もちろん、異なる HTML コードを提供しなくても、他のソリューションを使用して同様の効果を実現できます。 Box-direction は、リソース タグの順序に影響を与えずに、エントリ リストの順序を逆にすることができます。また、display: table アプローチを使用して、デバイス画面の実際のサイズに基づいてコンテンツの表示とサイト ナビゲーションの形状を変更することもできます。ニーズに応じて、これらの方法の方が適している場合があります。

メディア

レスポンシブ Web デザインへのもう 1 つのアプローチは、柔軟な画像とビデオを使用することです。コンテナのサイズに合わせてフォーマットすると、エラスティック イメージは、ブラウザー ビューポートで使用可能な空白に基づいて動的にサイズを変更できます。

ブラウザのより大きなビューでは、弾性画像は元のサイズを表示することで、より多くの空白を埋めることができます。ブラウザの小さい表示では、同じ画像が拡大縮小されて、占める空白スペースが少なくなります。この効果を実現するには、拡大または縮小しても見栄えのよい大きな画像がブラウザに必要です。

ここで問題となるのは、画像が大きくなるほどファイル サイズも大きくなることです。すべての Web ブラウザーが画像をネイティブ サイズで表示するわけではありませんが、ブラウザーは画像ファイル全体をダウンロードする必要があり、次の操作を行わないとパフォーマンスがすぐに低下する可能性があります。

CSS メディア クエリと組み合わせると、背景画像は表示されず、ブラウザーの大きな表示のためだけに大きな画像が読み込まれることもありません。この方法は、指定された画像タグを持つ画像には無効です。CSS 画像背景を持つ画像にのみ有効であり、この方法の適用範囲が制限されます。

ブラウザのビューポート サイズが大きくなるにつれて、JavaScript を使用して HTML マークアップ内の小さな画像を大きな画像に置き換える Responsive Images などのソリューションを使用できます。 Javascript と Cookie が無効になっているブラウザでは、対応する小さな画像のみが表示されます。

不要な画像の読み込みを防ぐには、noscript タグなどを試してください。

サーバー側のソリューションを使用して、サイトにアクセスするデバイスを検出し、必要なものだけを渡します。

元のタイトル: ケーススタディ: モバイル Web 製品を最適化するための 4 つの重要なポイント

キーワード: ケーススタディ、学習、最適化、モバイル、Web、製品、4、世界、範囲、ウェブマスター、Web サイト、Web サイトのプロモーション、収益化