現在、モバイルバージョンのサイトを構築する場合、それらを構築する主な方法は3つあります。
- レスポンシブデザイン。
- サイトの個別のモバイルバージョン。
- RESS（レスポンシブデザイン+サーバー側）。
それぞれの方法には長所と短所があり、詳細に説明します。
レスポンシブデザイン
CSS3メディアクエリは、一般的にレスポンシブデザインを実装するために使用されます。 画面サイズに応じて、ユーザーには異なる画像が表示されます。
@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }
レスポンシブデザインの利点
- 開発の容易さ-アダプティブレイアウトにより、サイトの構造全体がさまざまな画面幅に自動的に調整されます。 実用的な製品を入手するために、すべてをゼロから作成する必要はありません。CSSとHTMLを微調整するだけです... さらに、そのような製品のサポートは比較的簡単なタスクです。
- 1つのURL-不要なリダイレクトや、ユーザーがモバイルバージョンのアドレスを覚える必要がなくなります（プレフィックスmだけであっても）。 また、単一のアドレスの存在は、検索エンジンが機能するのにより便利であるため、サイトのプロモーションにプラスの影響を与えます。
レスポンシブデザインの欠点
- さまざまなタスク-大規模サイトの「モバイル」ユーザーの一般的なタスクは、通常、PCユーザーのタスクとは異なります。 あなたが銀行のクライアントである場合、おそらく、モバイル版のサイトでは、ごく限られた範囲の情報（最も近い支店の住所、ATMなど）に関心があるでしょう。
一般に、適応型組版では、最も一般的なアプローチは、通常のサイトのコピーを作成して、電話の組版でターゲットオーディエンスのすべてのグループのニーズを実現することです。 しかし、その後、ユーザビリティについて忘れることができます。 5％の訪問者が必要とする小さなセクションは、大部分の顧客に不便をもたらします。
- 読み込みが遅い-携帯電話ユーザーにとって、サイトの「重量」は依然として深刻な障害です。 これは、埋め込みカード、ビデオ、クレジット計算機、モバイルサイトのアニメーションを含むメニューなど、デスクトップサイトに典型的ないくつかのアクティブな要素を、より軽い代替物に置き換える必要があることを意味します。 レスポンシブデザインはこの機会を与えてくれますか？ 一般的な実装では、画面が小さいユーザーは、ページ全体を読み込んでその一部のみを表示する必要があります。 たとえば、メインレイアウトのデスクトップバージョンが200 Kbで、モバイルバージョンがさらに50 Kbである場合、250 Kbをダウンロードして表示する必要があります。 もちろん、ページコードの圧縮を使用できますが、サーバーへの追加の要求は引き続き送信されます。
- 絶望-モバイル版の議論の余地のない利点の1つ：気に入らない場合は、オフにして、通常のドメインに移動できます。 レスポンシブデザインサイトでは、このシンプルだが重要な選択肢は提供されません。 適応されたレイアウトが不便でバグが多い場合、またはナビゲーションの重要な要素が隠れている場合は、「失われた」と書きます。もう一度表示することはできません。 デスクトップまたは競合他社のサイトを探して実行する必要があります。 この制限を回避するために松葉杖を思いつくことができます（Cookieを使用し、異なるスタイルシートを接続します）。 しかし、このアプローチは開発を複雑にします。
一般に、上記の欠点にもかかわらず、レスポンシブデザインでモバイルバージョンを開発するというアイデアは非常に人気があります。 特に、このような概念は、たとえばGoogleなどの巨人によって完全にサポートされています。
サイトの個別のモバイルバージョン
モバイルユーザーにとってサイトを便利にするために、彼らはしばしばサイトの個別のバージョンを作成します-特にスマートフォン/タブレットでユーザーをターゲットにしています。 最も一般的な方法は、モバイルユーザーを特別なサブドメイン（m.example.com、mobile.example.comなど）にリダイレクトすることです。 おそらく、99％のケースでは、モバイルバージョンは主なバージョンではなく、開発者によると、モバイルデバイスやタブレットのユーザーに必要かつ有用な機能のみを備えています。
モバイル版の利点
- 変更のしやすさ-サイトは事実上、メインバージョンとは別に存在するため、モバイルバージョンは多くの場合、冗長で不要な機能を提供しないため、モバイルバージョンのみに関連する変更を行う方がはるかに簡単です。
- ユーザーの利便性-通常、モバイルバージョンはデスクトップバージョンに比べて大幅に簡素化されているため、ユーザーは必要な情報を取得するために遠くに行く必要がありません。
- 速度-サイトが同じように簡素化されているため、モバイル版はより高速にロードされます。 これは、まだGPRSまたは弱い3Gを使用するユーザーにとって不可欠です。
- 選択-ほとんどの場合、モバイルバージョンでは、サイトのメインバージョンに切り替えることができます。
モバイル版の短所
- 複数のアドレス-デスクトップバージョンとモバイルバージョンの場合、異なるアドレス。 サイトによっては便利なサイトを表示するために、もう1つのアドレスを覚えておく必要がある場合、これはプラスになる場合もあれば、非常に苛立たせる要因になる場合もあります。 検索エンジンにも問題があります。コンテンツの重複を避けるために、SEOスペシャリストはrel = "alternative"およびrel = "canonical"メタタグを使用する必要があります。 さらに、Googleモバイル検索ユーザーが結果のリンクをクリックすると、デスクトップバージョンに移動するか、モバイルバージョンにリダイレクトされます。 ただし、このページのモバイルバージョンが存在しない場合は、エラーメッセージが表示されます。
- ユーザーにとっての不便-デスクトップ版とモバイル版では異なるアドレス。 サイトによっては便利なサイトを表示するために、もう1つのアドレスを覚えておく必要がある場合、これはプラスになる場合もあれば、非常に苛立たせる要因になる場合もあります。 検索エンジンにも問題があります。コンテンツの重複を避けるために、SEOスペシャリストはrel = "alternative"およびrel = "canonical"メタタグを使用する必要があります。 さらに、Googleモバイル検索ユーザーが結果のリンクをクリックすると、デスクトップバージョンに移動するか、モバイルバージョンにリダイレクトされます。 ただし、このページのモバイルバージョンが存在しない場合は、エラーメッセージが表示されます。
- 制限付き-個別のモバイルサイトを作成すると、コンテンツと機能の一部が削除されます。 さらに、全体像に悪影響を与える可能性のある2つの異なるコンテンツセットがある場合があります。
一般に、サイトのモバイルバージョンの作成は、特に大規模なプロジェクトの場合、非常に適切です。 例として、Amazonは特別なモバイルバージョンのサイトを使用しています。
レス
Google自体は、ウェブマスターによるアダプティブデザインの使用をサポートしていますが、製品には別のシステムを使用しています。 たとえば、異なるユーザーエージェントの下のメインページに移動すると、デバイスごとに異なるHTMLを表示できます。 RESS-レスポンシブデザイン+サーバー側。 「ひざの上に」描かれた実装例：
$DS = DIRECTORY_SEPARATOR; require_once( dirname(__FILE__) . $DS . 'libraries' . $DS . 'browser.php'); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = 'template.m.php'; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = 'template.t.php';} else{ $tmpl = 'template.php'; } include( dirname(__FILE__) . $DS . 'templates' . $DS . $tmpl);
RESSの長所
実際、この方法には、実装に応じて、個別のモバイルバージョンとサイトの適応バージョンの両方の利点が含まれる場合があります。 新しいものから：
- トラフィックの最小化-不要なJavaScriptをHTMLから削除して、モバイルデバイスのCPU、メモリ、キャッシュを解放できます。 また、特別に最適化されたhtmlおよびcssにすることもできます。
- ターゲティングを使用することができます-たとえば、AndroidデバイスがGooglePlayからアプリケーションをダウンロードすることを提案し、Appleが-iTunesから提供する場合。 デバイスごとに、独自のレイアウトを作成できます。
短所RESS
- 開発の難しさ-同様の方法では、適切なサーバー構成とより多くのプログラマーの作業が必要になります。 また、いくつかの異なるレイアウトオプションを作成する必要があります。
- デバイスを決定するメカニズム-残念ながら、私たちの時代であってもまだ完成していません。 珍しい携帯電話がどのように登場するかというストーリーは、モバイルデバイスが頻繁にポップアップするものとして定義されていません。
一般に、RESSは3つの提案されたオプションの中で最も優れていますが、開発にはさらに多くの作業が必要です。
まとめ
私個人の意見では、誰もが使用すべき理想的なオプションはありません。 私にとって最適なオプションはRESSです。 ただし、これは実装に多大な労力を必要とするため、これはまれなオプションの1つです。 一般に、サイトの性質と方向に応じて、3つのオプションすべてに長所と短所があります。