Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Future Will be Made of Screens

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for binx binx
February 24, 2012
320
3

The Future Will be Made of Screens

Presented at the February 2012 Designers & Geeks Meeup

Avatar for binx

binx

February 24, 2012

More Decks by binx

See All by binx
On the Importance of Iteration
Avatar for binx binx
0
130
Designing for Spacecraft Operations
Avatar for binx binx
2
640
Place and Space
Avatar for binx binx
0
540
Error: Success
Avatar for binx binx
0
540
Peak Visualization?
Avatar for binx binx
1
620
The Data Visualization Hustle
Avatar for binx binx
2
480
People, Not Users
Avatar for binx binx
2
270
Data Collection and Memory
Avatar for binx binx
1
250
The Road To Code
Avatar for binx binx
1
410

Featured

See All Featured
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
190
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.7k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
150
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
810
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.5k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.1k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
380
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
180

Transcript

  1. The Future Will be Made of Screens

  2. American Eagle Screen in Times Square

  3. 1, 2, 10 Design for Each Level

  4. Scaling Down

  5. 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

  6. Fluid Design mediaqueri.es

  7. MoMA’s Talk to Me

  8. Platform Detection navigator.userAgent IE iOS iPad iPhone Safari Firefox Chrome

  9. Lesson: The Mobile Version Can be Different Different Layout Different

    Movement Different Behavior

  10. 2011 MTV Video Music Awards

  11. Different Behavior for Different Devices

  12. Scaling Up

  13. “make it big, and make it interesting”

  14. 2011 Spike Video Game Awards

  15. Oprah’s Lifeclass - Web

  16. Subtle Motion?

  17. Oprah’s Lifeclass - TV

  18. 2011 MTV European Music Awards

  19. Stage View

  20. Fluid Platform Experience PC Mobile Television Optimize: Interaction Performance Optimize:

    Legibility Motion
  21. None

  22. Thanks! [email protected] @rachelbinx