web-dev-qa-db-ja.com

モバイルWebブラウザーの設計

ほとんどすべての最新のモバイルWebブラウザーで実行できるようにWebサイトを設計するための最良のアプローチは何ですか?

WebKitベースのブラウザーをターゲットにすることで十分ですか?

8
rick schott

いいえ、WebKitをターゲットにするだけでは不十分です。最初にすべきことは、モバイル市場にはタッチベースと非タッチの2つのセグメントがあることを考慮することです。これは、モバイルユーザーエクスペリエンスの設計方法に影響します。ありがたいことに、タッチベースのものがWebKit(Android、iPhone、およびWebOS)に大きく向かう傾向にあります。その他は主にIE Mobile(Windows Mobile 6.5上のIE Mobile 6とWindows Phone 7上のIE7/IE8に基づく新しいもの)とOpera =(モバイルおよびミニ)レンダリングエンジンと機能の詳細については、これを参照してください Wikipediaのモバイルブラウザーのリスト

タッチベースのプラットフォームの場合、 Sencha Touch のようなライブラリを使用すると、すべてのデバイスで同等のエクスペリエンスを作成できますが、すべてのデバイスで同等のエクスペリエンスを作成するのは困難です。実際、私はあなたに試さないことをお勧めします。タッチモバイルプラットフォームと非タッチモバイルプラットフォームの違いは非常に大きくなり、デスクトップベースのUIをモバイルサイズの画面に適合させようとするUXの違いとほぼ同じです。 -しかし、あなたは古いまたは非タッチのプラットフォームのためにそのアプローチから何か有用なものを手に入れるのに苦労するでしょう。

ただし、LukeWの記事とそれに続く モバイル向けのデザインを最初に に関する講演を検討してください。これは必ずしも質問への回答とは限りませんが、良い原則と見なすことができます。あなたのサイトで、それらのものを迅速かつ簡単に利用できるようにします。 allプラットフォーム全体で一貫して優れたデザインであるため、その意味で、モバイルデザインを導くパターンとして使用できます。

12
Rahul

昨日iPhone 3でいくつかの実験を行いました。これが私の経験です。

  • 幅が320ピクセルであると想定しないでください。したがって、流動的な幅のレイアウトを使用します。

  • 適切なdoctypeを使用してください。 XHTML Mobile 1.2を使用しています。しかし、これが正しいかどうかはわかりません。

  • ボタンを大きくします。

  • ホバーがないので、アイコンを使用して、さまざまなui要素の機能を示します。

4
neoneye

モバイルという用語は、電話の領域の外で成長しており、5〜9インチのタッチスクリーンを必要とするタブレットなどのデバイスを含み始めています。さらに、モバイル設計では、水平方向と垂直方向の両方を考慮する必要があります。ネオニーが言ったことに加えて、さらにいくつかの推奨事項/提案。

  • マージンまたはパディングを使用して、画面の端にテキストが配置されないようにします。
  • 流動的な幅のレイアウト(幅は320pxから1024pxまで可能)を使用することに加えて、使用するデザイン要素がうまく折り返されることを確認してください。たとえば、ボタンは水平方向のリストよりも折り返しの方がよく見えます。
  • テキストは少し大きくする必要がありますが、それでも読みやすくする必要があります。私の見解では、良いタイポグラフィスタイルは、少なくともここでも同じくらい重要です。 Webに適用される活版印刷スタイルの要素 は良い参考資料です。
3
waymost

視聴者がもう少し資格がある場合は、ほとんどの顧客がプライマリデバイスまたはレンダリングブラウザーを使用しているという、教育を受けた仮定を立てることができるかもしれません。最初に主要な聴衆の中心的なニーズに対処します。アプリケーションをすべてのプラットフォームに均等に「最初から」配布しようとすると、困難な作業になる場合があります。

ここに私が遭遇したいくつかの役立つ記事があります:

モバイルリファレンスhttp://www.quirksmode.org/mobile/

2
hungrysquirrel