help with design

Hello,

I hope someone can help me. The situation is the following:
When I do the preview of my Campaign, it looks good.

But when I send a test or a real campaign, it is changed, not showing some of the pictures and texts. It is like everything is shifted to the left, and some images are "lost".
I have these problems with Outlook and Hotmail. In Gmail it looks better, although it is still not exactly what we expected.

Thanks for the help you can provide, it is quite urgent,

Jose Escobedo

PS:
Here you can see an screenshot of the preview in Campaign Monitor:
http://www.axikon.com/admin/funciones/archivo.php?id_archivo=7&buscadores=1&directorio_admin=../admin

And here you are a screenshot of the bad looking test email received in Outlook:
http://www.axikon.com/admin/funciones/archivo.php?id_archivo=8&buscadores=1&directorio_admin=../admin

fyredefyre fyredefyre, 6 years ago

Hi jlescobedo,

If you want to share your HTML code also this will help as it's too hard to give you specifics without.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
jlescobedo, 6 years ago

Here is the HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Business Newsletter</title>
<style type="text/css">
<!--
body{background:#D3DDE4;font-family:Helvetica, Arial, sans-serif;}
p{text-align:justify;}
h1{color:#820024;font-size:26px;}
p{font-size:21px;}
img, a img{border:none;}
p a{color:#820024;font-weight:600;}
#noticia1 h1{background:url(imagenes/h1-corto.png) no-repeat;min-width:250px;height:50px;padding-left:40px;padding-top:12px;}
#noticia2 h1{background:url(imagenes/h1.png) no-repeat;min-width:500px;height:50px;padding:14px 0 0 40px;font-size:22px;}
#noticia3 h1,#noticia4 h1,#noticia5 h1{background:url(imagenes/bullet.png) no-repeat left top;padding:3px 0 0 35px;font-size:22px;max-width:450px;}
#noticia2 p,#noticia3 p,#noticia4 p,#noticia5 p{font-size:18px;}
#cuerpo{position:absolute;width:1024px;height:auto;left:50%;margin-left:-512px;top:0;}
#visual{background:url(imagenes/1.jpg) no-repeat;height:63px;}
#visual p{margin:25px 40px 0 40px;float:left;font-size:16px; color:#FFF;}
#visual a{color:#FFF;font-weight:600;}
#cap{background:url(imagenes/2.jpg) no-repeat;height:166px;}
.noticia{margin:0 40px 0 40px; clear:both;}
#noticia1{margin-right:65px;}
.izq{float:left;}
.centro{float:left;}
.dcha{float:right;}
#a{background:#FFF url(imagenes/3.jpg) top no-repeat;min-height:1010px;}
#b{background:#FFF;min-height:0;}
#c{background:#FFF url(imagenes/4.jpg) bottom no-repeat;min-height:469px;}
#botonera{background:url(imagenes/5.jpg) no-repeat;height:70px;}
#botonera img{float:right;margin-right:40px;margin-top:15px;}
#pie{background:#FFF;}
#pie img{height:190px;width:1024px;border:none;}
#subpie{background:url(imagenes/7.jpg) no-repeat;height:106px;}
#subpie p{margin:15px 40px 0 40px;float:left;font-size:16px;text-align:justify;}
#subpie a{color:#000;font-weight:600;}
a:hover{color:#333!important;text-decoration:none;}
.img_izq1,.img_izq2{margin:20px 20px 20px 0;}
.img_dcha1,.img_dcha2{margin:20px 0 20px 20px;}
-->
</style>
</head>
<body>
<div id="cuerpo">
    <div id="visual"><p>En caso de no poder visualizar correctamente este newsletter, por favor <webversion>pulse aqu&iacute;</webversion>.</p></div>
    <div id="cap"></div>
    <div id="a">
        <div id="noticia1" class="noticia">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                    <img src="<$imagesrc link='true'$>" width="500" class="img_izq1">
                    <img src="<$imagesrc link='true'$>" width="500" class="img_izq2">
                </td>
                <td>
                    <h1><$title$></h1>
                    <p><$description$></p>
                </td>
                <td>
                    <img src="<$imagesrc link='true'$>" width="500" class="img_dcha1">
                    <img src="<$imagesrc link='true'$>" width="500" class="img_dcha2">
                </td>
              </tr>
            </table>
            </div>
        <div id="noticia2" class="noticia">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq2">
                </td>
                <td>
                    <h1><$title$></h1>
                    <p><$description$></p>
                </td>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha2">
                </td>
              </tr>
            </table>
        </div>
   </div>
   <div id="b">
        <div id="noticia3" class="noticia">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq2">
                </td>
                <td>
                    <h1><$title$></h1>
                    <p><$description$></p>
                </td>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha2">
                </td>
              </tr>
            </table>
        </div>
        <div id="noticia4" class="noticia">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq2">
                </td>
                <td>
                    <h1><$title$></h1>
                    <p><$description$></p>
                </td>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha2">
                </td>
              </tr>
            </table>
        </div>
    </div>
    <div id="c">
         <div id="noticia5" class="noticia">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_izq2">
                </td>
                <td>
                    <h1><$title$></h1>
                    <p><$description$></p>
                </td>
                <td>
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha1">
                    <img src="<$imagesrc link='true'$>" width="380" class="img_dcha2">
                </td>
              </tr>
            </table>
        </div>
      </div>
    <div id="botonera">
        <unsubscribe><img src="imagenes/baja.png" width="156" height="37" alt="Comun&iacute;quenos que no desea recibir m&aacute;s newsletters de a"></unsubscribe>
        <webversion><img src="imagenes/imprimir.png" width="209" height="37" alt="Imprima la versi&oacute;n online de este newsletter"></webversion>
           <forwardtoafriend><img src="imagenes/reenviar.png" width="207" height="37" alt="Reenv&iacute;e este newsletter"></forwardtoafriend>
    </div>
    <div id="pie"><img src="imagenes/6.jpg" alt="Informaci&oacute;n de contacto de a" border="0" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="735,60,946,88" href="mailto:spain@a.com" alt="Env&iacute;e un correo electr&oacute;nico a a">
        <area shape="rect" coords="734,98,981,123" href="http://www.a.tel" alt="Vea todos la informaci&oacute;n de contacto de a">
        <area shape="rect" coords="733,137,935,167" href="http://www.a.com" alt="Visite la p&aacute;gina web de a">
      </map>
  </div>
    <div id="subpie">
    </div>
</div>
</body>
</html>

Thanks for any help you can give.
J

fyredefyre fyredefyre, 6 years ago

Well I can see your code is mostly built for a web based environment, rather than an email. I'm aware that you have large images also, which while should factor in really doesn't work well for both email and mobile clients.

Your HTML relies a lot on image margins, which has limited support in some email clients. I'd go back to basics and use standard table and cells to define your image placement, whilst also removing mention of widths referring to a percentage.

Note: You'll also find padding will give you similar restrictions, so your best bet is to use cell width/heights to define this down to the pixel


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098