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
Search
snookca
April 27, 2017
Programming
0
170
Responsive Web Applications
At Squares Conf.
snookca
April 27, 2017
Tweet
Share
More Decks by snookca
See All by snookca
Responsive Web Applications
snookca
0
1.6k
Responsive Web Applications
snookca
4
980
Responsive Web Applications with Container Queries
snookca
3
690
Responsive Web Applications
snookca
0
110
The Future is In Pieces
snookca
1
160
Becoming a Deep Generalist
snookca
1
500
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
190
Your CSS is a Mess from SmartWeb
snookca
0
240
How to Write a Book
snookca
4
400
Other Decks in Programming
See All in Programming
rage against annotate_predecessor
junk0612
0
170
Ruby Parser progress report 2025
yui_knk
1
440
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.8k
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
160
Namespace and Its Future
tagomoris
6
700
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
150
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
510
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Done Done
chrislema
185
16k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why Our Code Smells
bkeepers
PRO
339
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Invisible Side of Design
smashingmag
301
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
RailsConf 2023
tenderlove
30
1.2k
Embracing the Ebb and Flow
colly
87
4.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Transcript
Responsive Web Applications with Container Queries
A talk more about process than code
None
Beautiful Accounting Software
None
None
None
Goal #1 Evolve the design
Goal #2 Support Multiple Devices
None
None
None
Goal #1 Evolve the design
Goal #2 Support Multiple Devices
Responsive
Responsive
None
None
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
None
None
Each page can more easily be art directed
None
• No orders • One order • Less than one
page of orders • Multiple pages of orders • Has Info Notifications • Tab overflow • Has Warning Notifications • Has limited access to features • Has different apps installed
And now consider all of those things for multiple viewports
A single page in a web application can have dozens
of variations
A component-based site has components respondingly differently to multiple contexts
None
None
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://elementqueries.com/ @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
None
Went responsive in under a month†
How the heck do you do that in a month?
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
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
10 5
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%; }
None
<div class="media-body"> <div class="media-content"> </div> <div class="media-actions"> <a href="…"> Button
</a> </div> </div>
.media-body { display: flex; flex-wrap: wrap; }
.media-content { flex-grow: 1; flex-basis: 400px; margin-right: 20px; }
.media-actions { align-self: center; margin: 20px 0; }
None
None
<div class="items"> <div class="box">…</div> <div class="box">…</div> <div class="box">…</div> </div>
.items { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
<div class="box"> <div class="box-image"> <img src="…" height="150" > </div> <div
class="box-content">...</div> </div>
.box { display: flex; flex-wrap: wrap; }
.box-image { flex-grow: 1; flex-shrink: 0; flex-basis: 150px; } .box-image
> img { width: 100%; object-fit: cover; }
.box-content { margin: 10px; flex-shrink: 1; flex-grow: 1; flex-basis: 60%;
}
None
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