テーブルやテーブルレスフォームのあるレスポンシブなHTMLページデザイン（PC、タブレット、スマートフォン）

Question

私はPCベースのウェブアプリケーションを開発中ですが、それほど遠い将来にタブレットやスマートフォンのサポートが想定されています。 Twitter Bootstrap（http://twitter.github.com/bootstrap/index.html）とJQueryをCSS/Javascriptコアとして使用しています。

ほとんどの以前の開発では、アプリケーションのほとんどがデスクトップの使用を対象としていたため、フォームをレイアウトするためにテーブルを使用していました。したがって、テーブルを使用するとフォームをレイアウトするだけでした（大部分は2列）そうです。

しかし、私たちは画面の不動産が限られているモバイルデバイスを追加しようとしています。すべてのフォームがスマートフォンにアクセスできるわけではないという事実を考慮して、私はテーブルを保持し、モバイルデバイス用のテーブルレスフォーム。私は、Twitterのブートストラップが、テーブルレスフォームに必要なサポートを私たちに提供すると確信していますが、2012年の主要な問題はまだ疑問ですか？

新しいアプリケーションであるため、アプリケーションにアクセスするために最新のブラウザバージョンを使用するようにユーザーを強制する選択肢もありますが、これはモバイル初のデザインではどういうことでしょうか？

これは長年にわたり議論されていることは分かっていますが、私は利用可能なツールを使用して2012年の見通しを探しています。

Answer 1

レスポンシブまたは流体設計に基づいた独自のカスタムフレームワークを作成することができます。固定px値を持たないdivベース（またはテーブルなし）構造になります。 （つまり、すべてのパディング/余白/フォント/幅などem /％） CSSは、通常の固定pxベースのCSSに比べて若干複雑になるでしょう。

レスポンシブデザインを使用して新しいページを作成しました。モバイル/タブレットと同様に、最新のデスクトップブラウザでもうまく機能しました。

Answer 2

私の意見では、Twitterのブートストラップはテーブルレスフォームの作成に最適です。このコードはフォーム用に少し膨らんだものですが、別の画面解像度で本当にうまくサイズ変更できます。

Answer 3

ブートストラップを使用してください！

これは応答性の高いデザインで、あらゆる種類の画面サイズでうまく動作するように設計されています。

Here you got the official docs for forms.

あなたは試してみて、それはちょうどそれが狭くなって、画面の幅をリサイズ小さな画面のデバイス上で見られますか見えるかもしれません。サイズを変更すると、画面に再編集されたすべてのコンポーネントが表示されます。