devlint · February 10, 2014 10:14 · Feb 10, 2014 · Feb 10, 2014 · Feb 10, 2014 · Feb 10, 2014
diff --git a/a_model.html → a_responsive_model.html b/a_model.html → a_responsive_model.html
diff --git a/a_model.html b/a_model.html
@@ -0,0 +1,240 @@
+<!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>
diff --git a/bug_space-Outlook.html b/bug_space-Outlook.html
@@ -0,0 +1,35 @@
+<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>
diff --git a/media-query-email.css b/media-query-email.css
@@ -27,8 +27,3 @@
   }
 }
 
-
-/*
-  Pour corriger un bug de marges dans Outlook : surcharger les margin: 0 avec :
-*/
-style="[...] mso-table-layout-lspace: 0pt;mso-table-layout-rspace: 0pt;"
diff --git a/media-query-email.css b/media-query-email.css
@@ -0,0 +1,34 @@
+/***** 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 */
+  }
+}
+
+
+/*
+  Pour corriger un bug de marges dans Outlook : surcharger les margin: 0 avec :
+*/
+style="[...] mso-table-layout-lspace: 0pt;mso-table-layout-rspace: 0pt;"
diff --git a/html_basic.html b/html_basic.html
@@ -0,0 +1,26 @@
+<!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>