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
snookca
October 18, 2016
Programming
3
640
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
920
Responsive Web Applications
snookca
0
140
Responsive Web Applications
snookca
0
89
The Future is In Pieces
snookca
1
150
Becoming a Deep Generalist
snookca
1
480
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
170
Your CSS is a Mess from SmartWeb
snookca
0
220
How to Write a Book
snookca
4
360
Other Decks in Programming
See All in Programming
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
230
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
140
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
190
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
距離関数を極める! / SESSIONS 2024
gam0022
0
280
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
GraphQLとの向き合い方2022年版
quramy
43
13k
Automating Front-end Workflow
addyosmani
1366
200k
Practical Orchestrator
shlominoach
186
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
BBQ
matthewcrist
85
9.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Rails Girls Zürich Keynote
gr2m
94
13k
A better future with KSS
kneath
238
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
97
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