スマートフォンやタブレットを含めた、あらゆるデバイスをターゲットにした Web サイトの制作手法として脚光を浴びる「レスポンシブ Web デザイン」。国内のサイトでも徐々に採用され定着しつつあります。

今回は、そんなレスポンシブ Web デザインを取り巻く10のキーワードをピックアップします。

スマートフォンやタブレット等のモバイルデバイス向けの開発時のわずらわしさの1つは、デバイスごとに URL を入力する手間です。

Adobe Labs で公開されている Adobe Shadow を使えば、PC で見ているページがモバイルデバイス側で同期されるので、複数のデバイスで同時に検証することが可能になり、デバッグ時のパフォーマンスが飛躍的に向上します。

今回は、Adobe Shadow のインストール手順を紹介します。

マルチデバイス対応として必要不可欠な技術として定着しつつある、レスポンシブ Web デザイン。

なぜレスポンシブ Web デザインなのか、レスポンシブなサイトをどのようなワークフローで設計すればよいのか、そんな問いの助けとなるスライド「Design Process in the Responsive Age」を紹介します。

iPad に続き、MacBook Pro でも Retina ディスプレイが採用され、Web サイトでも高解像度ディスプレイへの対応が課題となってきました。

Fluid Image と呼ばれる画像を拡大・縮小する手法、「Adaptive Images」や JavaScript ライブラリを使って対応する方法などありますが、このサイトでは、ロゴやアイコン等の共通パーツに SVG を使って対応しています。

コーディングで、事前に作っておくと作業効率が格段に違う HTML のコード・スニペット。特に中〜大規模サイトや、作業者が複数人いる場合などに効力を発揮します。

今回はこのブログで使用しているコード・スニペットを自分へのメモも兼ねて公開します。