昨日はレスポンシブについて触れましたが、
その中で「スマホ対応するには、レスポンシブ対応だけではたりない」と書きました。

日付け入力のフォームをスマホ用にするとか、
ドロップダウンリストはなるべく避けてラジオボタンにするとか、
いろいろあると思うのですが、とくに考慮したいのは一覧画面のテーブル、表の表示です。

ウェブでテーブル、表の表示に一般的に用いられるのは Html の Table タグです。

横に６列、縦に１０行、といった表示の仕方が得意なTableは、パソコンでの表示ではとくに不便はありませんが、
これをスマホにそのまま表示すると、とても見づらくなります。

スマホでの表示は縦長になることが多く、
パソコンでは横長で表示することが多いので、
これだけでレイアウトの調整が必要なことがわかります。

そのうえ、スマホは画面が小さいので、なおさらです。

一般的なTableでの表

この画像を拡大する

それではTableは、スマホではどのように表示するように調整したらよいでしょうか。

パソコンでは一覧性を確保するために、列を横に並べて、１行ごとに情報をまとめつつ、
縦方向に、各列ごとの比較も容易にしています。

画面サイズに余裕のないスマホでは、以下の図のように、１行内の各列も縦に表示したほうがみやすそうです。

スマホでの一覧表の表示例

この画像を拡大する

もしかするとこのように対処されているケースは少ないかもしれません。

この理由は、レスポンシブ対応に用いる共通プログラム、代表的なものですと Twitter Bootstrap など、が、このような仕様に対応していないためです。

しかし、実際にスマホ対応の業務システムにする際には、このことも考慮してシステムを実現する必要があると考えています。