320, 480, 640, 720, 768, 960, 1024… NO
•
4 likes•4,136 views
The document discusses principles of responsive web design. It emphasizes designing from the content outwards rather than just focusing on different devices. Media queries should be used to adjust more than just layout, including font sizes, line heights, padding and margins. Responsive design involves setting breakpoints based on how the content naturally breaks across different screen widths, not just on device resolutions. Performance, testing across different connectivity speeds, and prioritizing the user experience are also highlighted.
320, 480, 640, 720, 768, 960, 1024… NO
- 1. 320, 480, 640, 720, 768, 960, 1024… NO Christopher Cochran
- 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
- 12. Treat text as a user interface Web Design is 95% Typography by Oliver Reichenstein
- 14. Content Begins with < Markup />
- 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)
- 22. target ÷ context = EM
- 23. 1.14285714285414
- 24. 1.15
- 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
- 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
- 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?