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
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
Culture Deck
optfit
0
330
アジャイル開発とスクラム
araihara
0
160
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
現場で役立つAPIデザイン
nagix
29
10k
Larkご案内資料
customercloud
PRO
0
600
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Embracing the Ebb and Flow
colly
84
4.6k
Visualization
eitanlees
146
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
We Have a Design System, Now What?
morganepeng
51
7.4k
Docker and Python
trallard
44
3.3k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Designing Experiences People Love
moore
139
23k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
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