Drink Reponsively

Stop building for devices and start building for the web.

The traditional web was like a newspaper. It had fixed dimensions, fixed columns, and it was never intended to fit in your palm. The modern web is like water. You put it in a cup, it becomes the cup; put it in a teapot, it becomes the teapot.

I especially thank Chris Coyier, Faruk Ateş, Paul Irish, Scott Jehl, and Brad Frost for their wonderful contributions to these slides and the modern web.

Transcript

1. Drink Responsively Jonathan Neal Research and Development @jonneal jneal@liferay.com Monday, October 8, 12
2. $1.2 Billion$ mobile-broadband subscriptions Monday, October 8, 12
3. $1.2 Billion$ generated mobile ad revenue Monday, October 8, 12
4. Ready, Set, Go! Start building! Monday, October 8, 12
5. Responsive Web Development Best Experience For Anyone On Any Device Monday, October 8, 12
6. Responsive Web Development Accept and Anticipate New Technology, Resolutions, Capabilities Monday, October 8, 12
7. Responsive Web Development De ne Meaning Meaning > Appearance If you threw it out for mobile, why was it there for desktop? Monday, October 8, 12
8. Visual Meaningful Monday, October 8, 12
9. Responsive Web Development Design for Liquid display: none; won’t save you, responsive patterns might Monday, October 8, 12
10. Responsive Web Development Monday, October 8, 12
11. Responsive Web Development Layouts Media Breakpoints Monday, October 8, 12
12. Responsive Layouts Monday, October 8, 12
13. Responsive Layouts Monday, October 8, 12
14. Responsive Layouts Monday, October 8, 12
15. Responsive Layouts @media queries Monday, October 8, 12
16. Responsive Layouts @media queries Monday, October 8, 12
17. Responsive Layouts @media queries Monday, October 8, 12
18. Responsive Layouts @media queries Monday, October 8, 12
19. Responsive Layouts Monday, October 8, 12
20. Responsive Layouts Monday, October 8, 12
21. Responsive Layouts Monday, October 8, 12
22. Responsive Layouts Monday, October 8, 12
23. Responsive Media scale and target Monday, October 8, 12
24. Responsive Media Monday, October 8, 12
25. Responsive Media Monday, October 8, 12
26. Responsive Media Monday, October 8, 12
27. Responsive Media Monday, October 8, 12
28. Responsive Media Monday, October 8, 12
29. Responsive Media Monday, October 8, 12
30. Responsive Media Monday, October 8, 12
31. Responsive Media Monday, October 8, 12
32. Responsive Media Monday, October 8, 12
33. Responsive Media Monday, October 8, 12
34. Responsive Media Monday, October 8, 12
35. Responsive Media Monday, October 8, 12
36. Responsive Media Monday, October 8, 12
37. Responsive Media github.com/scottjehl/picture ll Monday, October 8, 12
38. Responsive Breakpoints distinguish the experience Monday, October 8, 12
39. Responsive Breakpoints Monday, October 8, 12
40. Responsive Breakpoints responsive tables Monday, October 8, 12
41. Responsive Breakpoints responsive tables Monday, October 8, 12
42. Responsive Breakpoints responsive tables Monday, October 8, 12
43. Responsive Breakpoints responsive tables Monday, October 8, 12
44. Responsive Breakpoints responsive tables Monday, October 8, 12
45. Responsive Breakpoints responsive tables Monday, October 8, 12
46. More bradfrost.github.com/this-is-responsive/ Monday, October 8, 12
47. More modernizr.com Monday, October 8, 12
48. A Brief Argument for Mobile First Monday, October 8, 12
49. Mobile First Accept and Anticipate De ne Meaning Design for Liquid Monday, October 8, 12
50. Drink Responsively Jonathan Neal Research and Development @jonneal jneal@liferay.com Monday, October 8, 12