CodeSchool UnmaskingHTMLCodeSchool UnmaskingHTMLEmailsEmails

Level 1 - Clients and Markup
The design for the email well build
In this level...
The skills youll need to compete
Power Moves
HTML and CSS
Media queries
Signature Move
Using external resources
An HTML email base

email.html
Front-end Foundations
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Email Base</title>
<meta name="viewport" content="width=device-width" />
</head>
<body style="margin: 0; padding: 0;">

Journey Into Mobile
</body>
</html>
Email clients
Web-based
Email Client
Native
HTML email clients preprocess HTML

In email clients, HTML is altered by a preprocessor before they are rendered.
Website
HTML
Rendering Engine
Browser
Rendering Engine
Email Client
Determines how your HTML is displayed
Email
HTML
Changes your HTML
Preprocessor
Preprocessors are your strongest opponents

The preprocessor is intended to protect the client from harmful code.
Power Moves
Removes or changes HTML tags
Removes or changes CSS
Overrides styles with app CSS
Changes the entire document structure
Signature Move
Removes all JavaScript
Gmail has the most aggressive preprocessor

The popularity of Gmail dictates much of how HTML and CSS must be written.
Power Moves
Removes any <link> tags
Overrides styles with app CSS
Changes the entire document structure
Signature Move
Removes <style> tags
Adding content to an email

email.html
Base HTML
Email content
<!DOCTYPE html>
<html>
<head>
</head>
<img src="http://example.org/images/stars.png"/>
</body>
</html>
Images need to have absolute URLs

email.html
<!DOCTYPE html>
<html>
<head>
</head>
<img src="http://example.org/images/stars.png"/>
</body>
</html>
Absolute URL
For brevity in examples, well write like this: src= "...stars.png"
Adding copy to an email

email.html
Email content
<!DOCTYPE html>
<html>
<head>
</head>
<img src="...stars.png"/>
<h1>Lucha Libre!</h1>
<p>Experience 3 Bone-Crushing Hours</p>
</body>
</html>
Code examples
To focus on specific code, well use to represent additional code that isnt shown.
email.html
Opening HTML
Closing HTML
...
</body>
...
Testing in a browser vs. an email client

The results will vary in clients with dierent preprocessors and rendering engines.
email.html
Chrome rendering engine (Blink)
...
...
Gmails preprocessor
Text styles are different
Inspecting elements with browser dev tools
Right-click for developer tools
Inspecting our email locally

Default styles set by Chrome
Our code
Our code in the Gmail web application
Our code is way down here!
Our code after Gmails preprocessor

Styles from gmail.com
inline body styles

cached image
H1
p
All your code are belong to clients

Our inline styles are gone!
Writing CSS for emails

Without support for external stylesheets or <style> tags, inline styles must be used.
CSS in a linked stylesheet
CSS in a <style> tag
Inline styles
Well use inline styles to create this header
Styling the image with inline styles

email.html
...
<img src="...stars.png"
style="
background-color: #5b3885;
display: block;
max-width: 100%;
padding: 12px 0;"
width="600" />
<h1>...
<p>...
...
Add a style attribute with CSS properties inline
In Gmail, the image displays the styles
Styling the H1
email.html
...
<h1 style="
color: #7fcce9;
font-family: 'Arial Black';
font-size: 74px;
line-height: 74px;
margin: 0;
text-transform: uppercase;">
Lucha Libre!</h1>
...
Reset styles are included inline
Inline styles have a higher specificity than Gmails stylesheet
Styling the paragraph

email.html
...
<p style="
background: #5b3885;
color: #fcfbfd;
font-size: 26px;
line-height: 26px;
margin: 0;
padding: 10px 0;
Experience 3 Bone-Crushing Hours
</p>
...
Container, font, and reset styles
Content needs a container

We want these aligned with an equal width
Adding a container
email.html
...
<div style="
margin: 0 auto;
max-width: 600px;">
<img ... >
<h1 ... >
<p ... >
</div>
...
The content is contained and the container is centered
Centering the text

