レスポンシブで、ツーカラムで、スマホサイズにした時のみ、ワンカラムになるサイトの作り方。

Question

レスポンシブで、ツーカラムで、スマホサイズにした時のみ、ワンカラムになるサイトが良くあります。

スマホの時は、右カラムの要素がそのまま消えているように見えますが、display:none;
で右カラムごと消す方法が一般的でしょうか？
display:none;を使う設計は、無駄な読み込みが起こるので良くないという話も聞きますが、特に問題ないというのが現場の一般論でしょうか？

下記のように下に持っていく方法が良いですかね？
http://www.webdlab.com/labs/layout/layout-r2/
もし、この設計なら、そのような無駄がないという設計がありましたら教えてください。

ただし、消さなでツーカラムをワンカラムにする方法は、無い場合や、ツーカラムでスマホは、レスイズモアなので、スマホのケースでは、情報量を減らすために、むしろ消すべきという考えが一般的であればdisplayで消そうと思います。

現場でも上記のような考え方でしょうか？

また、クリエイター側は、ワンカラムが良いと考えていると思いますが、そもそも需要として、ツーカラムのレスポンシブは、まだ存在するでしょうか？

そもそも、ツーカラムの需要が無ければ、ワンカラムだけ極めて行けば良いのかもしれませんね。

Answer 1

マルチカラムにするのかシングルカラムにするのか
サイドバーをスマホ時に非表示にするのかカラム落とし等で位置を変えるのか

こういうことはコンテンツ設計の方針次第ですから、全てケースバイケースでしょう。
サイドバーに入っているものの性質によって、カラム落としすべきか、
display: none;で完全に消してしまうか、形を変えてjQurey等で動的表示にするか
最適な対処法は変わるからです。

スマホのケースでは、情報量を減らすために、むしろ消すべきという考えが一般的であればdisplayで消そうと思います。

考え方が逆じゃないでしょうか？ 「スマホだから情報量を減らす」のではなく、まずスマホを基準に最適な情報コンテンツ設計を行い、それを全てPCでも表示するのが基本です。その上で、もし必要があればPC時だけ例えば広告を表示するとか、補足的なナビゲーションを追加するとかして、結果的に部分的に情報量が変わることなることもある、という形が望ましいのでは？

そもそも、ツーカラムの需要が無ければ、ワンカラムだけ極めて行けば良いのかもしれませんね。

近年プレゼンテーション型のサイトデザイン設計が増えてきてはいますが、
「サイドバー」的なものが無いだけであってマルチカラムになる箇所はいくらでもあります。
従って技術面で言えばどんな形のものが来ても問題なくコーディングできるようにすべきです。

また、デザイン・設計の面からであれば確かにプレゼンテーション型のサイト設計が増えて
来ているのは事実なので、そのような形式のデザイン・設計を研究するのは良いことです。
しかしだからといってポータル型が全く不要となるわけではありません。
流行り廃りは踏まえつつ、そのサイトにとって最適な情報設計・デザインができるようにするのが
プロのお仕事なのではないでしょうか？

Comments

[退会済みユーザー]

ありがとうございます。
ツーカラムのレスポンシブも経験しておいた方が、良く必須とも言えそうですね。

フロートを使って、ツーカラムで作ってみたいと思います。

[aKusano]

2→1だけでなくいろんなパターンのカラム数変更や、
グロナビ周りのUI変更をやってみると勉強になりますよ。
あと、自分で新規で作ってみてレスポンシブの仕組みがわかってきたら、
BootstrapみたいなCSSフレームワークを勉強するのも良いと思います。

[退会済みユーザー]

Bootstrapのソースコードをまねするということでしょうか？
最高レベルの技術者が作っているのでしょうから、クラス名からコーディングルールまで役に立つのでしょうか。
ここを参考にコーディングルールやクラス名を真似していけばいいのかもしれませんね。

３カラムはもう終わっているのかと思いましたが、それもいい経験なのですかね。