Share
Al igual que muchos otros diseñadores web, me gusta la codificación de páginas web hermosas pero flexibles que se muestran prácticamente idénticas en todos los navegadores web. Desafortunadamente, el diseño de boletines por correo electrónico le devuelve diez años. Etiquetas obsoletas, tablas, estilo en línea, ¡oh! En este artículo, enumeraré seis métodos que mejorarán inmediatamente los diseños de sus correos electrónicos..
Como nuevo empleado en el servicio de marketing por correo electrónico opt-in AWeber, mi primera tarea fue crear un par de docenas de nuevas plantillas de boletines de correo electrónico HTML para nuestros clientes. Para el diseñador web amante de los códigos, el correo electrónico HTML es un recordatorio de un pasado sombrío. Después de semanas de trabajo e innumerables dolores de cabeza, entregué los bienes. También aprendí mucho sobre diseño para correo electrónico..
Para ayudarlo a evitar muchos de los dolores de cabeza que encontré durante las pruebas, aquí hay 15 cosas que puede hacer para crear correos electrónicos HTML de excelente apariencia..
Si solo quitas un consejo de este artículo, deja que sea esto. Como diseñadores, pasamos mucho tiempo creando la experiencia de usuario perfecta en la web y probando esa experiencia en múltiples plataformas. Sin embargo, cuando se trata de correo electrónico, muchos de nosotros no brindamos la misma atención a los detalles.
Al igual que las pruebas para la web, crear un diseño de correo electrónico que muestre lo mismo en cada cliente de correo electrónico puede ser una pesadilla absoluta.
Para estar seguro de que sus suscriptores recibirán su mensaje según lo previsto - prueba en todo lo que puedas!
Esto incluye pero no se limita a:
Pero espera hay mas!
Algunos de estos clientes de correo electrónico tienen versiones múltiples, Cada uno de los cuales rendirá CSS y HTML de manera diferente..
Esto es parte de un correo electrónico HTML que está siendo procesado por el versión antigua de Yahoo.
Aquí está exactamente el mismo correo que está siendo enviado por el nueva versión de Yahoo. 
Diferencias sutiles, lo admito. Pero basta de estas diferencias sutiles y se suma a un diseño descuidado. Y si eso no es suficiente ... El navegador de Internet del usuario también puede desempeñar un papel en la forma en que su diseño se traduce..
Ahora, antes de tirar su computadora por la ventana con frustración ... estos próximos pasos pueden ayudarlo a descartar la mayoría de los problemas de prueba.
Me sorprende ver a algunos de los anunciantes más grandes infringir las reglas básicas de uso con respecto al correo electrónico HTML.
Aquí hay algunas pautas para vivir:
Este es el encabezado de un correo electrónico que recibí de Discovery Health:
Tomé esta captura de pantalla de mi cuenta de Gmail - antes de habilitar imagenes. Vea cómo el texto ALT "bullet" y "spacer" se interponen en el camino?
Agregar etiquetas ALT a elementos que solo sirven para propósitos de diseño desordena el diseño y distrae su mensaje.
Eh Pasé todo este tiempo aprendiendo CSS y ahora tengo que volver a las tablas? Cuando se trata de diseño de correo electrónico, las tablas son atractivas como en 2003: son lo más parecido a los estándares que tenemos.
Algunas cosas a tener en cuenta:
Nota: Sus imágenes de fondo se comportarán como si estuvieran en mosaico ... así que planifique en consecuencia.
Yo tampoco lo pensé.
Algunos clientes de correo electrónico populares ignoran el código dentro de las etiquetas de tu cabeza. Gmail y Hotmail son los culpables particulares que vienen a la mente.
Con su diseño configurado en formato de tabla, es hora de aplicar estilos a su texto e imágenes.
Aquí hay algunos consejos y trucos para asegurar que su mensaje se vea casi idéntico en cada
navegador:
¿Sabía que la línea de asunto de cada correo electrónico enviado a una cuenta de Gmail va seguida de los primeros fragmentos de texto dentro de ese correo electrónico en particular??
¿Por qué no usar esto para su ventaja?!
Arriba hay una foto de mi bandeja de entrada de Gmail..
Ambos boletines tienen el mismo contenido de encabezado..
Solo una diferencia: el Boletín 1 aprovecha el formato de la bandeja de entrada de Gmail.
Así es como lo hice:
Inserte una imagen de 1px x 1px como el primer elemento en su correo electrónico. Envuelva la imagen en etiquetas de separación ajustando el color de la fuente al mismo que el fondo. Cualquier texto que pongas en las etiquetas ALT para tu imagen de 1px x 1px ahora reemplazará ese fragmento de Google en la bandeja de entrada de los usuarios.
¡Es tan fácil como eso! Esta diferencia sutil diferenciará su mensaje de otros correos electrónicos en la bandeja de entrada del lector.
He hecho todo lo posible para compartir algunas cosas que hago al crear correos electrónicos HTML. Es tu turno!
¿Cómo hace para diseñar, codificar y probar sus campañas de correo electrónico??
Cualquier otra comunidad de diseño que aprecie cualquier recomendación, consejo o truco que desee agregar..
Accentsconagua