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
630
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
900
Responsive Web Applications
snookca
0
140
Responsive Web Applications
snookca
0
87
The Future is In Pieces
snookca
1
140
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
350
Other Decks in Programming
See All in Programming
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
190
Jakarta EE meets AI
ivargrimstad
0
390
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
180
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
800
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Ruby Parser progress report 2024
yui_knk
2
230
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
590
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
450k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Building Adaptive Systems
keathley
36
2.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
It's Worth the Effort
3n
182
27k
Design by the Numbers
sachag
277
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Why Our Code Smells
bkeepers
PRO
334
56k
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