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?

2. Responsive Design:
Past, Present & Future
FITC Spotlight Advanced
Responsive Design 2016
@andrewsmyk

4. www.andrewsmyk.com/advancedrwd

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.

8. @andrewsmyk
future
past
present

9. @andrewsmyk
future
past
present

10. 640 x 480
800 x 600
@andrewsmyk
past

11. 640 800
@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

18. @andrewsmyk
present

21. @andrewsmyk
present

22. I am gonna have to media query the shit out of this.

23. design with text only
@andrewsmyk
present

24. @andrewsmyk
past
present
future

25. design with text only
@andrewsmyk
past
present
future

26. @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

32. Responsive Typography
Modular scale

33. Responsive Typography
9 12 16 21 28 37 50 67 89

34. Responsive Typography
Creates Typographic
rhythm

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

51. accessibility:
#a11y
WCAG
@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

54. A A A
@andrewsmyk
present

55. A A A
@andrewsmyk
future

56. @andrewsmyk
present

57. @andrewsmyk
present
progressive
web apps

58. Responsive
App-like-interactions
Discoverable
Installable
Linkable
@andrewsmyk
present

59. Browser Dependent
URL masking
Empty Shell (wait for content downloading)
@andrewsmyk
present

60. @andrewsmyk
present

63. @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

66. @andrewsmyk
future

67. @andrewsmyk
future
Facial Recognition and Distance

68. @andrewsmyk
future

69. @andrewsmyk
future

70. @andrewsmyk
future

71. @andrewsmyk
future

74. @andrewsmyk
Questions?

75. Thank you!

76. @andrewsmyk
www.andrewsmyk.com/advancedrwd