Flipping Tables: Displaying Data on Small Screens

A presentation at CSS Dev Conf in October 2017 in New Orleans, LA, USA by Stephanie Hobson

Slide 1

Flipping Tables

Displaying Data on Small Screens

#flipdata

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Tables

Slide 12

Slide 13

Am I right?

Slide 14

( ý ° □ °) ý—

Í“Í

Slide 15

• When to use tables ( ý ° □ °) ý—

Í“Í

Slide 16

• When to use tables • Creating structure with HTML ( ý ° □ °) ý—

Í“Í

Slide 17

• When to use tables • Creating structure with HTML

• Designing tables ( ý ° □ °) ý—

Í“Í

Slide 18

• When to use tables • Creating structure with HTML

• Designing tables • Adding style with CSS ( ý ° □ °) ý—

Í“Í

Slide 19

• When to use tables • Creating structure with HTML

• Designing tables • Adding style with CSS • Adapting tables to small screens ( ý ° □ °) ý—

Í“Í

Slide 20

Sorry!

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

When to use tables

Slide 26

When to use tables

Slide 27

When to use tables • Sort • Compare • Cross Reference • Calculations

Slide 28

When to use tables not

Slide 29

When to use tables not

Slide 30

<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

Slide 31

When to use tables not

Slide 32

.players { column-count:2;

} When to use tables not

Slide 33

When to use tables not

Slide 34

img { float: left; } When to use tables not

Slide 35

