Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Responsive Design: Past, Present, Future

Web content now lives on multiple devices and platforms. We are designing content that will live on evolving smart devices, smart TVs, dumb devices, and low res screen platforms. What are the design implications for multiscreen patterns such as coherence, device shifting and the growing trend of zero UI?

Designing digital products is about how people connect with content on the various ecosystems of screens. The nature of digital is changing and how we design and implement needs to rapidly evolve.

  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Responsive Design: Past, Present, Future

  1. 1. Responsive Design: Past, Present & Future FITC Spotlight Advanced Responsive Design 2016 @andrewsmyk
  2. 2. www.andrewsmyk.com/advancedrwd
  3. 3. @andrewsmyk
  4. 4. @andrewsmyk
  5. 5. @andrewsmyk future past present
  6. 6. @andrewsmyk future past present
  7. 7. 640 x 480 800 x 600 @andrewsmyk past
  8. 8. 640 800 @andrewsmyk past
  9. 9. @andrewsmyk past
  10. 10. 640 x 480 800 x 600 1024 x 768 1200 x 900 1920 x 1200 @andrewsmyk past
  11. 11. @andrewsmyk past
  12. 12. @andrewsmyk past
  13. 13. @andrewsmyk past
  14. 14. @andrewsmyk present
  15. 15. @andrewsmyk present
  16. 16. I am gonna have to media query the shit out of this.
  17. 17. design with text only @andrewsmyk present
  18. 18. @andrewsmyk past present future
  19. 19. design with text only @andrewsmyk past present future
  20. 20. @andrewsmyk past present future
  21. 21. design with text only: helps keep your media queries as simple as possible. @andrewsmyk present
  22. 22. design with text only: Pages are low weight with high performance. @andrewsmyk present
  23. 23. An unstyled HTML page is ubiquitous and device agnostic. @andrewsmyk past present future
  24. 24. “Design consistency is not about pixels.” @andrewsmyk present
  25. 25. Responsive Typography Building for Hierarchy Size Weight Color Position Type Contrast
  26. 26. Responsive Typography Modular scale
  27. 27. Responsive Typography 9 12 16 21 28 37 50 67 89
  28. 28. Responsive Typography Creates Typographic rhythm
  29. 29. Responsive Typography Why Modular Scales? increases readability increases legibility balances white-space balances typographic texture type contrast
  30. 30. 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) *
  31. 31. Responsive Typography Modular Math for 3:4 ¾ = .75 16px base font 16/.75 = 21px 21/.75 = 28px 28/.75 = 37px 37/.75 = 50px
  32. 32. Responsive Typography 9 12 16 21 28 37 50 67 89
  33. 33. Responsive Typography 9 12 16 21 28 37 50 67 89 10 13 18 24 32 42 56 74
  34. 34. Responsive Typography Modular Line Height - As the screen gets smaller, increase line height - 1/.75 = 1.3
  35. 35. @andrewsmyk
  36. 36. @andrewsmyk
  37. 37. It’s all about the content. @andrewsmyk present
  38. 38. Content Modeling & Strategy • Content Engagement • Content Curation • Rank and Prioritize Content @andrewsmyk present
  39. 39. accessibility: #a11y WCAG @andrewsmyk present
  40. 40. 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
  41. 41. Use Role attribute properly (a11y) Link are recognizable (a11y) Logical Layouts and Patterns (a11y) Semantic Headings and Structures (a11y) @andrewsmyk present
  42. 42. A A A @andrewsmyk present
  43. 43. A A A @andrewsmyk future
  44. 44. @andrewsmyk present
  45. 45. @andrewsmyk present progressive web apps
  46. 46. Responsive App-like-interactions Discoverable Installable Linkable @andrewsmyk present
  47. 47. Browser Dependent URL masking Empty Shell (wait for content downloading) @andrewsmyk present
  48. 48. @andrewsmyk present
  49. 49. @andrewsmyk present
  50. 50. @media (distance: far) { /* increase text size here */ } @andrewsmyk future
  51. 51. “Adjust to Screen” iPad viewport of 768 as a baseline for large screens at distance. @andrewsmyk future
  52. 52. @andrewsmyk future
  53. 53. @andrewsmyk future Facial Recognition and Distance
  54. 54. @andrewsmyk future
  55. 55. @andrewsmyk future
  56. 56. @andrewsmyk future
  57. 57. @andrewsmyk future
  58. 58. @andrewsmyk Questions?
  59. 59. Thank you!
  60. 60. @andrewsmyk www.andrewsmyk.com/advancedrwd

×