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

159
Flipping Tables Displaying Data on Small Screens

Transcript of Flipping Tables: Displaying Data on Small Screens (2016-08)

Page 1: Flipping Tables: Displaying Data on Small Screens (2016-08)

Flipping TablesDisplaying Data on Small Screens

Page 2: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 3: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 4: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 5: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 6: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 7: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 8: Flipping Tables: Displaying Data on Small Screens (2016-08)

Tables

Page 9: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 10: Flipping Tables: Displaying Data on Small Screens (2016-08)

Am I right?

Page 11: Flipping Tables: Displaying Data on Small Screens (2016-08)

(╯°□°)╯︵ ┻━┻

Page 12: Flipping Tables: Displaying Data on Small Screens (2016-08)

(╯°□°)╯︵ ┻━┻

Page 13: Flipping Tables: Displaying Data on Small Screens (2016-08)

• When to use tables

(╯°□°)╯︵ ┻━┻

Page 14: Flipping Tables: Displaying Data on Small Screens (2016-08)

• When to use tables• Creating structure with HTML

(╯°□°)╯︵ ┻━┻

Page 15: Flipping Tables: Displaying Data on Small Screens (2016-08)

• When to use tables• Creating structure with HTML• Designing tables

(╯°□°)╯︵ ┻━┻

Page 16: Flipping Tables: Displaying Data on Small Screens (2016-08)

• When to use tables• Creating structure with HTML• Designing tables• Adding style with CSS

(╯°□°)╯︵ ┻━┻

Page 17: Flipping Tables: Displaying Data on Small Screens (2016-08)

• When to use tables• Creating structure with HTML• Designing tables• Adding style with CSS• Adapting tables to small screens

(╯°□°)╯︵ ┻━┻

Page 18: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 19: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 20: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 21: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

Page 22: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

Page 23: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

• Sort

Page 24: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

Page 25: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

• Sort• Compare

Page 26: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

Page 27: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

• Sort• Compare• Cross Reference

Page 28: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

Page 29: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

• Sort• Compare• Cross Reference• Calculations

Page 30: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

Page 31: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tables

• Sort• Compare• Cross Reference• Calculations

Page 32: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tablesnot

Page 33: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tablesnot

Page 34: Flipping Tables: Displaying Data on Small Screens (2016-08)

<h5>Players:</h5> <ul> <li>Daniel Sedin</li> <li>Henrik Sedin</li> <li>Jannik Hansen</li> <li>Bo Horvat</li> </ul>

When to use tablesnot

Page 35: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tablesnot

Page 36: Flipping Tables: Displaying Data on Small Screens (2016-08)

.players { column-count:2; }

When to use tablesnot

Page 37: Flipping Tables: Displaying Data on Small Screens (2016-08)

When to use tablesnot

Page 38: Flipping Tables: Displaying Data on Small Screens (2016-08)

/* Nicole Sullivan’s Media Object */ <div class="media"> <div class="img"> <img src="" alt="" /> </div> <div class="body"> … </div> </div>

When to use tablesnot

Page 39: Flipping Tables: Displaying Data on Small Screens (2016-08)

layout

When to use tablesnot

Page 40: Flipping Tables: Displaying Data on Small Screens (2016-08)

Tables Good

• Sort• Compare• Cross Reference• Calculations

Page 41: Flipping Tables: Displaying Data on Small Screens (2016-08)

layout

Tables Bad

Page 42: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 43: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

Page 44: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

<table>

</table>

Page 45: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

Page 46: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

<table> <caption>…</caption> </table>

Page 47: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

<table>

</table>

Page 48: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

<table> <caption>…</caption> <colgroup> <col span=“” class=“”> </colgroup> </table>

Page 49: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

Page 50: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

<table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tbody>…</tbody> <tfoot>…</tfoot> </table>

Page 51: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 52: Flipping Tables: Displaying Data on Small Screens (2016-08)

<a href=“#revenues”>

<tbody id=“revenues”>

Page 53: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

<table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tbody>…</tbody> <tfoot>…</tfoot> </table>

Page 54: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

Page 55: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

<tr> <th scope=“”></th> <td colspan=“”></td> <td rowspan=“”></td> </tr>

Page 56: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

Page 57: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

<th scope=“row” colspan=“2”> Team total </th>

Page 58: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML<table> <caption> <colgroup span> <col /> <thead> <tbody> <tr> <th scope colspan rowspan> <td colspan rowspan> <tfoot>

Page 59: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 60: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables

Page 61: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables

Page 62: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables

Page 63: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables• Provide a caption

Page 64: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables• Provide a caption• Identify columns, rows, and headers

Page 65: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables• Provide a caption• Identify columns, rows, and headers• Enhance readability

Page 66: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables• Provide a caption• Identify columns, rows, and headers• Enhance readability• Group similar data

Page 67: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables• Provide a caption• Identify columns, rows, and headers• Enhance readability• Group similar data• Smart defaults

Page 68: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables• Contrast• Repetition• Alignment• Proximity

Page 69: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables

Page 70: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables

Page 71: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables

Page 72: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables

Page 73: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables

