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.

Flipping Tables: Displaying Data on Small Screens

1,288 views

Published on

Tables have gotten a bad reputation in the last few years as finicky and hard to work with - partly because they’ve been used for the wrong thing (layout) and partly because desktop friendly wide tables don’t adapt to the narrow screens for mobile devices. But, tables are still the best way to present data for comparison and manipulation. So how can we make them as responsive as the rest of our site? This talk will cover design and code tips for making tables more readable on any screen and more adaptable to small screens.

Published in: Internet
  • Be the first to comment

Flipping Tables: Displaying Data on Small Screens

  1. 1. Flipping Tables Displaying Data on Small Screens #flipdata
  2. 2. Tables
  3. 3. Am I right?
  4. 4. ( °□°)
  5. 5. ( °□°)
  6. 6. • When to use tables ( °□°)
  7. 7. • When to use tables • Creating structure with HTML ( °□°)
  8. 8. • When to use tables • Creating structure with HTML • Designing tables ( °□°)
  9. 9. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS ( °□°)
  10. 10. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens ( °□°)
  11. 11. Sorry!
  12. 12. When to use tables
  13. 13. When to use tables
  14. 14. When to use tables • Sort
  15. 15. When to use tables
  16. 16. When to use tables • Sort • Compare
  17. 17. When to use tables
  18. 18. When to use tables • Sort • Compare • Cross Reference
  19. 19. When to use tables
  20. 20. When to use tables • Sort • Compare • Cross Reference • Calculations
  21. 21. When to use tables
  22. 22. When to use tables • Sort • Compare • Cross Reference • Calculations
  23. 23. When to use tables not
  24. 24. When to use tables not
  25. 25. <h5>Players:</h5> <ul> <li>Daniel Sedin</li> <li>Henrik Sedin</li> <li>Jannik Hansen</li> <li>Bo Horvat</li> </ul> When to use tables not
  26. 26. When to use tables not
  27. 27. .players { column-count:2; } When to use tables not
  28. 28. When to use tables not
  29. 29. img { float: left; } When to use tables not
  30. 30. /* Nicole Sullivan’s Media Object */ <div class="media"> <div class="img"> <img src="" alt="" /> </div> <div class="body"> … </div> </div> When to use tables not
  31. 31. layout When to use tables not
  32. 32. Tables Good • Sort • Compare • Cross Reference • Calculations
  33. 33. layout Tables Bad
  34. 34. Creating structure with HTML
  35. 35. Creating structure with HTML <table> </table>
  36. 36. Creating structure with HTML
  37. 37. Creating structure with HTML <table> <caption>…</caption> </table>
  38. 38. Creating structure with HTML
  39. 39. Creating structure with HTML <table> <caption>…</caption> <colgroup> <col span=“” class=“”> </colgroup> </table>
  40. 40. Creating structure with HTML
  41. 41. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tbody>…</tbody> <tfoot>…</tfoot> </table>
  42. 42. <a href=“#revenues”> <a href=“#expenses”> <tbody id=“revenues”>… <tbody id=“expenses”>…
  43. 43. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tbody>…</tbody> <tfoot>…</tfoot> </table>
  44. 44. Creating structure with HTML
  45. 45. Creating structure with HTML <tr> <th scope=“row"></th> <td></td> <td></td> </tr>
  46. 46. Creating structure with HTML <tr> … <td colspan=""></td> <td rowspan=""></td> </tr>
  47. 47. Creating structure with HTML
  48. 48. Creating structure with HTML <th scope="row" colspan="2"> Team total </th>
  49. 49. Creating structure with HTML <table> <caption> <colgroup span> <col /> <thead> <tbody> <tr> <th scope colspan rowspan> <td colspan rowspan> <tfoot>
  50. 50. Designing tables
  51. 51. Designing tables
  52. 52. Designing tables
  53. 53. Designing tables • Provide a caption
  54. 54. Designing tables • Provide a caption • Identify columns, rows, and headers
  55. 55. Designing tables • Provide a caption • Identify columns, rows, and headers • Enhance readability
  56. 56. Designing tables • Provide a caption • Identify columns, rows, and headers • Enhance readability • Group similar data
  57. 57. Designing tables • Provide a caption • Identify columns, rows, and headers • Enhance readability • Group similar data • Smart defaults
  58. 58. Designing tables • Contrast • Repetition • Alignment • Proximity
  59. 59. Designing tables
  60. 60. Designing tables
  61. 61. Designing tables
  62. 62. Designing tables
  63. 63. Designing tables
  64. 64. - John Maeda, Designer “Simplicity is about subtracting the obvious and adding the meaningful.”
  65. 65. Designing tables • www.darkhorseanalytics.com/blog/ clear-off-the-table/ • www.behance.net/gallery/Designing- Effective-Data-Tables/885004 • understandinggraphics.com/design/ data-table-design/
  66. 66. Adding style with CSS
  67. 67. Adding style with CSS border-collapse: separate; border-spacing: 2px;
  68. 68. Adding style with CSS border-collapse: separate; border-spacing: 10px;
  69. 69. Adding style with CSS border-collapse: collapse; border-spacing: 10px;
  70. 70. Adding style with CSS caption-side: top;
  71. 71. Adding style with CSS caption-side: top-outside;
  72. 72. Adding style with CSS caption-side: bottom;
  73. 73. Adding style with CSS caption-side: right;
  74. 74. Adding style with CSS caption-side: right;
  75. 75. figure { display: table; caption-side: bottom; } figcaption { display: table-caption; } Adding style with CSS
  76. 76. Adding style with CSS vertical-align: middle;
  77. 77. Adding style with CSS .parent { display: table; } .child { display: table-cell; height: 100vh; vertical-align: middle; }
  78. 78. Adding style with CSS th { } tbody th { } tbody th[scope="row"] { } th.special { }
  79. 79. Adding style with CSS colgroup { } col { }
  80. 80. Adding style with CSS colgroup { } col { }
  81. 81. <col class=“points"> .points { background-color: #eee; } Adding style with CSS
  82. 82. Adding style with CSS
  83. 83. Adding style with CSS tbody td:nth-child(5) { background-color: #ddd; }
  84. 84. Adding style with CSS tr:nth-child(even) { background-color: #ddd; }
  85. 85. Adding style with CSS
  86. 86. Adding style with CSS A note about screen readers
  87. 87. layout Adding style with CSS
  88. 88. Adding style with CSS • A note about screen readers
  89. 89. Adapting tables to small screens
  90. 90. Adapting tables to small screens • Shrink
  91. 91. Shrink
  92. 92. Shrink <th><abbr title=“Points”>P</abbr></th> @media (min-width: 64em) { abbr { font-size: 0;} abbr::after { content: attr(abbr); font-size: 1rem;
  93. 93. Shrink
  94. 94. Shrink
  95. 95. Shrink
  96. 96. Shrink
  97. 97. Adapting tables to small screens • Shrink • Linearize or flip ( °□°)
  98. 98. Linearize table, thead, tbody, tfoot, tr, th, td { display: block; }
  99. 99. Linearize
  100. 100. Linearize
  101. 101. Linearize
  102. 102. Linearize td:nth-child(3)::before { content: 'Goals:'; } td:nth-child(4)::before { content: 'Assists:'; }
  103. 103. Linearize .goals::before { content: 'Goals:'; } .assists::before { content: 'Assists:'; } .points::before { content: 'Points:';}
  104. 104. Linearize <td data-head="Goals:">26</td> td[data-head]::before { content: attr(data-head); }
  105. 105. Linearize <td data-head="Goals:">26</td> td[data-head]::before { content: attr(data-head); }
  106. 106. Adapting tables to small screens • Shrink • Linearize or flip ( °□°) • Remove
  107. 107. Remove
  108. 108. Remove
  109. 109. Remove Activity
  110. 110. Remove Nutrition
  111. 111. Adapting tables to small screens • Shrink • Linearize or flip ( °□°) • Remove • Scroll
  112. 112. Scroll
  113. 113. Scroll
  114. 114. Scroll table{ display: block; overflow: scroll; }
  115. 115. Scroll
  116. 116. Adapting tables to small screens • Shrink • Linearize or flip ( °□°) • Remove • Scroll • Replace
  117. 117. Replace
  118. 118. Replace
  119. 119. Replace 0 1.25 2.5 3.75 5 Jan Feb Mar Apr
  120. 120. First quarter profits rose 2.5%. See the 2016 annual report for the breakdown. Replace
  121. 121. Adapting tables to small screens • Shrink • Linearize or flip ( °□°) • Remove • Scroll • Replace • Combo
  122. 122. Combo
  123. 123. Combo
  124. 124. Example http://v6.robweychert.com/blog/2017/10/robtober/
  125. 125. Example
  126. 126. Example
  127. 127. Example
  128. 128. Example
  129. 129. Example
  130. 130. Example
  131. 131. Combo • Shrink • Linearize or flip ( °□°) • Remove • Scroll • Replace • Combo
  132. 132. Case Study
  133. 133. Case Study
  134. 134. Case Study
  135. 135. Case Study • github.com/mdn/browser-compat-data • npm install mdn-browser-compat-data
  136. 136. Case Study
  137. 137. Case Study
  138. 138. Case Study
  139. 139. Case Study <thead> <tr> <th colspan="5">Desktop></th> <th colspan="5">Mobile</th> </tr> <tr> <th>Chrome</th> <th>Firefox</th>
  140. 140. Case Study
  141. 141. Case Study
  142. 142. Case Study
  143. 143. Case Study @media (min-width: 47.9385em) and (max-width: 63.9375em) { … }
  144. 144. Case Study @supports (display: grid) { … }
  145. 145. Case Study .bc-table tr { display: grid; }
  146. 146. Case Study .bc-table-10 tr { grid-template-columns: repeat(10, 1fr); }
  147. 147. Case Study @for $num from 4 through 14{ .bc-table-#{$num} tr { grid-template-columns: repeat(#{$num}, 1fr); } }
  148. 148. Case Study .bc-table-4 tr { grid-template-columns:repeat(4, 1fr);} .bc-table-5 tr { grid-template-columns:repeat(5, 1fr);} .bc-table-6 tr { grid-template-columns:repeat(6, 1fr);}
  149. 149. Case Study
  150. 150. Case Study .bc-table tbody th { grid-column-start: 1; grid-column-end: last-line; }
  151. 151. Case Study
  152. 152. Case Study .platform-desktop, .platform-mobile { grid-column-end: span 5; }
  153. 153. Case Study @for $num from 4 through 14 { th[class^=platform-][colspan=‘#{$num}']{ grid-column-end: span #{$num}; } }
  154. 154. Case Study @for $num from 4 through 14 { th[class^=platform-][colspan=‘#{$num}']{ grid-column-end: span #{$num}; } }
  155. 155. Case Study th[class^=platform-][colspan='4'] { grid-column-end: span 4; } th[class^=platform-][colspan='5'] { grid-column-end: span 5; } th[class^=platform-][colspan='6'] { grid-column-end: span 6; }
  156. 156. Case Study
  157. 157. Case Study
  158. 158. Case Study
  159. 159. Case Study
  160. 160. Case Study table, thead, tbody, tr, th, td { display: block; }
  161. 161. Case Study td.browser-firefox:before { content: ' '; }
  162. 162. Case Study
  163. 163. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens ( °□°)
  164. 164. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens ( °□°)
  165. 165. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens ( °□°)
  166. 166. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens ( °□°)
  167. 167. I Like To Make Websites Everyone Can Use stephaniehobson.ca @stephaniehobson

×