web-dev-qa-db-ja.com

モバイルWebアプリ用の新しいテンプレートが必要ですか?

現在、デスクトップクライアントのみにサービスを提供するWebアプリケーションを使用しています。アプリケーションのモバイル対応バージョンを作成します。

不思議なんだけど:

  • ゼロからデザインを作成し、mobile-boilerplateのようなものを使用して、モバイルバージョンをゼロからデザインする必要がありますか?

または:

  • @ media screen and(max-device-width:480px){}を使用して、追加のタグを挿入し、現在のhtml5ブロックレベル要素を変更できますか?

HTML5&CSS3(+ JS)デスクトップUI-UXの設計に関してはかなり経験がありますが、これまでのところ、モバイルブラウザー向けには何もしたことがなく、非常に混乱しています。

どのオプションが正しい方法ですか?

また、このテーマに関する記事や提案があれば、ぜひ読んでください。

どうもありがとうございました!

2
Phil

新しいテンプレートを最初から作成する必要はありませんが、既存のテンプレートを更新して「応答」できるようにする必要があります。レスポンシブは、ここで調べたいキーワードです。基本的には、1つのテンプレートを使用できますが、ユーザー画面の幅に応じて異なるレンダリングを行います。これは、サイドバーの表示/非表示などの小さな変更、またはより高度なJavascriptテクニックを使用したレイアウトと要素の非常に広範な変更です。

Luke Wrobelskiの記事、Lyndaのチュートリアル、または(特にお勧め)A List Apartの本をご覧ください。

1
joesk

CSSベースのレスポンシブ技術に関する最近の差し迫った有用な記事については、 CSSを使用した基本的なレスポンシブサイトの構築 を参照してください。この実装は、列制御の基礎となるグリッドシステムに依存しないため、ニースです。つまり、既存のテンプレート内のウィジェットは、グリッド列に配置するためにセットでグループ化するのではなく、より自然にレイアウトできます。独自の設計に適用できる手法と考慮事項の詳細については、 Tim Kadlecによるレスポンシブデザインの実装 を参照してください。

1
Don Day