Responsive Design Patterns for an Evolving Web

Overview
Style guides, pattern libraries, and design systems are becoming more commonplace. As the web continues to mature older design patterns, even though they are widely understood, no longer work well for a multi-device web. Building modular, reusable patterns will help designs function on a wider group of devices.

Four Things Audience Members Will Learn
1. Basic guidelines for creating modular design patterns
2. Updated age-old design patterns for the evolving web
3. New responsive design patterns that solve complex, multi-device design problems
4. How to leverage Sass and PostCSS when creating design patterns

Examples:
https://codepen.io/collection/DbrpKV/#

Transcript

1. RESPONSIVE DESIGN PATTERNS
   FOR AN EVOLVING WEB
   BERMON PAINTER
   

   View Slide

2. PATTERNS & DESIGN SYSTEMS
   The foundation of repeatable interactions that
   when combined create rich and complex systems.
   

   View Slide

3. BENEFITS
   A useful tool to use when breaking down a user
   interface into it’s most modular pieces, instead
   of thinking about things as a series of
   disconnected pages.
   

   View Slide

4. GUIDELINES
   Collaborate WITH DESIGNERS AND DEVELOPERS
   

   View Slide

5. GUIDELINES
   FOSTER CONSISTENCY
   

   View Slide

6. GUIDELINES
   KEEP PATTERNS UP-TO-DATE
   

   View Slide

7. GUIDELINES
   ENJOY EFFICIENCY
   

   View Slide

8. CONVENTIONS
   THERE’s A LOT OUT THERE. FIND ONE THAT
   WORKS FOR YOUR TEAM, NOT JUST YOURSELF.
   

   View Slide

9. HTML
   /assets
   /images
   /content
   /layout
   /fonts
   /javascript
   /libs
   /modules
   module-name.js
   /testing
   module-name.spec
   /sass
   /base
   /helpers
   /modules
   module-name.scss
   /setup
   /themes
   /theme-name
   module-name.scss
   CONVENTIONS
   Folder Structure
   

   View Slide

10. HTML
    .parent {…}
    .parent-child {…}
    .parent-child-grandchild {…}
    CONVENTIONS
    NAMING
    Parent-Grandchild
    

    View Slide

11. HTML
    .navigation {…}
    .navigation-item {…}
    .navigation-item-action {…}
    CONVENTIONS
    NAMING
    Parent-Grandchild
    

    View Slide

12. HTML
    .plural-items {…€¦}
    .singular-item {…€¦}
    CONVENTIONS
    NAMING
    PLural-Singular
    

    View Slide

13. HTML
    .images {…}
    .image {…}
    CONVENTIONS
    NAMING
    PLural-Singular
    

    View Slide

14. A BRIEF HISTORY IN LAYOUT
    The holy grail layout
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. A BRIEF HISTORY IN LAYOUT
    MEDIA OBJECT
    

    View Slide

26. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

27. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

28. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

29. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

30. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

31. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

32. A BRIEF HISTORY IN LAYOUT
    The Grid
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. PATTERNS
    The foundation of repeatable interactions that
    when combined create rich and complex systems.
    

    View Slide

38. View Slide

39. View Slide

40. HTML
    
    
    
    Title
    Content...
    
    
    
    Title
    Content...
    
    
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    

    View Slide

41. CSs
    .panes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    height:100vh;
    text-align: center;
    width: 100%;
    }
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    

    View Slide

42. CSs
    .panes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    height:100vh;
    text-align: center;
    width: 100%;
    }
    .pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    }
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    

    View Slide

43. HTML
    
    
    
    
    
    
    
    

    View Slide

44. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    

    View Slide

45. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    }
    

    View Slide

46. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    

    View Slide

47. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    

    View Slide

48. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    

    View Slide

49. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -2;
    }
    .sidebar {
    flex-basis: 20%;
    order: -1;
    }
    

    View Slide

50. HTML
    
    
    
    
    
    
    

    View Slide

51. HTML
    
    
    
    
    
    
    

    View Slide

52. HTML
    
    
    
    
    
    
    

    View Slide

53. CSs
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    flex-direction: column;
    }
    .content, .sidebar {
    flex: 1;
    }
    .sidebar {
    order: -1;
    }
    

    View Slide

54. CSs
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    flex-direction: column;
    }
    .content, .sidebar {
    flex: 1;
    }
    .sidebar {
    order: -1;
    }
    @media screen and (min-width: 600px) {
    .container {
    flex-direction: row-reverse;
    }
    .content {
    flex-basis: 30%;
    }
    }
    

    View Slide

55. ACCESSIBILITy
    

    View Slide

56. CSS
    HTML
    
    
    
    
    
    
    
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    1
    2 3
    DOM ORDER
    

    View Slide

57. CSS
    HTML
    
    
    
    
    
    
    
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    2
    1 3
    VISUAL ORDER
    

    View Slide

58. CSS
    HTML
    
    
    
    
    
    
    
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    1
    2 3
    TAB ORDER
    

    View Slide

59. HTML
    
    
    
    Dashboard
    
    
    Loans
    
    
    Budget
    
    
    
    
    Settings
    
    
    Logout
    
    
    
    Dashboard Loans BudgeT SETTINGS LOGOUT
    

    View Slide

