flipping tables: displaying data on small screens (2016-02)

Flipping TablesDisplaying Data on Small Screens

Tables

Am I right?

When to use tables Creating structure with HTML Designing tables Adding style with CSS Adapting tables to small screens Case Study: MDN compatibility tables

( )

Sorry,

When to use tables

When to use tablesnot

When not to use tables

When not to use tables

Players: Daniel Sedin Henrik Sedin Jannik Hansen Bo Horvat

When not to use tables

When not to use tables

.players { column-count:2; }

When not to use tables

When not to use tables

/* Nicole Sullivans Media Object */ Henrick Sedin etc.

layout

When not to use tables

When to use tables

When to use tables

Sort Compare Cross Reference Calculations

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Creating structure with HTML

Designing tables

Designing tables

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

Designing tables Contrast Repetition Alignment Proximity

Designing tables

John Maeda

Simplicity is about subtracting the obvious and adding the

meaningful.

Designing tables

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/

Adding style with CSS

Adding style with CSSborder-collapse: collapse; border-spacing: 0;

Adding style with CSScaption-side:bottom;

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

Adding style with CSS

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

Adding style with CSS

Adding style with CSS

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

Adding style with CSS

Adding style with CSS

Adding style with CSS A note about borders and screen

readers

Adapting tables to small screens

Adapting tables to small screens Shrink

Adapting tables to small screens Shrink Flip (linearize)

Adapting tables to small screens

Adapting tables to small screens

Adapting tables to small screens Shrink Flip (linearize) Remove

Adapting tables to small screens

Adapting tables to small screens

Adapting tables to small screens Shrink Flip (linearize) Remove Scroll

Adapting tables to small screens Shrink Flip (linearize) Remove Scroll Replace

Adapting tables to small screens Shrink Flip (linearize) Remove Scroll Replace Combo

Case Study

Case Study

Case Study

Case Study

Case Study

Case Study

Case Study

Case Study

When to use tables Creating structure with HTML Designing tables Adding style with CSS Adapting tables to small screens Case Study: MDN compatibility tables

( )

I Like to Make Websites Everyone Can Use@stephaniehobsonstephaniehobson.ca