Google 様が「今後、モバイル端末でも読みやすいように考慮されているページが検索結果の上位に現れるようにするから、そのつもりで」とおっしゃっています。
Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。
そんでもって、Google様は「モバイルサイトのデザインはレスポンシブ ウェブ デザインを以て旨とする」との仰せです。
Google では、デザイン パターンとしてレスポンシブ デザインを推奨しています。
仰せに従って、レスポンシブな Nucleus のスキンを作ってみました。
古くはガラケーから最近のスマホまで、モバイル端末で読みやすいページを作る方法には
- 表示端末に合わせて、別々のURLのページを用意して、それぞれに合ったHTMLを出す
- ひとつのURLだけど、アクセスしてきた端末の種類に合わせて、別のHTMLを出し分ける
- ひとつのURLで、同じHTMLなんだけど、画面の大きさに合わせて見え方が変わるようにデザインする
というような手法があるのですが、この3番目の、ひとつのHTMLで、表示する画面の大きさに合わせてデザインが変わるように作ったデザインのことをレスポンシブなデザインと言います。
このページを表示して、ブラウザのウィンドウの幅をぐりぐり狭めたり広げたりすると、画面の上の表示要素のレイアウトがいろいろ変わるのがお試しいただけますが、こういうやつのことです。
簡単なレスポンシブデザインの練習をしてみたよ、というお話でした。
（業務連絡。ブレイクポイントは450pxと600px。）