Hacer emailing responsive en CSS

Qué elementos ocultar y cómo hacerlo para tu campaña de emailing responsive

Cuando estés creando tu campaña de emailing, tienes que diseñarla para que todos los destinatarios de la newsletter la vean perfecta, o al menos intentar que cada uno la visualice lo mejor posible. Hoy día es impensable mandar un emailing responsive, es decir, pensado única y exclusivamente para pc: con la cantidad de dispositivos que permiten leer un email, no nos podemos olvidar de las pequeñas pantallas. Más de la mitad de los emails se leen desde móviles o tablets.

Al contrario, se puede añadir un contenido específico en la versión responsive que no aparezca en la desktop como un enlace a Google play.

¿Cómo ocultar un elemento del contenido?

En un primer momento, tendrás que introducir la clase CSS en su código HTML:

CUIDADO: ¡un contenido de tipo texto debe colocarse en una tabla!
Los estilos CSS a colocar:

La clase CSS «ocultar-en-escritorio», sintáxis 1, debe estar colocada en los estilos generales

.ocultar-en-escritorio {
  max-height: 0px;
  font-size: 0;
  display: none !important;
}

La clase CSS «ocultar-en-escritorio», sintáxis 2, debe estar colocada en los estilos generales

 .ocultar-en-escritorio {
   display: inline !important;
   width : auto !important;
   max-height: inherit !important;
   overflow : visible !important;
   float : none !important;
}

Elementos a añadir en las etiquetas <TD> de la tabla contenedora :

«if !mso» para ocultar el contenido en Outlook

<!--[if !mso]><!-->
<!--<![endif]-->

Llamada de la clase «ocultar-en-escritorio» + estilos a especificar online para ocultar el contenido en Gmail

<td class="ocultar-en-escritorio" style="max-height: 0; width: 0; max-height: 0; overflow: hidden; float: left;">Contenido visible únicamente en móvil</td>

– « Ocultar-en-movil » para ocultar un elemento de la versión desktop en la visualización móvil.

Ocultar contenido en versión móvil

Los estilos CSS a colocar :
 

La clase CSS «ocultar-en-movil» debe colocarse en los Media Queries

 body .ocultar-en-movil {
            display:none!important;
}

Elementos a añadir en la etiqueta <TD> de la tabla contenedora :

Llamada de la clase «ocultar-en-movil» para ocultar el contenido

<td align="center" class="ocultar-en-movil">Contenido visible únicamente en escritorio

</td>

<style type="text/css">
.ocultar-en-escritorio {
            max-height: 0px;
            font-size: 0;
            display: none !important;
}
@media only screen and (max-width: 640px) {
.ocultar-en-escritorio {
            display: inline !important;
            width : auto !important;
            max-height: inherit !important;
            overflow : visible !important;
            float : none !important;
}
body .ocultar-en-movil {
            display:none!important;
}
@media only screen and (max-width: 479px) {
.ocultar-en-escritorio {
            display: inline !important;
            width : auto !important;
            max-height: inherit !important;
            overflow : visible !important;
            float : none !important;
}
body .ocultar-en-movil {
            display:none!important;
}
}
</style>
<table border="0" cellpadding="0" cellspacing="0" width="285">
  <tr>
    <td>

            <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <!--[if !mso]><!-->
          <td class="ocultar-en-escritorio" style="max-height: 0; width: 0; max-height: 0; overflow: hidden; float: left;">

            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center" bgcolor="#999900">Contenido visible únicamente en móvil</td>
              </tr>
            </table>

          </td>
          <!--<![endif]--> 
        </tr>
      </table>

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" bgcolor="#FFCC66" class="cacher-sur-mobile">Contenido visible únicamente en escritorio</td>
        </tr>
      </table>

    </td>
  </tr>
</table>