Forums Développement Multimédia

Aller au contenu

Newsletter responsive

dreamweaver newsletter responsive html css

  • Vous ne pouvez pas répondre à ce sujet
Aucune réponse à ce sujet

#1 Lyser

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 172 messages

Posté 23 October 2014 - 17:30 PM

Salut,
J'ai récupéré un exemple de newsletter responsive sur le net que j'ai réadapté pour un client, mais en fin de compte je me retrouve avec des problèmes/questions :

Je voulais aussi préciser que j'apprends le html/css sur le tas et que je suis loin d'avoir un niveau confirmé, donc si vous voyez des choses qui pourraient être mieux faites autrement, hésitez pas.

Voila la newsletter en question : http://lyser.fr/catl...seychelles/09r/

1) La news change bien de forme quand on redimensionne le navigateur (2 fois, écran pc - tablettes - smartphone), mais quand je la regarde sur mon smartphone, elle n'apparait pas dans sa forme smartphone mais dans sa forme pc en tout petit. Pourquoi et comment y remédier ?

2) J'ai l'habitude de mettre le css directement dans les "td" avec des "style" car un gros bloc de style css au début dans le </head> a de très grandes chances de na pas être pris en compte par certaines boites de réception ruinant ainsi l'aspect général de la news.
Il y a pourtant un gros bloc css au début traitant de la partie responsive et je n'ai aucune idée comment intégrer ça dans le body de la news.

3) Enfin je vais après chaque news sur w3c pour bien valider le fait qu'il n'y ai aucune erreur de code, d'habitude il n'y a jamais plus d'une dizaine d'erreurs, mais la il y en a environ 200 !!
http://validator.w3....=Inline&group=0
C'est la news qui utilise du css2 au lieu du css3 ? Pourquoi autant d'erreurs ?

voici le code de la news

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Newsletter Catlante Catamarans</title>
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body  {
width: 100%;
background-color: #f5efef;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
font-family: Georgia, Times, serif
}
table {border-collapse: collapse;}

@media only screen and (max-width: 640px)  {
         body[yahoo] .deviceWidth {width:440px!important; padding:0;}
         body[yahoo] .center {text-align: center!important;}
   }
 
@media only screen and (max-width: 479px) {
         body[yahoo] .deviceWidth {width:280px!important; padding:0;}
         body[yahoo] .center {text-align: center!important;}
   }
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">
<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
  <td width="100%" valign="top" bgcolor="#f5efef" style="padding-top:20px">

   <!-- Start Header-->
   <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
        <tr>
         <td width="100%" bgcolor="#f9f9f9">
                                                        <!-- Logo -->
                                                        <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                                                                <tr>
                                                                        <td style="padding:10px 10px 0 10px" class="center"><img src="images/logo.gif" width="260" height="38"></td>
                                                                </tr>
                                                        </table><!-- End Logo -->
                                                 
                                                        <!-- Nav -->
                                                        <table border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
                                                                <tr>
                                                                        <td class="center" style="text-align: right; vertical-align: middle; padding:10px 10px 5px 10px;"><a href="http://catlante-catamarans.com/contact.html" style="text-decoration: none; color: #3b3b3b;"></a><img src="images/tel.gif" width="164" height="32"><img src="images/facebook.gif" width="43" height="32" alt="" border="0" ><img src="images/twitter.gif" width="32" height="32" alt="" border="0" ></td>
                                                                </tr>
                                                        </table><!-- End Nav -->
         </td>
        </tr>
   </table><!-- End Header -->
 
   <!-- One Column -->
   <table width="580"  class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#eeeeed">
        <tr>
         <td valign="top" style="padding:0" bgcolor="#ffffff">
          <a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-seychelles-catlante-600.html"><img  class="deviceWidth" src="images/01.jpg" alt="" border="0" style="display: block;" /></a>     
         </td>
        </tr>
                                <tr>
                                        <td style="font-size: 19px; color: #646464; font-weight: normal; text-align: center; font-family: arial; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px; background-color:#f5f0f0">
          Bienvenue dans l'un des <b style="color: #646464;">plus beaux archipels du monde.</b></td>
                                </tr>                  
   </table><!-- End One Column -->

                        <!-- 2 Column Images & Text Side by SIde -->
                        <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#f9f9f9">
                                <tr>
                                        <td style="padding-bottom:10px">
                                                        <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td valign="top" align="left" class="center" style="padding-top:0px">
                                                                                        <a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-seychelles-catlante-600.html"><img width="440" src="images/02.jpg" alt="" border="0" style="width: 280px; display: block;" class="deviceWidth" /></a>
                                                                        </td>
                                                                </tr>
                                                        </table>                                         
                                                        <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td style="font-size: 12px; color: #646464; font-weight: normal; text-align: left; font-family: arial; line-height: 24px; vertical-align: top; padding:0px 8px 10px 8px; line-height:20px;">
                                                                                <table>
                                                                                        <tr>
                                                                                                <td valign="middle" style="padding:10px 10px 5px 0"><a href="#" style="text-decoration: none; font-size: 20px; color: #2b5e8f; font-weight: bold; font-family:Arial;">Des îles de rêve</a>
                                                                                                </td>
                                                                                        </tr>
                                                                                </table>
                                                                                <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
                                                                                  115 îles disséminées en plein océan indien avec une végatation extraordinaire, des plages vierges comme au premier jour, des fonds marins à couper le souffle, que souhaiter de plus lors d'
