🧊

フロントの奥深さに触れる〜Frontend Meetup Tokyo vol.1 #frontendmt に行ってきたメモ

いってきたよ!

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 というコンポーネントシステム

質疑

  • FT社以外で使われた実績は?
    • 今のところ知らない
    • 別のサイトで使えるようなコンポーネント集ってわけではない
    • 似たようなシステムを作ったであろう会社はありそう
  • 動的にモジュールをCDNから持ってくるのにかかるコストは?
    • 20−30秒
    • 賢いキャッシュシステムがあるので最初はまぁ・・
    • このビルドシステムはOSSになってるよ
  • これ作るのにどれくらいかかった?何人?
    • 3人で1年くらいかけた
  • FTのサイトのどれくらい適用されてる?
    • FTにはサイトがたくさんあって、そのうちの少しでしか使ってない
    • 古いアクティブでないサイト・そもそも不要なサイトも多いので
  • WebComponentsにしないの?
    • チームにWebComponents好きも多いし、そのうちするかも
    • 今はまだブラウザサポートがアレなので・・

おわりに

次回は5/18の予定だそうです。

貴重な話は聞けたかなーとは思う、思いますよ。