The Future Will be Made of Screens

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