Skip to content

Instantly share code, notes, and snippets.

@devlint

devlint/a_responsive_model.html

Created February 10, 2014 10:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save devlint/8913460 to your computer and use it in GitHub Desktop.
Save devlint/8913460 to your computer and use it in GitHub Desktop.
Download ZIP
Email responsive notes
Raw
a_responsive_model.html
<!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" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>**MB_OPTITLE**</title>
</head>
<body yahoo bgcolor="#f6f8f1" style="margin: 0; padding: 0; min-width: 100%!important;font-family: Arial, sans-serif;font-size: 12px;color: #3a3a3a;" class="eoa_lo4">
<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
.eoa_lo4{margin: 0; padding: 0; min-width: 100%!important;font-family: Arial, sans-serif;font-size: 12px;color: #3a3a3a;}
span.yshortcuts { color:#000; background-color:none; border:none;}
span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {color:#000; background-color:none; border:none;}
table{border-collapse: collapse;}
td{vertical-align: top;}
@media only screen and (max-device-width: 599px){
table[class="content"] {width: 300px!important;}
table[class="contentInner"] {width: 270px!important;}
table[class="content"] img,
table[class="contentInner"] img,
table[class="full"] img{width: 100%!important;}
table[class="content"] img[class="noresize"],
table[class="contentInner"] img[class="noresize"],
table[class="full"] img[class="noresize"]{width: auto!important;}
table[class="hide"]{display: none!important;}
table[class="full"]{width: 100%!important;display: block!important;}
table[class="full"] td{width: 300px!important;}
td[class="full"]{width: 100%!important;display: block!important;text-align: center!important;border: 0!important;}
td[class="prixGarantis"]{text-align: center;width:100%;}
td[class="prixGarantis"] img{display: none;}
td[class="prixGarantis"] a{display: inline-block;width: 265px;height: 264px;background-image: url(http://placehold.it/265x264);background-position: 0 50%;}
}
</style>
<div style="background-color: #f6f8f1;margin: 0; padding: 0; min-width: 100%!important;">
<table class="content" align="center" width="600" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"><tr>
<td>
<!-- Flag -->
<table class="content" width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;"><tr>
<td align="right"><a href="#_" style="text-decoration: none;color: inherit;">
Newsletter trimestrielle - Février 2014 <img class="noresize" src="http://placehold.it/20x12" alt="" border="0"/>
</a></td>
</tr></table>
<!-- Logo -->
<table class="contentInner"width="570" align="center" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;"><tr>
<td align="center"><a href="#_" style="text-decoration: none;color: inherit;">
<img class="noresize" src="http://placehold.it/166x85&text=logo" alt="" border="0"/>
</a></td>
</tr></table>
<!-- Menu -->
<table class="hide" width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;"><tr>
<td align="center" style="border-right: 1px solid #9f9495;"><a href="#_" style="color: #9f9495;text-decoration: none;">NOS<br> 26 HÔTELS</a></td>
<td align="center" style="border-right: 1px solid #9f9495;"><a href="#_" style="color: #9f9495;text-decoration: none;">OFFRES<br> ET PROMOS</a></td>
<td align="center" style="border-right: 1px solid #9f9495;"><a href="#_" style="color: #9f9495;text-decoration: none;">WEEK-ENDS<br> MALINS</a></td>
<td align="center" style="border-right: 1px solid #9f9495;"><a href="#_" style="color: #9f9495;text-decoration: none;">CARTES<br> CADEAU</a></td>
<td align="center"><a href="#_" style="color: #9f9495;text-decoration: none;">L'ESPRIT<br> OCEANIA</a></td>
</tr></table>
<!-- Intro -->
<table class="content" width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;"><tr>
<td>
<img src="http://placehold.it/600x325" alt="" border="0"/>
</td>
</tr></table>
<table class="contentInner" width="570" align="center" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;"><tr>
<td>
<span>Titre rose</span><br>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi aspernatur aut commodi delectus dicta dolorum iste magnam magni, natus nesciunt nulla placeat, praesentium quis, rerum similique tempora veritatis. Modi.</span>
</td>
</tr></table>
<!-- Offre -->
<table class="contentInner" width="570" align="center" cellpadding="0" cellspacing="0" style="margin-bottom: 15px;border: 1px solid #d4d4d4"><tr>
<td class="full" width="281" valign="top">
<img src="http://placehold.it/281x198" alt="" border="0" style="display:block;"/>
</td>
<td class="full" valign="top" style="padding: 10px 10px 10px 10px;">
<span>Escale Oceania***</span><br>
<span>PORNICHET</span><br>
<span>A partir de</span><br>
<span>79 €</span><br>
<span>petits-déjeuners inclus</span><br>
<span>Avis clients : ***</span><br>
<span>&gt; JE R&Eacute;SERVE</span>
</td>
</tr></table>
<!-- Offre -->
<table class="contentInner" width="570" align="center" cellpadding="0" cellspacing="0" style="margin-bottom: 15px;border: 1px solid #d4d4d4"><tr>
<td class="full" width="281" valign="top">
<img src="http://placehold.it/281x198" alt="" border="0" style="display:block;"/>
</td>
<td class="full" valign="top" style="padding: 10px 10px 10px 10px;">
<span>Escale Oceania***</span><br>
<span>PORNICHET</span><br>
<span>A partir de</span><br>
<span>79 €</span><br>
<span>petits-déjeuners inclus</span><br>
<span>Avis clients : ***</span><br>
<span>&gt; JE R&Eacute;SERVE</span>
</td>
</tr></table>
<!-- Offre -->
<table class="contentInner" width="570" align="center" cellpadding="0" cellspacing="0" style="margin-bottom: 15px;border: 1px solid #d4d4d4"><tr>
<td class="full" width="281" valign="top">
<img src="http://placehold.it/281x198" alt="" border="0" style="display:block;"/>
</td>
<td class="full" valign="top" style="padding: 10px 10px 10px 10px;">
<span>Escale Oceania***</span><br>
<span>PORNICHET</span><br>
<span>A partir de</span><br>
<span>79 €</span><br>
<span>petits-déjeuners inclus</span><br>
<span>Avis clients : ***</span><br>
<span>&gt; JE R&Eacute;SERVE</span>
</td>
</tr></table>
<!-- Lien decouverte offre -->
<table class="contentInner" width="570" align="center" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;"><tr>
<td align="right" class="full">
<a href="#_" style="text-decoration: none;color: inherit;">&gt; D&Eacute;COUVRIR TOUTES NOS OFFRES HIVER</a>
</td>
</tr></table>
<!-- titre actu -->
<table class="contentInner" width="570" align="center" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 10px;"><tr>
<td style="border-bottom: 1px solid #d4d4d4;padding-bottom: 5px;">
<span>Les actualités Oceania Hotels</span>
</td>
</tr></table>
<!-- actus -->
<table class="contentInner" width="570" align="center" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;"><tr>
<td>
<table class="full" align="left" cellpadding="0" cellspacing="0" border="0" style="width: 284px;"><tr>
<td align="left"><a href="#_" style="text-decoration: none;color: inherit;">
<img src="http://placehold.it/284x132" alt="" border="0"/><br>
<span>Les nuits VIP</span><br>
<span>Sp&eacute;ciale Saint-Valentin !</span><br>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex illum magnam, molestias nam natus nihil nostrum numquam quae unde vero. Aliquid eligendi error fugit impedit laborum modi porro ut velit.</span><br>
<span>&gt; D&Eacute;COUVRIR</span>
</a></td>
</tr></table>
<table class="full" align="right" cellpadding="0" cellspacing="0" border="0" style="width: 284px;"><tr>
<td align="left"><a href="#_" style="text-decoration: none;color: inherit;">
<img src="http://placehold.it/284x132" alt="" border="0"/><br>
<span>Les nuits VIP</span><br>
<span>Sp&eacute;ciale Saint-Valentin !</span><br>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex illum magnam, molestias nam natus nihil nostrum numquam quae unde vero. Aliquid eligendi error fugit impedit laborum modi porro ut velit.</span><br>
<span>&gt; D&Eacute;COUVRIR</span>
</a></td>
</tr></table>
</td>
</tr></table>
<!-- footer logo -->
<table bgcolor="#454545" width="600" class="content" align="center" cellpadding="10" cellspacing="0" border="0"><tr>
<td align="center">
<span style="color:#ffffff;"><img class="noresize" src="http://placehold.it/114x59/ffffff/000000&text=logo_blanc" alt="" border="0"/></span></td>
</tr></table>
<!-- footer picto -->
<table bgcolor="#bdb9b9" width="600" class="content" align="center" cellpadding="0" cellspacing="0" border="0" style="color: #ffffff;"><tr>
<td valign="top">
<table class="full" align="left" cellpadding="10" cellspacing="0" border="0" style="width: 200px;"><tr>
<td valign="top" align="center"><a href="#_" style="text-decoration: none;color: inherit;">
<img class="noresize" src="http://placehold.it/26x30" alt="" border="0"/><br>
<span>Toto</span>
</a></td>
</tr></table>
<table class="full" align="left" cellpadding="10" cellspacing="0" border="0" style="width: 200px;"><tr>
<td valign="top" align="center"><a href="#_" style="text-decoration: none;color: inherit;">
<img class="noresize" src="http://placehold.it/72x30" alt="" border="0"/><br>
<span>Toto</span>
</a></td>
</tr></table>
<table class="full" align="left" cellpadding="10" cellspacing="0" border="0" style="width: 200px;"><tr>
<td valign="top" align="center"><a href="#_" style="text-decoration: none;color: inherit;">
<img class="noresize" src="http://placehold.it/25x30" alt="" border="0"/><br>
<span>Toto</span>
</a></td>
</tr></table>
</td>
</tr></table>
<!-- footer resa tel -->
<table bgcolor="#454545" width="600" class="content" align="center" cellpadding="10" cellspacing="0" border="0" style="color: #ffffff;border-bottom: 1px solid #cbcbcb;"><tr>
<td align="center">
<span style="color:#ffffff;">text fond noir</span>
</td>
</tr></table>
<!-- footer picto contact -->
<table bgcolor="#454545" width="600" class="content" align="center" cellpadding="0" cellspacing="0" border="0" style="color: #ffffff;border-bottom: 1px solid #cbcbcb;border-top: 1px solid #707070;"><tr>
<td>
<table class="full" align="left" cellpadding="10" cellspacing="0" border="0" style="width: 300px;"><tr>
<td align="left"><a href="#_" style="text-decoration: none;color: inherit;">
<img class="noresize" src="http://placehold.it/43" alt="" border="0"/>
</a></td>
<td align="left"><a href="#_" style="text-decoration: none;color: inherit;">
Chat
</a></td>
</tr></table>
<table class="full" align="left" cellpadding="10" cellspacing="0" border="0" style="width: 300px;"><tr>
<td align="left"><a href="#_" style="text-decoration: none;color: inherit;">
<img class="noresize" src="http://placehold.it/43" alt="" border="0"/>
</a></td>
<td align="left"><a href="#_" style="text-decoration: none;color: inherit;">
Facebook
</a></td>
</tr></table>
</td>
</tr></table>
<!-- footer mention -->
<table bgcolor="#454545" width="600" class="content" align="center" cellpadding="10" cellspacing="0" border="0" style="margin-bottom: 20px;border-top: 1px solid #707070;"><tr>
<td align="center">
<span style="color:#ffffff;">text fond noir</span>
</td>
</tr></table>
</td>
</tr></table>
<div style="text-align: center;font-size: 10px;font-family: Arial, sans-serif;color: #000000;">Souhaitez-vous continuer &#224; recevoir <a href="http://public.message-business.com/account/**mb_accountid**/unsubscribe/account.aspx?mb_culture=fr-fr&mb_source=**mb_opid**" target="_blank" style="color: #000000;">notre newsletter ?</a></div>
</div>
</body>
</html>
Raw
bug_space-Outlook.html
<style type="text/css">
table {border-collapse: collapse;}
</style>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tr>
<td>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #00CC99">
<tr>
<td bgcolor="#00CC99"><p style="mso-table-lspace:0;mso-table-rspace:0;">Content in 1</p></td>
</tr>
<tr>
<td bgcolor="#00CC99">Content in 1</td>
</tr>
</table>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #33FFFF">
<tr>
<td bgcolor="#33FFFF"><p style="mso-table-lspace:0;mso-table-rspace:0;">Content in 2</p></td>
</tr>
<tr>
<td bgcolor="#33FFFF">Content in 2</td>
</tr>
</table>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #993366">
<tr>
<td bgcolor="#993366"><p style="mso-table-lspace:0;mso-table-rspace:0;">Content in 3</p></td>
</tr>
<tr>
<td bgcolor="#993366">Content in 3</td>
</tr>
</table>
</td>
</tr>
</table>
Raw
html_basic.html
<!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>
Raw
media-query-email.css
/***** QUELQUES ASTUCES CSS *****/
/*
Pour cibler un TD avec une class => passer par un sélecteur
d'attribut pour éviter que Yahoo ne l'utilise dans la version
desktop !
*/
@media only screen and (max-device-width: 400px) {
td[class="maClass"]{width: 100%;}
}
/*
Pour afficher une image différente sur mobile (donc via les MQ) :
avec le code html suivant :
td.maClass > a > img
*/
@media only screen and (max-device-width: 400px) {
td[class="maClass"] img{display: none;} /* il s'agit de l'image desktop */
td[class="maClass"] a{
display: block;
width: 320px; /* dimensions de l'image mobile */
height: 2580px; /* dimensions de l'image mobile */
background-image: url(../monImage.jpg); /* src de l'image mobile */
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment