はじめてガラケーよりスマホ利用者が多くなったり、Googleが検索結果の下に「スマホ対応」を表示したり、数年前にスマホがくるー、って言っていたのが本当にきたーという実感がある2014年末です。
そういう事情なので、改めてスマホ対応サイト制作時の勘所というか、抑えたいポイントをまとめます。
取り留めがなくなるので、Web制作会社の100人中95人が想像する、小規模なWebサイト(トップ/アバウト/アクセス/ブログ、のような10ページ未満)の話にしておきます。
◯準備
どのOSバージョンか、どの端末か、標準ブラウザかChromeか、すごーい大事
ただ、そういう状況で動くかどうかわからない機能を入れること自体ものによってはナンセンスな気も
小規模なら、基本的にはPC優先のサイトでも、閲覧できる情報は同じの方がよいはず、と思っています
PCではこれみれるんだけどなー、みたいな残念な気持ちにはなりたくないのでは
ユーザーエージェントでの振り分けと、メディアクエリなどを使ってCSSでレイアウトを変える方法、
おおまかに2種類あると思いますが、よほどの限りワンソースでいける後者が多い
Googleは後者推しですね
前者はいろいろ死んじゃうやつなので、もうお金と時間が優先されてしまうのはしょうがない問題な気がします
また、PC優先でPCのワイヤーを先に書くにしても、
その段階でスマホの場合はどうなると考えていないとしんどい
PCワイヤー → 確認 → おっけー → スマホワイヤー → ほげー
◯制作
fixレイアウトなんて滅多に見ないですが。
ただランドスケープで見る場合はあんまり考慮しない
どうしても画像を max-width: 100%; とかにすると画面全体にぼわーんとなるし…
iPhone6とかだと変わるかも
個人的な思想としては、ボタンやナビなどの分割の%指定(50%とか33%)はちょっとないかなーという感じ
box-sizingやcalcは使うの怖い印象があったり、ボタンなどでも縦に横100%で並んでいる方が押しやすいなー、という気持ちです
ファイル容量の話もありますが、要素の表示・非表示をリキッドレイアウトでやろうと思うと
メンテナンス込み込みで考えていた2.5倍くらいは大変になる印象
コンテンツ量にもよりますが、最近の好みとしてPCでもスマホでも16px以上が良い気持ちが心の中にあります
line-heightも2.0前後が好きです
これ大事っぽいんですが、横の空き具合を固定値にする場合、20pxが最適ではと思っています。
CSS3はAndroidの対応は鬼が出てくるの可能性も
その都度、いろいろあるのでいろいろ使います。
途中でやる気なくなったのが分かったと思いますが以上です。
◯参考