レスポンシブデザイン:なぜそれがあなたの最良の選択肢と正しい方法

BY admin
|

モバイルの爆発的な成長と様々なデバイスの継続的な普及により、レスポンシブwebデザイン(RWD)は、すべてのデジタルタッチポイントで顧客とのエンゲージメント方法を最適化したい小売業者やブランドにとって最良の選択肢です。 インターネット小売業者によると、261万人の米国の消費者がモバイルデバイスを所有し、これらのデバイス所有者の66万人が彼らと買い物をしてい 実際には、インターネット小売業者は、商人が競争力を維持し、外出先で消費者のニーズを満たすためにプッシュとして、IRモバイル500から応答を使用して159％の増加を見てきました2013へ2014.

モバイル版のデスクトップサイトは、これまで一般的なソリューションでしたが、経験はしばしば重要なブランディングとコンテンツ要素を欠いており、貴重なスタッフと予算をウェブサイトの二つのバージョンを管理することと結び付けています。 レスポンシブデザインは、モバイルデバイスを認識して適応する単一のコードベースから情報を配信することにより、これらの問題と単一のURLの両方

しかし、eコマースサイトを立ち上げることがビジネスの成功を保証するものではないのと同じように、パフォーマンスの高いレスポンシブサイト 適切に行われなければ、レスポンシブサイトは、パフォーマンスの低下、高価で時間がかかり、複雑な開発テストの遅延など、解決するだけの多くの課題をもたらせる可能性があり、サイトの書き換えを必要とするアーキテクチャ上の課題のマスクを解除する可能性があります。 12応答性のサイトの最近のMoovwebの調査では、インターネット小売業者は、パフォーマンスが513％だったことを指摘しましたPCのとタブレットよりもスマートフォ

応答性の最適化：最近のMagento主催のインターネット小売業者のウェビナーで

を開始する前に、Forrester Research,Inc. アナリストのMark Grannan氏は、ほとんどのプロジェクトと同様に、RWDの実装の成功はビジネスと開発の目標を調整することから始まると強調しました。 モバイルトラフィックパターンの分析、デバイスの優先順位リストの作成、情報アーキテクチャとコンテンツの確認に時間を割くことで、チームの移動 設計チームと開発チームを緊密に連携させ、プロトタイピングツールや開発フレームワークとのコラボレーションを加速することで、 Grannan氏はまた、レスポンシブデザインプロジェクトをサポートするためにCMSやwebアーキテクチャの変更が必要かどうかを判断するなど、エンジニアが最初からロングテールの要件を解決し、フロントエンドの最適化技術を介して速度とサイトの高速化に積極的に対処することをアドバイスしました。 最後に、Grannanは、開発範囲にビジネス価値指標（サイトのトラフィックやコンバージョンなど）を一致させることを推奨しました。

: あなたの顧客の旅をマップ

他のすべてのものと同様に、複数のデバイスのためにあなたのサイトを最適化するには、あなたの聴衆–彼らの構成と行動

  • あなたのサイトのトラフィックの何パーセントは、モバイルデバイスを介して来ますか？ ほとんどの加盟店は、応答性を考慮するためのトリガーとして20-30％のモバイルトラフィ

  • 彼らはいかにあなたの場所に今日アクセスしているか。 マクロの傾向は、あなたのサイトとあなたの顧客の詳細よりも重要ではありません

  • あなたの顧客人口はどのようなデバイス/ブラウザを支持していますか？ レスポンシブwebデザインは、古いブラウザ（特にIE8以前）と互換性のない技術を使用して実装されていることに注意することが重要です。 サイトにアクセスする上位デバイスを特定することは、サイトを設計する画面ブレークポイントの数を決定するのにも役立ちます

レスポンシブのための最適化:コンテンツ戦略を定義する

レスポンシブウェブサイトのコンテンツを準備することは、コンテンツについての考え方を変更する必要があるため、マーチャントが直面する最大の課題の一つです。 応答性の高いwebデザインを実装することは、デザインの質問よりもコンテンツ戦略の質問であるとよく言われています。

重力部門のBrendan Falkowskiが言ったように、”モバイルファーストは、小さな画面を最初に考えて相互作用を設計するように求める方法論です。 モバイルファーストは、デスクトップサイトのストリップダウンバージョンではありません。”

