Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Responsive Web Applications with Container Queries
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
snookca
October 18, 2016
Programming
3
710
Responsive Web Applications with Container Queries
snookca
October 18, 2016
Tweet
Share
More Decks by snookca
See All by snookca
Responsive Web Applications
snookca
0
1.6k
Responsive Web Applications
snookca
4
1k
Responsive Web Applications
snookca
0
190
Responsive Web Applications
snookca
0
130
The Future is In Pieces
snookca
1
180
Becoming a Deep Generalist
snookca
1
510
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
200
Your CSS is a Mess from SmartWeb
snookca
0
250
How to Write a Book
snookca
4
430
Other Decks in Programming
See All in Programming
AIエージェントの設計で注意するべきポイント6選
har1101
7
3.3k
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
430
大規模Cloud Native環境におけるFalcoの運用
owlinux1000
0
260
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
0
990
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
930
高速開発のためのコード整理術
sutetotanuki
1
340
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
kanamasa
11
6k
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
130
Data-Centric Kaggle
isax1015
2
710
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
200
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
Oxlintはいいぞ
yug1224
5
1.1k
Featured
See All Featured
Building an army of robots
kneath
306
46k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
The Limits of Empathy - UXLibs8
cassininazir
1
210
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
150
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Exploring anti-patterns in Rails
aemeredith
2
230
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
0
260
Agile that works and the tools we love
rasmusluckow
331
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Speed Design
sergeychernyshev
33
1.5k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
150
Transcript
Responsive Web Applications with Container Queries
#RWDQueries (504) 229-6828
A talk more about process than code
None
Beautiful Accounting Software
None
None
None
Goal #1 Evolve the design
Goal #2 Support Multiple Devices
let us take a step back…
None
None
Goal #1 Evolve the design
Goal #2 Support Multiple Devices
Responsive
Responsive
None
None
Birth of SMACSS
Device-specific design and development
Designers see a feature through all platforms
None
Goal #1 Evolve the design
Goal #2 Support Multiple Devices
None
None
None
Monolithic app with accessible templates
Ignored Mobile Web
Limited Mobile App
None
None
Each horizontal block is considered in the context of the
viewport
None
None
None
Each page can be art directed individually
Web applications have components in multiple contexts needing to
respond differently
None
None
A single page in a web application can have dozens
of variations
With media queries, you have to know the possible interplay
of all objects
With container queries, you only have to know the interplay
within a single object
No spec for container queries
None
None
Declare in: CSS, HTML, or JavaScript
https://github.com/ResponsiveImagesCG/cq-demos .element:media( min-width:500px ) {} https://github.com/tysonmatanich/elementQuery .element[min-width~="500px"] { background-color: #eee;
}
http://eqcss.github.io/eqcss/ @element ".element" and (min-width: 500px) { .element {
background: gold; } }
https://github.com/tysonmatanich/elementQuery .element[min-width~="400px"] { }
To parse CSS, either need to be on same domain
or set up CORS
https://github.com/Snugug/eq.js data-eq-pts="small: 400, medium: 600, large: 900"
At HTML level, requires consistency of implementation across app
We chose JavaScript
elements = [ { "module": ".flex--2x1", "className":"responsiveClass", "minWidth": 768, "maxWidth":
1024 } ]
Going Responsive meant a consistent feature set across all devices
New features automatically have cross-device support
Went responsive in under a month†
None
How? How?! How?!?!
None
There’s a discernible delay in execution
It’s not about the properties, it’s about the purpose.
None
None
None
Tried to use grid classes for everything
Had to write extra classes just to define responsive story
Single purpose classes resulted in less edge cases (and less
code!)
Gzip minimizes duplicate properties really well
Tables are difficult
None
None
Avoid too much on the horizontal axis
None
None
None
Product Design is a team sport
None
Goal #1 Evolve the design
Goal #2 Support Multiple Devices
Goal #1 reframed: Allow anybody to make product-wide design changes
quickly and easily
Problem: Different tech stacks
None
Make the right things easy and the wrong things hard
None
Yahoo! still does a custom experience per device
Shopify is getting rid of Container Queries
None
None
None
<div class="two-columns"> <div class="col1"> … </div> <div class="col2"> … </div>
</div>
.two-columns { display: flex; flex-wrap: wrap; } .col1, .col2 {
flex-grow: 1; } .col1 { flex-basis: 66%; min-width: 360px; } .col2 { flex-basis: 33%; }
Demo Time
For Xero… time will tell.
Designers should think Responsive before they need to.
Container Queries enable faster development
Use techniques to avoid media or container queries altogether
http://ricg.io
Thank you. http:/ /snook.ca/ @snookca