flipping tables: displaying data on small screens (2016-02)
Post on 11-Apr-2017
3.010 views
Embed Size (px)
TRANSCRIPT
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