email.html
...
<div style="
margin: 0 auto;
max-width: 600px;
text-align: center;">
<img ... >
<h1 ... >
<p ... >
</div>
...
Text is now centered
Adding a background
email.html
...
<div style="
background-color: #211f31;
background-image: url('...bgtexture.png');">
<div ... >
<img ... >
<h1 ... >
<p ... >
</div>
</div>
...
Testing, testing, testing
Level 2 - Tables for Layout
Automated testing in multiple clients

Using a service, we see results for multiple clients very quickly.
Outlook 2003 and 2013
The Microsoft Word rendering engine

Outlook 2007, 2010, and 2013 use Word to render HTML emails.
IE
Word
2003
2013
Width is incorrect
Padding is missing
Word lacks box model and position support

The necessities for controlling layout are not supported on most HTML elements in Word.
Height
Display
Float
Position
Width
Padding
Outlook 2007-2013
Not supported on <div> and <p>
Use tables for layout when CSS isnt available

With Word as a rendering engine, layout CSS doesnt exist.
Note: Prior to the creation of CSS, HTML <table> elements were o!en used
as a method for page layout. This usage has been discouraged since HTML 4,
and the <table> element should not be used for layout purposes.
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
Use simplied tables for layout

Simplification means only using <table>, <tr>, and <td>.
<table>
<thead>
<th>Rank</th>
...
<tbody>
<tr>
<td>#1</td>
...
<table>
<tr>
<td>Rank</td>
...
<tr>
<td>#1</td>
...
No default type or background colors
Use simplied tables for layout

Simplification means only using <table>, <tr>, and <td>.
<table>
<tr>
<td>Rank</td>
No default type or background colors
<tr>
...
Reset default spacing

Default values in clients will aect layouts, but attributes can be used to normalize them across clients.
2px cellpadding
2px cellspacing
No extra spacing
<table border="0"
cellpadding="0"
cellspacing="0">
<tr>
<td>Rank</td>
...
2px cellspacing
Use single cell tables for containers

This basic table will be used to contain content.
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td>

</td>
</tr>
</table>
For brevity in examples, well write like this: "<table ... >"
Adding content to tables

All content must go into a table cell.
email.html
...
<table ... width="600">
<tr>
<td>
<div ... >
<div ... >
<img ... />
<h1 ... >Lucha Libre</h1>
<p ... >Experience 3 BoneCrushing Hours</p>
</div>
</div>
</td>
</tr>
</table>
...
Image styles are not rendered
Elements need to be separated into rows and cells
1 table
3 rows, each with 1 cell
Organize content with table elements

Use rows and table cells for separating content.
email.html
...
<tr>
<td>
<img src="...stars.png" width="600"/>
</td>
</tr>
<tr>
<td>
Lucha Libre!
instead of <h1>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
...
Base styles to build upon
Instead of <p>
Organize content with table elements

Use rows and table cells for separating content.
email.html
...
<tr>
<td>
<img src="...stars.png" width="600"/>
</td>
</tr>
...
Styling the stars image

Styles that Word doesnt support for images are set on the table cell.
email.html
...
<table ... >
<tr>
<td style="background-color: #5b3885;
padding: 12px 0;" >
<img src="...stars.png"
style="display: block;
max-width: 100%;"
width="600" />
Be
cautious
of
layout
CSS
that
could
impact
other
clients
</td>
</tr>
...
Styling a header without using <H1>

Type styles are applied to the containing cell.
email.html
...
<table ... >
...
<tr>
<td style="
color: #7fcce9;
font-size: 74px;
line-height: 74px;
padding: 5px 0 10px 0;
Lucha Libre!</td>
</tr>
...
Styling text in a container

Type and container styles are applied to the table cell.
email.html
...
<table ... >
...
<tr>
<td style="
background: #5b3885;
color: #fcfbfd;
font-size: 26px;
line-height: 26px;
padding: 10px 0;
Experience 3 Bone-Crushing
Hours</td>
</tr>
...
Centering all text

Some styles that can be applied to all text can be applied to the container table.
email.html
...
<table border="0"
cellpadding="0"
cellspacing="0"
style="text-align: center;"
width="600">
...
</table>
...
Be cautious of client-applied styles.
Some webmail clients add text styles to cells