/* 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

Slide 36

layout When to use tables not

Slide 37

Tables Good • Sort • Compare • Cross Reference • Calculations

Slide 38

layout Tables Bad

Slide 39

Slide 40

Creating structure with HTML

Slide 41

Creating structure with HTML

Slide 42

Creating structure with HTML

Slide 43

Creating structure with HTML

Slide 44

Creating structure with HTML

Slide 45

Creating structure with HTML

Slide 46

Creating structure with HTML

Slide 47

Creating structure with HTML

Slide 48

Slide 49

<a href=“#revenues”> <a href=“#expenses”> <tbody id=“revenues”>… <tbody id=“expenses”> …

Slide 50

Creating structure with HTML

Slide 51

Creating structure with HTML

Slide 52

Creating structure with HTML

Slide 53

Creating structure with HTML

Slide 54

Creating structure with HTML

Slide 55

Creating structure with HTML

<th scope="row" colspan="2"> Team total </th>

Slide 56

Creating structure with HTML

<col />

Slide 57

Designing tables

Slide 58

Designing tables

Slide 59

Slide 60

Designing tables

Slide 61

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

• Enhance readability • Group similar data • Smart defaults

Slide 62

Designing tables • Contrast • Repetition • Alignment • Proximity

Slide 63

Designing tables

Slide 64

Designing tables

Slide 65

John Maeda, Designer “Simplicity is about subtracting the obvious and adding the meaningful.”

Slide 66

Slide 67

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/

Slide 68

Slide 69

Adding style with CSS

Slide 70

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

Slide 71

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

Slide 72

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

Slide 73

Adding style with CSS caption-side: top ;

Slide 74

Adding style with CSS caption-side: top-outside ;

Slide 75

Adding style with CSS caption-side: bottom ;

Slide 76

Adding style with CSS caption-side: right ;

Slide 77

Adding style with CSS caption-side: right ;

Slide 78

figure { display: table;

caption-side: bottom; } figcaption { display: table-caption; } Adding style with CSS

Slide 79

Adding style with CSS vertical-align: middle;

Slide 80

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

Slide 81

Adding style with CSS th { } tbody th { } tbody th[scope="row"] { } th.special { }

Slide 82

Adding style with CSS colgroup { } col { }

Slide 83

.points { background-color: #eee; } Adding style with CSS

Slide 84

Adding style with CSS

Slide 85

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

Slide 86

Adding style with CSS tr:nth-child(even) { background-color: #ddd; }

Slide 87

Adding style with CSS

Slide 88

Adding style with CSS A note about screen readers

Slide 89

layout Adding style with CSS

Slide 90

Adding style with CSS • A note about screen readers

Slide 91

Slide 92

Adapting tables to small screens

Slide 93

Adapting tables to small screens • Shrink

Slide 94

Shrink

Slide 95

Shrink

<th><abbr title=“Points”>P</abbr></th> @media (min-width: 64em ) { abbr { font-size: 0;} abbr::after { content: attr(abbr);

font-size: 1rem;

Slide 96

Shrink

Slide 97

Shrink

Slide 98

Shrink

Slide 99

Shrink

Slide 100

Adapting tables to small screens • Shrink • Linearize or flip ( ý ° □ °) ý—

Í“Í

Slide 101

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

Slide 102

Linearize

Slide 103

Linearize

Slide 104

Linearize

Slide 105

Linearize td:nth-child(3)::before { content: 'Goals:' ; } td:nth-child(4)::before { content: 'Assists:'; }

Slide 106

Linearize .goals ::before { content: 'Goals:'; } .assists ::before { content: 'Assists:'; } .points ::before { content: 'Points:';}

Slide 107

Linearize

<td data-head="Goals:">26</td> td[data-head]::before { content: attr(data-head);

}

Slide 108

Linearize

<td data-head="Goals:">26</td> td[data-head]::before { content: attr(data-head);

}

Slide 109

Adapting tables to small screens • Shrink • Linearize or flip ( ý ° □ °) ý—

Í“Í

• Remove

Slide 110

Remove

Slide 111

Remove

Slide 112

Remove Activity

Slide 113

Remove Nutrition

Slide 114

Adapting tables to small screens • Shrink • Linearize or flip ( ý ° □ °) ý—

Í“Í

• Remove • Scroll

Slide 115

Scroll

Slide 116

Scroll

Slide 117

Scroll table{

display: block;

overflow: scroll;

}

Slide 118

Scroll

Slide 119

Adapting tables to small screens • Shrink • Linearize or flip ( ý ° □ °) ý—

Í“Í

• Remove • Scroll • Replace

Slide 120

Replace

Slide 121

Replace

Slide 122

Replace 0 1.25 2.5 3.75 5 Jan Feb Mar Apr

Slide 123

First quarter profits rose 2.5%. See the 2016 annual report for the breakdown. Replace

Slide 124

Adapting tables to small screens • Shrink • Linearize or flip ( ý ° □ °) ý—

Í“Í

• Remove • Scroll • Replace • Combo

Slide 125

Combo

Slide 126

Combo

Slide 127

Example http://v6.robweychert.com/blog/2017/10/robtober/

Slide 128

Example

Slide 129

Example

Slide 130

Example

Slide 131

Example

Slide 132

Example

Slide 133

Example

Slide 134

Combo • Shrink • Linearize or flip ( ý ° □ °) ý—

Í“Í

• Remove • Scroll • Replace • Combo

Slide 135

Slide 136

Case Study

Slide 137

Case Study

Slide 138

Case Study

Slide 139

Case Study • github.com/mdn/browser-compat-data

• npm install mdn-browser-compat-data

Slide 140

Case Study

Slide 141

Case Study

Slide 142

Case Study

Slide 143

Case Study

<thead> <tr> <th colspan="5">Desktop></th> <th colspan="5">Mobile</th> </tr> <tr> <th>Chrome</th> <th>Firefox</th>

Slide 144

Case Study

Slide 145

Case Study

Slide 146

Case Study

Slide 147

Case Study @media

(min-width: 47.9385em) and (max-width: 63.9375em) {

… }

Slide 148

Case Study @supports (display: grid) {

… }

Slide 149

Case Study .bc-table tr {

display: grid; }

Slide 150

Case Study .bc-table-10 tr { grid-template-columns:

repeat(10 , 1fr); }

Slide 151

Case Study @for $num from 4 through 14{ . bc-table-#{$num} tr { grid-template-columns:

repeat(#{$num}, 1fr); } }

Slide 152

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);}

Slide 153

Case Study

Slide 154

Case Study .bc-table tbody th {

grid-column-start: 1; grid-column-end: last-line;

}

Slide 155

Case Study

Slide 156

Case Study .platform -desktop, .platform-mobile { grid-column-end: span 5 ; }

Slide 157

Case Study @for $num from 4 through 14 { th[class^=platform-][colspan=‘ #{$num}']{

grid-column-end: span #{$num};

} }

Slide 158

Case Study @for $num from 4 through 14 { th[class^=platform-][colspan=‘ #{$num}']{

grid-column-end: span #{$num};

} }

Slide 159

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; }

Slide 160

Case Study

Slide 161

Case Study

Slide 162

Case Study

Slide 163

Case Study

Slide 164

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

Slide 165

Case Study td.browser-firefox:before { content: ' ';
}

Slide 166

Case Study

Slide 167

Slide 168

• When to use tables • Creating structure with HTML

• Designing tables • Adding style with CSS • Adapting tables to small screens ( ý ° □ °) ý—

Í“Í

Slide 169

Slide 170

I Like To Make Websites Everyone Can Use

stephaniehobson.ca

@stephaniehobson