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

http://foundation.zurb.com/emails/docs.html

http://foundation.zurb.com/emails/resources.html

http://foundation.zurb.com/emails/email-templates.html

http://foundation.zurb.com/emails/inliner.html

http://foundation.zurb.com/emails/download.html

http://foundation.zurb.com/emails/getting-started.html

http://foundation.zurb.com/emails.html

http://foundation.zurb.com/frameworks-docs.html

http://foundation.zurb.com/support/support.html

http://foundation.zurb.com/develop/getting-started.html

http://foundation.zurb.com/index.html

http://foundation.zurb.com/develop/getting-started.html

http://foundation.zurb.com/upload.html

http://zurb.com/article/1420/foundation-for-emails-2-making-html-email



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

http://foundation.zurb.com/emails/templates.php



<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

http://www.emailonacid.com/

https://litmus.com/

http://www.opera.com/

http://www.apple.com/safari/

http://google.com/chrome

http://ruby-doc.org/stdlib-2.0/libdoc/net/smtp/rdoc/Net/SMTP.html

http://php.net/manual/en/function.mail.php

http://campaignmonitor.com/

http://mailchimp.com/

http://en.wikipedia.org/wiki/Email_service_provider_(marketing)



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



<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>


</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



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




<tr>

<td>

<table class="row">

<tr>


<table class="twelve columns">

<tr><td class="panel">

twelve.columns

</td>


</tr>

</table>

</td>

</tr></table>

<table class="row">

<tr>


<table class="six columns">

<tr>

<td class="panel">

.six.columns

</td>


</tr>

</table>

</td>


<table class="six columns">

<tr>

<td class="panel">

.six.columns

</td>


</tr>

</table>

</td>

</tr>

</table>

...

</td>

</tr>

</table>



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



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">


<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



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>


<table class="four columns">

<tr>

<td class="left‐text‐pad">

Text

</td>

<td class="expander"></td></tr>

</table>

</td>



<tr>

<td>

Text

</td>


</tr>

</table>

</td>



<tr>

<td class="right‐text‐pad">

Text

</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



.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



<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>


</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



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

http://foundation.zurb.com/docs/components/grid.html



The sub-grid works as expected in most major email clients.

Toggle Full Table

<table class="row">

<tr>



<tr>

<td class="eight sub‐columns">

.eight.sub‐columns

</td><td class="four sub‐columns last">

.four.sub‐columns

</td>


</tr>

</table>

</td>


<table class="four columns"><tr>

<td>

.four columns

</td>


</tr>

</table>

</td>

</tr>

</table>

.eight.sub-columns.four.sub-

columns.four columns

Compatibility

Non-Collapsing Sub-Grid Columns



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.


<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



.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



The block-grid works as expected in most major email clients.

Toggle Full Table


<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)



<table class="row">

<tr>


<!‐‐[if !mso]><!‐‐ ‐‐>

<table class="twelve columns show‐for‐small">

<tr>

<td class="panel">

.show‐for‐small

</td>


</tr>

</table>

<!‐‐<![endif]‐‐>

<table class="twelve columns hide‐for‐small">

<tr>

<td class="panel">

.hide‐for‐small

</td>


</tr>

</table>

</td>

</tr>

</table>

.hide-for-small

Breakdown

Available visibility classes:

.hide‐for‐small

.show‐for‐small

Using Visibility Classes

Content Visibility



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.


<tr>

<td class="panel">

Panel content


</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



<table class="row">

<tr>



<tr>

<td>

Main content


</tr>

</table>

</td>



<tr>

<td class="panel">

Panel content</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.



dignissimos minus nisi similique sapiente culpa totam

molestiae.




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



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.


<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>


</tr>

</table>

Left Sub-Column Right Sub-Column

Compatibility

Panel Sub-Grid Markup

Sub-Grid Panel



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



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



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>


</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



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



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>


<table class="three columns">

<tr>

<td>

<img height="130" width="130"

src="http://placehold.it/600x600&text=Retina%20Image"></td>


</tr>

</table>

</td>


<table class="nine columns">

<tr>

<td>Text Content

</td>


</tr>

</table>

</td>

</tr>

</table>


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



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 ✔

https://github.com/zurb/ink/blob/master/CONTRIBUTING.md

http://emailclientmarketshare.com/



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



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.

http://zurb.com/university/responsive-emails-intro?utm_source=Ink%20Marketing%20Site&utm_medium=Marketing%20Site&utm_content=Ink%20Download%20Page&utm_campaign=Introduction%20to%20Responsive%20Emails



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

http://zurb.com/university/responsive-emails-intro?utm_source=Ink%20Marketing%20Site&utm_medium=Marketing%20Site&utm_content=Ink%20Download%20Page&utm_campaign=Introduction%20to%20Responsive%20Emails

http://foundation.zurb.com/support/support.html

http://foundation.zurb.com/support/premium-support.html

https://twitter.com/zurbfoundation

http://zurb.com/library

http://zurb.com/university/courses

http://zurb.com/notable

http://foundation.zurb.com/apps

http://foundation.zurb.com/sites

http://zurb.com/

http://zurb.com/responsive/reading

http://zurb.com/responsive



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.

http://zurb.com/sitemap

http://zurb.com/contact

http://zurb.com/news

http://zurb.com/blog

http://zurb.com/about

http://www.zurb.com/

http://zurb.com/contact

http://www.facebook.com/ZURB

http://www.twitter.com/ZURB

http://zurb.com/university

http://zurb.com/notable

http://foundation.zurb.com/

http://zurb.com/studios

https://github.com/zurb/foundation

foundation for email documentation-con-graficos[1]

Documents