Your SlideShare is downloading. ×
0
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
320, 480, 640, 720, 768, 960, 1024… NO
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,929

Published on

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

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
1,929
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 33. Don’t Judge Physical Context By Resolution
  • 34. TV != Higher Resolution
  • 35. Don’t Limit Experiences
  • 36. Don’t Display: None;
  • 37. Performance Is Key
  • 38. More than A second Can cause the Visitor to interrupt there flow of thought, Creating a Poor Experience
  • 39. TEST, TEST, TEST
  • 40. TEST
  • 41. Don’t Just test Browsers and Devices, But loading on Different Connectivity As well (Network Link Conditioner - OSX)
  • 42. THANKS! Q&A?

×