Doctype HTML Public

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
</head>
<body yahoo bgcolor="#f6f8f1">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td>
<table class="content" align="center"
cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

<table class="content" align="center" cellpadding="0"
cellspacing="0" border="0">
<tr>
<td>
Hello!
</td>
</tr>
</table>

<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style>
<td class="header" bgcolor="#c7d8a7">

Hello!
</td>
and then in your CSS, add the padding for the header:
1 .header {padding: 40px 30px 20px 30px;}
Replace our little "Hello!" Greeting with the following:
1<table width="70" align="left" border="0" cellpadding="0"

cellspacing="0">
2 <tr>
3 <td height="70" style="padding: 0 20px 20px 0;">
4 <img src="images/icon.gif" width="70" height="70"
5border="0" alt="" / >
</td>
6 </tr>
7</table>

<table class="col425" align="left" border="0"
cellpadding="0" cellspacing="0" style="width: 100%; max-width:
425px;">style="width: 100%; max-width: 425px;">
<tr>
<td height="70">
</td>
</tr>
</table>

.col425 {width: 425px!important;}

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="subhead" style="padding: 0 0 0 3px;">
CREATING
</td>
</tr>
<tr>
<td class="h1" style="padding: 5px 0 0 0;">
Responsive Email Magic
</td>
</tr>
</table>
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif;
letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
reating the Single Column Text Row
To create a single column text row, we simply add a new row to our '.content' table.
We'll add an 'innerpadding' class to these rows with some reusable padding values. We'll
also add a class of 'borderbottom' to apply a border to each row.
0
1
0
2
0
3
0
4 <tr>
0 <td class="innerpadding borderbottom">
5 <table width="100%" border="0" cellspacing="0"
cellpadding="0">
0 <tr>
6 <td class="h2">
0 Welcome to our responsive email!
7 </td>
0 </tr>
<tr>
8 <td class="bodycopy">
0 Lorem ipsum dolor sit amet, consectetur
9 adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum
1 volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero
0 ultricies ipsum,</td>
in posuere mauris neque at erat.
11 </tr>
1 </table>
2 </td>
1 </tr>
3
1
4
1
5
1
6
.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-
weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}
Creating the Double Column Article