une croisière à la voile ?</p>
                                                                        </td>
                                                                </tr>
                                                        </table>
                                               
                                        </td>
                                </tr>
                                                         
                        </table>
                        <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#f9f9f9">
                                <tr>
                                        <td>
                                                        <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td valign="top" align="left" class="center" style="padding-top:0px">
                                                                                        <a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-seychelles-catlante-600.html"><img width="440" src="images/03.jpg" alt="" border="0" style="width: 280px; display: block;" class="deviceWidth" /></a>
                                                                        </td>
                                                                </tr>
                                                        </table>                                         
                                                        <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td style="font-size: 12px; color: #646464; font-weight: normal; text-align: left; font-family: arial; line-height: 24px; vertical-align: top; padding:0px 18px 10px 8px; line-height:20px;">
                                                                                <table>
                                                                                        <tr>
                                                                                                <td valign="middle" style="padding:10px 10px 5px 0"><a href="#" style="text-decoration: none; font-size: 20px; color: #2b5e8f; font-weight: bold; font-family:Arial;">Un voyage inoubliable</a>
                                                                                                </td>
                                                                                        </tr>
                                                                                </table>
                                                                                <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
                                                                                  Lors de ctte croisière en catamaransd'une semaine, nous vous proposons de découvrir quelques-unes des plus belles îles seychelloises, dont les plus célèbres : Mahé, Praslin, La Digue...</p>
                                                                               
                                                                                        <table width="120" align="right">
                                                                                                <tr>
                                                                                                        <td background="images/1px.gif" bgcolor="#409ea8" style="padding:5px 0;background-color:#409ea8; border-top:1px solid #77d5ea; background-repeat:repeat-x" align="center">
                                                                                                                <a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-seychelles-catlante-600.html"
                                                                                                                style="
                                                                                                                color:#ffffff;
                                                                                                                font-size:13px;
                                                                                                                font-weight:bold;
                                                                                                                text-align:center;
                                                                                                                text-decoration:none;
                                                                                                                font-family:Arial, sans-serif;
                                                                                                                -webkit-text-size-adjust:none;">
                                                                                                                                En savoir plus
                                                                                                                </a>
                                                                                                        </td>
                                                                                                </tr>
                                                                                        </table>
                                                                        </td>
                                                                </tr>
                                                        </table>
                                               
                                        </td>
                                </tr>
                                                         
                        </table><!-- End 2 Column Images & Text Side by SIde -->
<div style="height:15px"></div><!-- spacer -->
   <!-- Dark Background, Three Column Images -->
          <!-- 3 Small Images -->
          <table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#f9f9f9">
                                                        <tr>
                                                                <td style="padding:10px 0 0 10px">
                                                                                <table>
                                                                                        <tr>
                                                                                                <td valign="middle" style="padding:0 10px 10px 0"><a href="#" style="text-decoration: none; font-size: 20px; color: #2b5e8f; font-weight: bold; font-family:Arial">Votre catamaran : le Catlante 600</a>
                                                                                                </td>
                                                                                        </tr>
                                                                                </table>
                                                                 </td>
                                                        </tr>
           <tr>
                <td valign="top">
               
                                                                        <table width="33%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
                                                                                <tr>
                                                                                        <td valign="top" align="center" style="padding:10px 0">
                                                                                                        <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/bateau-catlante-600.htm"><img width="440" src="images/04.jpg" alt="" border="0" style="width: 170px;" class="deviceWidth" /></a></p>
                                                                                        </td>
                                                                                </tr>
                                                                                <tr>
                                                                                        <td style="padding:0 10px 5px 10px">
                                                                                                <a href="#" style="text-decoration: none; font-size: 16px; color: #2b5e8f; font-weight: bold; font-family:Arial">La maison d'
