TIL about CSS and email clients

Lightning talk on how (not) to mess up with CSS in email clients

Transcript

1. TIL
   about CSS and email clients
   

   View Slide

2. T-Mobile.pl
   

   View 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
   

   View 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
   

   View 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
   

   View Slide

6. 
   
   
   {% for digit in digits %}
   {% if loop.last %}
   style="color:#f64040; font-family:Georgia, sans-serif; font-size:220px;">
   {{ number }}
   "
   {% else %}
   style="border-right:1px solid #898882;
   color:#f64040; font-family:Georgia, sans-serif; font-size:220px;">
   {{ number }}
   "
   {% endif %}
   {% endfor %}
   "
   

   View Slide

7. 
   
   
   {% for digit in digits %}
   {% if loop.last %}
   style="color:#f64040; font-family:Georgia, sans-serif; font-size:220px;">
   {{ number }}
   "
   {% else %}
   style="border-right:1px solid #898882;
   color:#f64040; font-family:Georgia, sans-serif; font-size:220px;">
   {{ number }}
   "
   {% endif %}
   {% endfor %}
   "
   

   View Slide

8. 
   
   
   {% for digit in digits %}
   {% if loop.last %}
   
   {{ number }}
   "
   {% else %}
   style="border-right:1px solid #898882;">
   {{ number }}
   "
   {% endif %}
   {% endfor %}
   "
   ☠
   

   View Slide

9. T-Mobile.pl
   

   View Slide

10. HAPPY
    END
    

    View Slide