Foundation for Email Documentation-con-graficos[1]
-
Upload
martin-escalante-leiva -
Category
Documents
-
view
224 -
download
0
Transcript of Foundation for Email Documentation-con-graficos[1]
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 1/32
Foundation for Emails 2 is coming soon!
http://zurb.com/article/1420/foundation-for-emails-2-making-html-email)
Upload
(../upload.html)
Getting Started
(../develop/getting-
started.html)
Getting Started
elop
evelop/getting-
ed.html)
Support
(../support/support.html)
Docs
(../frameworks-
docs.html)Foundation for Emails
(../emails.html)
Documentation
HOME (. ./EMAILS.HTML) GETTING S TARTED (../E MAILS/GETTING-STARTED.HTML)
DOWNLOAD (../EMAILS/DOWNLOAD.HTML) INLINER (../EMAILS/INLINER.HTML)
EMAIL TEMPLATES (../EMAILS/EMAIL-TEMPLATES.HTML)
RESOURCES (../E MAILS/RESOURCES.HTML) DOCS (../EMAILS/DOCS.HTML)
Getting Started
Grid
Sub-Grid
Block-Grid
Visibility Classes
Panels
Buttons
Retina Images
Supported Clients
Changelog
Training
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 2/32
Dive into creating your responsive email.
The Boilerplate
Starting a new Foundation for Emails project is fairly straightforward. If you aren’t using one of our
templates (templates.php), grab the boilerplate code from below to use as a starting point. While you can
reference ink.css using a <link> tag for testing purposes, be sure to remove the <link
rel="stylesheet" href="ink.css" /> statement and paste your CSS into the <style> tag in the
head before running your email through an inliner.
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" />
<meta name="viewport" content="width=device‐width"/>
<link rel="stylesheet" href="ink.css"> <!‐‐ For testing only ‐‐>
<style type="text/css">
/* Ink styles go here in production */
</style>
<style type="text/css">
/* Your custom styles go here */
</style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<!‐‐ Email Content ‐‐>
</center>
</td>
</tr>
</table>
</body>
</html>
If you’re applying a background color to your entire email, be sure to attach it to the table with a class of
body as well as to the actual <body> tag, since some clients remove this by default.
Boilerplate.html
Inline Styles
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 3/32
<html>
...
<body style="background:#ddd">
<table class="body" style="background:#ddd"> <!‐‐ Background goes here too ‐‐>
...
</table>
</body>
body, .body {
background: #ddd;
}
Sending Your Email
Sending HTML email is a lot different than sending plain text email. While it may be tempting to just open
the email in a browser and click “share” or to use the “Insert HTML” function of your favorite email client,
this often strips off a lot of the styling and makes your email completely unusable on mobile devices.
To get the best results, we recommend that you send your HTML email using an Email Service Provider
(ESP) (http://en.wikipedia.org/wiki/Email_service_provider_(marketing)) such as Mailchimp
(http://mailchimp.com) or Campaign Monitor (http://campaignmonitor.com). If you’re just running a quick
test and don't want to sign up for an ESP, sending from the command line using a scripting language like
PHP (http://php.net/manual/en/function.mail.php) or Ruby (http://ruby-doc.org/stdlib-
2.0/libdoc/net/smtp/rdoc/Net/SMTP.html) usually works fine.
Testing and Troubleshooting
Since targeting a diverse range of email clients requires some specific and rather quirky markup,
Foundation for Emails doesn’t always preview properly in the browser. When doing browser tests, we
recommend using the latest version of Chrome (http://google.com/chrome), Safari
(http://www.apple.com/safari/) or Opera (http://www.opera.com/), since Foundation for Emails doesn’t
always display properly in Firefox or Internet Explorer.
Testing in the browser isn't enough, however, and you should always test in actual email clients. If you
don't have access to the actual clients you want to test, a testing service like Litmus (https://litmus.com/)
or Email on Acid (http://www.emailonacid.com/) can help.
CSS
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 4/32
If you're having trouble with an email, the first thing to check is the markup. Often times a simple error like
a forgotten <tr> or a nested tag that’s been closed in the wrong order can wreak havoc on your design. If
that’s not the problem, it could be an issue with your ESP. Some senders prepend an <html> tag to
your message, which causes the DOCTYPE tag to not be interpreted by the email recipient. To see
if this is what’s happening, try sending a test email to yourself and using the “show original” or “raw source”
option in your mail client to manually inspect the code.
GridCreate powerful multi-device layouts quickly and easily.
Structure
Foundation for Emails uses a 12-column grid with a 580px wrapper. On mobile devices (under 580pxwide), columns become full width and stack vertically.
Foundation for Emails' grid can be thought of in terms of three components:
Containers
Foundation for Emails containers wrap the content and maintain a fixed, 580px layout on large displays.
Below 580px, containers take up 95% of the screen's width, ensuring that your content doesn't run right up
against the edges of the user's screen.
Rows
Rows are used to separate blocks of content vertically. In addition to the vertical separation, the <td>
tags of .row tables use the wrapper class to maintain a gutter between columns. Note: the last
.wrapper <td> in a row MUST have a class of .last applied to it, even if it's the only wrapper in the
row (ex. for a row with a single, twelve-column wide content area).
ColumnsColumns denote the width of the content, as based on a 12-column system. The content inside them will
expand to cover n-columns, assuming that the number of columns in one row adds up to 12.
Basic example of the three main grid components.
The Three Grid Components
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 5/32
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="eight columns">
<tr><td>
Eight Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="four columns"><tr>
<td>
Four Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Diagram of how the basic grid is laid out. While Foundation for Emails was used to create the example (and
therefore it responds to the correct media queries), extra coloring and spacing was added for clarity.
table.container
table.row
.eight.columns .four.columns
Visual Explanation of Grid
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 6/32
Breakdown
The main elements in the grid and how they're used:
Element
Type
Class
Name
Description
table container Constrains the content to a 580px wrapper on large screens (95% on smallscreens) and centers it within the body.
table row Separates each row of content.
td wrapper Wraps each .columns table, in order to create a gutter between columns
and force them to expand to full width on small screens.
td last Class applied to the last .wrapper td in each row in order for the gutter to
work properly. If you only have one (presumably full-width) .columns table
(and therefore one .wrapper td) in a row, the .wrapper td still needs to
have the last class applied to it.
table {number} Can be any number between one and twelve (spelled out). Used to determine
how wide your .columns tables are. The number of columns in each row
should add up to 12, including offset columns .
table columns Table that displays as n-twelfths of the width of the 580px .container table
on large screens, and expands to the full width of the .container table on
small screens.
td expander An empty (and invisible) element added after the content element in a
.columns table. It forces the content td to expand to the full width of the
screen on small devices, instead of just the width of the content within the
td .
Examples
Even Columns
Foundation for Emails' 12-column grid makes creating even column layouts a snap. Just use one
.twelve.columns , two .six.columns , three .four.columns or four .three.columns classes
to create your layout. Appearing as multiple, even columns on large screens, the layout will fold into a
single column on small (mobile) screens.
Code for Even Columns
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 7/32
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr><td class="panel">
twelve.columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr></table>
<table class="row">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="panel">
.six.columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="six columns">
<tr>
<td class="panel">
.six.columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
...
</td>
</tr>
</table>
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 8/32
twelve.columns
.six.columns .six.columns
.four.columns .four.columns .four.columns
.three.columns .three.columns .three.columns .three.columns
Centered Content
To center the content of a column, apply a class of center to the <td> that contains the content. If you
want to center an image, you should also apply a class of center to the image itself. For maximum client
support, we also recommend using the HTML <center> tag around the content you wish to center.
Even 1, 2, 3 and 4 Column Layouts
The Center Class
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 9/32
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 10/32
In lieu of using empty columns to offset content, one can use the .offset‐by‐{number of columns}
helper class (ex, .offset‐by‐two , .offset‐by‐three , etc). By applying the class to the wrapper
surrounding a column section, the content will be pushed to the left by the specified number of columns.
Remember to count any column offsets towards the total number of columns in a row when making sure
that they add up to 12.
<table class="row">
<tr>
<td class="wrapper offset‐by‐four">
<table class="eight columns">
<tr>
<td class="panel">
Offset Content
</td><td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
Twelve Columns
Eight columns, offset by four
Text Padding
A fairly common use case for the container is to give your text a white background to separate it from a
colored email body. To assist with this design pattern, we've included three helper classes with Foundation
for Emails: .text‐pad , .left‐text‐pad and .right‐text‐pad .
The .text‐pad class provides 10px of padding on either side of the content (while it's named text-pad, it
works just as well on buttons or images), making sure it doesn't butt right up against the edge of your container. The .text‐pad class should be applied to the <td> of a .columns <table> .
Offset Columns Markup
Offset Example
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 11/32
The .left‐text‐pad and .right‐text‐pad do the same thing as the .text‐pad class, but are
meant to be applied to content that doesn't extend across the entire row (in other words, content that isn't
twelve columns wide). The directional text-padding classes only apply the padding to the side of the
content near the edge of the container on large screens, but apply it to both sides on small screens, when
the columns expand to fill the full width of the row.
<table class="row">
<tr>
<td class="wrapper">
<table class="four columns">
<tr>
<td class="left‐text‐pad">
Text
</td>
<td class="expander"></td></tr>
</table>
</td>
<td class="wrapper">
<table class="four columns">
<tr>
<td>
Text
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="four columns">
<tr>
<td class="right‐text‐pad">
Text
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
Visual example of the body and the container having different colored backgrounds, the main use case for
.text‐pad .
The Text-Pad Class
Container Backgrounds
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 12/32
.twelve.columns.text-padLorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, adipisci eveniet distinctio
vero doloremque repellendus dolores ex veritatis ipsum maiores quis non reprehenderit
expedita cumque esse repudiandae alias aperiam earum.
No .text-padLorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, adipisci eveniet distinct vero
doloremque repellendus dolores ex veritatis ipsum maiores quis non reprehenderit expedita
cumque esse repudiandae alias aperiam earum.
.left-text-padLorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolor, adipisci eveniet
distinctio vero doloremque repellendus
dolores ex veritatis ipsum maiores quis
non reprehenderit expedita cumque esse
repudiandae alias aperiam earum.
.right-text-padLorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolor, adipisci eveniet
distinctio vero doloremque repellendus
dolores ex veritatis ipsum maiores quis
non reprehenderit expedita cumque esse
repudiandae alias aperiam earum.
Full-Width Rows
When working with designs that call for a container that's colored to stand out from the background (like
the example above), it can often be helpful to have full-width rows that can be styled separately, especiallyfor elements like headers or ad breaks. Since the rows of the Foundation for Emails grid are usually
restrained to the width of the container, this design pattern requires a slightly different syntax than normal.
To create a full-width row, just follow this process:
1. Create a standard “container > row > column” block.
2. Swap the .row and .container classes, keeping the tables in the same place.
3. Add center code to the outside ( .row ) table.
The row should now extend to the edge of the viewport, while the content is still restricted to the width of
the container, so both can be styled accordingly.
Reverse Row Syntax
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 13/32
<table class="row"> <!‐‐ Styles go on the row ‐‐>
<tr>
<td class="center" align="center"> <!‐‐ Center the container ‐‐>
<center>
<table class="container"> <!‐‐ Container restricts the content width ‐‐>
<tr>
<td class="wrapper last"> <!‐‐ Wrapper stays on the inner table ‐‐>
<table class="twelve columns"><tr>
<td>
Content
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr></table>
</center>
</td>
</tr>
</table>
In the example below, the rows have a white background, while the body is light blue.
Normal RowLorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eius repellendus
voluptates nisi vitae nulla similique provident expedita. Fuga, magni, iusto vel a aperiam
nihil expedita voluptas odio hic odit!
Full Width RowLorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eius repellendus
voluptates nisi vitae nulla similique provident expedita. Fuga, magni, iusto vel a aperiam
nihil expedita voluptas odio hic odit!
Expanders
When the Foundation for Emails grid is shown on a small screen, the .columns tables expand to the full
width of the container and stack vertically. On some clients, however, the columns don't expand properly if
the content isn't as wide as the screen. While this might not seem so bad, it can cause your layout to
appear broken if you are using a background color on the .columns table or are centering the content.
Full Width Row
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 14/32
The grid works as expected in most major email clients, with some caveats in Gmail (Mobile, iOS,
Android).
Toggle Full Table
To get around this, an empty <td> with a class of expander is used after the <td> containing the
actual content in the .columns table. This extra <td> isn't displayed, but it forces the content <td> to
expand to full width.
<table class="columns">
<tr>
<td>
<!‐‐ Content not large enough to "prop" the container open all the way ‐‐>
</td>
<td class="expander"></td> <!‐‐ Used to fix columns on small screens ‐‐>
</tr>
</table>
Compatibility
Sub-Grid A non-stacking grid for even more versatile layouts.
Grids Within Grids
While the Foundation for Emails grid can't be nested like its Foundation counterpart
(http://foundation.zurb.com/docs/components/grid.html), Foundation for Emails does provide a nestable
sub-grid for when one grid just isn't enough. By applying a .sub‐columns class (as well as a numbered
class, same as the primary grid) to a <td> tag underneath a .columns table, you can sub-divide the
.columns table into sub-columns.
The last .sub‐columns <td> in the .columns <table> should be given a class of last in order
for the gutter padding to be properly maintained.
Expander TDs
Basic Sub-Grid Example
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 15/32
The sub-grid works as expected in most major email clients.
Toggle Full Table
<table class="row">
<tr>
<td class="wrapper">
<table class="eight columns">
<tr>
<td class="eight sub‐columns">
.eight.sub‐columns
</td><td class="four sub‐columns last">
.four.sub‐columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="four columns"><tr>
<td>
.four columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
.eight.sub-columns.four.sub-
columns.four columns
Compatibility
Non-Collapsing Sub-Grid Columns
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 16/32
Block-Grid An even-width element grid that doesn't use media queries.
Evenly Spaced Blocks
For cases where neither the Foundation for Emails grid nor the Foundation for Emails sub-grid is
appropriate, the block-grid can often be quite useful. Block-grid elements automatically align to the left and
are pushed down to the next row individually as the viewport gets smaller...all without using media queries.
Block-grids consist of a table with class block‐grid applied to it, along with a class in the pattern
'number-up' (ex. .two‐up , .three‐up , etc.) to describe how many even-sized elements should be
placed per row. Extra care should be taken to ensure that there aren't any whitespace characters or
newlines between the closing <td> of a block-grid element and the opening <td> of the preceding
element, since some clients will render the whitespace as a gap between the elements.
<table class="container">
<tr>
<td>
<table class="block‐grid two‐up">
<tr>
<td>
Column #1
</td><td> <!‐‐ Make sure the tags are directly next to each other ‐‐>
Column #2
</td>
</tr>
</table>
</td>
</tr>
</table>
Basic Block-Grid Markup
Visual Example of Block-Grids
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 17/32
.two-up .two-up
.three-up .three-up .three-up
.four-up .four-up .four-up .four-up
.five-up .five-up .five-up .five-up .five-up
.six-up .six-up .six-up .six-up .six-up .six-up
.seven
-up
.seven
-up
.seven
-up
.seven
-up
.seven
-up
.seven
-up
.seven
-up
.eig
ht-
up
.eig
ht-
up
.eig
ht-
up
.eig
ht-
up
.eig
ht-
up
.eig
ht-
up
.eig
ht-
up
.eig
ht-
up
Examples
Multi-column Layouts in Gmail
A major use case for block-grids, since they don't rely on media queries, is to create multi-column layouts
for Gmail. The simplest way to accomplish this is to create a .two‐up block-grid and use the block-grid
elements as your column structures. As a progressive enhancement, adding a media query that expands
the columns to 100% width under 600px would cause the columns to take up the whole screen on mobile
clients that support media queries, while not breaking the reflow pattern for those that don't.
Gmail Two Column Layout
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 18/32
The block-grid works as expected in most major email clients.
Toggle Full Table
<table class="container">
<tr>
<td>
<table class="block‐grid two‐up">
<tr>
<td>
Main Content
</td><td>Right Sidebar
</td>
</tr>
</table>
</td>
</tr>
</table>
@media only screen and (max‐width: 600px) {
table[class="container"] .block‐grid td {
width: 100% !important;
}
}
Compatibility
Visibility ClassesSelectively show content for different screen sizes.
By adding a visibility class to an element, you can show or hide it based on screen size. Visibility classes
can be used on any element. Due to Outlook's lack of support for certain CSS properties, the Foundation
for Emails visibiility classes should be used in conjunction with conditional comments to ensure that thecontent is properly hidden (or shown) in Outlook 2007/2010/2013.
Note: If you're using a visibility class on an image, be sure to apply it to the parent element, not to the
image itself.
Block-Grid Column Progressive Enhancement (Optional)
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 19/32
<table class="row">
<tr>
<td class="wrapper last">
<!‐‐[if !mso]><!‐‐ ‐‐>
<table class="twelve columns show‐for‐small">
<tr>
<td class="panel">
.show‐for‐small
</td>
<td class="expander"></td>
</tr>
</table>
<!‐‐<![endif]‐‐>
<table class="twelve columns hide‐for‐small">
<tr>
<td class="panel">
.hide‐for‐small
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
.hide-for-small
Breakdown
Available visibility classes:
.hide‐for‐small
.show‐for‐small
Using Visibility Classes
Content Visibility
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 20/32
Visibility classes work as expected in most major email clients, but do not currently support Gmail.
Toggle Full Table
Compatibility
PanelsQuickly highlight important content.
Add a class of panel to a <td> in a .columns table in order to give it a default border andbackground color. Great for offsetting important content or for quickly prototyping a layout.
<table class="twelve columns">
<tr>
<td class="panel">
Panel content
</td><td class="expander"></td>
</tr>
</table>
td.panel
Examples
Sidebar Panel
A common patten is to have a panel section serve as a sidebar to offset it from the primary content.
Panel Markup
Panel Example
Sidebar Panel Markup
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 21/32
<table class="row">
<tr>
<td class="wrapper">
<table class="eight columns">
<tr>
<td>
Main content
</td><td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="four columns">
<tr>
<td class="panel">
Panel content</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
Main contentLorem ipsum dolor sit amet, consectetur adipisicing elit.
Architecto, recusandae natus temporibus quas at ea
doloremque illo. Explicabo, accusantium, eius. Nihil quia
dignissimos minus nisi similique sapiente culpa totam
molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Architecto, recusandae natus temporibus quas at ea
doloremque illo. Explicabo, accusantium, eius. Nihil quia
dignissimos minus nisi similique sapiente culpa totam
molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Architecto, recusandae natus temporibus quas at ea
doloremque illo. Explicabo, accusantium, eius. Nihil quia
dignissimos minus nisi similique sapiente culpa totammolestiae.
Panel contentLorem ipsum dolor sit
amet, consectetur
adipisicing elit.
Architecto, recusandae
natus temporibus quas
at ea doloremque illo.
Sidebar Panel
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 22/32
Panels work as expected in most major email clients.
Toggle Full Table
Panels With Sub-grids
Nesting a sub-grid under a panel is non-intuitive, since the sub-grid columns would normally be applied to
the <td> elements directly under the .columns table. To get around this, give the <td> a class of
.panel and a class of .sub‐grid . You can then put a <table> inside the <td> and create the sub-
columns using the <td> elements of the inner table, as shown below.
<table class="twelve columns">
<tr>
<td class="panel sub‐grid">
<table>
<tr>
<td class="six sub‐columns">
Left Sub‐Column
</td>
<td class="six sub‐columns">
Right Sub‐Column
</td>
</tr>
</table>
</td><td class="expander"></td>
</tr>
</table>
Left Sub-Column Right Sub-Column
Compatibility
Panel Sub-Grid Markup
Sub-Grid Panel
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 23/32
ButtonsDynamic and effective calls to action.
Structure
To create buttons that look great in most clients, make a table of class button to wrap your <a> tag.
Buttons expand to the full width of their container by default, so if you don't want them to expand all the
way, consider placing them in a sub-grid or block-grid element.
<table class="button">
<tr>
<td>
<a href="#">Button Label</a>
</td>
</tr>
</table>
Style Classes
Several built in styling classes can be applied to the same element as the button class is applied to in
order to adjust the button's appearance.
Size
Size classes affect the button's vertical padding. The available size classes are:
.button (same as .small‐button )
.tiny‐button
.small‐button
.medium‐button
.large‐button
Color Color classes denote the purpose of the button, and are used to change its background color. The
available color classes are:
A Basic Button
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 24/32
none (same as .primary )
.primary
.secondary
.alert
.success
Border Radius
Radius classes cause the corners of the buttons to be rounded in clients that support the border‐
radius property. The available radius classes are:
none (no border-radius)
.radius
.round
Examples
Buttons expand to the width of their parent container by default, so it's recommended that you contain themwithin a sub-grid or a relatively small number of columns on the main grid.
All the button modifiers demonstrated. The rows of buttons are contained to .four.columns or
.six.columns sections of the grid for clarity.
.tiny-button .small-button
.medium-button .large-button
.secondary .alert .success
.radius .round
Button Demo
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 25/32
The buttons are compatible with most major clients.
Toggle Full Table
Compatibility
Retina Images Accent your emails with rich, high resolution images.
Markup
The days of having to choose between supporting Outlook or retina devices are over. To use high
resolution images, put height and width HTML attributes on the <img> tag, corresponding to the
scaled size of the image in a desktop view (the width of its .columns container). On small screen
devices, Foundation for Emails will cause the image to expand to its full width (or the width of its parent
element, whichever is smaller).
<table class="three columns">
<tr><td>
<img height="130" width="130" src="http://placehold.it/600x600&text=Retina">
</td>
<td class="expander"></td>
</tr>
</table>
Column Sizes
Below is a chart of the sizes images should be to fully fit various sizes of grid columns on a desktop (larger
than 600px) view. Height should be determined with respect to width and should also be explicitly declared
on the <img> tag.
Number of Columns Internal Width (in px)
1 30
2 80
Image Markup
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 26/32
3 130
4 180
5 230
6 280
7 330
8 380
9 430
10 480
11 530
12 580
Examples
Newsletter Images
A common pattern in email newsletters is to have an image on the left with description text next to it. Weuse this layout quite frequently on ZURB emails and thought that it looked awkward when the small image
begins to float in the center of the screen on mobile devices. To compensate for this, we use a full-width
image that's scaled down on the desktop view.
Newsletter 3-9 Image
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 27/32
Retina images work as expected in most major email clients, with some caveats in Gmail (Mobile,
iOS, Android).
Toggle Full Table
<table class="row">
<tr>
<td class="wrapper">
<table class="three columns">
<tr>
<td>
<img height="130" width="130"
src="http://placehold.it/600x600&text=Retina%20Image"></td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="nine columns">
<tr>
<td>Text Content
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatem, mollitia, vero tempore consectetur similique perspiciatis
nisi nulla neque modi facilis. Eveniet, cupiditate, recusandae quasi
repellat alias dolorem qui possimus et.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis,
doloremque, amet, cupiditate explicabo magni dolores aliquam
dicta enim voluptatibus hic optio neque quasi officia culpa minima
numquam iusto illo dolorem?
Compatibility
Retina Newsletter Image Demo
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 28/32
Supported ClientsWe test and support all the major email clients … even Outlook.
We support as many email clients and as much of the market as possible, however, we simply can't test
for everything. As a result, we've decided to test the following clients, based on a combination of their
market share (http://emailclientmarketshare.com/) and our ability to reliably test them with the devices and
software we have access to.
While we will help out as much as possible with issues regarding other clients (and are more than willing to
accept pull requests (https://github.com/zurb/ink/blob/master/CONTRIBUTING.md) that add support for
additional clients), we can't devote a lot of time or effort at this point to fixing issues related to email clientsnot in the following table.
Tested Clients
Client Supported Notes
Apple Mail (Desktop) ✔
Apple Mail (iOS) ✔
Outlook (2000, 2002, 2003) ✔
Outlook (2007, 2010, 2013) ✔
Outlook (2011) ✔
Thunderbird ✔
Android ✔
Gmail (Desktop) ✔
Gmail (Mobile, iOS,
Android)
✔ Does not fully support the Foundation for Emails grid.
Responsive layouts should be accomplished using the
block-grid.
Outlook 2011 for Mac ✔
AOL Mail ✔
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 29/32
Hotmail ✔
Outlook.com ✔
Changelog All the latest and greatest changes to Foundation for Emails.
1.0 - Public Release
Add .sub‐grid class to enable the use of sub-grids with panels
Add paragraph .lede class
Lower specificity on .panel class to allw its use on <div> s
Partially patch docs examples to work in Firefox
Normalize font rendering in <td> s for Outlook 2007/2010/2013
Fix 100% width issue on iPad
Remove offset-sub-columns
Remove proprietary <unsubscribe> tags from templates
Fix issue with .one.sub‐columns sections
Expand the Getting Started section of the docs
Add full-width row example to the docs
Add offset-columns example to the docs
Add additional panel examples to the docs
Miscellaneous bug fixes and typo fixes
Apply font styles more uniformly to fix clients that strip out the <body> tag (fixes inliner preview)
Remove percentage based padding on sub-grid (fixes Outlook 2000/2002/2003)
Add Bower package metadata
Remove min-width for <center> tags nested under the sub-grid
Add helper aliases to .text‐pad classes (ex. .left‐text‐pad can now be called using
.text‐pad‐left )
Fix .text‐pad classes nested under aliased .column tables
Remove deprecated button syntax
Fix link color in headings for Outlook 2007/2010/2013
Add text-pad classes
1.0.5
1.0.4
1.0.3
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 30/32
Lower heading sizes to more reasonable defaults
Add compatibility chart of supported/tested clients to the docs
Switch to new button syntax to fully support Microsoft Outlook
Add changelog to Docs
Fix crushed-image issue in Gmail (mobile, Android, iOS) by adding a min-width to <center>
tags
Initial Launch
Grid
Sub-GridBlock-Grid
Buttons
Panels
Retina Images
1.0.2
1.0.1
1.0.0
(http://zurb.com/university/responsive-emails-
intro?
utm_source=Ink%20Marketing%20Site&utm_medium=Marketing%20Site&utm_content=Ink%20
Responsive Email Design Training
We practice Responsive Email Design daily at ZURB, sending out 10 email newsletter campaigns a
month and creating email templates for our clients. We even built Foundation for Emails to help us and
others send emails. This course covers the basics that designers and developers — even marketers
— should know to get started with responsive emails.
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 31/32
Stay on top of what’s happening in responsive design
(http://zurb.com/responsive).Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »
(http://zurb.com/responsive/reading)
[email protected] Sign Up
Foundation
Foundation is the most advanced responsive front-end framework in the world. Foundation is made by ZURB
(http://zurb.com), a product design company in Campbell, CA. This framework is the result of building web products &
services since 1998.
Want more?
Foundation for Sites (../sites)
Foundation for Apps (../apps)
Notable Design Apps (http://zurb.com/notable)
Training (http://zurb.com/university/courses)
Design Resources (http://zurb.com/library)
Talk to us
Tweet us at
@ZURBfoundation (https://twitter.com/zurbfoundation)
Premium Support (../support/premium-support.html)
Or check our support page (../support/support.html)
View Course (http://zurb.com/university/utm_source=Ink%20Marketing%20Site&utm_medium=Marketing%20Site&utm_content=Ink%20D
7/25/2019 Foundation for Email Documentation-con-graficos[1]
http://slidepdf.com/reader/full/foundation-for-email-documentation-con-graficos1 32/32
Stay Updated
Keep up with the latest on Foundation. Find us on Github (https://github.com/zurb/foundation).
Studios
Helping more than 200 startups succeed since 1998.
(http://zurb.com/studios)
Foundation
The most advanced front-end framework in the world .
(http://foundation.zurb.com/)
Notable Design Apps
Prototype, iterate and colle ct feedback on your
products.
(http://zurb.com/notable)
University
Ideas, thoughts and design resources shared with
you.
(http://zurb.com/university)
(http://www.twitter.co(http://www.face(http://zu
(http://www.zurb.com)
ABOUT (HTTP://ZURB.COM/ABOUT) BLOG (HTTP://ZURB.COM/BLOG)
NEWS & EVENTS (HTTP://ZURB.COM/NEWS) CONTACT (HTTP://ZURB.COM/CONTACT)
SITEMAP (HTTP://ZURB.COM/SITEMAP)
© 1998‐2015 ZURB, Inc. All rights reserved.