Advertisement
  1. Web Design
  2. Email

Lo Que Usted Debería Saber Acerca del Correo Electrónico HTML

by
Read Time:11 minsLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

El correo electrónico es un medio impresionante. Va directamente a la bandeja de entrada y su ROI se reporta en un alto nivel de 4000%. También es perpetuamente malentendido y con demasiada frecuencia se hace mal. Con la reciente explosión de teléfonos inteligentes, estamos más a menudo leyendo nuestro correo en nuestro iPhone o Galaxy, pero desafortunadamente mucho del marketing por correo electrónico ha fallado para mantenerse al día. Veo esto como una gran oportunidad perdida porque un correo electrónico bien ejecutado puede ser muy agradable de abrir y enormemente exitoso.

La Codificación del Correo Electrónico HTML Puede ser un Desafío

Si ya se ha probado en el diseño y desarrollo de correo electrónico HTML, probablemente ya ha establecido que puede ser bastante difícil. Y no se lo está imaginando - es bastante difícil. Esta es la razón:

Los Estándares de Correo Electrónico no Existen

[Vamos a] seguir usando Word para crear mensajes de correo electrónico porque creemos que es la mejor experiencia de creación de correo electrónico.

Cuando usted codifica para la web, puede al menos contar con el hecho de que todos los principales navegadores (Chrome, Firefox, Internet Explorer, Safari y Opera) están intentando adherirse a los estándares web para renderizar HTML y CSS.

Cuando se trata de clientes de correo electrónico, usted está probando una gran cantidad de programas viejos y nuevos. Estos van desde los nuevos teléfonos que se ejecutan en Android y iOS a Lotus Notes de IBM o Microsoft Office 2007 (que procesa su HTML creado con amor mediante el tristemente célebre motor de renderización de HTML de Word. Las versiones anteriores de Outlook utilizaban un navegador para procesar su HTML - lo que es de hecho lógico. ¿Por qué cambiar a un procesador de palabras para procesar HTML preguntará usted? Bueno, por "razones de seguridad", dicen ellos). Y ninguno de estos programas tiene que adherirse a ningún estándar. Básicamente todos lo maquillan. Usted puede ver cómo se ve el soporte de estándares para algunos de los clientes de correo electrónico más populares en el Proyecto de Estándares de Correo Electrónico.

Si eso no es lo suficientemente malo, empareje eso con el siguiente hecho: hay alrededor de un millón de diferentes combinaciones de formas en que el correo electrónico puede renderizarse en el escritorio y en móviles.

demystifying-email-renderingdemystifying-email-renderingdemystifying-email-rendering
Las posibilidades de renderizado son (casi) interminables.

Esta es una lista de algunos de los clientes de correo electrónico más comunes:

Clientes móviles:

  • Android 2.3 y 4.0
  • IPhone 5 iOS 6
  • IPhone 4S iOS 6
  • IPhone 3GS iOS 5
  • IPad 2 iOS 6
  • BlackBerry OS 4 y 5
  • Symbian S60
  • Windows Phone 7.5

Clientes de escritorio:

  • Apple Mail 4, 5, 6
  • Lotus Notes 8.5
  • Lotus Notes 8
  • Thunderbird
  • Correo Electrónico de Windows Live
  • Outlook 2013
  • Outlook 2011 para Mac
  • Outlook 2010
  • Outlook 2007
  • Outlook 2003
  • Outlook 2002 / XP
  • Outlook 2000

Clientes de Webmail:

  • AOL Mail (en cualquier navegador)
  • Gmail (en cualquier navegador)
  • Outlook.com (en cualquier navegador)
  • Yahoo! (en cualquier navegador)

¡Esa es una gran cantidad de dispositivos!

Si ya está familiarizado con el desarrollo web, olvídese de todo lo que sabe acerca de él.

Para combinar todo esto, el estilo condicional tampoco es una opción real. Hay algunas cosas que usted puede hacer con comentarios condicionales, pero se limita a apuntar a determinadas versiones de Outlook, o todo excepto ciertas versiones de Outlook.

Si ya está familiarizado con el desarrollo web, olvídese de todo lo que sabe sobre él. El mayor obstáculo para usted es esperar que las cosas funcionen como un desarrollo web "normal". Esto lo frustrará y lo enviará hacia atrás. Lo peor que puede hacer es enojarse porque no puede usar DIVs o que el margin no es totalmente compatible. Así que olvídese de todo lo que sabe sobre HTML semántico y la última especificación de CSS. Confíe en mí, eso ayudará.

Cómo Enfocar su Trabajo

Echemos un vistazo a algunas sugerencias de flujo de trabajo para la creación de correo electrónico.

Trabaje Estructuralmente Primero

Construir la estructura de su correo electrónico al principio puede ayudarle a evitar muchos errores y problemas más adelante en el camino. Nunca construya en su totalidad y después pruebe - usted puede terminar a menudo con demasiados errores con que lidiar y pueden todos influenciarse entre sí.

