Stop designing around devices, and set pixel dimensions, and start designing around the content.

1. 320, 480, 640, 720,
768, 960, 1024… NO
Christopher Cochran

2. Technology is
advancing
constantly

3. Web
Just
Screen
Is More Than
Size

4. Communication

5. If it’s not important on 3 inches,
it’s not important on 13 inches.

6. Focus and prioritize
the constraints
of mobile design, not
just on the devices.

7. Design from the bottom up;
from the content out.

8. Design from the bottom up;
from the content out.

9. de·sign
di-ˈzīn
: to plan and make (something)
for a specific use or purpose
http://www.merriam-webster.com/dictionary/design

10. Communication

11. Form Follows Function

12. Treat text as a
user interface
Web Design is 95% Typography by Oliver Reichenstein

13. Think Content 1st

14. Content Begins with
< Markup />

15. <h1>Title<h1>
!
<h2>Sub Heading</h2>
!
<p>Paragraph Text</p>

16. Headline
subheadline
Paragraph Text

17. A Pixel is Not A pixel

18. The Web is
not a Fixed Medium

19. Think EM First

20. Math Is Complicated
(Or just being lazy)

21. Design Responsively

22. target ÷ context = EM

23. 1.14285714285414

24. 1.15

25. CPL
Characters Per Line

26. LET
Typography
Dictate Layout
Widths

27. Set BreakPoints
around CONTENT
Not Devices

28. Explore
The Design Where it
&
naturally
breaks
ADJUST

29. Media Queries
Are NOT Just For
Layout Changes

30. A
D
J
U
S
T
Font-Size
Line-height
Padding
Margin

31. DON’T FORGET ABOUT
Height
Media Queries

32. Use EM in Media Queries

34. Don’t Judge
Physical Context
By Resolution

35. TV != Higher Resolution

36. Don’t Limit Experiences

37. Don’t
Display: None;

38. Performance Is Key

39. More than A second Can cause the
Visitor to interrupt there flow of
thought, Creating a Poor Experience

40. TEST, TEST, TEST

41. TEST

42. Don’t Just test Browsers and Devices, But
loading on Different Connectivity As well
(Network Link Conditioner - OSX)

43. THANKS!
Q&A?