Gmail sets the font family to Arial and AOL sets cell color to black.
Gmail sets Arial as a font family
AOL sets the color to black
Aligning the content table

The HTML attribute align is used to position tables in their containing element.
email.html
...
<table ...
align="center"
border="0"
cellpadding="0"
cellspacing="0"
width="600">
...
</table>
...
Use align instead of margin
Table is centered
Adding a background
Use a wrapper table around the content with the background.
email.html
...
<body ... >
<table ...
style="
background-color: #211f31;
background-image: url('bgtexture.png');"
width="100%" >
<tr>
<td>
<table ... >
...
</td>
</tr>
Our
content
table
with
3
rows
</table>
</body>
...
Test results with tables

Layout issues are fixed in all clients.
Well fix line height later
Level 2 - Section 2
Each section should use a new table
Table
Table
Table
Table
Table
Use a table for the example image

The image is dierent from the other content, so it gets its own table.
email.html
Wrapper table for background
...
Header content table
<table ... >
<table ... >
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
width="600">
<tr>
<td>
<img src="...luchadors.png"
max-width: 100%;"
width="600" />
</td>
</tr>
</table>
...
Creating vertical space between tables

Margin is not supported in all clients.
Margin
Outlook.com
We want 20px of space here
Use padding to separate content

Padding has better support than margin.
email.html
...
<table ... >
<tr>
<td style="padding-top: 20px;">
max-width: 100%;"
width="600" />
</td>
</tr>
</table>
...
Align content using table cells

Use a wrapper table with 2 cells to align content automatically.
email.html
...
<table ... >
<tr>
<td>

</td>
<td>

</td>
</tr>
</table>
...
Adding a nested table to the rst column

The content in the column needs to be in its own table for styling.
email.html
...
<table ... >
<tr>
<td>
<table bgcolor="#5b3885"
style="..."
width="290">
<tr>
<td>
<img ... />
</td>
</tr>
</table>
</td>
<td>
...
content table
Adding a nested table to the second column

The content in the column needs to be in its own table for styling.
email.html
...
<table ... >
<tr>
<td>
<table ... >
...
</td>
<td>
<table bgcolor="#0089b4"
style="..."
width="290">
<tr>
<td>
<img ... />
</td>
</tr>
</table>
</td>
...
Separate columns with cell padding

Add opposing padding to each wrapper cell to create a 20px gutter.
email.html
...
<table ... >
<tr>
<td style="padding-right: 10px;">
<table bgcolor="#5b3885" ... >
...
</td>
<td style="padding-left: 10px;">
<table bgcolor="#0089b4" ... >
...
</td>
</tr>
</table>
...
Styling the column one example content

Styles are applied to the cells for each bit of content.
<tr>
<td style="
font-size: 48px;
line-height: 48px;
padding-top: 20px;">
• 16 •
</td>
</tr>
<tr>
<td>
<img alt="ornamentation"
height="15"
src="...ornamentation.png"
style="display: block;"
width="290" />
</td>
</tr>
<tr>
<td style="
font-family: Arial;
font-size: 30px;
font-weight: bold;
line-height: 30px;
padding-bottom: 20px;
padding-top: 5px;">
de Junio
</td>
</tr>
Styling the column two example content

An additional table is nested to provide the border.
<tr>
<td>
<img alt="ornamentation"
height="15"
src="...ornamentation.png"
style="display: block;"
width="290" />
</td>
</tr>
<tr>
<td style="
font-family: Arial, sans-serif;
font-size: 22px;
font-weight: bold;
line-height: 22px;
padding-top: 15px;">
Open to the public
</td>
</tr>
<tr>
<td>
...
width="236">
<tr>
<td height="4">
</td>
</tr>
<tr>
<td bgcolor="#fcfbfd"
height="3">
</td>
</tr>
</table>
</td>
</tr>
Styling a cell with multiple font sizes