Pruebe con Frecuencia

Trabaje hasta llegar a un hito de desarrollo menor (por ejemplo, cuando termine la estructura básica) y luego ejecute una prueba. La mejor manera de probar es usar Litmus o Email on Acid. Recomiendo tomar un plan ilimitado con cualquiera de estas empresas porque ser capaz de probar con frecuencia es realmente importante.

También me gusta mucho dejar a la vista todos mis bordes de tabla para poder ver lo que estoy creando, luego los quito todos al final. También puede tal vez colorear el fondo de ciertas celdas para ayudarse a ver qué secciones están donde. Mi flujo de trabajo ideal es crear un esqueleto, probar, luego añadir mi contenido, probar, diseñar los colores y las fuentes, probar de nuevo y finalmente eliminar mis bordes y probar de nuevo antes de enviar.

Valide con Frecuencia

Valide usando el W3C Validator tantas veces como sea posible. Esto le ayudará a planchar pequeños detalles y se recaerá en errores como etiquetas abiertas o falta de las mismas.

Enviando Su Correo Electrónico

Hay un gran número de opciones cuando se trata de enviar su correo electrónico. Los dos servicios que utilizo más son MailChimp y Campaign Monitor. Ambos ofrecen precios competitivos y son muy fáciles de usar. También existe una gran cantidad de plataformas comerciales - todo depende de sus necesidades. Regístrese con una cuenta gratuita con cualquiera de estos servicios y juegue un poco con sus sistemas para ver cuál le gusta más. Asegúrese de utilizar los datos útiles que ambos servicios recopilan sobre sus correos electrónicos, como tiempos abiertos y uso del cliente de correo electrónico. Esto realmente puede ayudarle a enfocar sus esfuerzos en el área correcta la próxima vez que envíe.

Puntajes para Contenido, Desarrollo y SPAM

Cuando se trata de SPAM, contenido, diseño y desarrollo, todos van de la mano. Es importante evitar las típicas tácticas de spam como el uso de mayúsculas y un montón de puntos de exclamación en la línea de asunto. Hay ciertas palabras que son propensas a disparar filtros de SPAM también (como "gratis" e "inversión").  Cuanto más limpio sea su código, menos probable será que su correo sea marcado como SPAM, y la proporción de imágenes en el texto también tiene un efecto. Los correos electrónicos que dependen de imágenes y que no tienen texto tienen más probabilidades de estar marcados como SPAM además de los correos electrónicos con nombres de archivo de imagen muy largos.

El mundo de los puntajes de SPAM es complicado y es importante ejecutar una prueba de SPAM a través de su cuenta de prueba con Litmus o Email on Acid antes de enviar su correo electrónico, para asegurarse de que todo su trabajo duro no se dirige directamente a la carpeta de Correo Basura.

Entrando en el Desarrollo

Ahora, hacia lo esencial del desarrollo de correos electrónicos...

Herramientas del Comercio

Usted necesitará un editor de texto que le guste (yo uso Sublime Text) y una cuenta de prueba con Litmus o Email on Acid. Recomiendo encarecidamente tener una cuenta de prueba ilimitada con cualquiera de estas empresas, ya que hará que su vida mucho más fácil. Si no paga una cuota mensual, terminará pagando entre $ 3 y $ 5 por prueba lo que puede ir sumando muy rápidamente.

Empezando con una Buena Base

Creo que es bueno comenzar con una pizarra en blanco. Frameworks como el HTML Email Boilerplate están llenos de trucos y fragmentos maravillosos que puede implementar pieza por pieza. Sin embargo, si usted apenas está comenzando, yo no recomiendo usarlo como punto de partida pues contiene muchos de elementos que usted no necesitará. Las plantillas a menudo pueden hacer más difícil de solucionar cualquier problema si existe una gran cantidad de código no utilizado en su archivo.

Nota: Debido a que puede ser muy precario usar cualquier tipo de editor (especialmente cuando es el momento de solucionar problemas), usted nunca debe usar un editor WYSIWYG o cualquier tipo de editor que promete tomar su diseño con formato y convertirlo mágicamente en HTML para enviar por correo electrónico. Estas cosas nunca funcionan.

!DOCTYPE

Esto puede parecer un detalle técnico, pero necesita una plantilla en blanco para empezar a trabajar y esa plantilla necesita un Doctype. Un doctype es esencialmente una línea de código que informa al programa que la está leyendo qué etiquetas HTML debe esperar y a qué conjunto de reglas HTML y CSS se debe adherir. Más de un cliente retirará su Doctype y algunos incluso aplicarán uno propio. Muchos clientes le harán honor a su doctype y eso puede hacer las cosas mucho más fáciles si usted puede validar constantemente contra un Doctype.

