いってきたよ！
small画面でも、BIG画面でも、今すぐ使えるレスポンシブ活用術
by @ourmaninjapan
- オニール(O'NEILL)のサイトをレスポンシブにしたらコンバージョンがUPした例
- モバイル対応はモバイルのためだけではない
- PCでもウィンドウせばめて見たりするよね
- モバイル専用にするか、レスポンシブにするか
- もはやモバイル = iPhoneではない
- 画面解像度もユーザー層によって違う
- ギークな人たちの画面解像度はw1200↑がほぼ
- そうでない人たちはw1200以下が多く、w400あたりが最も多い
- そしてモバイル = 小さい画面でもない
- 表示を最適化することが真のレスポンシブ
- レスポンシブで気をつける点
- 入力デバイスを考慮
- タップできる領域・余白
- ロールオーバーとか
おすすめレスポンシブ実装10
- meta[name=viewport]
- scalable=noはだめ！ぜったい！！
- CSS MediaQuery
- ブレークポイントは具体的な端末を想定して決めるのではなく、あくまでサイズで
- 実際にウィンドウ幅せばめてみて、確認・調整するのが良い
- ページはシングルカラムにしよう
- img { max-width: 100%; } にしよう
- 不要なものを非表示にしてても、表示できる術も残す
- input[type=number|email] / autofocusなどなどHTML5
- :hoverのスタイルは、:focusにも
- エフェクトもできればjsではなくcssで
- モバイル端末の情報を抜けるAPI
- 画像はpicture要素で
- srcsetでwebpとかいいよね
Building a reusable web component system at the FT
by @triblondon
http://www.ft.com/ におけるコンポーネントシステムについて
- HTMLの上にコンポーネントという抽象化レイヤーをつくる
- 英語圏では敬称があって、(しかも1000くらい)それがselect > optionになってた例
- 一番簡単な実装は、ユーザーにとって最も難しいUIになった
- サイトのブランドを保ちながらもスムーズに開発を続けたいなら、コンポーネントに切り出すのがベター
Origami というコンポーネントシステム
- GitHub - Financial-Times/ft-origami: Universal front end component standards for FT web products
- Components - Origami registry
- bower / gulp / sass / Browserify
- 最近webpackにした
- Reactとか特定のライブラリは、支持しない開発者がいたら困るので使ってない
- Progressive Enhancement(cuts the mustard)な考え方
- scriptタグにクエリで欲しいモジュール書くだけで、CDNが返してくれる仕組みもある
- これで開発速度も上がって、視覚障害者向けの対応など細かいこともできるようになった
質疑
- FT社以外で使われた実績は？
- 今のところ知らない
- 別のサイトで使えるようなコンポーネント集ってわけではない
- 似たようなシステムを作ったであろう会社はありそう
- 動的にモジュールをCDNから持ってくるのにかかるコストは？
- 20−30秒
- 賢いキャッシュシステムがあるので最初はまぁ・・
- このビルドシステムはOSSになってるよ
- これ作るのにどれくらいかかった？何人？
- 3人で1年くらいかけた
- FTのサイトのどれくらい適用されてる？
- FTにはサイトがたくさんあって、そのうちの少しでしか使ってない
- 古いアクティブでないサイト・そもそも不要なサイトも多いので
- WebComponentsにしないの？
- チームにWebComponents好きも多いし、そのうちするかも
- 今はまだブラウザサポートがアレなので・・
おわりに
次回は5/18の予定だそうです。
貴重な話は聞けたかなーとは思う、思いますよ。