2015年4月30日木曜日

楽々モバイル対応

モバイルフレンドリーアップデートが実施されました。だからという訳ではないのですが、前からスマホ対応しなきゃと思っていたにも関わらず、ズルズル先延ばしにしてきたので、Googleに尻を叩かれた格好でむしろ丁度良かったです。

ウェブマスター向けモバイルガイド

自分のサイトは、入門用のテンプレートから拡張してきたので、根本的なHTMLから変更しなければならないのですが、その前にdisplay:flexの練習も兼ねて、今あるIDやClassのスタイルの変更のみでやってみたところ、いとも簡単にレスポンシブにできました。あるブラウザを除いては。

Internet Explorer 11とdisplay:flexの微妙な関係

あるブラウザ11も対応しているはずで、事前に簡単なページを作成して動作の確認もしました。だけど少し複雑になると他のブラウザでは表示されているのに、あるブラウザ11のみ表示が崩れていました。それも壊滅的に。微妙な解釈の違いやバグがあるみたいです。

結局、時間を費やしたのは、ほぼ全てそのブラウザに掛かった時間のみ

これについては、後日、詳しく記事にしたいと思っていますが、同じようにflexで苦労しているのなら、「高さ」に注意してみるとよいかもしれません。

一応、CSSの変更のみで形だけはモバイル対応できました。見方を変えれば、display:flexは、非常に柔軟に表示させることができるということです。なんと、並びの順番まで指定可能です。

今回は、サイトをスマホ対応させるにあたって苦労したところや気がついたところを書きたいと思います。 何か役に立つかもしれません。


モバイル フレンドリー テストに合格するたった3つの施策

モバイル フレンドリー テスト

viewportを設定する。

ヘッダーにおまじないを書いておけば、O.K。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Flashを取り除く。

Flashのあるページは絶対に不合格。

水平スクロールバーを出さない

レスポンシブなデザインなど。ただ上記の2つよりマイナスポイントは低いので、ある程度はみ出ても大丈夫。

ほんとうにモバイルフレンドリーかは別にして、(たぶん)この3つをクリアすれば合格

テストに合格すれば、モバイル フレンドリー確定ですが、修正すべきところなど、詳しい情報がわからないので、作成途中の場合は、PageSpeed Insightsが良いと思います。モバイル フレンドリー テストは、最終確認。


モバイルの表示に対応するに当たって気がついたところ

フォント サイズ

読みやすいフォント サイズを使用する - PageSpeed Insights — Google Developers

16pxがよいらしいのですが、今まで12pxだったこともあり、明らかに大きすぎましたし、情報が全然入らない。 間をとって14pxにしました。バランスが取れていれば、12pxでも見やすいと思うのですが大勢に従うということで。10px以下は場合によっては文字がつぶれてしまうので、やめた方がいいとおもう。

あと、おまじない。Normalize.css にも入っています。

-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;

表は無理

一通りレスポンシブにした後、チェックしていたら、時々横スクロールバーがでるページがありました。良く見てみると表がはみ出ていましたので、 あれこれ試行錯誤していると、ある重大なことに気がつきました。

横並びに表示させるべきコンテンツの量が決まっているので、ある程度以上の大きさのコンテンツが入るわけがない!

レスポンシブな場合、カラムを落としたりしてむりなく表示できますが、表は指示した順序で表示しなくてはならないから。 Responsive Tablesなどで工夫した表示にすることはできるものの、入らないものは入らないのでしょうがないです。

Wikipediaはレスポンシブ対応ですが、やはり大きな表はスクロールバーがでます。

ページが水平スクロールするとマイナスなので、表にスクロールをもってくるしかないですが、そんな表はだれも見ないので、そのまま。Googleの評価は下がるかもしれないけど、見てもらわなければ意味がない。

横320pxはせまい

とても狭い。とにかく狭いiPhone。表示できることはできますが、本当に読みやすいかどうかは不明。技術的に入り込む余地が少ないので、あまり考えないことにしました。

一転、横にした480pxはかなりのコンテンツが入る。一番やりがいがあるところで、面白かったです。横にして見てね。

いつもモバイルのシミュレーションにお世話になっているのが、Viewport Resizerのブックマークレット。使いやすいですよ。