RESPONSIVE DESIGN…
「レスポンシブサイト」っていうと、なんか万能な魅力的なイメージがある気がします。
はじめてレスポンシブサイトの制作をしたときは、わたしもレスポンシブってワンソースだし、作るのも面白そうだしやってみよう!ってノリで制作したのですが…
どんな技術でもサイトによって向き不向きがあるということをすぐに実感。というか痛感。
PCの時はこの画像を使いたい!SPの時はこっちのデザインがいいって、デバイスごとにデザインを変えたい箇所が多くなって来たりすると…これ、レスポンシブじゃない方が効率もいいし自由に最適にできるのでは???
っとなるわけで…。
ちょっとレスポンシブどうなんだろ…とか思っていたのですが。
要は目的にあった技術であれば問題ないわけで..今回このブログのテンプレもレスポンシブで書き書きしていこうとやっているのですが…
やっぱり悩むのが「ブレイクポイント」。
HTMLはワンソース、CSSはBreakpointsを設定して、各デバイス(window幅?)に合わせて読み込むとしたわけですが..
PCはともかく、スマホもタブレットも、種類多い!!サイズも豊富!!…さらにランドスケープの時は?って…
で、以前は以下で制作を進めることになったのですが…
===========
■SP
max-width:720px
・720pxより小さい場合はスマホ用のスタイルを
■TB
min-width : 721px
max-width : 1024px
・721pxより大きく1024pxより小さい場合はタブレット用のスタイルを
■PC
min-width : 1025px
・1025pxより大きい場合はPC用のスタイルを
===========
今回改めて調べてみたら…
そもそもレスポンシブWebデザインはデバイスではなくウインドウサイズを基準に判断するので、
「このウインドウサイズではこのように見せたい」と言う考え方が自然な気がします。
という意見を見て…あぁ!そうなんだ!っと納得。
なんだかデバイスでの表示をどうするかに気を取られていて、そもそも考えなくてはならない
「コンテンツをどう見やすくするのか」というところがうすーくなっていた気がしました。
要は、デバイス云々ではなくて、どんなウインドウのサイズになっても、
コンテンツの内容を見ている人に見やすくレイアウトすることが大切なんですよね..。
あたりまえなんですが、「作る」っという作業に夢中になってしまうとココを見失ってしまいます。
本当自分の未熟さを実感します。。気をつけなきゃっ!