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
The Future Will be Made of Screens
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
binx
February 24, 2012
320
3
Share
The Future Will be Made of Screens
Presented at the February 2012 Designers & Geeks Meeup
binx
February 24, 2012
More Decks by binx
See All by binx
On the Importance of Iteration
binx
0
130
Designing for Spacecraft Operations
binx
2
640
Place and Space
binx
0
540
Error: Success
binx
0
540
Peak Visualization?
binx
1
620
The Data Visualization Hustle
binx
2
470
People, Not Users
binx
2
270
Data Collection and Memory
binx
1
250
The Road To Code
binx
1
410
Featured
See All Featured
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
180
Un-Boring Meetings
codingconduct
0
290
Product Roadmaps are Hard
iamctodd
PRO
55
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
300
Measuring & Analyzing Core Web Vitals
bluesmoon
9
830
Navigating Weather and Climate Data
rabernat
0
190
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
340
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Language of Interfaces
destraynor
162
26k
Transcript
The Future Will be Made of Screens
American Eagle Screen in Times Square
1, 2, 10 Design for Each Level
Scaling Down
Viewport <link rel="stylesheet" media="screen and (max- device-width: 480px)" href=”iphone.css”/> <meta
name="viewport" content="width=device- width, initial-scale=1, maximum-scale=1"> @media screen and (max-device-width: 480px) { .column { float: none; } } Media Queries
Fluid Design mediaqueri.es
MoMA’s Talk to Me
Platform Detection navigator.userAgent IE iOS iPad iPhone Safari Firefox Chrome
Lesson: The Mobile Version Can be Different Different Layout Different
Movement Different Behavior
2011 MTV Video Music Awards
Different Behavior for Different Devices
Scaling Up
“make it big, and make it interesting”
2011 Spike Video Game Awards
Oprah’s Lifeclass - Web
Subtle Motion?
Oprah’s Lifeclass - TV
2011 MTV European Music Awards
Stage View
Fluid Platform Experience PC Mobile Television Optimize: Interaction Performance Optimize:
Legibility Motion
None
Thanks!
[email protected]
@rachelbinx