Now we'll create a responsive row exactly like our header, but with slightly different
dimensions so that we can have a larger image.
0 <tr>
<table width="115" align="left" border="0" cellpadding="0"
0 cellspacing="0">
<tr>
2 <td height="115" style="padding: 0 20px 20px 0;">
0 <img src="images/article1.png" width="115" height="115"
3 border="0" alt="" />
0 </td>
4 </tr>
</table>
0 
7 <table class="col380" align="left" border="0" cellpadding="0"
0 cellspacing="0" style="width: 100%; max-width: 380px;">
8 <tr>
0 <td>
<table width="100%" border="0" cellspacing="0"
9 cellpadding="0">
1 <tr>
0 <td class="bodycopy">
11 Lorem ipsum dolor sit amet, consectetur adipiscing
1 elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat
sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies
2 ipsum, in posuere mauris neque at erat.
1 </td>
3 </tr>
1 <tr>
4 <td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#e05443"
1 border="0" cellspacing="0" cellpadding="0">
5 <tr>
1 <td class="button" height="45">
6 <a href="#">Claim yours!</a>
</td>
1 </tr>
7 </table>
1 </td>
8 </tr>
1 </table>
</td>
9 </tr>
2 </table>
0 
2 </td>
2 </tr>
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
Nous avons ajout un bouton ici avec la classe 'buttonwrapper'. Il contient
une cellule rembourre avec un jeu de couleurs de fond, puis un lien texte
l'intrieur. Je prfre utiliser cette mthode car elle vous permet d'avoir des
boutons de largeur fluide qui est trs utile lors de la cration d'un modle
rutilisable, o la largeur de chaque bouton sera diffrent chaque fois qu'il
est utilis. Si vous avez une largeur fixe pour vos boutons, vous pouvez
prfrer utiliser le Gnrateur de boutons Bulletproof sur Campaign Monitor.
.button {text-align: center; font-size: 18px; font-family: sans-serif;
font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
As well as our set width for this new class 'col380', we'll add our size to our list of styles
to take care of Apple Mail. It now looks like this:
1 @media only screen and (min-device-width: 601px) {
2 .content {width: 600px !important;}
3 .col425 {width: 425px!important;}
4 .col380 {width: 380px!important;}
}
5
Creating the Single Column Image

This is a very simple row; we'll simply set an image to be 100% of the width of the
email and make sure its height is set to be automatic using CSS.
1<tr>
3 <img src="images/wide.png" width="100%" border="0" alt="" />
4 </td>
</tr>
5
In our CSS:
1 img {height: auto;}
Creating the Final Plain Text Row

Finally we'll add a row of text without the border on the bottom:
<tr>
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi
3porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in
4posuere mauris neque at erat.
5 </td>
</tr>
Creating the Footer

To create the footer, we'll add a new row with a table inside. One of the rows will
contain another table for our social media icons.
0 <tr>
<td class="footer" bgcolor="#44525f">
1 <table width="100%" border="0" cellspacing="0"
0 cellpadding="0">
2 <tr>
0 <td align="center" class="footercopy">
3 ® Someone, somewhere 2013<br/>
<a href="#"><font
0 color="#ffffff">Unsubscribe</font></a> from this newsletter
4 instantly
0 </td>
5 </tr>
0 <tr>
6
0
7
0
8
0
9
1
0
11
1
2
1
3
1 <td align="center" style="padding: 20px 0 0 0;">
4 <table border="0" cellspacing="0" cellpadding="0">
<tr>
1 <td width="37" style="text-align: center;
5 padding: 0 10px 0 10px;">
1 <a href="http://www.facebook.com/">
6 <img src="images/facebook.png"
1 width="37" height="37" alt="Facebook" border="0" />
</a>
7 </td>
1 <td width="37" style="text-align: center;
8 padding: 0 10px 0 10px;">
1 <a href="http://www.twitter.com/">
<img src="images/twitter.png"
9 width="37" height="37" alt="Twitter" border="0" />
2 </a>
0 </td>
2 </tr>
1 </table>
</td>
2 </tr>
2 </table>
2 </td>
3 </tr>
2
4
2
5
2
6
2
7
2
8
2
9
3
0
footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color:
#ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}
Optimising Buttons for Mobile

On mobile, it's ideal if the whole button is a link, not just the text, because it's much
harder to target a tiny text link with your finger. Because it's not possible to have this
work on all desktop clients (padding isn't fully supported on <a> tags), it's something
that I add to the mobile version using media queries.
We'll have to strip the colour from the <td> to which it is currently applied, and then
apply it back to the <a> tag along with lots of padding.
I will use both max-width and max-device-width in this media query in an attempt to
avoid a bug in Outlook.com on IE9.
@media only screen and (max-width: 550px), screen and (max-device-

1width: 550px) {
2body[yahoo] .buttonwrapper {background-color: transparent!important;}
3body[yahoo] .button a {background-color: #e05443; padding: 15px 15px
413px!important; display: block!important;}
}

Doctype HTML Public

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Doctype HTML Public

Transféré par

Droits d'auteur :

Formats disponibles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

<!--[if (gte mso 9)|(IE)]>

<td class="header" bgcolor="#c7d8a7">

1 .header {padding: 40px 30px 20px 30px;}

Replace our little "Hello!" Greeting with the following:

1<table width="70" align="left" border="0" cellpadding="0"

<!--[if (gte mso 9)|(IE)]>

.col425 {width: 425px!important;}

Creating the Double Column Article

Creating the Single Column Image

1 img {height: auto;}

Creating the Final Plain Text Row

Creating the Footer

Optimising Buttons for Mobile

@media only screen and (max-width: 550px), screen and (max-device-

Vous aimerez peut-être aussi