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
930
Responsive Web Applications with Container Queries
snookca
3
640
Responsive Web Applications
snookca
0
90
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
370
Other Decks in Programming
See All in Programming
Package Traits
ikesyo
1
180
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
280
Compose UIテストを使った統合テスト
hiroaki404
0
130
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
380
ErdMap: Thinking about a map for Rails applications
makicamel
1
100
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
26
3.1k
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
350
KubeCon NA 2024の全DB関連セッションを紹介
nnaka2992
0
110
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
9
2.3k
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
140
2025.01.17_Sansan × DMM.swift
riofujimon
2
320
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
89
5.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
950
Measuring & Analyzing Core Web Vitals
bluesmoon
5
200
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
YesSQL, Process and Tooling at Scale
rocio
170
14k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
The World Runs on Bad Software
bkeepers
PRO
66
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building an army of robots
kneath
302
44k
Code Review Best Practice
trishagee
65
17k
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