あなたの顧客が使用する検索用語を見て、あなたの店のための重要な相互作用を定義することから始めます。 機能や情報を優先してモバイルビューをより効率的に整理し、大画面のためのクリーンなサイトにスケールアップします。 勝利経験を作成することは実用性か深さからの除去についてない。

逆に、ユーザーは自分が持っているデバイスから任意のアクションを実行できることを期待しています。 つまり、検索結果のフィルタリング、レビューの読み取り、ウィッシュリストへの保存、チェックアウトは普遍的にアクセ

: コードと画像

RWDの一つの課題は、その単一のコードベースが非常に大きく、ロードが遅くなることです。 最適なモバイル体験のために、最近のインターネット小売業者のウェビナーでMark Grannanが共有しているこれらのヒントを検討してくださ:

  • すべてがロードされた後にコンテンツを表示するのを待つのではなく、より高速なパフォーマンスの認識を作成するために、優先度の高いコンテンツ

  • サーバー側のテクノロジを使用して、デバイスに適したサイズの画像を配信またはレ

  • サーバーへのラウンドトリップの回数を減らすようにサイトをコード化して、待ち時間を短縮します

  • カスタムフォントではなく、開いているwebフォントを使用してページの重さを削減します

  • サードパーティアクセラレーションの使用を検討する Cdnのようなプロバイダーは、さまざまなテクノロジとローカルコンテンツキャッシ

Going Responsive:Lessons from The Trenches

Skinny Tiesは、米国最大のネクタイ小売業者および卸売業者の1つであり、伝統的なネックウェアをオンラインで販売する最初の企業の1つです。 だから、小売業者は2012年初頭に応答性の高いサイトを開発した最初の商人の一人でなければならないということだけに合っていました。

Skinny Tiesが後にした優れた顧客体験を作成するために、Gravity Departmentはすべての属性を標準化された形式にマッピングすることにより、分類の複雑さを大幅に ユーザーがリジッドカテゴリツリーをナビゲートすることができる前に。 ダイナミックタクソノミは、すべての製品に複数の入り口を開きました。

レスポンシブデザインと柔軟なタクソノミの組み合わせは、すべてのプラットフォームとフォームファクタで収益、SEOの価値、コンバージョン率の大幅な

  • 58% 前年同期比での取引の増加

  • 20.8% AOVの増加

  • 187% Androidデバイスからの収益の増加

  • 224% ipadからの収益の増加

  • 437% iPhoneからの収益の増加

Vaxは、英国で最も売れているfloorcareブランドであり、香港を拠点とするTTiのfloorcare部門の一部であり、ホームセンターや建設業界向けの製品のグローバルリーダーです。

ビジネスは年間40％で成長しており、オンラインビジネスは85％以上の成長を経験しています。

同社は、フラッシュ販売、またはそれがヤードセールと呼ぶものから驚異的な成功を見てきました。

これらの五日間のイベントは、ピーク時に3,000+同時ユーザーをもたらし、非常に成功しています！ 同社は、ヤードセールのトラフィックの40％がモバイルデバイスから来たことを見たとき、彼らはモバイル最適化されたサイトが必要

TTi FloorcareのEMEAはディレクター Nigel Aitchison Magento Enterprise Edition1で発売された後、Vaxラインから素晴らしい結果を共有しました。14のレスポンシブテーマは、ビルドとテストにわずか四週間かかりました。 応答性の高いサイトでは、Vaxは、タブレットで42％、携帯電話で156％の大きなヤードセールの増加の間に変換を見ました。

その他のリソース:

インターネット小売業者–July23,2014:レスポンシブWebデザインの成功を達成するためのステップ

Forrester Research–Jan. 16,2014:六つの応答性のあるウェブサイトのプロジェクトの落とし穴とそれらを回避する方法のためのベストプラクティス

インターネット小売業者–May2,2013: Skinny Tiesは、レスポンシブデザインサイト

Brendan Falkowskiとモバイル販売で211％のバンプを取得します: https://speakerdeck.com/brendanfalkowski

Moovweb-July2014:あなたの応答サイトのパフォーマンスを向上させるための8つの方法

Magentoのブログ–May13,2014:Magentoのは、半分の時間で応答サイトを有効にします