Apply text styles to <span> elements.
email.html
<tr>
<td style="font-family: Arial;
font-size: 14px;
font-weight: bold;
line-height: 14px;
padding-top: 5px;">
<span style="font-family: 'Arial Black';
font-size: 28px;
line-height: 28px;">
Adults</span>
<span style="font-family: 'Arial Black';
font-size: 32px;
15</span>
pesos
</td>
</tr>
Font family and size
The layout tests successfully in Outlook clients
Level 3 - Mucho Media Queries
Problem: Fixed widths cause zoom

To assist with reading, iOS mail will zoom out if there are widths greater than the viewport.
320px container
600px table triggers zoom to fit
Solution: Use a class and a full percentage width

Use 100% width for fixed width tables.
email.html
...
<head>
<style>
.width-full {
width: 100% !important; }
</style>
Width is now 100%
</head>
...
...
<body ... >
<table ... class="width-full" width="600">
...
...
...
</body>
...
Using max-width media queries

Override styles up to the inline width of the container.
email.html
...
<style>
@media screen and (max-width: 600px) {
.width-full {
width: 100% !important; } }
</style>
...
Adding spacing to the sides of the table

Add le! and right padding to the cell of the main wrapper table.
email.html
...
<body ... >
<table ... class="width-full" width="100%">
<tr>
<td style="padding: 0 10px;">
...
10px spacing
Problem: The 2 columns need to stack

We need a way to override the default behavior for the table cells.
We want the 2
cells to stack
The default alignment

is horizontal
Solution: Use a class to force stacking

