Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: ResponsiveLayout

[Web Design] Responsive Design Testing – レスポンシブレイアウトの結果を一括テストできるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブレイアウト対応を行ったサイトを、一括でテストできるウェブアプリ。入力欄に調べたいサイトのURLを突っ込むだけで確認ができます。240 x 320 (small phone)、320 x 480 (iPhone)、480 x 640 (small tablet)、768 x 1024 (iPad – Portrait)、1024 x 768 (iPad – Landscape)の5つの解像度での表示をまとめて確認できます。便利なんだけど横スクロールができないのが難点と言えば難点(選択→右方向にドラッグで一応できるみたい)。レスポンシブ対応をした際の確認作業にとってもナイス。

[Web Design] 21 top tools for responsive web design – レスポンシブレイアウトのためのツールまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブレイアウトをする際に役立つツールをまとめた記事。最近よく見ますね、これガラみの記事。内容としてはプロトタイピングに役立つスケッチ用の型紙、グリッドシステム(CSSフレームワーク)、レスポンシブイメージのためのJS、レスポンシブテキストのためのJS、Media queriesのテンプレート、テスト用に使うブラウザウィンドウのリサイザー、複数のサイズ違いウィンドウでサイトを一括表示、といった内容。最後にはレスポンシブレイアウト対応サイトの作例紹介なんかもあります。これからこの手のサイト制作をしようって時にナイスな記事。

[Web Design] 10K Apart – 10K byte以内でどれだけクールなサイトを作れるか、というコンテスト

  • Pocket
  • このエントリーをはてなブックマークに追加

HTMLだけでなく、イメージやスクリプト類なども含めて、10K bytes以内でどれだけクールなウェブサイトを作れるか、というコンテスト。タイミングがタイミングなだけに、HTML5やJSを使ったモダンな作品が多いです。JSやCSSで使用するライブラリにはいくつか決められたリストがあり、またクロスブラウザ対応なども求められます。興味深いのはレスポンシブレイアウトに対応する事も必須となっている点。「Inspire the web with just 10K」というキャッチの通り、10Kでどこまでやれるかを競うというものです。賞金もあるようですYO。

[WordPress] 15 Free WordPress Themes with a Responsive Layout – レスポンシブレイアウトに対応したワードプレステーマ

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブレイアウトに対応したWordpress用テーマ15選。出てるもんなんすね。それも15個も紹介されてて、ちょうどこのブログもレスポンシブレイアウトで作り直そうと考えているのでなかなかタイムリーな記事。なんかこう、単純にUA見てスマートフォン対応するっていうよりは、こっちの手法の方がスマートな気がするんですよね。PCとスマートフォン以外に最近タブレットとか色々あるし。

[Web Design] Adaptive Images – 画像をディスプレイサイズに最適化

  • Pocket
  • このエントリーをはてなブックマークに追加

画像をディスプレイサイズに最適化してくれるPHP。小さいディスプレイで見てるユーザー向けに、画像の解像度(=ファイルサイズ)を小さくしてくれるというもの。モバイル環境はWi-Fi接続でない限り帯域が狭いので、PCサイトと同じ物をそのまま表示させていてはユーザーを待たせる事になります。こいつを導入すれば、ウィンドウサイズの小さいマシンではそれだけ小さくした画像を転送する事で、ユーザーを必要以上に待たせません。レスポンシブレイアウトを導入したサイトにおいて使い勝手が良さそうです。

[Web Design] 70 Examples Of Modern Responsive Web Design – レスポンシブレイアウトのモダンなWebデザイン

  • Pocket
  • このエントリーをはてなブックマークに追加

閲覧者のウィンドウサイズによってレイアウトの変化するレスポンシブレイアウトを使ったクールサイトのまとめ記事。70ものサイトが紹介されてます。つーかこの手法使って主にスマートフォンに対応するためのものだと思ってるんですが、なんつーかもうすっかりメジャーなんですね。紹介されてるサイトはどれもクールで、スマートフォン対応のサイトごとに異なる対応手法は参考になります。

[Web Layout] 21 top tools for responsive web design – レスポンシブデザインのためのツールまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

スマートフォン対応の手段として、今後主流となるかもしれないレスポンシブ・レイアウトのためのツールをまとめた記事。フレームワークを始め、スケッチシート、グリッドシステム、イメージの拡大縮小、テキストの拡大縮小、モニターリサイザー、レイアウトテストツールなどが紹介されてます。あと記事最後にはレスポンシブ・レイアウトを採用したサイトの作例紹介サイトなんかもあります。ブラウズ環境に対してサイトに汎用性を持たせるという意味では、この手段はなかなかイイんじゃないかと思っちょります。新規にサイトを制作する際に対応しておくとイイ感じですね。