Share
El correo electrónico es un medio impresionante. Entra directamente en la bandeja de entrada y su retorno de la inversión se reporta ampliamente como un 4000%. También se malinterpreta perpetuamente y con demasiada frecuencia se hace mal. Con la reciente explosión de teléfonos inteligentes, solemos leer nuestro correo en nuestro iPhone o Galaxy, pero desafortunadamente, una gran cantidad de email marketing no se ha mantenido al día. Veo esto como una gran oportunidad perdida porque un correo electrónico bien ejecutado puede ser agradable de abrir y enormemente exitoso.
Si ya ha probado el diseño y desarrollo de correo electrónico HTML, probablemente ya haya demostrado que puede ser bastante difícil. Y no lo estás imaginando, es bastante difícil. Este es el por qué:
[Continuaremos] utilizando Word para crear mensajes de correo electrónico porque creemos que es la mejor experiencia de creación de correo electrónico..
El equipo de perspectivas
Al codificar para la web, al menos puede contar con el hecho de que todos los principales navegadores (Chrome, Firefox, Internet Explorer, Safari y Opera) están tratando de cumplir con los estándares web para la representación de HTML y CSS..
Cuando se trata de clientes de correo electrónico, estás probando en un montón de programas nuevos y antiguos. Abarcan desde teléfonos nuevos que funcionan con Android e iOS, hasta Lotus Notes de IBM o Microsoft Office 2007 (que muestra su famoso HTML creado con amor con el motor de representación HTML de Word. Las versiones anteriores de Outlook utilizaban un navegador para representar su HTML, que en realidad es lógico. ¿Por qué cambiar a un procesador de textos para representar el HTML que pides? Bueno, por "razones de seguridad", dicen). Y ninguno de estos programas tiene que cumplir con ninguna norma. Básicamente todos lo hacen. 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, júntelos con el siguiente hecho: hay alrededor de un millón de combinaciones diferentes de formas en que el correo electrónico puede procesarse en computadoras de escritorio y dispositivos móviles..
Las posibilidades de renderizado son (casi) infinitas.. Aquí hay una lista de algunos de los clientes de correo electrónico más comunes:
Clientes móviles:
Clientes de escritorio:
Clientes de correo web:
Son muchos dispositivos!
Si ya estás familiarizado con el desarrollo web, olvida todo lo que sabes sobre él..
Para complicar todo esto, el estilo condicional tampoco es una opción. Hay algunas cosas que puedes hacer con los comentarios condicionales, pero se limita a apuntar a ciertas versiones de Outlook, o todo excepto ciertas versiones de Outlook.
Si ya está familiarizado con el desarrollo web, olvide todo lo que sabe sobre él. El mayor obstáculo para usted es que las cosas funcionen como el desarrollo web "normal". Esto te frustrará y te frenará. Lo peor que puede hacer es enojarse porque no puede usar DIV o que margen no es totalmente compatible. Así que olvida todo lo que sabes sobre HTML semántico y la última especificación de CSS. Confía en mí, te ayudará.
Echemos un vistazo a algunas sugerencias de flujo de trabajo de creación de correo electrónico.
La construcción de la estructura de su correo electrónico primero puede ayudarlo a evitar muchos errores y problemas más adelante. Nunca construya todo y luego pruebe: a menudo puede terminar con demasiados errores que resolver, y todos pueden estar influyendo entre sí..
Trabaje hasta que alcance 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 en Ácido. Recomiendo llevar a cabo un plan ilimitado con cualquiera de estas compañías porque ser capaz de realizar pruebas con frecuencia es muy importante.
También me gusta mucho dejar todos los bordes de la mesa para poder ver lo que estoy creando, luego los apago al final. Quizás también puede colorear el fondo de ciertas celdas para ayudar a ver qué secciones están donde. Mi flujo de trabajo ideal es crear un esqueleto, probar, luego agregar mi contenido, probar, diseñar los colores y las fuentes, probar nuevamente y finalmente eliminar mis bordes y probar nuevamente antes de enviar.
Valídalo usando el Validador W3C tan a menudo como puedas. Esto le ayudará a resolver pequeños detalles y detectará errores como etiquetas abiertas o faltantes..
Hay un gran número de opciones cuando se trata de enviar su correo electrónico. Los dos servicios que más utilizo son MailChimp y Campaign Monitor. Ofrecen precios competitivos y son muy fáciles de usar. También hay un montón de plataformas comerciales, todo depende de sus necesidades. Regístrese para obtener una cuenta gratuita con cualquiera de estos y tenga una pequeña versión de sus sistemas para ver cuál le gusta. Asegúrese de utilizar los datos útiles que ambos servicios recopilan sobre sus correos electrónicos, como los horarios abiertos y el uso del cliente por correo electrónico. Esto realmente puede ayudarlo a enfocar sus esfuerzos en el área correcta la próxima vez que envíe.
Cuando se trata de SPAM; Contenido, diseño y desarrollo todos van de la mano. Es importante evitar las tácticas típicas de spam, como el uso de mayúsculas y muchos signos de exclamación en su línea de asunto. Hay ciertas palabras que probablemente activen los filtros de SPAM también (como 'gratis' e 'invertir'). Cuanto más limpio sea su código, menos probable será que su correo electrónico se marque como SPAM, y la proporción de imágenes a texto también tiene un efecto. Es más probable que los correos electrónicos que dependen de imágenes sin texto estén marcados como SPAM y también los correos electrónicos con nombres de imagen muy largos.
El mundo de los puntajes de SPAM es complicado y es importante realizar una prueba de SPAM a través de su cuenta de prueba con Litmus o Correo electrónico en ácido antes de enviar su correo electrónico, para asegurarse de que todo su trabajo no vaya directamente a la carpeta de correo no deseado..
Ahora, para el meollo del desarrollo del correo electrónico ...
Necesitará un editor de texto que le guste (uso Sublime Text) y una cuenta de prueba con Litmus o Email on Acid. Recomiendo tener una cuenta de prueba ilimitada con cualquiera de estas compañías, ya que hará su vida mucho más fácil. Si no paga una tarifa mensual, terminará pagando entre $ 3 y $ 5 por prueba, lo que puede sumar bastante rápidamente.
Creo que es bueno comenzar con una pizarra en blanco. Los marcos como HTML Email Boilerplate están llenos de trucos y fragmentos maravillosos que puedes implementar pieza por pieza. Sin embargo, si está empezando, no recomiendo usarlo como punto de partida, ya que contiene muchos elementos que no necesitará. Las placas de calderas a menudo pueden dificultar la resolución de problemas si hay mucho código no utilizado en su archivo..
Nota: Debido a que puede ser muy precario usar cualquier tipo de editor (especialmente cuando es hora de solucionar problemas), nunca debe usar un editor WYSIWYG, o cualquier tipo de editor que prometa tomar su diseño formateado y convertirlo mágicamente en HTML válido para enviarlo por correo electrónico . Esto nunca funciona.
Esto puede parecer un detalle técnico para comenzar, pero necesita una plantilla en blanco para comenzar a trabajar, y esa plantilla necesita un Doctype. Un doctype es esencialmente una línea de código que informa al programa que lee qué etiquetas HTML esperar y a qué conjunto de reglas se adhieren HTML y CSS. Unos cuantos clientes despojan tu Doctype, y algunos incluso aplican el suyo propio. Muchos clientes hacen honor a tu doctype y puede hacer las cosas mucho más fáciles si puedes validar constantemente contra un Doctype.
El uso de un doctype XHTML generalmente tiene el menor número de peculiaridades e inconsistencias entre los documentos. Uso XHTML 1.0 Transitional porque, según mi experiencia, ha demostrado ser el tipo de documento más confiable. En el siguiente tutorial, durante el cual crearemos una plantilla de correo electrónico HTML completa, usaremos el siguiente código para comenzar nuestro documento:
Desmitificando el diseño del correo electrónico
los Tipo de contenido etiqueta meta es para decirle al motor de procesamiento de destino cómo procesar texto y caracteres especiales. En realidad, debe codificar todos sus caracteres especiales de todos modos (por ejemplo, & se convierte & para & ampersand) para estar seguro, pero vale la pena mantener esta línea allí de todos modos..
La etiqueta meta de la ventana gráfica le indica al dispositivo que establezca el área visible al ancho de la pantalla del dispositivo. También establece la escala inicial en "normal", que no se acerca ni se aleja. Si no lo especifica, muchos teléfonos inteligentes pueden reducir su contenido para que el contenido se ajuste al área visible, pero no a su relleno o márgenes. Esto puede dar como resultado que el texto y las imágenes coincidan con el borde de la pantalla.
Finalmente, siempre ingrese 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..
Debido a la falta de soporte de estándares en el correo electrónico, no es posible usar divs, secciones o artículos; en su lugar, debe usar tablas. Por otra parte, necesita usar muchas y muchas tablas anidadas porque ninguna de las dos colspan ni filas de filas los atributos son soportados adecuadamente.
Nuevamente, debido a la falta de soporte de estándares, no es una buena idea usar etiquetas estándar como h1, h2, h3 o pag. Encuentro que estos pueden ser realmente inconsistentes en los clientes de correo electrónico y pueden crear algunos dolores de cabeza bastante grandes.
Su mejor apuesta es colocar cada bloque de texto en su propia celda y aplicar un estilo en línea a esa celda, por ejemplo:
Texto
Esta es más una elección personal. Prefiero mantener todos mis estilos en línea (es decir, dentro de las propias etiquetas HTML) porque me gusta saber exactamente dónde está todo y qué está afectando a qué. Puede codificar usando estilos y luego jalarlos todos en línea al final (Campaign Monitor y MailChimp pueden hacer esto por usted automáticamente, también puede usar Premailer o algo similar) pero la razón por la que no me gusta esto es porque conoce su código, ejecútelo a través de un inliner, y luego su código puede volverse algo irreconocible. Me parece que esto hace que sea más difícil de solucionar problemas. Dicho esto, si esta es la forma en que quieres trabajar, está bien; No hay ninguna razón técnica por la que no debas hacerlo..
No olvides No puede aplicar varias clases a las cosas en el correo electrónico HTML porque no es compatible. Cada elemento puede tener un máximo de una clase..
También no olvides: No puede usar la taquigrafía para cosas como el tamaño de fuente (es decir) porque no es compatible.
Cuando guarde imágenes, recuerde que es bueno darle a sus imágenes nombres cortos y significativos porque mejorará su puntaje de spam. Es probable que los nombres como "campaign_054_design_0x0_v6_email-link.gif" tengan una puntuación de SPAM mucho más alta que "email.gif".
También es una gran idea tratar de mantener su correo electrónico tan pequeño como sea humanamente posible: menos de 100 kb es ideal pero no siempre es posible, menos de 250 kb es bastante estándar. Utilice una aplicación de compresión como JPEGmini o tinyPNG para cortar todas las imágenes al tamaño que sea posible antes de enviarlas. Los tiempos de carga más lentos, especialmente en dispositivos móviles, pueden hacer o deshacer su correo electrónico si el tamaño total del archivo es demasiado grande.
No dejes nada al cliente de correo electrónico. Especifique todos sus anchos, porque de lo contrario podría terminar con resultados inesperados. Para sus elementos contenedores principales siempre establezca el tamaño en píxeles. Puedes usar porcentajes dentro de tu elemento que contiene si lo deseas.
Hay mucho que tener en cuenta al diseñar y desarrollar correos electrónicos HTML, la mayoría de los cuales involucran estándares de "desaprendizaje" que se le ha recomendado practicar durante los años para el diseño web. Sin embargo, este tutorial debería haberte dado una base sólida para trabajar, y ahora estás listo para saltar al proceso de compilación real. Adelante!
Mencioné algunas cosas durante este tutorial, así que aquí están de nuevo, todo en un solo lugar..
Accentsconagua