Set the table cells to display block and 100% width.
email.html
...
<style>
@media screen and (max-width: 600px {
...
.stack-column {
display: block !important;
</style>
...
<body>
<td class="stack-column"
style="padding-right: 10px;">
...
style="padding-left: 10px;">
...
...
Problem: The stacked columns are misaligned

We need to remove the padding that is applied at full width.
10px padding right

10px padding left
Solution: Add a property to reset padding

Set padding to 0 for the stacked columns.
email.html
...
<style>
...
.stack-column {
display: block !important;
padding: 0 !important;
</style>
...
...
...
...
Forces 0 padding
Problem: The stacked columns need vertical space

There needs to be padding to separate the 2 tables.
We want 20px of space
Solution: Use a class to add top padding

Add padding-top back to the second column.
email.html
...
<style>
...
.stack-column-two {
padding-top: 20px !important; } }
</style>
...
...
<td class="stack-column stack-column-two"
...
...
Adds 20px
Problem: Font is incorrect

Arial Black is not available on all operating systems.
Arial Black is missing
Solution: Add well-supported fonts

Update the font stack and style for all instances of Arial Black.
email.html
...
<td style="color: #7fcce9;
font-family: 'Arial Black','GillSans-Bold',
'Arial Bold', Arial, sans-serif;
font-size: 74px;
line-height: 74px;
padding: 5px 0 10px 0;
Lucha Libre!</td>
...
<td ...>Experience 3 Bone-Crushing Hours</td>
...
<td ...>• 16 •</td>
...
<td ...><span ... >Adults</span>...</td>
...
<td ...><span ... >Ninos</span>...</td>
Problem: Font and spacing is large

The size of the text and the space between it should be reduced.
We want these to fit on one line
Solution: Reduce font size for small screens

Add a class and style for all text that needs to be resized.
email.html
...
Text is now one line
...
@media screen and (min-width: 321px)
and (max-width: 375px) {
.email-title {
font-size: 42px !important;
line-height: 42px !important; }
.email-slogan {
... }
...
<td ... class="email-title">
Lucha Libre!
...
<td ... class="email-slogan">
...
Reduce padding for small screens

Use classes to override inline padding styles.
email.html
...
...
.email-stars {
padding: 5px 0 !important; }
.email-title {
padding: 2px 0 3px !important; }
... }
...
<td ... class="email-stars">
<img src="...stars.png" ... />
...
<td ... class="email-title">
Lucha Libre!
...
Level 4 - Targeting Specic Clients
Word-based rendering engines have issues

2007
2010
Text is too big
Line height is too big
Outlook 2013-specic issues

2013
Line height is too big
Target specic Outlook versions

Conditional comments are used to execute code in specified versions of Outlook.
Outlook 2000 - Version 9

All Outlook


Outlook Using Word


Target specic Outlook versions

Conditional comments are used to execute code in specified versions of Outlook.

Outlook Using Word

...
<![endif]-->
Adjusting font size in Outlook 2007 and 2010

Target Outlook 12 and 14 to reduce the font size with CSS.
2007 and later
email.html
2010 and earlier
...

...
2007
line-height is too big
2010
Correct line height with a vendor property

There is a special Outlook property that can help fix line height problems
2007
email.html
....
<style>
td {
mso-line-height-rule: exactly; }
</style>
<![endif]-->
...
Vendor property
This property is only consistent when
applied to table elements.
Line height is better
2010
Adjust padding based on line height

The title text shi!ed to the top in the example.
Too much space
email.html
....
<style>
...
.email-title {
padding-bottom: 0 !important; }
</style>
<![endif]-->
...
Clipping can occur on inline elements

The Word preprocessor ignores line height on inline elements.
email.html
14px is being applied to the spans
<td style="...
font-size: 14px;
<span class="email-tickets-category"
style="...
font-size: 28px;
Adults</span>
<span class="email-tickets-price"
style="...
font-size: 32px;
15</span>
pesos
</td>
These line heights are ignored

because we set mso-exactly
Identify the largest value
Set the containing cells line height

Add a class to the containing elements and line height for the Word preprocessor.
email.html
<style>
...
.email-tickets {
</style>
<![endif]-->
...
<td class="email-tickets">
>
<span ...>Adults</span>
<span ...> 15</span> pesos
</td>
...
<td class="email-tickets">
>
<span ...>Ninos</span>
<span ...> 10</span> pesos
</td>
...
Outlook 2013 and empty cells

If a cell is empty, Outlook 2013 ignores the height.
2013
email.html
...
<tr>
<td height="4"
If the cell is empty
style="font-size: 4px;
line-height: 4px;">

</td>
Adding
a
non-breaking
space
</tr>
fixes
the
layout
issue
<tr>
<td bgcolor="#fcfbfd"
height="3"
If the cell has
line-height: 3px;">
anything
in
it

</td>
Adding a non-breaking space
</tr>
fixes the layout issue
...
2013
Outlook 2013 applies line height to images

Font size and line height need to be set to the height of the image to avoid gaps.
Mind the gap
2013
email.html
...
<td style="font-size: 18px;
<img ... />
</td>
...
<td style="font-size: 18px;
<img ... />
</td>
...
2013
Our email with conditional styles
Level 4 - Section 2
Adding a button
The necessary properties to style a button are not supported by the Word preprocessor.
email.html
...
<td style="padding-top: 30px;">
<a href="http://example.org"
style="background-color: #886cac;
border: 2px solid #000000;
border-radius: 6px;
color: #ffffff;
display: block;
font-size: 20px;
font-weight: bold;
line-height: 250%;
text-decoration: none;
text-transform: uppercase;
width: 260px;">
Buy Tickets</a>
Padding is missing
...
Try VML
Vector Markup Language
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word">
Generating button code using buttons.cm

Buttons.cm generates code for the button with a conditional comment for using VML.
If Microsoft Office,
use VML and HTML
Other wise, use

only HTML
Use the generated code for buttons

Replace the original button code with the code for the button.
email.html
...
<div>

These dont match
</div>
our design
...
Step 1: Set styles on the center tag

email.html
...
<div>

</div>
...
The changes are only visible in
Outlook using Word
Step 2: Set styles on the anchor tag

email.html
...
<a href="http://example.org"
style="background-color: #886cac;
border: 1px solid #000000;
border-radius: 6px;
color: #ffffff;
display: inline-block;
font-size: 20px;
font-weight: bold;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width:260px;
mso-hide:all;">
Buy Tickets</a>
Hide from Word
...
Our email with conditional content
Level 4 - Section 3
New example additions
New table
3 rows
1 cell in each row
Some preprocessors add links as a feature

email.html
...
<tr>
<td align="center"
class="email-phone-number"
style="color: #ffffff;
font-family: Arial,
sans-serif;
font-weight: bold;
padding-bottom: 30px;" >
Or, call +12 34 5678 9012
</td>
</tr>
...
Our code is text
An anchor added by Apples preprocessor

Or, call <a href="tel:+123456789012">+12 34 5678 9012</a>
The default link

color doesnt match
our design
Add a global link style

The clients that add links generally support CSS in the head as well.
email.html
...
<style>
...
a {
color: #ddd0eb; }
</style>
...
This would be better

if it was #ffffff
Use a span and a class for specic links

A span with a descendant selector can override the default.
email.html
...
<style>
...
a {
color: #ddd0eb; }
.client-link a {
color: #ffffff; }
</style>
...
<td ...>
Or, call <span class="client-link">
+12 34 5678 9012</span>
...
Some clients force a minimum font size

Apple Mail will render type at a minimum of 14px by default.
email.html
...
<td ...
style="...
font-size: 4px;" >
Av. de las Street No. 123
<br />.
Azcapotzalco Santa Barbara
<br />/
01234 Ciudad de Mxico
<br />
D.F. Mexico
...
Adjusted to 14px
Over-dramatized for the viewing audience
Overriding client minimum font size

Vendor-specific properties exist to override defaults.
email.html
...
<td ...
style="...
font-size: 4px;
-ms-text-size-adjust:none;
-webkit-text-size-adjust:none;" >
Av. de las Street No. 123
<br />.
Azcapotzalco Santa Barbara
<br />/
01234 Ciudad de Mxico
<br />
D.F. Mexico
...
Remains 4px
Over-dramatized for the viewing audience
Our email with varied client features
No link
Link
Level 5 - Small Screen First
Small screen results may vary

Pan to read
Zoomed out
Avoiding zoom
Elements must use a width that fits within the viewport or a max-width to contain them.
email.html
...
<table ... style="margin: 0 auto;
max-width: 600px;
text-align: center;
width="100%">
...
Width is flexible
up to 600px
No more zoom!
Font sizes will be the inline values

Without media queries, the inline style for font size will be applied.
email.html
...
<table ... >
<tr>
<td ...
...">
Lucha Libre!
...
No way to adjust
this conditionally
Each table and image needs width and max-width

email.html
<table ...
style="max-width: 600px;
..."
width="100%">
<tr>
<td ... >
style="...
max-width: 100%;"
width="600" />
</td>
</tr>
</table>
This would be applied to all single-column tables
Problem: Combined cell widths cause zoom
320px viewport
300px table
300px table
Solution: Use aligned tables for columns

The align attribute with a value of le! will allow for stacked or aligned tables.
Two 300px tables
Two 300px tables with align="left"
Will display inline if there is enough

space or display block if there is not
Default behavior is to
stack or display block
Adding the rst column

Use a container for the 2 columns and nested container for the first column content.
email.html
...
<table style="max-width: 600px;" width="100%" ... >
<tr>
<td>
<table align="left" width="300" ... >
<tr>
<td>
<table bgcolor="#5b3885" width="100%" ... >
...
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
...
Adding the second column

Use a container for the 2 columns and nested container for the first column content.
email.html
...
<table style="max-width: 600px;" width="100%" ... >
<tr>
<td>
...
</table>
<tr>
<td>
...
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Replacing the classes for media queries

Where media queries are supported, our prior classes will alter width and add vertical space.
email.html
Our styles from earlier

for stacked columns
...
<style>
...
.width-full { width: 100% !important;}
.stack-column-two { padding-top: 20px !important;}
... }
</style>
...
<table align="left".class="width-full" width="300" ... >
...
</table>
<table align="left" class="width-full" width="300" ... >
<tr>
<td class="stack-column-two">
...
...
Problem: The columns are not always centered

The columns will shi! le! in screens larger than their width.
email.html
Viewport is 375px
...
<table align="left".width="300" ... >
...
...
...
...
...
align="left" shifts the tables to the left
Use an inline block element for a wrapper

Wrap the tables with a div element and apply display: inline-block.
email.html
...
<div style="display: inline-block;">
...
...
</div>
...
...
</div>
...
align="left" shifts the tables to the left
Center the Inline Block Elements

Use text-align: center to center the wrapper divs.
email.html
...
<td style="text-align: center;">
...
</div>
...
</div>
</td>
...
Problem: Outlook.com removes margin

The preprocessor for Outlook.com removes margin but not Margin.
Word removes margin...
email.html
...
<table ... style="...
Margin: 0 auto;>
...
... but not Margin
Level 5 - Large Screen Last
Max-width issues in Outlook are back...

2003
2013
max-width 100% is ignored
Conditional tables for containers in Outlook

A table with a fixed width is created only in Microso! Oice apps.
email.html
...

<table ... style="max-width: 600px;"
width="100%">
...

2003
2013
Table spacing issues in Word

Word adds border spacing that increases the width of our tables by 8px.
2013
Word adds 8px in total width

to aligned tables
Create a conditional table cell

Use conditional comments to create 2 table cells, only in Word.
email.html
...
<tr>
<td>
...
</td>
<td>
<![endif]-->
...
</td>
</tr>
2013
Stacking issues in web clients

Display inline-block has spacing behavior that is aecting our div containers.
Display inline-block adds

space around elements
Solution: Reduce font size to 0

Set the font size to 0 on the containing cell.
email.html
Font size 0 on the divs
...
<td style="font-size: 0;">
...
</div>
...
</div>
</td>
...
Problem: Tables are left aligned in Yahoo

Yahoo! Mail has client CSS that sets the margin for tables to 0.
Solution: Use CSS to apply margin

Apply margin to all tables using the style tag.
email.html
...
Yahoo! Mail supports CSS
<style>
in the style tag
...
table {
margin: 0 auto !important; }
</style>
...
<table ... style="max-width: 600px;
..."
width="100%">
...
..."
width="100%">
...
..."
width="100%">
...
The Final Step: Styling the remaining content

Apply max-width and width to our last 2 tables.
email.html
...
..."
width="100%">
...
..."
width="100%">
...
The layout adjust for all screen sizes

CodeSchool UnmaskingHTMLCodeSchool UnmaskingHTMLEmailsEmails

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

CodeSchool UnmaskingHTMLCodeSchool UnmaskingHTMLEmailsEmails

Caricato da

Copyright:

Formati disponibili

Level 1 - Clients and Markup

The design for the email well build

The skills youll need to compete

An HTML email base

HTML email clients preprocess HTML

Determines how your HTML is displayed

Changes your HTML

Preprocessors are your strongest opponents

Gmail has the most aggressive preprocessor

Adding content to an email

Images need to have absolute URLs

For brevity in examples, well write like this: src= "...stars.png"

Adding copy to an email

Testing in a browser vs. an email client

Chrome rendering engine (Blink)

Inspecting elements with browser dev tools

Right-click for developer tools

Inspecting our email locally

Our code in the Gmail web application

Our code is way down here!

Our code after Gmails preprocessor

inline body styles

All your code are belong to clients

Writing CSS for emails

Well use inline styles to create this header

Styling the image with inline styles

In Gmail, the image displays the styles

Inline styles have a higher specificity than Gmails stylesheet

Styling the paragraph

Container, font, and reset styles

Content needs a container

Centering the text

Testing, testing, testing

Level 2 - Tables for Layout

Automated testing in multiple clients

Outlook 2003 and 2013

The Microsoft Word rendering engine

Word lacks box model and position support

Not supported on <div> and <p>

Use tables for layout when CSS isnt available

Use simplied tables for layout

No default type or background colors

Use simplied tables for layout

Reset default spacing

Use single cell tables for containers

<table border="0" cellpadding="0" cellspacing="0">

Adding content to tables

Image styles are not rendered

Elements need to be separated into rows and cells

Organize content with table elements

Base styles to build upon

Organize content with table elements

Styling the stars image

Styling a header without using <H1>

Styling text in a container

Centering all text

Be cautious of client-applied styles.

Some webmail clients add text styles to cells

Gmail sets Arial as a font family

AOL sets the color to black

Aligning the content table

Test results with tables

Well fix line height later