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

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

Post on 11-Apr-2017

3.010 views

Category:

Technology

0 download

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