Responsive Design, Past, Present and Future
0 likes699 views
The document discusses the evolution and future of responsive design, emphasizing the importance of simplicity in media queries and text-only design for performance. It highlights responsive typography and content modeling strategies, including accessibility guidelines from WCAG. The content also touches on the concept of progressive web apps and adjusting designs for various screen sizes.
Responsive Design, Past, Present and Future
- 2. Responsive Design: Past, Present & Future FITC Spotlight Advanced Responsive Design 2016 @andrewsmyk
- 5. @andrewsmyk
- 6. @andrewsmyk
- 7. @andrewsmyk future past present Things we used to do but stopped doing because something shiny and new came along. And now doing it again.
- 10. 640 x 480 800 x 600 @andrewsmyk past
- 12. @andrewsmyk past
- 13. 640 x 480 800 x 600 1024 x 768 1200 x 900 1920 x 1200 @andrewsmyk past
- 14. @andrewsmyk past
- 15. @andrewsmyk past
- 16. @andrewsmyk past
- 22. I am gonna have to media query the shit out of this.
- 23. design with text only @andrewsmyk present
- 25. design with text only @andrewsmyk past present future
- 27. design with text only: helps keep your media queries as simple as possible. @andrewsmyk present
- 28. design with text only: Pages are low weight with high performance. @andrewsmyk present
- 29. An unstyled HTML page is ubiquitous and device agnostic. @andrewsmyk past present future
- 30. “Design consistency is not about pixels.” @andrewsmyk present
- 31. Responsive Typography Building for Hierarchy Size Weight Color Position Type Contrast
- 33. Responsive Typography 9 12 16 21 28 37 50 67 89
- 35. Responsive Typography Why Modular Scales? increases readability increases legibility balances white-space balances typographic texture type contrast
- 36. Responsive Typography Modular Scales 2:3 (perfect fifth) 3:4 (perfect fourth) * 1:1.618 (golden section) 4:5 (major third) 3:5 (major sixth) 9:16 (minor seventh) *
- 37. Responsive Typography Modular Math for 3:4 ¾ = .75 16px base font 16/.75 = 21px 21/.75 = 28px 28/.75 = 37px 37/.75 = 50px
- 38. Responsive Typography 9 12 16 21 28 37 50 67 89
- 39. Responsive Typography 9 12 16 21 28 37 50 67 89 10 13 18 24 32 42 56 74
- 40. Responsive Typography Modular Line Height - As the screen gets smaller, increase line height - 1/.75 = 1.3
- 43. @andrewsmyk
- 44. @andrewsmyk
- 47. It’s all about the content. @andrewsmyk present
- 48. Content Modeling & Strategy • Content Engagement • Content Curation • Rank and Prioritize Content @andrewsmyk present
- 52. Provide text alternatives (WCAG2) Readable and Understandable (WCAG2) Content Appears and Operates in Predictable Ways (WCAG2) Robust Compatibility with Current and Future Devices (WCAG2) @andrewsmyk present
- 53. Use Role attribute properly (a11y) Link are recognizable (a11y) Logical Layouts and Patterns (a11y) Semantic Headings and Structures (a11y) @andrewsmyk present
- 59. Browser Dependent URL masking Empty Shell (wait for content downloading) @andrewsmyk present
- 64. @media (distance: far) { /* increase text size here */ } @andrewsmyk future
- 65. “Adjust to Screen” iPad viewport of 768 as a baseline for large screens at distance. @andrewsmyk future
- 67. @andrewsmyk future Facial Recognition and Distance
- 75. Thank you!