Page 74: Flipping Tables: Displaying Data on Small Screens (2016-08)

John Maeda, Designer

“Simplicity is about subtracting the obvious and adding the meaningful.”

Page 75: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 76: Flipping Tables: Displaying Data on Small Screens (2016-08)

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/

Page 77: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 78: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSS

Page 79: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSSborder-collapse:separate; border-spacing:2px;

Page 80: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSSborder-collapse:separate; border-spacing:10px;

Page 81: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSSborder-collapse:collapse; border-spacing:10px;

Page 82: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSScaption-side:top;

Page 83: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSScaption-side:top-outside;

Page 84: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSScaption-side:bottom;

Page 85: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSScaption-side:right;

Page 86: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSScaption-side:right;

Page 87: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSSvertical-align: middle;

Page 88: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSS.parent{display: table;} .child{ display: table-cell; height: 100vh; vertical-align: middle;

Page 89: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSSth { } tbody th { } tbody th[scope=“row”] { } th.points { }

Page 90: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSScolgroup { } col { }

Page 91: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSScolgroup { } col { }

Page 92: Flipping Tables: Displaying Data on Small Screens (2016-08)

tbody td:nth-child(5){ background-color:#ddd; }

Adding style with CSS

Page 93: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSS

tr:nth-child(even){ background-color:#ddd; }

Page 94: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSS

Page 95: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSS• A note about screen readers

Page 96: Flipping Tables: Displaying Data on Small Screens (2016-08)

layout

Adding style with CSS

Page 97: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSS• A note about screen readers

Page 98: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 99: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 100: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

• Shrink

Page 101: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 102: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 103: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 104: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 105: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 106: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

• Shrink• Linearize or flip (╯°□°)╯︵ ┻━┻

Page 107: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 108: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 109: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 110: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

• Shrink• Linearize or flip (╯°□°)╯︵ ┻━┻• Remove

Page 111: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 112: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 113: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 114: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 115: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

• Shrink• Linearize or flip (╯°□°)╯︵ ┻━┻• Remove• Scroll

Page 116: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 117: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 118: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 119: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

• Shrink• Linearize or flip (╯°□°)╯︵ ┻━┻• Remove• Scroll• Replace

Page 120: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 121: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 122: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

• Shrink• Linearize or flip (╯°□°)╯︵ ┻━┻• Remove• Scroll• Replace• Combo

Page 123: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 124: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 125: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

• Shrink• Linearize or flip (╯°□°)╯︵ ┻━┻• Remove• Scroll• Replace• Combo

Page 126: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 127: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 128: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 129: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 130: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 131: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 132: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

<thead> <tr> <td></td> <th colspan=“5”>Desktop></th> <th colspan=“5”>Mobile</th> </tr> <tr> …

Page 133: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 134: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 135: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 136: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

table,thead,tbody,tr{ display: flex;}

th,td{ display: block;}

Page 137: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 138: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

table,thead,tbody,tr, th, td{ display: block;}

td:nth-child(2):before{

content: ‘💻’;}

Page 139: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 140: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 141: Flipping Tables: Displaying Data on Small Screens (2016-08)

• When to use tables• Creating structure with HTML• Designing tables• Adding style with CSS• Adapting tables to small screens

(╯°□°)╯︵ ┻━┻

Page 142: Flipping Tables: Displaying Data on Small Screens (2016-08)

• When to use tables• Creating structure with HTML• Designing tables• Adding style with CSS• Adapting tables to small screens

(╯°□°)╯︵ ┻━┻

Page 143: Flipping Tables: Displaying Data on Small Screens (2016-08)

• When to use tables• Creating structure with HTML• Designing tables• Adding style with CSS• Adapting tables to small screens

(╯°□°)╯︵ ┻━┻

Page 144: Flipping Tables: Displaying Data on Small Screens (2016-08)

• When to use tables• Creating structure with HTML• Designing tables• Adding style with CSS• Adapting tables to small screens

(╯°□°)╯︵ ┻━┻

Page 145: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 146: Flipping Tables: Displaying Data on Small Screens (2016-08)

I Like To Make Websites Everyone Can Usestephaniehobson.ca@stephaniehobson

Page 147: Flipping Tables: Displaying Data on Small Screens (2016-08)

figure { display: table; caption-side: bottom; }

figcaption { display: table-caption; }

Page 148: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adding style with CSS• nth-child zebra striping• column styling• vertical-align, white-space• :hover highlighting

Page 149: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables

Page 150: Flipping Tables: Displaying Data on Small Screens (2016-08)

Designing tables

Page 151: Flipping Tables: Displaying Data on Small Screens (2016-08)

Case Study

Page 152: Flipping Tables: Displaying Data on Small Screens (2016-08)

Notes

Page 153: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

<table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> </table>

Page 154: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

Page 155: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

<table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tbody>…</tbody> </table>

Page 156: Flipping Tables: Displaying Data on Small Screens (2016-08)

Creating structure with HTML

Page 157: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens

Page 158: Flipping Tables: Displaying Data on Small Screens (2016-08)
Page 159: Flipping Tables: Displaying Data on Small Screens (2016-08)

Adapting tables to small screens