Responsive web design の実施

　かなり前ですが、一回会社の UX, Designer チームと食事会があって、そこでこれからはどういう方針でデザインをやって行こうかと少し話しました。基本的には上層部に方針があって、ただ、我々はなんか新しいものを入れたいと思っていました。いろいろチャレンジしたいだそうです。
　それで、デザインのレビュー会議で、Responsive で行こうと、みんな決めました。まぁ、会社からそういう要求がないけど、やっぱり新しいものをやってみたかったです。まず UX とDesigner チームの方達はデスクトップとスマートフォンー向けの PSD ファイルを見せてくれました。その間は、もう私たち自由でやって、完成したらレビューさせることになります。
　デザインを持ち帰ったら、サポートするブラウザーのバージョンより、media query が使えたり、使えなかったりしていますので、方針を決めるにはちょっと時間がかかりました。JS のライブラリを使うか、IE7 を捨てるか、またはライブラリを自作するのかと。その中で、複雑にはやりたくない本音があるので、自作で簡単なライブラリを作りました。それは簡単で、ただブラウザーの幅をチェックして、親要素にクラスを追加するだけにしました。そうすると、media query が使えなくても、追加されたクラスでいろいろやって行けるようになります。
　次、Mobile First というベストプラクティスがあって、私たちはまずモバイル向けのサイトを作りました。media query でまず必要な要素の CSS を書いて、ほとんど親要素は 100% にして、その中のものは適切に幅を設定するようにしました。次、メニューとかどうするかとか、画像は小さいすぎるとか、実際にモバイルで動かしてみて、いろいろ調整しました。UX チームからはいい評価をもらったので、デスクトップ版の作成に入りました。
　こちらも同様、サイトのボディーは100%にして、すべての要素を emか、パーセンティジで細かくセットしました。
　まぁ、実際振り替えてみると、そんなには時間かからなかったんです。以外とすぐ行けました。感覚的には、いい HTML Structure が必要です。HTML が混乱すると、作業が急速に増えます。今、デバイスなどのサイズはかなり変な数字になっていますので、将来的にはもっとサイズを細かく設定する必要があると思われます。
　その後、みんなレビューして、これでオーケーだと。楽しかったです。
　後日また、経験を追加しておきます。

テキストの Responsive デザイン

　最近読んだ Responsive Design の文書です。
techniques for responsive typography

　作者はほぼテキスト関係のベストプレクティスを網羅しました。結構いい文章でした。以前自分は Responsive サイトを作るとき、主にブラウザのことを考えて、em を使ったりして、細かいところは px で指定していました。これもいいですが、完全に文書の中のものを使うとなんだかちょっと使いにくいような気がしています。
　やはり、C++ = C + "++" っていうパタンは使いやすいです。：）
　後日また心得を追加しよう。
　それでは。