El uso de un doctype XHTML generalmente tiene el menor número de peculiaridades e inconsistencias entre documentos. Yo utilizo XHTML 1.0 Transitional porque ha demostrado ser el doctype más confiable según mi experiencia. En el siguiente tutorial, durante el cual crearemos una plantilla de correo electrónico HTML completa, utilizaremos el siguiente código para comenzar nuestro documento:

La etiqueta meta Content-Type es para indicar al motor de renderización de destino cómo procesar texto y caracteres especiales. En realidad, usted necesita codificar todos sus caracteres especiales de todos modos (por ejemplo, & se convierte en & amp; para ampersand) para estar seguro, pero vale la pena mantener esta línea allí de todos modos.

La etiqueta meta viewport indica al dispositivo que defina el área visible como el ancho de la pantalla del dispositivo. También establece la escala inicial a "normal", lo que quiere decir que no está ni ampliado ni reducido. Si usted no especifica esto, muchos teléfonos inteligentes pueden reducir su contenido de tal manera que el contenido se ajuste dentro del área visible, pero ninguno de sus rellenos o márgenes. Esto puede provocar que el texto y las imágenes se toquen contra el borde de la pantalla.

Por último, escriba siempre un título significativo porque esto es lo que la gente verá cuando vea el correo electrónico en un navegador o lo comparta con sus amigos.

El Correo Electrónico es Todo Acerca de Anidar Tablas

Debido a la falta de soporte de estándares en el correo electrónico, no es posible utilizar divs, secciones o artículos - en vez de eso debe utilizar tablas. Por sobre todo es necesario utilizar muchas y muchas tablas anidadas, ya que ni los atributos colspan ni rowspan están correctamente soportados.

demystifying-email-nestingdemystifying-email-nestingdemystifying-email-nesting

¿Párrafos o Celdas?

De nuevo, debido a la falta de soporte de estándares, no es una gran idea usar etiquetas estándar como h1, h2, h3 o p. He visto que éstos pueden renderizarse de una manera realmente inconsistente a través de clientes de correo electrónico y pueden crear algunos dolores de cabeza bastante grandes.

Su mejor opción es colocar cada bloque de texto en su propia celda y aplicar estilos en línea a esa celda, por ejemplo:

¿Estilos en línea u hojas de estilo?

Esta es más de una elección personal. Yo prefiero mantener todos mis estilos en línea (es decir, dentro de las etiquetas HTML) porque me gusta saber exactamente dónde está todo y qué está afectando a qué. Usted puede codificar usando estilos y luego incluirlos todos en línea al final (Campaign Monitor y MailChimp pueden hacer esto para usted automáticamente, también puede utilizar Premailer o algo similar), pero la razón por la que no me gusta esto es porque usted aprende a conocer su código, lo ejecuta a través de un inliner y entonces su código puede convertirse en algo irreconocible. Me parece que esto hace que sea más difícil de diagnosticar. Diciendo que, si esta es la forma en que desea trabajar, está bien, no hay ninguna razón técnica por la que no debería hacerlo.

No olvide: No puede aplicar varias clases a las cosas en el correo electrónico HTML porque no estṕa soportado. Cada elemento puede tener un máximo de una clase.

No olvide además: No se puede usar métodos abreviados para cosas como tamaño de fuente (es decir, style= "font: 8px/14px Arial, sans-serif;") porque no está soportado.

Nombres de Imágenes y Puntajes de SPAM

Al guardar imágenes, recuerde que es bueno dar a sus imágenes nombres que sean cortos y significativos, ya que mejorará su puntuación de spam. Nombres como "campaign_054_design_0x0_v6_email-link.gif" probablemente tengan una puntuación de SPAM mucho mayor que "email.gif".

Tamaño Imagen

También es una gran idea tratar de mantener todo el correo electrónico tan pequeño como sea humanamente posible: debajo de 100kb es ideal pero no siempre es posible, bajo 250kb es bastante estándar. Utilice una aplicación de compresión como JPEGmini o tinyPNG para bajar el tamaño de todas sus imágenes tanto como sea posible antes de enviar. Los tiempos de carga más lentos, especialmente en el móvil, pueden hacer o deshacer su correo electrónico si el tamaño general del archivo es demasiado grande.

Otros Inconvenientes

No deje nada al cliente de correo electrónico. Especifique todos sus anchos, porque de lo contrario podría terminar con resultados inesperados. Para los elementos de su contenedor principal, siempre establezca el tamaño en píxeles. Usted puede luego utilizar porcentajes dentro de su elemento contenedor si lo desea.

Conclusión

Hay mucho que tener en cuenta al diseñar y desarrollar correo electrónico HTML, la mayoría de lo que implica "des- aprender" estándares que usted ha sido alentado practicar en el diseño web a lo largo de los años. Sin embargo, este tutorial debe haberle dado una base sólida para trabajar, y ahora está listo para saltar al proceso de construcción real. ¡Adelante!

Enlaces Útiles

Hice referencia a algunas cosas durante este tutorial - por lo que aquí están de nuevo, todas en un solo lugar.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.