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
Designing Evolution: Elements
Search
Dan Donald
June 27, 2014
Technology
2
210
Designing Evolution: Elements
Talk for Responsive Day Out 2 in Brighton, June 2014
Dan Donald
June 27, 2014
Tweet
Share
More Decks by Dan Donald
See All by Dan Donald
Adding the foundations after the house has been built: Design systems at Auto Trader
hereinthehive
0
99
Designing Evolution
hereinthehive
0
170
Reactive Web Design
hereinthehive
1
770
Designing for Context: Reactive Web Design
hereinthehive
2
710
Other Decks in Technology
See All in Technology
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
事業継続を支える自動テストの考え方
tsuemura
0
300
君も受託系GISエンジニアにならないか
sudataka
1
370
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
現場で役立つAPIデザイン
nagix
29
10k
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Faster Mobile Websites
deanohume
306
31k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
KATA
mclloyd
29
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Invisible Side of Design
smashingmag
299
50k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Side Projects
sachag
452
42k
Transcript
Designing Evolution: Elements Dan Donald @hereinthehive Monday, 30 June 14
Monday, 30 June 14
What does it mean to be flexible? http://mrsnespysworld.blogspot.co.uk/2010/07/8-uses-for-rubber-band.html Monday, 30
June 14
Responsive web design is a recipe for managing and constraining
the innate fluidity of the web. Monday, 30 June 14
Open to interpretation Monday, 30 June 14
Nature of breakpoints Monday, 30 June 14
Nature of breakpoints Device or content-oriented breakpoints? Monday, 30 June
14
Device agnostic http://pivotallabs.com/an-introduction-to-qa-at-xtreme-labs/ Monday, 30 June 14
Universality Monday, 30 June 14
What do we know? Monday, 30 June 14
What do we know? Mozilla/5.0 (Macintosh; Intel Mac OS X
10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36 http://wurfl.io Monday, 30 June 14
When do we know it? Monday, 30 June 14
What capabilities help us make good decisions? Monday, 30 June
14
Modularity http://sunrise-theme.myshopify.com/products/giant-lego-bricks Monday, 30 June 14
Atomic design http://patternlab.io @brad_frost Monday, 30 June 14
Monday, 30 June 14
Element queries? Media query Element query Monday, 30 June 14
What can my parent / containing element do? Monday, 30
June 14
• write normal CSS • minimal JS to calculate •
use minimum values & ranges Go & follow @itsaljones! Spike work Monday, 30 June 14
CSS ‘Trigger Points’ [data-width~="20em"] [data-width~="30-40em"] Monday, 30 June 14
Runs on load, resize & orientation change Measures the parent
of modules flagged to watch (could be the module itself) Javascript Monday, 30 June 14
Uses a regex to scrape the CSS for fuzzy selectors
Adds ‘data-triggers’ to our mark-up Build Monday, 30 June 14
<div class="column-2" data-width="18em 24em 32em"> <div class="headlines" data-triggers="18,24,32,40-50"> automated build
process javascript Monday, 30 June 14
[data-width~="32em"] .headlines { float:right; width:32%; } Monday, 30 June 14
.headlines[data-width~="32em"] { float:right; width:32%; } .headlines.w32em { float:right; width:32%; }
Size of container or module? Monday, 30 June 14
Monday, 30 June 14
/** * Trigger Points **/ [data-width~="10em"] .mod_colours { background-color: red
} [data-width~="20em"] .mod_colours { background-color: yellow } [data-width~="30em"] .mod_colours { background-color: pink } [data-width~="40em"] .mod_colours { background-color: lightgreen } [data-width~="50em"] .mod_colours { background-color: purple } [data-width~="60em"] .mod_colours { background-color: orange } [data-width~="70em"] .mod_colours { background-color: blue } Monday, 30 June 14
Monday, 30 June 14
Monday, 30 June 14
Start with the most primitive form Monday, 30 June 14
How could the layout of a module evolve? Monday, 30
June 14
Monday, 30 June 14
Monday, 30 June 14
Monday, 30 June 14
Monday, 30 June 14
Monday, 30 June 14
Monday, 30 June 14
Monday, 30 June 14
Monday, 30 June 14
• what are you trying to say? • would capabilities
change this? • need more assets? • communication is everything Monday, 30 June 14
When do we look to the parent or the viewport?
Monday, 30 June 14
@media all and (min-width: 30em) { [data-width~="32em"] .headlines { float:right;
width:32%; } } Monday, 30 June 14
Progressive enhancement Monday, 30 June 14
? So what’s interesting about element queries? Monday, 30 June
14
Positives http://uxrepo.com/icon/thumbs-up-by-font-awesome Monday, 30 June 14
Negatives http://uxrepo.com/icon/thumbs-down-by-font-awesome Monday, 30 June 14
Should we use them now? Monday, 30 June 14
We need to let go. Create ecosystems not pages. Monday,
30 June 14
As creators on the web, we shape the future of
the web Monday, 30 June 14
Thanks @hereinthehive @fluxflexibility kippt.com/hereinthehive/ element-query-resources Monday, 30 June 14