今日、ほとんどの人はオンラインでモバイルガジェット - タブレット、携帯電話、これに関連して、サイトの最適化も新しいレベルになります。ユーザーが来て、サイトがモバイルデバイス用に最適化されていないことを認識した場合: - 彼が出てくると別のより便利を探すために開始されることに100%の99あなたは、画像を表示することができない、ボタン、小さくて読めないフォント、デザインスキューをオフに引っ張りました。検索ロボットは、リソースが無関係である、すなわち検索クエリと一致しないことをチェックする。したがって、ページのデザインは、必然的に様々なモバイルデバイスに適合しなければならない。サイトのモバイル版とは何ですか、それを行う方法、それを適用する最善の方法は何ですか?この記事で詳しく読む。

したがって、サイトをモバイル版に適合させる4つの主要な方法があります。

サイトのモバイル版の作成方法

第1の方法 - 適応設計

アダプティブテンプレートは変化を示唆画面サイズに応じたサイトの画像原則として、標準の1600,1500,1280,1100,1024、および980ピクセルに設定されています。実装には、CSS3 Media Queriesを使用します。サイトのデザインは同時に変更されません。

このメソッドの利点は次のとおりです。

  • 便利なデザインは、構造自体が画面のパラメータに適合していて、どんなアップデートでも、最初からデザインを開発する必要はなく、CSSとHTMLを修正するだけです。
  • 1つのURL - ユーザーは覚えておく必要はありませんリダイレクト(あるアドレスから別のアドレスへのリダイレクト)は必要ありません。これはウェブマスターの作業を複雑にする可能性があり、検索エンジンは単一のアドレスでリソースをソートしてランク付けする方が簡単です。

もちろん、適応テンプレートには独自のテンプレートがありますこれはメリット以上のものです。それにもかかわらず、多くの開発者はこのコンセプトを遵守しています。たとえば、Googleのモバイル版のサイトでは適応設計が行われています。したがって、欠点は次のとおりです。

  • アダプティブデザインでは同じタスクをサポートしていませんPC上のようなモバイルデバイス。たとえば、銀行サイトのモバイル版の場合、為替レートや最寄りのATMに関する情報がユーザーにとって重要である可能性が高い場合、この設計で十分です。しかし、これが多くのセクションとサブセクションを持つ複雑な構造化リソースであれば、適応型レイアウトはビジターにアピールすることはまずありません。
  • ゆっくりとローディングすると、お気に入りのサイトが憎むこれは特に、アニメーション、ビデオ、ポップアップウィンドウ、その他のアクティブな要素が豊富なリソースに当てはまります。重量のために、ページは単に「減速」し、ユーザーは怒って離れることになり、サイトの検索位置が下がります。
  • モバイル版を無効にできないことはまだあります1つの重大な欠点。要素がこのタイプセットによって隠されている場合、それを無効にして通常のドメインに移動できるサイトとは異なり、開くために何もできません。

それにもかかわらず、このようなモバイル版のサイトは高速ですが、特別なスキルとコストがなくても、リソースをあらゆるガジェットに適応させることができます。しかし、これらの欠点を鑑みて、複雑なナビゲーションやアニメーションを必要とせず、最小限の情報とマルチメディアで、小さくてシンプルなリソースに適しています。複雑なサイトには2つの方法があります。

ウェブサイトのデザイン

方法2 - 別のバージョンのサイト

この方法は非常に一般的であり、しばしば成功しています。モバイルデバイス上のサイトをより認識しやすくします。その本質は、アプリケーションの下に描画され、別のURLまたはサブドメインにある別のバージョンのページを作成することです(例:m.vk.com)。同時に、主な機能は維持され、サイトのデザインはちょっと違って見えます。この方法の利点は明らかです。

  • 便利なユーザーインターフェイス。
  • バージョンはメインリソースとは別になっているため、編集や編集が簡単です。
  • 別のバージョンのサイトの重みが低いため、適応テンプレートよりもはるかに高速です。
  • ほとんどの場合、モバイルからページのメインバージョンに移動する機会があります。

しかし、ここにいくつかの欠点がありました。

  • 複数のアドレス - デスクトップ版とモバイル版サイト。ユーザーに2つのオプションを覚えさせる方法は?ウェブマスターは、dextopバージョンからモバイルへのリダイレクト(リダイレクト)を指定することがよくありますが、このページがモバイルバージョンに存在しない場合は、エラーが発生します。ここでは、2つの同一のリソースをランク付けすることが難しい検索エンジンでは困難があり、これがプロモーションに直接影響します。
  • ユーザーが誤ってそれを入力した場合、コンピュータからサイトのモバイル版は、出席に影響するかもしれないばかげて見えるだろう。
  • このバージョンは、デスクトップが大きく切り詰められていることが多いため、ユーザーは非常に限られた機能しか持たないでしょう。しかし、同時に、何かが欠けている場合、訪問者はページのフルバージョンに行くことができます。

