TIL about CSS and email clients

A presentation at Tech Talk @ Tagesspiegel in January 2020 in Berlin, Germany by Gunnar Bittersmann

Slide 1

Slide 1

TIL about CSS and email clients

Slide 2

Slide 2

T-Mobile.pl

Slide 3

Slide 3

font-family: Abril Text font-family: Abril Text; font-variant-numeric: lining-nums tabular-nums font-family: Abril Display; font-variant-numeric: lining-nums tabular-nums

Slide 4

Slide 4

font-family: Georgia font-family: Georgia Pro; font-variant-numeric: lining-nums tabular-nums font-family: Comic Sans MS; font-variant-numeric: lining-nums tabular-nums

Slide 5

Slide 5

font-family: Georgia font-family: Georgia Pro; font-variant-numeric: lining-nums tabular-nums font-family: Cambria; font-variant-numeric: lining-nums tabular-nums

Slide 6

Slide 6

<table role=”presentation” cellspacing=”0” cellpadding=”0” border=”0” width=”100%”> <tbody> <tr> {% for digit in digits %} {% if loop.last %} <td align=”center” class=”counter” style=”color:#f64040; font-family:Georgia, sans-serif; font-size:220px;”> {{ number }} “</td> {% else %} <td align=”center” class=”counter” style=”border-right:1px solid #898882; color:#f64040; font-family:Georgia, sans-serif; font-size:220px;”> {{ number }} “</td> {% endif %} {% endfor %} “</tr>

Slide 7

Slide 7

<table role=”presentation” cellspacing=”0” cellpadding=”0” border=”0” width=”100%”> <tbody> <tr> {% for digit in digits %} {% if loop.last %} <td align=”center” class=”counter” style=”color:#f64040; font-family:Georgia, sans-serif; font-size:220px;”> {{ number }} “</td> {% else %} <td align=”center” class=”counter” style=”border-right:1px solid #898882; color:#f64040; font-family:Georgia, sans-serif; font-size:220px;”> {{ number }} “</td> {% endif %} {% endfor %} “</tr>

Slide 8

Slide 8

<table role=”presentation” cellspacing=”0” cellpadding=”0” border=”0” width=”100%”> <tbody> ☠ <tr style=”color:#f64040; font-family:Cambria, Times New Roman, serif; font-size:220px”> {% for digit in digits %} {% if loop.last %} <td align=”center” class=”counter”> {{ number }} “</td> {% else %} <td align=”center” class=”counter” style=”border-right:1px solid #898882;”> {{ number }} “</td> {% endif %} {% endfor %} “</tr>

Slide 9

Slide 9

T-Mobile.pl

Slide 10

Slide 10

HAPPY END