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
3
310
The Future Will be Made of Screens
Presented at the February 2012 Designers & Geeks Meeup
binx
February 24, 2012
Tweet
Share
More Decks by binx
See All by binx
On the Importance of Iteration
binx
0
120
Designing for Spacecraft Operations
binx
2
630
Place and Space
binx
0
530
Error: Success
binx
0
540
Peak Visualization?
binx
1
610
The Data Visualization Hustle
binx
2
460
People, Not Users
binx
2
260
Data Collection and Memory
binx
1
240
The Road To Code
binx
1
400
Featured
See All Featured
A Soul's Torment
seathinner
5
2.4k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
91
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
410
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
200
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
The Curious Case for Waylosing
cassininazir
0
270
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
1
1.3k
Navigating Weather and Climate Data
rabernat
0
140
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
190
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