今年の3月頃だったか Google からこの オバカン のホームページをスマホでも快適に見られるようにするようにとメールが来た。
スマホ対応できていないサイトの検索結果の順位は下がるとネット上でも出ていた。
記事内容ではなく、表示方法で順位が下がるのは何ともシャクにさわる。
スマホ対応やってみるか???
実はもう何年も前から スマホ 対応は気になっていて レスポンシブWebデザイン とか jQueryモバイル とかは当然勉強していた。全然理解できていなかったけれど・・・
なので今回、この オバカン のサイトのスマホ対応ではどちら(レスポンシブWebデザイン か jQueryモバイル か)で行こうかともう一度、双方を同時並行的に勉強し直してみた。
で、 Google からお尻に火を付けられて真面目に勉強してようやく少し分かったような気がした。
レスポンシブWebデザイン と jQueryモバイル のどちらか一方の方法で行けるというものではない。
単に情報表示のホームページなら、従って、 オバカン のホームページなら レスポンシブWebデザイン の手法を、インターラクションすなわちスマホからのデータ入力が必要な場合は jQueryモバイル の技術を使えってことのようだ。
レスポンシブWebデザイン、
端的に言い切ってしまえば、画面サイズで スマホ用のCSS、タブレット用のCSS、PC用のCSSを、<body>タグのスタイルから全部3種類用意しましょう、と言うだけのものだった。
ただ、<body>の背景色や文字色などはスマホもPCも共通でしょ、だったら共通部分以外のみをタブレット用やPC用を再定義しましょう、というものだ。
その場合、画面情報量の一番少ない スマホ 用にCSSを作って、その後でタブレット用のスタイルの違い部分を追記し、最後にPC用のスタイルの違い部分を追記しましょう。でないと、先にPC用を作ってから情報量の甚だ少ないスマホ用に画面構成を考えるのはとっても厄介。
なので レスポンシブWebデザイン では、まず スマホ用に画面を作りましょうという、これが モバイルファースト というやり方だ。
CSSの共通部だとかモバイルファーストとかは、はっきり言って最初は気にしないで無視した方がいい、まず、スマホ用にCSSを完成させる、その画面をタブレットサイズで見てみてタブレット用のイメージに合うようにCSSを一から書き加えるつもりで追記する。同様にPC用もおこなう。
最初は、共通など意識しない方がいい。
慣れてくると自ずと 共通部 を考慮に入れて書くようになってくる。
かくして オバカン の山のページの1枚だけを レスポンシブWebデザイン でやってみた。
Google でそのページを確認すると、前日まで
「Fix mobile usability issues」 と叱られていたのに、それがなんと
「Awesome! This page is mobile-friendly.」
になった。 \(^o^)/
Google から褒められても、元々、スマホでもPCサイトを見たかった私には返って不満が・・・
難しい!!