60. HTML
    
    
    
    Dashboard
    
    
    Loans
    
    
    Budget
    
    
    
    
    Settings
    
    
    Logout
    
    
    
    Dashboard
    Loans
    Budget
    Settings
    Logout
    

    View Slide

61. CSs
    .toolbars {
    display: flex;
    flex-direction: column;
    }
    Dashboard
    Loans
    Budget
    Settings
    Logout
    

    View Slide

62. CSs
    .toolbars {
    display: flex;
    flex-direction: column;
    }
    @media screen and (min-width: 600px) {
    .toolbars {
    flex-direction: row;
    justify-content: space-between;
    }
    .toolbar {
    display: flex;
    align-items: center;
    }
    }
    Dashboard Loans BudgeT SETTINGS LOGOUT
    

    View Slide

63. HTML
    
    
    
    Dashboard
    
    
    Loans
    
    
    Budget
    
    
    
    
    Settings
    
    
    Logout
    
    
    
    Dashboard
    Loans
    Budget
    Settings
    Logout
    

    View Slide

64. HTML
    .sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }
    Dashboard
    Loans
    Budget
    Settings
    Logout
    

    View Slide

65. HTML
    
    
    
    Dashboard
    
    
    Loans
    
    
    Budget
    
    
    
    
    Settings
    
    
    Logout
    
    
    
    PRIMARY HEADING Secondary Heading
    

    View Slide

66. HTML
    
    
    
    Dashboard
    
    
    Loans
    
    
    Budget
    
    
    
    
    Settings
    
    
    Logout
    
    
    
    PRIMARY HEADING
    Secondary Heading
    PRIMARY HEADING
    Secondary Heading
    

    View Slide

67. HTML
    
    
    
    Dashboard
    
    
    Loans
    
    
    Budget
    
    
    
    
    Settings
    
    
    Logout
    
    
    
    PRIMARY HEADING
    Secondary Heading
    

    View Slide

68. HTML
    .content-heading {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    .primary-heading {
    flex-grow: 1;
    }
    }
    PRIMARY HEADING
    Secondary Heading
    

    View Slide

69. HTML
    
    
    Really really long username
    
    Edit
    Arhive
    Delete
    
    
    
    avery Swartz
    Matthew Farlymn
    kate grant
    Alex blom
    

    View Slide

70. HTML
    
    
    Really really long username
    
    Edit
    Arhive
    Delete
    
    
    
    avery Swartz
    Matthew Farlymn
    kate grant
    Alex blom
    

    View Slide

71. HTML
    
    
    Really really long username
    
    Edit
    Arhive
    Delete
    
    
    
    avery Swartz
    Matthew FaR. . .
    kate grant
    Alex blom
    

    View Slide

72. CSs
    .user {
    display: flex;
    align-items: center;
    &-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    &-actions {
    display: flex;
    }
    }
    avery Swartz
    Matthew FaR. . .
    kate grant
    Alex blom
    

    View Slide

73. HTML
    
    
    Tab 1
    
    
    Tab 2
    
    
    Tab 3
    
    
    Tab 4
    
    
    Tab 1 Tab 2 Tab 3 Tab 3
    

    View Slide

74. HTML
    
    
    Tab 1
    
    
    Tab 2
    
    
    Tab 3
    
    
    Tab 4
    
    
    Tab 1 Tab 2 Tab 3 Tab 4
    Tab 1 Tab 2 Tab 3 Tab 4
    Tab 1 Tab 2
    Tab 5
    

    View Slide

75. HTML
    .tabs {
    display: flex;
    flex-direction: row;
    }
    .tab {
    flex: 1;
    }
    Tab 1 Tab 2 Tab 3 Tab 4
    Tab 1 Tab 2 Tab 3 Tab 4
    Tab 1 Tab 2
    Tab 5
    

    View Slide

76. HTML
    
    
    
    Title
    Description
    
    
    
    Title
    Description
    
    
    
    Title
    Description
    
    ...
    
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    

    View Slide

77. CSs
    .cards {
    display: flex;
    flex-flow: row wrap;
    }
    .card {
    flex: 1 0 25%;
    }
    .card:nth-last-child(2):nth-child(4n) {
    min-width: 33%;
    }
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    

    View Slide

78. CSs
    .cards {
    display: flex;
    flex-flow: row wrap;
    }
    .card {
    flex: 1 0 25%;
    }
    .card:nth-last-child(2):nth-child(4n) {
    min-width: 33%;
    }
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    

    View Slide

79. CSs
    .cards {
    display: flex;
    flex-flow: row wrap;
    }
    .card {
    flex: 1 0 25%;
    }
    .card:nth-last-child(2):nth-child(4n) {
    min-width: 33%;
    }
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    

    View Slide

80. HTML
    
    
    
    Title
    Description
    Buy
    
    
    
    Title
    Description
    Buy
    
    ...
    
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis Venenatis Venenatis
    Sem Amet
    Venenatis Venenatis
    Sem Amet
    

    View Slide

81. CSs
    .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }
    .card {
    display: flex;
    flex-basis: 20%;
    flex-direction: column;
    &-action {
    margin-top: auto;
    }
    }
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis Venenatis Venenatis
    Sem Amet
    Venenatis Venenatis
    Sem Amet
    

    View Slide

82. FIN
    

    View Slide

83. @bermonpainter
    officehours.io
    

    View Slide