一般に、別個のモバイルサイトはそれ自体を正当化するモバイルデバイスにリソースを適合させる最も一般的な方法です。 Amazonなどの大規模なオンラインストアで人気があります。

応答パターン

第3の方法 - RESS-デザイン

Googleの検索エンジンはこれを積極的にサポートしています。モバイルデザインの方向性これは、電話やタブレット用にサイトを適応させるのが最も難しく、費用がかかりますが、効果的な方法です。それはRESSと呼ばれています。これは、モバイルアプリケーションへのリソースターゲティングで、各デバイスごとに個別にダウンロードできます。アンドロイド用 - GooglePlay、アップル用 - iTunes付き。

このようなアプリケーションは、高速で、無料で、便利で、さまざまな種類の情報をホストする機能を備えていますが、電話機のメモリとインターネットトラフィックは、ブラウザ経由でサイトを訪れるときと同じように食べられません。リンクは常に画面に表示され、ブラウザのアドレスバーに複雑な名前を入力する必要がないため、簡単にアクセスできます。

もちろん、ここにも欠点があります。開発の複雑さ、多くのプログラマーの労働の高コスト、レイアウトのためのいくつかのオプションを行う必要があります。モバイルデバイスがアプリケーションによって認識されないことがあります。定期的な技術サポート、不足の修正が必要です。それにもかかわらず、このオプションは、その生産的で途切れのない仕事のために提案された3つの中で最良のものと考えられます。

Googleモバイルサイト

モバイルサイトを作る最も安い方法

上記の方法のすべてが示唆している必ずしも長くて難しいとは限りませんが、ウェブマスターの仕事に払っています。そのような開発が緊急に必要でない場合は、シンプルで無料のモバイル版のサイトが必要になります。どのようにそれを最も簡単にするには?

特別なテンプレート(プラグイン)をダウンロードする応答性の高いデザインです。たとえば、WP Mobile Detector、WordPress Mobile Pack、WPSmart Mobileなどです。彼らは電話でサイトを正しく表示するのに役立ち、ページをモバイル版にうまく適応させるために修正すべき点についていくつかのヒントを受け取ります。

もちろん、この方法はあまり適していません深刻なリソース。むしろ、この無料機会は、最小で最も単純なサイト、ブログ、ニュースフィードを対象としています。今日のYandexと同様、Googleの検索エンジンにはモバイル版の厳しい要件があることを忘れないでください。この方法を使用して掲載順位を下げるチャンスがあります。

この方法では、広告とポップアップのバナーは切り捨てられますが、ページは「遅れ」なく迅速に読み込まれます。

サイトのモバイル版アンドロイド

モバイル版の作成原則

モバイル版のサイトは無償で作成されます。ウェブマスターのスタッフを使用している場合は、RESSシステム上または適応テンプレートを使用して作成されます。最も重要なことは、効果的な作業のためには、いくつかの非常に重要な原則に従うことが求められることです。だから、サイトのモバイル版は何でしょうか?どのように生産性、効率的かつ生産的にするには?

コンピュータからのサイトのモバイル版

不要なものはすべて削除します

ミニマリズム - 何のために努力すべきかサイトのモバイル版の開発者。色、ボタン、バナーがいっぱいで、正しい資料を探して無限にスクロールしなければならない情報を知覚することがどれほど難しいか想像してみてください。モバイルデザインはシンプルできれいでなければなりません。スペースを分割するには2〜3色を選択します(ブランドなど)。それらの1つが白であればよい。小さな画面のスペースを明確で読みやすいゾーンに分割します。バーチャルキーは、ユーザーがどこをクリックするかを明確に知ることができるように表示する必要があります。ここでは製品が表示されます。ここにデータを入力するフォームがあります。ここでは、配信と支払いに関する情報があります。

有用と思われるすべての追加オプションデスクトップ版では、ユーザーの生活が楽になりますが、ここでは難しさがあります。最も重要な要素だけを残す。アニメーション、広告バナー、マルチメディアは、おそらく、サイトやアプリケーションの作業を遅らせ、主要なものから気をそらすだけです。

アラインメント

アラインメントの問題はあまり重要ではありません。あなたが間違っていると、ユーザーは重要な言葉の終わりを受け取るだけなので。左と垂直へのアラインメントは一般的に受け入れられます。あなたの携帯電話でニュースフィードをスクロールする方法を想像してみてください。あなたは上から下に向かって行いますが、左または右にはしません。

統一

