レスポンシブなロゴってなんじゃい？と思ったのでブラウザウィンドウの横幅をゴニョゴニョしてみたら、あぁそういう事ね、と納得しました。ロゴも実際、用途によっていろんなバージョンありますからね。レスポンシブ・レイアウトの手法でロゴの種類が変わるYOという実験的サイトです。ブラウザウィンドウを狭くすると、ロゴの中の要素が減っていくという手法が多いですね。作例の数はまだそれほど多くないけど、興味深い試みだなぁと思いました。
レスポンシブ・レイアウトのWordpressテーマをまとめた記事。30個のテーマが紹介されてます。いくつか見てみたんですが、これ系の記事によくある「リンク先に行ったら有料でした」系のものがなく、どれもノンコマーシャルユースなら無料で使えるっぽいです。いやーナイスですねー。テーマ単位でタッチデバイス系に対応していれば、わざわざプラグイン入れる必要もないですしね。なかなかナイスなまとめ。
HTMLメールをレスポンシブ・レイアウトで作る際に役立つリソースをまとめた記事。概要とHowToを説明したスライドと、興味深い記事やブログ、テンプレートやフレームワーク、フォローすべき人物、そして最後に実際にレスポンシブ・レイアウトで作られた作例が紹介されてます。作例はページ内でPC / スマホそれぞれのWidthに切り替える事ができ、実際にどう動作するのかを確認できます。HTMLメールって受け取る側の環境の問題もあり、長らくテーブルレイアウトで作るのが常態化してましたが、スマホのメーラーでPCと同様にメールを受け取る機会が増えてるので、これこそレスポンシブ・レイアウトした方がイイじゃんって考えは確かに正しいなと。メルマガとか担当してる人にはナイスなリソース記事だと思います。
レスポンシブレイアウトのサイトで指定したブレイクポイントの動作確認を、ピクセル単位で正確にテストできるサイト。まずはサイト上部にテストしたいサイトのURLを突っ込みます。ちなみにこれはローカルのサイトでもテストできるそうです。URLを突っ込むとサイトがロードされるので、あとはWidthとHeightに数値を入れる事で動作確認が行えます。「こまけぇこたぁいいんだよ！ ブラウザウィンドウドラッグすりゃいいじゃねぇか！」と言われると確かにそうなんですが、ピクセル単位でテストしたいという神経質な方や、ブレイクポイントが2つ以上あるサイトで厳密にテストしたい場合なんかにいいですね。ちなみにこのブログはレスポンシブレイアウトではありません。テーマはすでにできているんだけど、細かい事情でなかなか公開できなくて・・・。
レスポンシブレイアウトでサイトを作った際に、各ブレイクポイントの指定結果を一括で確認できるオンラインツール。ブックマークレットとして配布されているので、ブラウザのブックマークに追加して使います。調べたいサイトを表示してブックマークを実行すると、対象サイトにいくつのブレイクポイントが指定されているか、それぞれWidth何ピクセルに指定されているか、各レイアウトでどのように表示されるのかを1ページで確認できます。いやこれ素晴らしいですね。いちいちブラウザウィンドウを縮めたり広げたりする必要がなくて確認の手間が省けそうです。早速Safariのブックマークに突っ込んでおきました。
WordPress用のレスポンシブテーマをまとめた記事。最近のテーマはどれもレスポンシブレイアウトに対応してるというか、当たり前な感じなんでしょうか。250個ものテーマが紹介されてます。いやー多いっすね。全部見てませんが、これだけあれば様々な用途のテーマが見つかりそうです。このmBlogも実は以前にレスポンシブレイアウトのテーマ作ってるんですが、既存コンテンツの扱いとかそのあたりで「あーどう処理しよっかなー」みたいな感じで色々と迷いが出て放置プレイになっております。Pinterestみたいなグリッドレイアウトもかっこえぇとは思うんだけど、一覧性下がるのはイヤだし、色々とジレンマなのであります。
iPhoneとiPad向けのメディアクエリ指定をまとめたページ。機種に分けてにまとめられていて、それぞれの世代ごとにブレークポイントの指定方法が細かく解説されてます。レスポンシブレイアウトを使ったスマートフォン対応をする際に参考になりますなこれ。サイトの内容とはあんまし関係ないけど、このページ画像１つも使ってないんですよね。なんかこうWebフォントとかボックスシャドウとかウマく使って小奇麗に作ってあるなぁとしみじみ思いました。
レスポンシブレイアウトで制作したサイトの動作確認を行えるサイト。サイトトップでは使い方の紹介があるので、「Start Testing」をクリックする事で実行できます。テスト実行後、ページ左上にあるURL入力欄に対象サイトのURLを突っ込むと、画面下部に対象サイトがロードされます。画面上部にはスマートフォンやタブレット、デスクトップPCのおおよそのピクセル数が定規で表示されてるので、確認したいウィンドウ幅に取っ手を調整する事で簡単に確認ができます。「そんなの別にブラウザのウィンドウ幅変えればイイじゃん」と思うかもしんないけど、Macでフルスクリーン表示してる場合とか、あとウィンドウ幅あんまし変えたくない場合なんかに便利です。さらにページ右上にあるプレビューモードを使うと、iPhoneやiPadの画面に表示した際の簡易的なプレビューが行えます。レスポンシブサイトのプレビューツールとしてはなかなか高機能で優秀かと。ナイスです。
