Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design, Past, Present and Future

370 views

Published on

Responsive Design, Past, Present and Future

Andrew Smyk, Sheridan College

Overview

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.

Objective

Think beyond the pixel and how to build content for past, present and future design considerations.

Target Audience

UX designers, developers and product managers who current implement fluid/responsive sites.

Attendees should have experience in design and implementing responsive designs for multiple devices and platforms.

Five Things Audience Members Will Learn

How to design with type for being A11y compliant and backwards compatible.
Designing for readability.
How to incorporate lightweight design process.
Why we need to think beyond smart devices?
What is the future of responsive design beyond standard media queries?

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

×