[&] Web Directions East 08 (Dan Cederholm)

SimpleBits

Web Directions East 08
-----------------------------
Dan Cederholm - bulletproof Webdesign
あらゆるデバイスに対応できる Web デザインの考え方。

SimpleBits http://simplebits.com/
書籍：Bulletproof Web Design
コードをできるだけ軽くして、標準に沿ったデザインを。

bulletproof A-U
SimpleBits は手作業で Web を作る。クラフトマンシップ。
職人気質はバーモント州生まれに由来している。
バーモント産は他の地域のものよりも 10%品質が高い。
デザインは人間の手作業が背後に必ずある。

家具に例えることができる。実際に使ってみないとわからない。
Webもいろいろなシナリオで使ってみないとわからない。
事例から職人的作業のいかされかたを説明。
複雑なことをやらなくても柔軟に変えていけること。

架空のコーヒーショップの例。
icedorhot.com

A. メタ情報入りのリンク
すべての行がクリックできる。
長いタイトルの場合、リンクテキストが重ならないように。
float を使って、リンクテキストが重ならない。
逆方向の float で端があう。

B. border-radius
　角の所を丸めてある。
　CSS3 の推奨で border-radius の値を設定。
　ブラウザあった使い方 -webkit-border-radius, -moz-border-radius
　ブラウザ特定の CSS がある場合 master.css, enriched.css に分ける。
　Firefox2 ではサポートしていない場合もゆるせる。

C. Color-Opacity
マウスオーバーした時に表示される要素。
　background-color : rgba(0,0,0,.7);
　IE では使えないので、background-color を重ねておく。
　デザインを検討する際には RGBa を使って検討。

D. 全てのブラウザで同じ表示がされないといけないのか？ =NO
　サンダンス映画祭のサイト。
　それぞれのブラウザでそれなりに見える。
　foamee.
　http://foamee.com/
　可読性には影響しない。

E. Easy Clearing
　自動的に clearfix する。
　クリアしたいパラメータのリストを作る。
　やり方としては良くない。
　group エレメントとして表現した方がいい。
IE8 はまだ対応していない。
ページ内の要素を入れ替えてもお互いに影響を受けないのがいい。

F. Framework
マスタースタイルシートを IE5,6,7,8 用に
リセットファイルの使い方。
ブラウザが適用するフロートスタイルのリセットに使う。
MTV.com の例。margin 0:　padding:0 が多数使われている。

G. グリッドを柔軟に使おう
　Grid layout Using EMs
デザインのバックグラウンドを考える。
グリッド：簡単な計画性と知性に基づいてすっきりした形にするのがグリッドシステム。
提示の仕方で、人々の記憶にとどまる見せ方。グリッドシステムの方が記憶に残る。
手作業を少なくして、表現できるところを多くする。
EMs は弾力性のあるレイアウトのこと。
IKEAのサイトの例
　Emベースのレイアウトで気に入っているのは、作業的にフレキシビリティがある。
　EM ベースのレイアウトをグリッドで、計算が簡単になる。
　フォントサイズを同じエレメントに適応してはいけない。
　グリッドからはみ出してしまう場合がある。
　最大幅も柔軟性があるレイアウトにしなければいけない。
　ブラウザ自身の幅からはみ出してしまう場合がある時のレイアウトを考える。
　モジュール単位に考えてコーディングしていく。
　Xscope というツールがグリッドライン確認に便利に使える。
　http://iconfactory.com/software/xscope

H. 垂直グリッド
デザイナーが考えたものをレイアウトすると思ったとおりにならない場合がある。
　デザインコンセプトがコーディングに反映していない。
　垂直グリッドは、モジュールごとに定義していく。

I. IE8
　フォントサイズを指定していても IEで無視される。
　em を使ってサイズをあわせる。
　PAGE ZOOM レイアウト全体のズームアウト。
　
J. jQuery
仕様が分かりやすい。便利で使いやすい。

K. Kitty

L. .last
アイテムリストがあって、特定のリスティングをする。
正しいものを最後の直前にもってくる。
サポートされていないブラウザでの用法。

M
N
O
P
Q
R

S. Slide
　silverback
　http://silverbackapp.com/
ブラウザをリサイズすると 3D スライディング効果がある。

T. Text blending RGBa
　wilsonminer.com
　ブラックフォントが少し背景を透過させている。ブレンドされている。

U. U=You
　いつから使える？
　アナタのサイトの user stats を調べる。
　アクセス履歴のブラウザの種類を見て、使うかどうか考える。