320, 480, 640, 720, 768, 960, 1024… NO

2,970 views

Published on

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

Published in: Design, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,970
On SlideShare
0
From Embeds
0
Number of Embeds
109
Actions
Shares
0
Downloads
16
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

320, 480, 640, 720, 768, 960, 1024… NO

  1. 1. 320, 480, 640, 720, 768, 960, 1024… NO Christopher Cochran
  2. 2. Technology is advancing constantly
  3. 3. Web Just Screen Is More Than Size
  4. 4. Communication
  5. 5. If it’s not important on 3 inches, it’s not important on 13 inches.
  6. 6. Focus and prioritize the constraints of mobile design, not just on the devices.
  7. 7. Design from the bottom up; from the content out.
  8. 8. Design from the bottom up; from the content out.
  9. 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. 10. Communication
  11. 11. Form Follows Function
  12. 12. Treat text as a user interface Web Design is 95% Typography by Oliver Reichenstein
  13. 13. Think Content 1st
  14. 14. Content Begins with < Markup />
  15. 15. <h1>Title<h1> ! <h2>Sub Heading</h2> ! <p>Paragraph Text</p>
  16. 16. Headline subheadline Paragraph Text
  17. 17. A Pixel is Not A pixel
  18. 18. The Web is not a Fixed Medium
  19. 19. Think EM First
  20. 20. Math Is Complicated (Or just being lazy)
  21. 21. Design Responsively
  22. 22. target ÷ context = EM
  23. 23. 1.14285714285414
  24. 24. 1.15
  25. 25. CPL Characters Per Line
  26. 26. LET Typography Dictate Layout Widths
  27. 27. Set BreakPoints around CONTENT Not Devices
  28. 28. Explore The Design Where it & naturally breaks ADJUST
  29. 29. Media Queries Are NOT Just For Layout Changes
  30. 30. A
 D
 J
 U
 S
 T Font-Size Line-height Padding Margin
  31. 31. DON’T FORGET ABOUT Height Media Queries
  32. 32. Use EM in Media Queries
  33. 33. Don’t Judge Physical Context By Resolution
  34. 34. TV != Higher Resolution
  35. 35. Don’t Limit Experiences
  36. 36. Don’t Display: None;
  37. 37. Performance Is Key
  38. 38. More than A second Can cause the Visitor to interrupt there flow of thought, Creating a Poor Experience
  39. 39. TEST, TEST, TEST
  40. 40. TEST
  41. 41. Don’t Just test Browsers and Devices, But loading on Different Connectivity As well (Network Link Conditioner - OSX)
  42. 42. THANKS! Q&A?

×