Técnica de Stacking

Clase 10 de 32 • Curso de Diseño HTML y CSS para Emails 2016

Blanca Segura Garcia

student•

Técnica de Stacking: Posición de elementos en forma vertical. Es una técnica para un “apilamiento de enfoque” y también afecta el orden - En este caso hay dos tablas, como contenedores y a ambas se aplica la clase “blockwrap”. Si se desea cambiar el orden, hay una clase declarada en Styles: “movedown” y “moveup” respectivamente. Esas clases deben incluirse en “inline style” junto a “blockwrap”. El resultado: cambia la posición; es decir, el “Module right” aparecerá sobre el “Module left”.
La técnica de Stacking proporcionan mayor libertad y control en el disenho.

Franklin Roldan

student•

A las clases les hacen falta sus respectivos archivos de html.

Enrique Tecayehuatl

student•

Colocarle a los td’s es una mala práctica, en vez de td anidados podemos usar tablas para que se comporten en móvil como elementos de bloque, pero no solo por eso, si no por que hay plataformas como nation builder que insertan código al código que generamos haciendo que el comportamiento y visualización se comporten de manera diferente, esto te lo comento por que lo he testeado, prefiero que se le aplique anchos, a las tablas, que a td’s, comparto un ejemplo de como soluciono muchos dolores de cabeza. (y testeado claro)

<!-- CONTAINER -->
<table class="w100" border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="ffffff" style="width: 600px; min-width: 600px;">
  <tbody>
    <tr>
      <td align="center">
        <table class="w100" border="0" cellpadding="0" cellspacing="0" width="250" align="left" style="width: 250px;">
          <tbody>
            <tr>
              <td align="center">left content</td>
            </tr>
          </tbody>
        </table>
        <table class="w100" border="0" cellpadding="0" cellspacing="0" width="250" align="right" style="width: 250px;">
          <tbody>
            <tr>
              <td align="center">right content</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<!-- /CONTAINER -->```

Michael Posso

teacher•

Hola kikekeys, que es nation builder?

Es verdad que muchas plataformas insertan codigo. En esos casos, es bueno testear en esa plataforma en particular y hacer los adjustes necesarios. Recuero por ejemplo, que en Responsys, la plataforma insertaba un codigo que no permitia los media queries cuando se veia el email in el telefono de forma horizontal. Eso se lo comunicamos al product team, y al final lo arreglaron para un release despues.

Michael Posso

teacher•

Otro asunto a mencionar. Esta technica la desarrollamos en Oracle por que empezamos a ver problemas con el stacking en telefonos samsung galaxy. Por alguna razon, la aplicacion de email de android empezo a ser remplazada por una aplicacion de email de samsung y nos dio muchos dolores de cabeza. Al final esta fue la technica que nos soluciono el problema.

Andy Garnica

student•

😲

Alexander Valencia

student•

👍😎

Edison Andres Portilla Chungandro

student•

Excelente clase!!

Rafael Villarreal

student•

Es posible utilizar en e-mails algun framework de css como botstrap para facilitar el responsive design debido a su sistema de grillas?
o hay que hacer todo manualmente?

Diego Forero

Team Platzi•

Casi que tienes que hacer todo a mano ya que cada cliente de correo limita las propiedades de css que interpreta, sin embargo existe que te ayuda en este trabajo.

<!-- CONTAINER -->
<table class="w100" border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="ffffff" style="width: 600px; min-width: 600px;">
  <tbody>
    <tr>
      <td align="center">
        <table class="w100" border="0" cellpadding="0" cellspacing="0" width="250" align="left" style="width: 250px;">
          <tbody>
            <tr>
              <td align="center">left content</td>
            </tr>
          </tbody>
        </table>
        <table class="w100" border="0" cellpadding="0" cellspacing="0" width="250" align="right" style="width: 250px;">
          <tbody>
            <tr>
              <td align="center">right content</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<!-- /CONTAINER -->```

Técnica de Stacking

¡Espera pronto la actualización de este curso!

¡Espera pronto la actualización de este curso!

Bienvenido al curso

Bienvenidos

Un poco de historia del correo electrónico

Buenas Prácticas en el Diseño de Email

Configurando el Entorno de Trabajo para Email

Bases de desarrollo para Email

Buenas prácticas en plantilla de estilos para email

Imágenes de“fondo” y VML para Outlook

Imágenes de Alta resolución para Email

¿Cómo organizar tu CSS para email ?

Técnica de Stacking

Técnica de Spacers

Repaso de buenas prácticas para Email

Creando nuestro proyecto

Introducción al proyecto

Exportando nuestras imágenes desde Photoshop

Header de Email de Bienvenida

Responsive en Email de Bienvenida

Call to action en nuestro Email de bienvenida

Terminando el Header del Email

Construyendo el Hero de nuestro Email de bienvenida

Agregando elemento de 3 columnas en el email

Creando un Footer para nuestro Email

Creando un Mail Transaccional

Creando un email de promoción

Mailchimp y Testing con Litmus

MailChimp

Subiendo nuestro Email a MailChimp

Testing con Litmus

Conclusiones

Conclusiones

Complementos del curso

Como usar web fonts en email

Email HTML5 para video

Usando responsive email frameworks

Desafíos

Crear un email con 2 web fonts

Crear un email con Video