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
190
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
96
Designing Evolution
hereinthehive
0
150
Reactive Web Design
hereinthehive
1
760
Designing for Context: Reactive Web Design
hereinthehive
2
660
Other Decks in Technology
See All in Technology
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
450
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
350
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
lycorptech_jp
PRO
1
100
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
220
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
Building Dashboards as a Hobby
egmc
0
110
Databricks における 『MLOps』
databricksjapan
2
170
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
470
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
6.2k
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
440
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
In The Pink: A Labor of Love
frogandcode
138
21k
Into the Great Unknown - MozCon
thekraken
10
990
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Visualization
eitanlees
136
14k
For a Future-Friendly Web
brad_frost
172
9k
Building Applications with DynamoDB
mza
88
5.6k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Optimizing for Happiness
mojombo
370
69k
The Invisible Customer
myddelton
114
12k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
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