Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Responsive Web Applications
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
snookca
April 27, 2017
Programming
200
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Responsive Web Applications
At Squares Conf.
snookca
April 27, 2017
More Decks by snookca
See All by snookca
Responsive Web Applications
snookca
0
1.7k
Responsive Web Applications
snookca
4
1k
Responsive Web Applications with Container Queries
snookca
3
750
Responsive Web Applications
snookca
0
150
The Future is In Pieces
snookca
1
220
Becoming a Deep Generalist
snookca
1
540
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
240
Your CSS is a Mess from SmartWeb
snookca
0
280
How to Write a Book
snookca
4
470
Other Decks in Programming
See All in Programming
カツオ、ご期待ください
suneo3476
0
110
Ghostty + Neovimで作る 透明でカッコ良い開発環境
j341nono
0
140
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
atsuki_seo
0
200
AWSに止められる覚悟してますか?
morizo_1984
2
470
Security issues being discussed on Web Platforms
petamoriken
0
1.3k
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ! ~
po3rin
1
4.4k
SONY CISC-NEWS NWS-1750 + NWB-225 フレームバッファの NetBSD/news68k ドライバ実装 / OSC2026Hiroshima
tsutsui
0
150
一人だけ、Kiroが静止する日
hideg
0
130
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
h1d3mun3
1
590
KiroのSpecで「五目並べ」を作ってみる
satoshi256kbyte
1
280
UPDATE をやめる — EF Core でマスタをバージョン管理する
panda728
PRO
0
910
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
yukiny
0
200
Featured
See All Featured
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
270
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
68
58k
How to Talk to Developers About Accessibility
jct
2
560
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Embracing the Ebb and Flow
colly
88
5.2k
GitHub's CSS Performance
jonrohan
1033
470k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.6k
Ruling the World: When Life Gets Gamed
codingconduct
0
370
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
510
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
290
The Cost Of JavaScript in 2023
addyosmani
55
10k
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