La guía definitiva para el uso de fragmentos en el diseño de correo electrónico

Entre docenas de clientes de correo electrónico, innumerables peculiaridades de representación y el cambio de soporte para HTML y CSS, la codificación de campañas de correo electrónico es compleja. Desafortunadamente para los diseñadores de correo electrónico, esa complejidad significa que el diseño de correo electrónico consume más tiempo, por lo que creamos la guía definitiva para el uso de fragmentos en el diseño de correo electrónico.

En la Conferencia de Diseño de Correo Electrónico, Dan Denney de Code School enmarcó el problema a la perfección:

El mayor desafío en la creación de correos electrónicos no es Gmail ... es el momento.

Cuando se trata del diseño de correo electrónico, el tiempo es esencial y poner en marcha un flujo de trabajo de desarrollo es crucial. Para mantenerse al día con las demandas cambiantes del diseño de correo electrónico, es cada vez más importante hacer que su flujo de trabajo sea lo más eficiente posible.

Entonces, ¿qué puede hacer para optimizar su flujo de trabajo? Una palabra: fragmentos .

Con la ayuda de fragmentos, puede crear correos electrónicos con mayor facilidad y rapidez que nunca. Dedique menos tiempo a crear y solucionar problemas de correos electrónicos y más tiempo a crear mejores experiencias de correo electrónico para sus suscriptores.

¿Qué son los fragmentos?

Los fragmentos son módulos de correo electrónico de código reutilizable que puede utilizar en una plantilla de correo electrónico o en un sistema de diseño de correo electrónico más amplio. Son ideales para elementos que se utilizan comúnmente en los diseños de correo electrónico, como el tipo de documento, los botones a prueba de balas y los enlaces. En lugar de tener que volver a escribir el código cada vez que se usa uno de estos elementos, puede usar un fragmento. El uso de fragmentos automatiza su codificación y acelera drásticamente el tiempo de desarrollo.

Cómo usar fragmentos

Independientemente del editor de correo electrónico que esté utilizando para crear sus correos electrónicos, puede usar fragmentos para optimizar su flujo de trabajo. A continuación, se muestra cómo usarlos en los editores más comunes.

Dreamweaver

En Dreamweaver, puede agregar o editar fragmentos visitando: Windows → Fragmentos → Nuevo / Editar. Incluso puede guardar sus fragmentos en grupos (es decir, fragmentos relacionados con tablas, fragmentos relacionados con imágenes, etc.) para facilitar la búsqueda.

Mientras codifica su correo electrónico, use fragmentos haciendo doble clic en el título del fragmento, haciendo clic en insertar o usando un atajo de teclado.

Constructor de tornasol

Dentro de un proyecto de Builder, haga clic en el ícono Snippets en la parte superior derecha del editor.

Puede crear y editar nuevos fragmentos dentro de esa interfaz y activar fragmentos dentro de su código a través de atajos de teclado. También puede agregar puntos de edición dentro del fragmento con {llaves} . Una vez que activa un fragmento, puede saltar automáticamente a los puntos de edición predefinidos en el fragmento para una personalización rápida y sencilla.

Texto sublime

Para ver los fragmentos existentes o agregar nuevos en Sublime Text, visite: Herramientas → Fragmentos / Nuevo fragmento. Cada fragmento se guarda en su propio archivo .sublime-snippet.

Agregue fragmentos en su código a través de activadores de atajos de teclado. Por ejemplo, en el código siguiente, el fragmento se activa cuando se escribe "hola" en el código. También puede agregar puntos de edición dentro del fragmento usando signos de dólar en orden secuencial ( $ 1 , $ 2 , etc.).

 <snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 

Átomo

Vea, edite o agregue fragmentos en Atom visitando: Atom → Abra sus fragmentos. Cada fragmento se guarda como su propio archivo snippets.cson.

Al igual que en Sublime Text, los fragmentos en Atom funcionan a través de un activador de método abreviado de teclado. También puede agregar puntos de edición dentro del fragmento usando signos de dólar en orden secuencial ( $ 1 , $ 2 , etc.).

 'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """ 

Coda

Los fragmentos en Coda se denominan "clips". Para agregar o editar un clip, visite: Barra lateral → Clips. Los clips se pueden guardar en grupos y funcionan en un disparador de atajo de teclado. También puede agregar puntos de edición dentro del fragmento definiendo puntos de marcador de posición personalizados en la interfaz de usuario.

Biblioteca de fragmentos

