メインサイトのモバイル対応サイトの計画と構築 [終了]

https://stackoverflow.com/questions/9435

08-06-2019
|

質問

私たちは、あるクライアントのためにモバイルサイトを構築するための初期計画段階にいます。このモバイルサイトは、当社がすでに構築したメインサイトに追加されるものになります。私たちは、コンテンツがメインサイトの小さなサブセクションとなり、サイトを使用すると予想される主な視聴者をターゲットにすることを決定しました。

いくつかのサンプルモバイルサイトを調べていると、URL に WAP が含まれる多くのサイトが、実際には単純化された HTML ファイルであることに気付きました。 http://wap.mlb.com 実際には WAP が有効ではなく、単純な HTML です。

私の質問は、WAP は過去の考えですか?スマートフォンや iPhone にはサイトをそのままレンダリングする機能があるので、WML や WAP について心配する必要がありますか、それとも必要最低限の HTML バージョンで十分でしょうか?

また、お勧めのブログやチュートリアル、またはモバイルデバイスを確認する最適な方法について以下の回答を教えてください。プログラマとして、ユーザーエージェントをモバイルサイトにリダイレクトするには、ユーザーエージェントの各バリエーションを知る必要があるのでしょうか?

最後に、iPhone/Touch Safari ブラウザ用にモバイルサイトをプログラムしますか? それともサイトをそのままにしておくでしょうか?

解決

新しい携帯電話には、通常の HTML によく似た HTML モバイルプロファイル (XHTML MP) を使用する WAP2 が搭載されています。古い電話ではワイヤレスマークアップ言語 (WML) が使用されます。

読者の好みに応じて、XHTML MP を使用して携帯電話向けのサイトを作成し、WML を完全に廃止することを検討します。携帯電話向けとは、軽いグラフィックス、JavaScript がほとんどなく、シンプルなナビゲーションを意味します。

さまざまな携帯電話の機能を確認するには、次のサイトを参照してください。ヴルフル.

また、以下もご覧になるとよいでしょう。モバイルウェブのベストプラクティス w3cから。

他のヒント

あまり手間をかけずに iPhone のサポートを向上させるためにできる 2 つのことを次に示します。

ページを上にスクロールして URL バーを非表示にします。

<script type="application/x-javascript">

  if (navigator.userAgent.indexOf('iPhone') != -1) {
    addEventListener("load", function() {
      setTimeout(hideURLbar, 0);
    }, false);
  }

  function hideURLbar() {
    window.scrollTo(0, 1);
  }

</script>

そして、ページ幅のスケーリングを設定します（いくつかのテストを行ってこれを試すのが最善です。また、使用できる他の例も探してください） user-scalable=true):

<meta name="viewport" content="width=320; user-scalable=false" />

ぜひチェックしてみることをお勧めしますキャメロン・モールズ本モバイル Web デザイン. 。モバイルに最適化されたサイトを構築するための技術的なハウツーというよりも、利用可能なさまざまなオプションについて考えさせ、それぞれの長所と短所をまとめています。自分がどのようなアプローチを取っているのか、それが正しいのかどうかを考えさせられます。サイトへのモバイルデバイスからのリクエストを検出するのに役立つリソースへのポインタも含まれていると思います。さまざまなオプションがあります。

現在(2014年)

モバイルデバイス用に別のサイトは必要ないかもしれませんが、代わりに次のようなフロントエンドライブラリを使用できます。 ツイッターブートストラップ を使用する レスポンシブレンダリングサイトが画面サイズに応じて自動的に適応するようにします。 タブレット または モバイル機器 または デスクトップ

大きな利点の 1 つは、 メンテナンスの軽減 モバイル用とデスクトップ用に別々の Web サイトを持つ場合と比較した場合。

について詳しく知るには ツイッターブートストラップ クリックここ

2.5G 携帯電話と新しい 3G 携帯電話の主な違いは、2.5G 携帯電話は独自のブラウザを使用していましたが、3G 携帯電話のブラウザはレンダリング機能がより類似し、正確になったことだと思います。

一方、CSS を使用すると、同じ HTML を大画面形式でも、モバイルに最適化された小さな形式でもレンダリングできます。そのため、何が起こったのかというと、「単純な HTML」アプローチが最も難易度の低い方法であるように見えたということだと思います。取ること。また、テーブルレスレイアウトにより Web サイトの拡張性が向上し、大画面と小画面の両方の形式でサイトをレンダリングすることが容易になります。

したがって、最終的な問題はターゲット市場の問題になります。完全に 3G 対応の携帯電話を所有する傾向にあるテクノロジーに精通したユーザーをターゲットにしていますか?せいぜい 2.5G を持っている可能性のある人々をターゲットにしていますか?

私の経験では、それは何をしようとしているのか、そしてユーザーが誰/どこにいるのかによって大きく左右されます。

WAP は多くの悪い評判を受けていますが、WAP の強みは、低帯域幅で高遅延の接続が可能な場合にあります。WML コンテンツは通信事業者のゲートウェイによって最適化され、無線で送信されるデータ量が大幅に削減されます。iPhone などをお持ちの場合、3G の通信範囲がしっかりしているエリアでは、よりリッチなコンテンツを選択する余裕がありますが、より辺鄙なエリアでもアプリのパフォーマンスを向上させたい場合には、WAP が大きな利点となります。

WAP に関して注意すべき点の 1 つは、携帯端末の WAP サポートの品質が大きく異なることです (スマートフォンの Web ブラウザーについても同じことが言えると思います)。ほとんどのブラウザではページは正常に表示されますが、一部のブラウザではフォーム処理が非常にひどいものになります。

ユーザーエージェントに基づいてコンテンツを変更する場合は、特定の種類のコンテンツにアクセスする明示的な方法も提供する必要があります (例:別の URI) - 自動化された選択が常に正しいとは限らず、クライアントがそれをオーバーライドできるようにする必要があります。

WAP 開発を行う場合は、Windows ベースの WAP ブラウザである WinWAP をチェックしてください。

非常に少額のお金を使いたい場合は、私の本の中古本を見つけることができます「Palm OS Web アプリケーション開発者ガイド」 Amazonで1ドル未満で。古い Palm VII デバイスに関する具体的なヒントはもう適用されませんが、モバイル Web サイトの作成についてはまだ適用できる可能性のあるセクションがいくつかあります。私の基本的なアドバイスは次のとおりです。最初に関連情報を含む小さなページを作成し、次にナビゲーションリンクを配置します。一般的な/定型的なコンテンツを他のページにプッシュします。ユーザーが 1 ページに費やす時間を減らすために最適化を試みます。また、待ち時間を短縮するために、ページに大量のオブジェクト (画像、JavaScript ファイル) をダウンロードすることは避けてください。

コード：w3 バリデーターを使用すると、11 エラーが返されます。試したインデックスページは次のとおりです。複数の行を使用しないでください。これらはテンプレート行です。

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title>
<meta name="description" content="A Thomas Image professional photography serving Cleveland
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby">
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,">
<meta name="y_key" content="7b00158550200c1c">
<meta name="y_key" content="b5a3e0c1d778ff8a">
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" />
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" />
<meta name="viewport" content=”width=320,user-scalable=false”>

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

メイン サイトのモバイル対応サイトの計画と構築 [終了]

メインサイトのモバイル対応サイトの計画と構築 [終了]