Usability testing

Tables

  • Tables are how the web used to be laid out
  • Now, they should only be used for laying out tabluar data
  • e.g. spreadsheets, price comparisons, etc.
  • See this article for a good breakdown of when to use tables
  • Problem: they're hard to make responsive

Tools

How to write tables

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Sign</th>
    </tr>
    <tr>
        <td>Barack</td>
        <td>August 4</td>
        <td>Leo</td>
    </tr>
</table>

Then remove the default styles:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Add some borders and padding to make things easy to read:

td, th {
    border: 1px solid black;
    padding: 10px;
}

Writing newsletters

  • Newsletter layout required two horrible things I've told you never to use: table-based layout and inline styles (i.e. the style= property)
  • This is because of the fragility of webmail programs, who can't support robust HTML emails without risking hackery.

Good tools for building and testing newsletters

Animations

Challenge

Transforms

Challenge

Animations and Transforms Challenge

Examples of amazing animations & transforms