Dentro de cada editor puede crear una biblioteca de sus fragmentos. Todo dentro de la biblioteca debe estar actualizado y probado previamente. Como el mundo del correo electrónico cambia constantemente, asegúrese de probar con frecuencia sus fragmentos y agregar nuevos cuando sea necesario.

Si bien hay muchos más, hemos reunido una lista completa de algunos de nuestros fragmentos favoritos listos para usar para usar en el desarrollo de correo electrónico. ¡No dude en agregarlos a su biblioteca de fragmentos!

Doctype

Un doctype le dice a un cliente de correo electrónico que procese un correo electrónico en modo estándar o peculiar. Hay dos formas recomendadas de tipos de documentos para usar en el correo electrónico. El primero es el tipo de documento HTML5:

HTML5

 <!doctype html>

XHTML

El segundo es el tipo de documento XHTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Campaign Monitor desglosa qué tipos de documentos HTML son buenos para usar, y también hay una gran discusión al respecto en la comunidad de Litmus. Si no especifica un tipo de documento para su correo electrónico, los clientes de correo electrónico mostrarán el correo electrónico en "modo peculiaridades", lo que puede provocar problemas de representación.

Meta etiqueta

Si está codificando su correo electrónico para que responda, hay varias metaetiquetas clave que debe incluir.

UTF-8

La primera metaetiqueta recomendada establece la codificación de caracteres en utf-8, que es la codificación típica de un correo electrónico. Esto se puede cambiar si es necesario.

 <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />

Viewport

La segunda metaetiqueta recomendada establece la capacidad de respuesta del correo electrónico.

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Telefono windows

La tercera metaetiqueta recomendada es específicamente para hacer que el correo electrónico responda en Windows Phone.

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Mesas

Los correos electrónicos HTML utilizan tablas para estructurar el contenido. Las tablas pueden ser bastante tediosas de codificar a mano, por lo que hemos desarrollado fragmentos básicos para diseños de tablas simples.

Tabla 1 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>

Tabla 2 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabla 3 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabla 2 × 2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabla 2 × 3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabla 3 × 2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Mesa 3 × 3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Botones a prueba de balas

Crear botones en el correo electrónico es bastante complicado gracias a las peculiaridades de la representación de Outlook. Hay cuatro tipos recomendados de botones a prueba de balas, que se muestran independientemente de si hay imágenes presentes o no.

Botón VML

El primer método de botón a prueba de balas fue desarrollado por Stig Morten Myre de Campaign Monitor y es un enfoque de botón basado en VML:

 <div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>

Campaign Monitor también ha creado buttons.cm, una herramienta sencilla para generar el código de botón VML anterior.

Botón acolchado

El segundo método es un enfoque de texto en vivo con un botón basado en relleno:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

La principal desventaja de este botón es que no se puede hacer clic al 100%.

Botón basado en bordes

El tercer método de botón a prueba de balas consiste en crear un borde alrededor del enlace para crear un área grande en la que se puede hacer clic:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

La desventaja clave de este método es que Outlook 2007-2013 no respeta el ancho de los bordes en las etiquetas de enlace, por lo que causa cierta reducción en el relleno artificial del botón.

Acolchado + Botón basado en borde

El método final implica una combinación de los botones de relleno y de borde:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Este truco se utiliza para evitar los problemas de representación de relleno en Outlook.

Imagenes

Existen numerosos factores clave a considerar al usar imágenes en el correo electrónico. Por ejemplo, debe definir la altura y el ancho en los atributos HTML para que las imágenes se representen correctamente en Outlook. Y el uso de texto ALT es extremadamente importante no solo por motivos de accesibilidad, sino porque el 43% de los usuarios ven el correo electrónico sin imágenes. Finalmente, para evitar un relleno adicional y espacios alrededor de las imágenes, debe configurarlas para que muestren: block ;.

 <img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>

Enlaces

Enlace básico

Cuando utilice un enlace en un correo electrónico, deberá establecer estilos en línea en él, como tamaño de fuente, familia de fuentes y decoración de texto. Aquí hay un fragmento simple que ya tiene estos estilos en línea en su lugar:

 <a href="#">{style}</a>

Eliminar enlaces azules en iOS

Existen varias estrategias para eliminar enlaces azules en iOS, pero aquí hay un fragmento simple que utiliza una única declaración CSS para hacerlo:

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

Preencabezado oculto / Texto de vista previa

