Flipping Tables: Displaying Data on Small Screens (2016-02)

2,739 views

Published on

Data tables like to break our carefully crafted responsive websites. On smaller screens they mess with us when they won’t reflow nicely. They a bit claustrophobic when they don’t have enough space. Stephanie will talk about what makes a table easy to read, show the code that helps, and offer design suggestions for how to display data when there isn’t a lot of space.

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • Nice deck! PS: text content on Slide 20 looks like definition list :-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,739
On SlideShare
0
From Embeds
0
Number of Embeds
1,887
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Flipping Tables: Displaying Data on Small Screens (2016-02)

  1. 1. Flipping Tables Displaying Data on Small Screens
  2. 2. Tables
  3. 3. Am I right?
  4. 4. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens • Case Study: MDN compatibility tables ( °□°) ━
  5. 5. Sorry,
  6. 6. When to use tables
  7. 7. When to use tables not
  8. 8. When not to use tables
  9. 9. When not to use tables <h5>Players:</h5> <ul> <li>Daniel Sedin</li> <li>Henrik Sedin</li> <li>Jannik Hansen</li> <li>Bo Horvat</li> </ul>
  10. 10. When not to use tables
  11. 11. When not to use tables .players { column-count:2; }
  12. 12. When not to use tables
  13. 13. When not to use tables /* Nicole Sullivan’s Media Object */ <div class="media"> <div class="img"> <img src="" alt="" /> </div> <div class="body"> Henrick Sedin etc. </div> </div>
  14. 14. layout When not to use tables
  15. 15. When to use tables
  16. 16. When to use tables • Sort • Compare • Cross Reference • Calculations
  17. 17. Creating structure with HTML
  18. 18. Creating structure with HTML <table> </table>
  19. 19. Creating structure with HTML
  20. 20. Creating structure with HTML <table> <caption>…</caption> </table>
  21. 21. Creating structure with HTML <table> </table>
  22. 22. Creating structure with HTML <table> <caption>…</caption> <colgroup> <col span=“” class=“”> </colgroup> </table>
  23. 23. Creating structure with HTML
  24. 24. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> </table>
  25. 25. Creating structure with HTML
  26. 26. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tfoot>…</tfoot> </table>
  27. 27. Creating structure with HTML
  28. 28. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tfoot>…</tfoot> <tbody>…</tbody> </table>
  29. 29. Creating structure with HTML
  30. 30. Creating structure with HTML <tr> <th scope=“”></th> <td colspan=“”></td> <td rowspan=“”></td> </tr>
  31. 31. Creating structure with HTML <table> <caption> <colgroup span> <col /> <thead> <tfoot> <tbody> <tr> <th scope colspan rowspan> <td colspan rowspan>
  32. 32. Designing tables
  33. 33. Designing tables
  34. 34. Designing tables • Provide a caption • Identify columns, rows, and headers • Enhance readability • Group similar data • Smart defaults
  35. 35. Designing tables • Contrast • Repetition • Alignment • Proximity
  36. 36. Designing tables
  37. 37. – John Maeda “Simplicity is about subtracting the obvious and adding the meaningful.” Designing tables
  38. 38. Designing tables • www.behance.net/gallery/Designing- Effective-Data-Tables/885004 • understandinggraphics.com/design/ data-table-design/ • www.darkhorseanalytics.com/blog/ clear-off-the-table/
  39. 39. Adding style with CSS
  40. 40. Adding style with CSS border-collapse: collapse; border-spacing: 0;
  41. 41. Adding style with CSS caption-side:bottom;
  42. 42. Adding style with CSS th { } tbody th { } tbody th[scope=“row”] { } th.points { }
  43. 43. Adding style with CSS <colgroup> <col>
  44. 44. tbody td:nth-child(even) { background-color: #ddd; } Adding style with CSS
  45. 45. Adding style with CSS
  46. 46. tr:nth-child(even) { background-color: #ddd; } Adding style with CSS
  47. 47. Adding style with CSS
  48. 48. Adding style with CSS • A note about borders and screen readers
  49. 49. Adapting tables to small screens
  50. 50. Adapting tables to small screens • Shrink
  51. 51. Adapting tables to small screens • Shrink • Flip (linearize)
  52. 52. Adapting tables to small screens
  53. 53. Adapting tables to small screens
  54. 54. Adapting tables to small screens • Shrink • Flip (linearize) • Remove
  55. 55. Adapting tables to small screens
  56. 56. Adapting tables to small screens
  57. 57. Adapting tables to small screens • Shrink • Flip (linearize) • Remove • Scroll
  58. 58. Adapting tables to small screens • Shrink • Flip (linearize) • Remove • Scroll • Replace
  59. 59. Adapting tables to small screens • Shrink • Flip (linearize) • Remove • Scroll • Replace • Combo
  60. 60. Case Study
  61. 61. Case Study
  62. 62. Case Study
  63. 63. Case Study
  64. 64. Case Study
  65. 65. Case Study
  66. 66. Case Study
  67. 67. Case Study
  68. 68. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens • Case Study: MDN compatibility tables ( °□°) ━
  69. 69. I Like to Make Websites Everyone Can Use @stephaniehobson stephaniehobson.ca

×