Responsive Design Clever Tips & Tricks
通訳 菊池さん
効率的なRWDのワークフロー PageSpeed Insightsで100点目指せ！パフォーマンス改善手法 Smashing Magazineの大規模リニューアルから得たテスト・検証技術 RWDのモバイルUX最適化 flexboxを利用した高度なRWDレイアウトパターン モジュール（テーブル・カレンダー・マルチレベルメニュー・地図・フォーム） 拡張性高いコードメンテナンス、解像度で左右されない堅牢性のCSS設計 RWD広告&RWDメール問題の解決方法 RWDのオフライン&プリント向けUX最適化 RWDの完成品・納品・予算・組織管理と戦略手法
ceefax
モジュールの考え方
一番最初にpegaのことを考えないこと、塊を組み合わせてpageを作っていく
Photoshop のモックは理想形しか作れない
デザインモックを見せるのではなくて、モジュールリストを見せることがヨーロッパでは多くなってきている
最初にテキストエディターを使ってゴールとかなんとかを設定する
文字でインターフェースを構築していく
Visual Inventory に参考サイトのスクリーンショットが溜まってるのでその中からクライアントにとって必要なものを探していく
pageを作るのではなくて、コアになるようなモジュールのデザインを先に作っていく
その後にhubと呼ばれるものを作っていく、コアコンポーネントをくっつけてモックみたいに作っていく
HTMLとCSSを使ってパターンライブラリーを作る、クライアントとビジュアルの方向性を共有したうえでその作業に移る
Vocabulary,Grammer,Language Nmaing,Rules,Rule of Rule?
Vocabulary = モジュールの名前づけ Grammer = モジュールを使用するうえのルール（これってドキュメントとしてテキストかなんかに落とすのか？） Language = パターンライブラリー
Responsive Layout Behavior
重要なページから作っていく、トップページからは作らない
http://blog.cloudfour.com/common-patterns/
PageLayers https://itunes.apple.com/jp/app/page-layers-website-screenshots/id437835477?mt=12
paparazzi https://medium.com/@timur_carpeev/import-web-pages-into-sketch-6681ae0b118a#.gddcdfmi5
コードが書けない人でも上記のツールを使うことでビジュアルをいじってそれをエンジニアに渡せばよい
maintanable style guide http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html
theo https://github.com/salesforce-ux/theo
contenteditable属性をつけて送ったりもする
インターフェースインベントリーというものを作る モジュールのショットをとって並べてなぜ違うモジュールがいくつもあるのか？などを精査する
モバイルの左下、右下はタッチしずらい 下の真ん中に重要なものは置く
p { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }
svgは500とか1000とかのオブジェクトがあると遅くなるので
http://chairnerd.seatgeek.com/high-performance-map-interactions-using-html5-canvas/
dual layer https://www.gov.uk/
カルーセルの代わりに 右にコントロールのタイトルとテキストみたいのを用意してそこでコントロールさせる amazonがそういう手法でカルーセルを使ってコンバージョンがあがったらしい
ナビゲーションの右側にアイコンを置くと、アイコンをクリックしにいくので、タスクをおこなう時間が増える
ユーザーは画面の上下は見ていない スクロールインジケーターはあんまり見られてないから必要ない？
小さいプロジェクトから始めて、結果を計測して数値を見せて広げていくことで、上司を説得したりする 数値を出すことが重要
https://github.com/FWeinb/grunt-svgstore
https://github.com/filamentgroup/a-font-garde
object-fit: none; にすると真ん中で切り抜かれるらしい、知らなかった
mediaqueryはハックだと思ってるからあんまり好きじゃないらしい flexbox使うとmediaqueryを減らせる
flexbox is hungry 幅をとりたがる
flex-grow、残ったコンテナの幅をどうわけるかの指定 flex-shrink、growの逆 fle-basis、大体幅と一緒だけどちょっと違う、願わくば、min-widthと似てる
align-items: stretch; にすると高さ揃えができるわけだ
flex-growは、あまったスペースをわけるので、あまったスペースがなければ意味が無い
margin-top: auto;
display: table-cell; を指定しておくとちょっとフォールバックになる
http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
coreになる見せたい部分をリスト化して決める coreになるコンテンツはJSには依存しない
- core content -> first
- Enhanchement -> DOMContentLoaded
- Leftovers -> Load
https://deviceatlas.com/ http://wurfl.sourceforge.net/
cacheを使ってもcacheは消されてしまうことが多いので、localstrageにいれたほうが良い
https://github.com/guardian/frontend
dnsprefetch
最初の14kbのなかにHTMLとCSSををつっこみたい
https://github.com/filamentgroup/grunt-criticalcss
reactとかangularにもそういうcriticalCSSの機能がある？
14kbというのは結構マジックナンバーで重要