El texto de preencabezado o vista previa es una copia extraída del cuerpo de su correo electrónico que generalmente se muestra debajo del nombre del remitente y la línea de asunto en la bandeja de entrada de un suscriptor. El uso de texto de preencabezado oculto es una forma de definir la copia utilizada y evitar que afecte el diseño real del correo electrónico.

Aquí está el fragmento:

 <div> {preheader text} </div>

Preguntas de los medios

Las consultas de medios son un componente de las hojas de estilo en cascada (CSS), el lenguaje utilizado para diseñar sitios web y campañas de correo electrónico. Con las consultas de medios, puede ajustar los diseños de correo electrónico para que sean más utilizables en las bandejas de entrada de correo electrónico móvil, de escritorio y web.

Aquí hay una lista de todas las consultas de medios importantes que necesitará al diseñar correos electrónicos:

Consulta de medios base

 @media screen and ({declaration}) { {content} }

Consulta de medios de ancho máximo

 @media screen and (max-width: {width}) { {content} }

Consulta de medios de ancho mínimo

 @media screen and (min-width: {width}) { {content} }

Consulta de medios iPad 1 y 2 + iPad Mini

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

Consulta de medios de iPad 3 y 4

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

Consulta de medios de iPhone 2G / 3G / 3GS

 @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

Consulta de medios de iPhone 4 / 4S / 5 / iPhone 6 (vista de zoom)

 @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

Consulta de medios de HTC ONE + SAMSUNG GALAXY S4 / S5

 @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }

iPhone 6 (vista estándar) + iPhone 6 Plus (vista de zoom) Consulta de medios

 @media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }

Consulta de medios del iPhone 6 Plus (vista estándar)

 @media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }

Comentarios condicionales de Outlook

Con la gran cantidad de problemas de representación que conlleva tener que admitir Outlook, a veces es útil apuntar a Outlook con estilos específicos. Outlook se puede orientar mediante comentarios mso condicionales para contenido HTML o CSS.

Representación de Microsoft Word

 <!--[if mso]> {content} <![endif]-->

Outlook 2000-2013

 <!--[if (gte mso 9)|(IE)]> {content} <![endif]-->

Más comentarios condicionales de Outlook:

• Outlook 2000
• Outlook 2000-2002
• Outlook 2000-2003
• Outlook 2000-2007
• Outlook 2000-2010
• Outlook 2002
• Outlook 2002-2013
• Outlook 2003
• Outlook 2003-2013
• Outlook 2007-2013
• Outlook 2010
• Outlook 2010-2013
• Outlook 2013

WebKit

Una de las mejores formas de mejorar progresivamente su correo electrónico es dirigirse a los motores de renderizado WebKit. Aproximadamente el 47% de las aperturas de correos electrónicos ocurren en bandejas de entrada impulsadas por WebKit.

 @media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }

Gmail

Gmail no admite clases o identificaciones en el <head> de los correos electrónicos, por lo que CSS debe estar incluido en el correo electrónico. Sin embargo, Justin Khoo de FreshInbox descubrió un nuevo truco en el que Gmail leerá CSS en los correos electrónicos.

Si usa el atributo lang o title como selector de atributo cuyo valor está en una lista de valores separados por espacios en blanco, uno de los cuales es una coincidencia exacta, Gmail leerá ese CSS. Eso es un bocado, así que aquí hay un fragmento para ayudarlo:

 * [lang~="{name}"] { {style} }

Yahoo

Yahoo Mail introdujo recientemente su propia consulta de medios única, lo que nos permite apuntar fácilmente a ciertos estilos para el correo web.

 @media yahoo { {style} }

Androide

James White publicó recientemente en la comunidad Litmus un truco para centrar los correos electrónicos en Android 4.4.

 body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }

Fragmentos en la comunidad

¿Quieres más fragmentos? ¿Tiene algunos favoritos que le gustaría compartir? Con la ayuda de los fanáticos del correo electrónico en todas partes, ya tenemos docenas de fragmentos útiles, como el código para eliminar enlaces azules en dispositivos iOS, en la comunidad de Litmus.

Ordene los fragmentos existentes por el cliente de correo electrónico para el que se creó o el tipo de fragmento (es decir, pirateo, imagen, enlace, etc.). Puede agregar el suyo y crear una biblioteca de fragmentos de sus favoritos. Y puede ahorrar aún más tiempo importando fragmentos de Community directamente a Builder. Junto con las vistas previas instantáneas de Builder, la codificación con fragmentos podría ser la forma más rápida de crear campañas de correo electrónico increíbles.

Echa un vistazo a los fragmentos en la comunidad →