モバイルフレンドリーアップデートが実施されました。だからという訳ではないのですが、前からスマホ対応しなきゃと思っていたにも関わらず、ズルズル先延ばしにしてきたので、Google に尻を叩かれた格好でむしろ丁度良かったです。
自分のサイトは、入門用のテンプレートから拡張してきたので、根本的なHTMLから変更しなければならないのですが、その前に display:flex の練習も兼ねて、今ある ID や Class のスタイルの変更のみでやってみたところ、いとも簡単にレスポンシブにできました。あるブラウザを除いては。
あるブラウザ11も対応しているはずで、事前に簡単なページを作成して動作の確認もしました。だけど少し複雑になると他のブラウザでは表示されているのに、あるブラウザ11のみ表示が崩れていました。それも壊滅的に。微妙な解釈の違いやバグがあるみたいです。
結局、時間を費やしたのは、ほぼ全てそのブラウザに掛かった時間のみ。
これについては、後日、詳しく記事にしたいと思っていますが、同じように flex で苦労しているのなら、「高さ」に注意してみるとよいかもしれません。
一応、CSS の変更のみで形だけはモバイル対応できました。見方を変えれば、display:flexは、非常に柔軟に表示させることができるということです。なんと、並びの順番まで指定可能です。
今回は、サイトをスマホ対応させるにあたって苦労したところや気がついたところを書きたいと思います。 何か役に立つかもしれません。
モバイル フレンドリー テストに合格するたった3つの施策
viewport を設定する
ヘッダーにおまじないを書いておけば、O.K。
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Flash を取り除く
Flash のあるページは絶対に不合格。
水平スクロールバーを出さない
レスポンシブなデザインなど。ただ上記の2つよりマイナスポイントは低いので、ある程度はみ出ても大丈夫。
本当にモバイルフレンドリーかは別にして、(たぶん)この3つをクリアすれば合格。
テストに合格すれば、モバイル フレンドリー確定ですが、修正すべきところなど、詳しい情報がわからないので、作成途中の場合は、PageSpeed Insights が良いと思います。モバイル フレンドリー テストは、最終確認。
モバイルの表示に対応するに当たって気がついたところ
フォント サイズ
読みやすいフォント サイズを使用する - PageSpeed Insights — Google Developers16px が良いらしいのですが、今まで 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 のブックマークレット。使いやすいですよ。