hôte des mers</a>
                                                                                                <p style="color:#646464; text-align:left; font-size: 12px; line-height:17px; font-family:Arial">Pour des vacances reposantes, dépaysantes, succombez au charme, au confort et à l'émotion d'une croisière dans les îles Vierges, à bord d'un grand catamaran : le Catlante 600.</p>
                                                                                        </td>
                                                                                </tr>                                                                    
                                                                        </table><!-- End Image 1 -->
                                                                 
                 <table width="33%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
                  <tr>
                   <td valign="top" align="center" style="padding:10px 0">
                         <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/bateau-catlante-600.htm"><img width="440" src="images/05.jpg" alt="" border="0" style="width: 170px;" class="deviceWidth" /></a></p>
                   </td>
                  </tr>
                                                                                <tr>
                                                                                        <td style="padding:0 10px 5px 10px">
                                                                                                <a href="#" style="text-decoration: none; font-size: 16px; color: #2b5e8f; font-weight: bold; font-family:Arial">Espaces communs interieurs</a>
                                                                                                <p style="color:#646464; text-align:left; font-size: 12px; line-height:17px; font-family:Arial">Vous disposez, sans le carré, d'
un salon agréable avec une vue panoramique à 270°.<br>
                                                                                                  La cuisine parfaitement équipée permettra à l'hotesse de préparer de sympathiques repas. </p>
                                                                                        </td>
                                                                                </tr>                                                                    
                 </table><!-- End Image 2 -->
                                                                 
                                                                        <table width="33%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
                                                                                <tr>
                                                                                        <td valign="top" align="center" style="padding:10px 0">
                                                                                                        <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/bateau-catlante-600.htm"><img width="440" src="images/06.jpg" alt="" border="0" style="width: 170px" class="deviceWidth" /></a></p>
                                                                                        </td>
                                                                                </tr>
                                                                                <tr>
                                                                                        <td style="padding:0 10px 9px 10px">
                                                                                                <a href="#" style="text-decoration: none; font-size: 16px; color: #2b5e8f; font-weight: bold; font-family:Arial">Les cabines</a>
                                                                                                <p style="color:#646464; text-align:left; font-size: 12px; line-height:17px; font-family:Arial">lumineuses et spacieuses (6m), elles sont pourvues de lits confortables en 140 et d’une salle d’eau privée.<br>
                                                                                  Le vaste hublot panoramique offre une vue mer imprenable !</p>
                                                                               
                                                                                  <table width="120" align="right">
                                                                                                <tr>
                                                                                                        <td background="images/1px.gif" bgcolor="#409ea8" style="padding:5px 0;background-color:#409ea8; border-top:1px solid #77d5ea; background-repeat:repeat-x" align="center">
                                                                                                                <a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-seychelles-catlante-600.html"
                                                                                                                style="
                                                                                                                color:#ffffff;
                                                                                                                font-size:13px;
                                                                                                                font-weight:bold;
                                                                                                                text-align:center;
                                                                                                                text-decoration:none;
                                                                                                                font-family:Arial, sans-serif;
                                                                                                                -webkit-text-size-adjust:none;">
                                                                                                                                En savoir plus
                                                                                                                </a>
                                                                                                        </td>
                                                                                                </tr>
                                                                                        </table>
                                                                               
                                                                                  </td>
                                                                                </tr>
                                                                        </table><!-- End Image 3 -->
                </td>
           </tr>
          </table><!-- End 3 Small Images -->
                                <!-- Dark Background, Three Column Images -->
