昨日はレスポンシブについて触れましたが、
その中で「スマホ対応するには、レスポンシブ対応だけではたりない」と書きました。
日付け入力のフォームをスマホ用にするとか、
ドロップダウンリストはなるべく避けてラジオボタンにするとか、
いろいろあると思うのですが、とくに考慮したいのは一覧画面のテーブル、表の表示です。
ウェブでテーブル、表の表示に一般的に用いられるのは Html の Table タグです。
横に6列、縦に10行、といった表示の仕方が得意なTableは、パソコンでの表示ではとくに不便はありませんが、
これをスマホにそのまま表示すると、とても見づらくなります。
スマホでの表示は縦長になることが多く、
パソコンでは横長で表示することが多いので、
これだけでレイアウトの調整が必要なことがわかります。
そのうえ、スマホは画面が小さいので、なおさらです。
それではTableは、スマホではどのように表示するように調整したらよいでしょうか。
パソコンでは一覧性を確保するために、列を横に並べて、1行ごとに情報をまとめつつ、
縦方向に、各列ごとの比較も容易にしています。
画面サイズに余裕のないスマホでは、以下の図のように、1行内の各列も縦に表示したほうがみやすそうです。
もしかするとこのように対処されているケースは少ないかもしれません。
この理由は、レスポンシブ対応に用いる共通プログラム、代表的なものですと Twitter Bootstrap など、が、このような仕様に対応していないためです。
しかし、実際にスマホ対応の業務システムにする際には、このことも考慮してシステムを実現する必要があると考えています。
イルカシステム(株)は、以下のような業務用ウェブシステムのご提案、受託開発、運用を行っております。
中小企業さま向けの社内向け営業支援、顧客管理、経営数値管理システム
経営数値をリアルタイムで見える化し、目標達成度を常に把握することができ、顧客へのフォローもスムースになります
中小企業さま向けの受発注管理、請求入金管理、在庫管理
御社特有の受発注業務、出荷処理をシステム化することで業容拡大への大きなお手伝いとなります
医療業界向けの業務改善システム
※医療業界向けに、臨床研究の無作為割付自動化のための自社サービス「 ムジンワリ 」をご提供しております。
IoTシステムの開発
詳しくは ご提供サービス を参照してください。