遷移の長い連鎖の可能性がない場合、いくつかのステップを1つにまとめてみてください。例えば、サイトはいくつかの段階でデータ入力を必要とします - 名前、住所、それぞれの別々のセルに別々の家、通り、アパートなどが含まれています。ユーザーが多くの小さなセルを使いこなそうとしないようにするには、名前と住所。

そして切断

時には逆に、切断する必要があります大量の情報たとえば、ドロップダウンメニューには、配達が実行される80以上の都市のリストがあります。ユーザーがこの巨大なリストをスクロールする必要がないように、それらを地域別にグループ化します。彼が地方の中心部または地域を移動すると、都市の別のリストが脱落する。

チェックリスト

ちなみに、リストについては。それらの2つがアルファベット順またはその他の順番で置換されています。彼らの選択は、何が表示されるかによって異なります。

固定は、ユーザは彼が探しているものを正確に知っている。たとえば、都市、番号または日付です。 2番目のオプションは、長い複合名や同じ名前のバリエーションが多数ある場合に適しており、各ドロップダウンリストはユーザーを目標に一歩近づけます。自動置換を使用するバリアントは、訪問者が支援を必要とする場合によく使用されます。例えば、編み場は編み針を購入することを提案する。ユーザーは「Metal Knitting Needles」という検索クエリを入力し、ツールチップには「5mm針編み」、「4.5mm針編み」などが表示されます。

オートコンプリート

この項目は、特に彼らはオンラインで販売しており、標準の支払い方法、納品書などを記入しなければなりません。電話で購入した場合、コンピュータにアクセスする時間はほとんどありません。つまり、購入プロセスはできるだけ迅速かつ便利に行う必要があります。

このフォームにはすでに完成したデータは、最も一般的な回答に頼ることができます。たとえば、同じ地域で働いている場合は、今日の日付、現金での支払い方法、都市を挿入します。それらは変更することができますが、ターゲットに当たった場合、ユーザーの時間が節約されます。

すべてが読まれ、すべてが見られる

サイトのモバイル版を作成し、覚えているすべての携帯電話が異なっている、そしてビジョンも。おそらくあなたのサイトは小さな画面から見えるので、フォントはシンプルで読みやすいものでなければならず、ボタンはクリックして別のページに到達しないように十分大きくなければならず、画像はインターネットでは特に大きく開く必要がありますストア。

いくつかの統計

サイトのモバイルデバイスへの適応について言えば、このプロセスがネットワーク促進のためにどれほど重要であるかを理解するために、統計に頼らないことは不可能です。

番号は次のとおりです。 今日、人口の87%が、最も若い子供や一部の高齢者を除いて、ガジェットを使用しています。経済学者は、今後5年間でモバイルコマースの成長が100倍になると予測しています。しかし、サイトのわずか21%がモバイルデバイスでの作業に適しています。したがって、インターネットトラフィックと電子商取引市場は小規模な5番目の部分だけが占有しています。

これらの数字を考えてみてください。あなたのリソースを適応させるのは理にかなっていますか?もちろん、はい。さらに、この市場には余裕がある限り、自分のセグメントを占有することができます。

モバイルサイトを無料で

モバイル版はどこですか?

モバイル版を使用することをお勧めします高い評価を求めるプラットフォーム。結局のところ、これはユーザーに直接的な影響を与え、彼があなたのサイトにとどまる快適な環境を作り出します。

モバイル版がなければ存在できません:

  • ニュースポータル。仕事や学校への道のりで電話から見えるのは大多数です。
  • ソーシャルネットワーク - 同じ理由から、オンライン通信の要素があります。これは、便利で分かりやすいチャットを作成する必要があることを意味します。
  • ヘルプや、ナビゲーションがあるサイトなど、人が何かを探している間に、
  • オンラインストア - ショッピングに時間を費やさない顧客を引きつけ、モバイルインターネットを通じてすべてを買う機会。

結論の代わりに

今日、モバイル技術は市場のリーダーシップのために努力している企業は、インターネットリソースが要件を満たしていることを保証する必要があります。ユーザーの要求が増加するため、ウェブサイトは常にさまざまなデバイスにアップグレードして対応する必要があります。特定のリソースに不便な人は、製品や価格に関する情報を受け取ることも、注文することも、配送について学ぶこともできず、すべてが可能なサイトを見つけることはできません。したがって、競争に勝つためには、柔軟で便利で機能的で面白いリソースを持つことが重要です。

サイトのモバイル版が役立ちます。AndroidまたはIos。これを行うには、上記の再設計の方法の1つ、アダプティブテンプレート、サブドメインに新しいサイトを作成してリダイレクトする、無料のテンプレートを使用する、またはユーザーがページにアクセスしやすくなるモバイルアプリケーションを作成するなどの方法を選択します。

このアプローチは、既存の顧客の忠誠心を維持するだけでなく、新しい訪問者を引き付ける機会を提供するのにも役立ちます。

</ p>