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
140
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
910
Responsive Web Applications with Container Queries
snookca
3
640
Responsive Web Applications
snookca
0
89
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
360
Other Decks in Programming
See All in Programming
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
110
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
570
offers_20241022_imakiire.pdf
imakurusu
2
360
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
430
役立つログに取り組もう
irof
26
8.6k
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
僕がつくった48個のWebサービス達
yusukebe
18
17k
Tuning GraphQL on Rails
pyama86
2
1k
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
Featured
See All Featured
Music & Morning Musume
bryan
46
6.1k
Ruby is Unlike a Banana
tanoku
96
11k
Raft: Consensus for Rubyists
vanstee
136
6.6k
It's Worth the Effort
3n
183
27k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
GraphQLとの向き合い方2022年版
quramy
43
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
4 Signs Your Business is Dying
shpigford
180
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
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