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
Trent Walton: Break Everything
Search
New Adventures
January 26, 2012
Design
11
4.4k
Trent Walton: Break Everything
New Adventures, 19th January 2012
New Adventures
January 26, 2012
Tweet
Share
More Decks by New Adventures
See All by New Adventures
Denise Jacobs: Your Brain on Creativity
naconf
2
480
Dan Mall: Designish
naconf
11
1.9k
Robbie Manson: The Mindful Designer
naconf
11
2.6k
Frank Chimero: It Moves
naconf
11
3.2k
Travis Schmeisser: We Used To Build Forts
naconf
2
820
Naomi Atkinson: Going Beyond
naconf
3
1.7k
Dan Rubin: The New Language of Web Design
naconf
3
980
Mark Boulton: A New Canon
naconf
1
4.8k
Jon Tan: Language and the Lizard Brain
naconf
2
1.3k
Other Decks in Design
See All in Design
TUNAG BOOK 2024
stmn
0
470
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
太田博三(@usagisan2020)
otanet
0
220
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
66k
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
発表資料テンプレート / My slide template
thatblue
0
200
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
870
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
620
aya_murakami_portfolio
ayakaimi1101
0
1.1k
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Why Our Code Smells
bkeepers
PRO
335
57k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Building Adaptive Systems
keathley
40
2.4k
Code Reviewing Like a Champion
maltzj
521
39k
Raft: Consensus for Rubyists
vanstee
137
6.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Transcript
Break Everything @TrentWalton New Adventures 2012
A little about myself... Howdy!
None
I work with 2 of my best friends in Texas.
Dave Rupert
Reagan Ray
My wife had to put me on a font allowance.
I think about food all the time.
None
None
None
None
None
None
None
None
How did they approach their work?
None
None
None
None
None
None
None
These guys broke things like their lives depended on it.
None
I believe we should do the same.
Why break things?
So that we know limitations 1
None
motorcyclemuseum.org
motorcyclemuseum.org
So that we can develop an understanding 2
http://patft.uspto.gov
None
None
So that we can make things better 3
None
motorcyclemuseum.org
motorcyclemuseum.org
Blessed are those who break.
Know1 Limitations
Develop an Understanding 2
Make things 3 Better
Breaking Limitations 1 ...or How far can we push web
type?
As web typography improves, web designers want the same level
of control print designers have.
But what does that mean?
I want to use all these...
Not just these.
And put all this...
Into this.
So how did I get started? Pushing CSS(3) as far
as I could
None
None
None
None
None
None
<div class="itried">I tried to...</div> <div class="css">CSS Three</div> <span class="line-left"></span> <div
class="itworked">& it worked</div> <span class="line-right"></span> <div class="hoo">hooray!</div> For shame.
Break rules for the sake of progress.
None
None
Testing the limitations of IE9 Platform Preview
None
None
None
Injects <spans> around letters, words, or lines
For example...
Gets you this. <h1 id="txt_onward"> <span class="char1">O</span> <span class="char2">n</span> <span
class="char3">w</span> <span class="char4">a</span> <span class="char5">r</span> <span class="char6">d</span> <span class="char7"></span> <span class="char8">&</span> <span class="char9"></span> <span class="char10">U</span> <span class="char11">p</span> </h1>
None
None
None
None
None
None
None
None
Breaking takes gumption.
None
This isn’t ideal. <h1 id="txt_onward"> <span class="char1">O</span> <span class="char2">n</span> <span
class="char3">w</span> <span class="char4">a</span> <span class="char5">r</span> <span class="char6">d</span> <span class="char7"></span> <span class="char8">&</span> <span class="char9"></span> <span class="char10">U</span> <span class="char11">p</span> </h1>
But imagine this h1::nth-letter(4); or h1::nth-char(4); targeting the 4th letter
within an <h1> tag h1::nth-word(3); targeting the 3rd word within an <h1> tag
None
What would the web look like if no one ventured
out of bounds?
None
None
None
None
None
None
None
None
None
What limitations will you break? The web is ripe for
expansion.
Typecast App
Wood Type Revival
Animatable
Gimme Bar
The Manual
Break things to develop an understanding. 2
None
None
None
None
None
Not always fun, but necessary
None
None
Responsive Web Design
Responsive Web Design isn’t bolt-on.
I’ve always seen the web in pixels
Complete Control at 3200%
ARCHY IER H
What is this dark magic?!
The only way to understand RWD was to get my
hands dirty.
We’d like a responsive video site for the new dolectures.co.uk.
Jon Heslop January 2011
None
To think about the web responsively is to think in
proportions, not pixels.
None
None
Hierarchy can be maintained.
A New Kind of Control
Use flexible grids, fluid images, and media queries to build
not a page, but a network of content that can be rearranged at any screen size to best convey a message.
Break things to make them better. ...or Responsivizing My Broke-Ass
Blog 3
I wanted to make my blog responsive.
Every.
Single.
Post.
But I couldn’t see from point A to B.
• Flexible Grids • Fluid Images • Media Queries
None
Can fine control of web type coexist with RWD?
Dave Rupert solves all my problems with javascript!
None
None
None
Teamwork makes dreams work!
The web community is our greatest asset. Camaraderie is everything.
“It’s fun to talk about design and to work on
my career, but that’s not going to last… the relationships in my life are where I really want to make the biggest impact.” Phil Coffman November 2011—The Great Discontent
None
None
None
None
None
None
None
None
None
None
None
None
None
Thanks! trentwalton.com @TrentWalton