読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

Googleモバイルフレンドリーに対応しよう!レスポンシブの表示確認には「.resizr」が便利!

id:sitkです。

4月21日にGoogleが、スマートフォン利用に最適化されたサイトが
「モバイルでの」検索結果で優遇されやすくなるように変更すると発表がありました。

■ますます、レスポンシブウェブデザインが広まっていく

Googleさんは「レスポンシブウェブデザイン」を推奨すると公言しています。

developers.google.com

つまり、今後のWebサイトは、レスポンシブでの実装が
モバイル検索において有利になってくるとも言えます。

Googleが出しているドキュメントは簡単にまとめられているので、
ぜひご一読をおすすめします。

勉強の秘訣は、原典をあたること!
以前の記事でもお伝えしてますね。
まだ見てない方は、こちらもどうぞー。

www.web-genba.com

■レスポンシブウェブデザインは設計が命

PCとスマホの構成ががらっと変わってしまうデザイン。
もう、コーダー泣かせですよね。

無駄なコードが増えるだけでなく、
工数も増えまくり。

簡単に、レスポンシブというけれど。
実際には、そんなに甘くない。

何よりも、設計が命です。
ワイヤーフレーム書く人が、技術的なことを理解していないと、
ほんと、コーダーが痛い目見ます。
お家に帰れませんwなんてことになりかねない。

そんな仕事の仕方してたら、身も心も持ちませんからね。
クライアント様の「なんとなく」レスポンシブにしたい。
なんていう要望は、もうデスマーチ確定です。

とはいえ。。。
ネガティブなことばかり言うてても、しょうがないので。
Googleさんがレスポンシブを推奨している以上、切っても切れなくなりましたw

■レスポンシブの表示確認には「.resizr」が便利!

僕ら制作者が一番気にしているのが、デバッグです。
いつもは、ブラウザのウィンドウを手で縮めたり、広げたり。。。
なんとも、無駄なことをしておりますw

こんなことしてるのは、我々制作者だけですよね、きっと。

そこで!
探せばあるもんですねぇ。
表示確認する際に便利なウェブサービスが!

.resizr - Test your CSS media queries

URL入れて、ボタンをポチっとするだけ!
簡単でしょw

デバイスも多数揃えられております♪
動作も軽快なので、とても重宝しています。

この機会に、ぜひお試しを!

■さいごに

つらつらと書きましたが、レスポンシブは本当はとても良い思想だと思ってます。
ワンソース・マルチユース

運用するには、とても便利。

でもね。
その便利さの中には、しっかりとした設計が必要なのです。

ぜひ、作り始める前に「考える時間」をつくりましょう!
そうすれば、実装はスムーズに進むこと間違いなし。

作る前に考える!
作る前に考える!

大事なので2回言いましたw
これ、ぜひ覚えておいてくださいね。

でわでわ!

■追伸

この本、Amazonで話題になってましたのでご紹介。
GWのお供にどうぞ!

これからの「標準」を学ぶ マルチデバイス対応サイト構築 (Web Designing BOOKS)

これからの「標準」を学ぶ マルチデバイス対応サイト構築 (Web Designing BOOKS)