<div style="height:15px"></div><!-- spacer -->
                 
   <!-- 2 Column Images - text left -->
   <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#f9f9f9">
                        <tr>
                                                                <td style="padding:10px 0 0 10px">
                                                                                <table>
                                                                                        <tr>
                                                                                                <td valign="middle" style="padding:0 10px 0 0"><a href="#" style="text-decoration: none; font-size: 20px; color: #2b5e8f; font-weight: bold; font-family:Arial">Quelques destinations</a>
                                                                                                </td>
                                                                                        </tr>
                                                                                </table>
                                                                 </td>
                                                        </tr>
        <tr>
         <td style="padding:0 0">
                                                        <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td valign="top" align="right" class="center" style="padding:10px 0 0 0">
                  <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-maldives.html"><img width="440" src="images/d1.jpg" alt="" border="0" style="width: 267px; display: block;" class="deviceWidth" /></a></p>
                                                                        </td>
                                                                </tr>
                                                        </table>
                                                        <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td valign="top" align="left" class="center" style="padding:10px 0 0 0">
                  <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-cuba.html"><img width="440" src="images/d2.jpg" alt="" border="0" style="width: 267px; display: block;" class="deviceWidth" /></a></p>
                                                                        </td>
                                                                </tr>
                                                        </table>                                                                                                         
                                        </td>
                                </tr>
                                <tr>
         <td style="padding:0 0">
                                                        <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td valign="top" align="right" class="center" style="padding:10px 0 0 0">
                  <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-iles-grenadines-catlante600.html"><img width="440" src="images/d3.jpg" alt="" border="0" style="4px; width: 267px; display: block;" class="deviceWidth" /></a></p>
                                                                        </td>
                                                                </tr>
                                                        </table>
                                                        <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td valign="top" align="left" class="center" style="padding:10px 0 0 0">
                  <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-corse-lavezzi-catlante600.html"><img width="440" src="images/d4.jpg" alt="" border="0" style="4px; width: 267px; display: block;" class="deviceWidth" /></a></p>
                                                                        </td>
                                                                </tr>
                                                        </table>                                                                                                         
                                        </td>
                                </tr>
                                <tr>
         <td style="padding:0 0">
                                                        <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td valign="top" align="right" class="center" style="padding:10px 0 0 0">
                  <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-iles-vierges.html"><img width="440" src="images/d5.jpg" alt="" border="0" style="4px; width: 267px; display: block;" class="deviceWidth" /></a></p>
                                                                        </td>
                                                                </tr>
                                                        </table>
                                                        <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td valign="top" align="left" class="center" style="padding:10px 0 0 0">
                  <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-cocktail-iles-turquoises.html"><img width="440" src="images/d6.jpg" alt="" border="0" style="4px; width: 267px; display: block;" class="deviceWidth" /></a></p>
                                                                        </td>
                                                                </tr>
                                                        </table>                                                                                                         
                                        </td>
                                </tr>
                                <tr>
         <td style="padding:0 0">
                                                        <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td valign="top" align="right" class="center" style="padding:10px 0 0 0">
                  <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-thailande-catlante-600.html"><img width="440" src="images/d7.jpg" alt="" border="0" style="4px; width: 267px; display: block;" class="deviceWidth" /></a></p>
                                                                        </td>
                                                                </tr>
                                                        </table>
                                                        <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                                                <tr>
                                                                        <td valign="top" align="left" class="center" style="padding:10px 0">
                  <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="http://catlante-catamarans.com/croisiere-voilier-catamaran-sardaigne.html"><img width="440" src="images/d8.jpg" alt="" border="0" style="4px; width: 267px; display: block;" class="deviceWidth" /></a></p>
                                                                        </td>
                                                                </tr>
                                                        </table>                                                                                                         
                                        </td>
                                </tr>
                        </table><!-- End 2 Column Images  - text left -->                
                 
<div style="height:25px"></div><!-- spacer -->

   <!-- 4 Columns -->
   <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
        <tr>
         <td bgcolor="#f9f9f9" style="padding:30px 0">
                                                <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                                                        <tr>
                                                                <td>                             
                                                                                <table width="47%" cellpadding="0" cellspacing="0"  border="0" align="left" class="deviceWidth">
                                                                                        <tr>
                                                                                                <td valign="top" style="font-size: 11px; color: #f1f1f1; color:#999; font-family: Arial, sans-serif; padding-bottom:20px" class="center">                                                                                                       1) prix à partir de, par personne, base occupation double, croisières de 6 ou 7 nuits, hors participation à la caisse de bord.<br/>
                                                                                                 
                                                                                                        <br/><br/>
                                                                                                        Si vous voulez vous désabonner des newsletters de Catlante Catamarans, <a href="" style="color:#999;text-decoration:underline;">cliquez ici</a>.
                                                                                                </td>
                                                                                        </tr>
                                                                                </table>
                                         
                                                                                <table width="43%" cellpadding="0" cellspacing="0"  border="0" align="right" class="deviceWidth">
                                                                                        <tr>
                                                                                                <td valign="top" style="font-size: 28px; color: #f1f1f1; font-weight: normal; font-family: arial; line-height: 20px; vertical-align: top; text-align:right" class="center">
                                                                        <a href="#"><img src="images/logo2.gif" alt="" height="24" border="0" style="padding-top: 5px;" /></a><br/>
                                                                                                        <a href="#" style="text-decoration: none; color: #848484; font-weight: normal;">01 55 20 90 90</a><br/>
                                                                                                        <a href="mailto:info@catlante.com" style="text-decoration: underline; color: #848484; font-weight: normal;font-size: 15px; line-height: 32px;">info@catlante.com</a><br>
<a href="http://fr-fr.facebook.com/pages/Catlante-catamaranscom/249178711793649"><img src="images/facebook.gif" width="43" height="32" alt="RSS Feed" title="RSS Feed" border="0" /></a><a href="https://twitter.com/Catlante"><img src="images/twitter.gif" width="32" height="32" alt="Twitter" title="Twitter" border="0" /></a>

                                                                                                </td>
                                                                                        </tr>
                                                                                </table>  
                                         
                                                  </td>
                                                 </tr>
                                                </table>                                                                                                                         
                                        </td>
                                </tr>
                        </table><!-- End 4 Columns -->
       
  </td>
</tr>
</table> <!-- End Wrapper -->
</body>
</html>


Merci.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)