すべてのユーザをいつでも満足させるにはどうしたら良いでしょうか? ここで紹介する一連のドキュメントでは、Open Web Apps のクロスブラウザ、クロス端末なレイアウトについて詳しく掘り下げ、たいていの開発状況に役立つ技術とアイデアを紹介します。

モダンな Web サイトや Web アプリのためいかに効果的なレイアウトを行うかはひとつの課題です。ある意味では、開発者の仕事は簡単になったと言えるでしょう。CSS は一般的に、かつてよりはるかに堅実で一貫性のある対応がブラウザやプラットフォームを越えて実現していますから、多くのひどいハックに頼る必要はもうありません。しかし一方で難しくなった点もあります。近頃では Web へアクセス可能な端末が多数あり、搭載ブラウザ、画面サイズ、解像度、プロセッサ処理速度、使用場面 (端末が携帯用なのか、ネットワークに接続されているかなど) もバラバラです。

それに加えて、Firefox OS のようなプラットフォームが登場し、そこでは Open Web Apps をインストールできます。

レスポンシブデザイン入門
ひとつのアプリ、複数の画面サイズ。スマートフォンでもデスクトップでも美しく快適に動作する UI を作成するにはどうすれば良いでしょうか? ユーザの画面サイズに応じて変化する UI の設計、開発方法を学びましょう。
レスポンシブデザインのビルディングブロック
このガイドでは、レスポンシブなアプリケーションの作成に関わる主要な技術やテクニックについて、完全な例を挙げながら議論します。
レスポンシブデザインとアダプティブデザイン
これら 2 つの用語はしばしば混同されますので、ここでこれらの違いについて実用的なガイドを提供します。
モバイルファースト
モバイルファーストとは、既定のレイアウトや設定をモバイル端末向けに行い、デスクトップブラウザ向けのレイアウトや機能をその上に重ねるという、Web サイトの設計慣行です。このガイドでは、モバイルファーストの包括的な考えの中で、モバイルファーストなメディアクエリなど、いくつかの有用なテクニックについて見ていきます。
可変ボックス
CSS 可変ボックスを使えば、画面のサイズや向きに応じて、アプリのユーザインタフェースが各要素の位置やサイズを自動的に調整するように設定できます。

ツール
関連技術文書
コミュニティ

貢献したいが何をするべきか分からないという方は、是非コミュニティに参加して下さい。

ネチケットをお忘れなく...

 

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: kohei.yoshino, necrophcodr
 最終更新者: kohei.yoshino,