La mejor guía para el diseño de correo electrónico
Si bien una gran cantidad de comunicación en línea se ha trasladado a las redes sociales, el correo electrónico sigue siendo una parte muy importante de cualquier campaña de marketing en línea. Y cuando pensamos en los correos electrónicos de marketing, lo que generalmente viene a la mente es el correo electrónico HTML, en lugar del texto sin formato.
Diseñar para el correo electrónico es como diseñar una página web simple, pero hay algunas diferencias clave que debe tener en cuenta. También debe tener en cuenta que el correo electrónico es un impulso, en lugar de tirar, la comunicación.
Las personas a menudo reciben correos electrónicos a un ritmo abrumador, y no siempre cuando les resulta conveniente mirarlos. Eso significa que tiene meras fracciones de segundo para llamar su atención antes de pasar al siguiente mensaje en su bandeja de entrada (a diferencia de un sitio web, que han elegido visitar en un momento determinado).
Pero siempre que lo tenga en cuenta, que solo tiene un instante para captar la atención de su lector, tendrá una experiencia mucho más fácil y fluida al diseñar correos electrónicos efectivos.
Móvil o busto
Hoy en día, muchas personas acceden al correo electrónico desde un dispositivo móvil (casi la mitad de todos los correos electrónicos se abren en aplicaciones móviles), de modo que no tiene sentido dedicar mucho tiempo al diseño de correos electrónicos preciosos que no se muestran correctamente en dichos dispositivos.
Después de todo, si el correo electrónico no se ve bien cuando lo verifican en su teléfono, ¿cuáles son las probabilidades de que sus suscriptores lo vuelvan a ver cuando vuelvan a su escritorio? Apostaría bastante delgado. De hecho, la mayoría de ellos probablemente borren el correo electrónico o, lo que es peor, cancelen la suscripción.
Hay dos formas de diseñar para dispositivos móviles. Puede crear correos electrónicos que cambian de tamaño para adaptarse a la pantalla del lector, lo que puede ser perfectamente adecuado para algunos diseños simples. O puede crear un diseño de correo electrónico receptivo que se adaptará a diferentes tamaños de pantalla.
Hay ventajas y desventajas para cualquiera de los enfoques. Los correos electrónicos que cambian de tamaño son bastante fáciles de codificar y tienden a funcionar prácticamente en cualquier dispositivo. Pero funcionan mejor con diseños de correo electrónico muy sencillos que pueden ser vistos a un tamaño significativamente más pequeño que el tamaño de escritorio.
Los diseños receptivos son mucho más complejos de codificar, y no son compatibles con todos los navegadores móviles (aunque es probable que el soporte continúe mejorando en el futuro).
Diseño de respuesta
Es probable que los diseños receptivos sean más prácticos para la mayoría de sus correos electrónicos HTML que los diseños que simplemente cambian de tamaño. Esto se debe a que en pantallas muy pequeñas, los correos electrónicos que simplemente se han reducido serán casi con seguridad muy difíciles de leer.
Ya hemos discutido por qué los correos electrónicos amigables para dispositivos móviles son vitales, pero aquí hay algunas cosas que se deben tener en cuenta al diseñar esos correos electrónicos. Estas son las cosas que deberían activarse para los diseños de dispositivos móviles y se pueden adaptar para las versiones de pantalla grande de sus correos electrónicos.
- Su diseño debe ser bastante estrecho: en el rango de 500-600 píxeles es estándar. Esto los hará más legibles tanto en dispositivos de escritorio como en dispositivos móviles, con menos posibilidades de que su diseño no funcione bien cuando se redimensiona.
- Asegúrese de que sus fuentes sean lo suficientemente grandes. Tenga en cuenta cuáles son los tamaños mínimos de fuente para varias plataformas para que las fuentes no se escalen (lo que podría afectar su diseño). Por ejemplo, iOS usa un tamaño de fuente mínimo de 13 píxeles.
- Las áreas seleccionables deben ser amigables con las pulsaciones. Eso significa hacerlos lo suficientemente grandes y lo suficientemente aislados de otros enlaces para que un usuario pueda activarlos fácilmente en el primer intento (porque es posible que no obtenga un segundo).
- No dude en utilizar display: none para ocultar elementos innecesarios en sus diseños de dispositivos móviles. Lo que es fácil de usar en un escritorio o incluso en una tableta se convierte en un desorden molesto en un teléfono inteligente. Menos es definitivamente más en pantallas más pequeñas.
Vale la pena tomarse el tiempo para esbozar wireframes para sus versiones de correo electrónico móvil y de escritorio antes de comenzar a codificar. Preste especial atención a dónde aparece su llamado a la acción y otra información importante especialmente en la versión móvil.
Consideraciones tipográficas
Si bien muchos diseñadores se centran en el contenido gráfico de los correos electrónicos HTML, la tipografía es aún más importante que en muchos sitios web. Después de todo, teniendo en cuenta cuántos clientes de correo electrónico evitan que las imágenes se carguen inicialmente, es posible que algunos de los destinatarios del correo electrónico solo vean la tipografía.
Considere usar tamaños de letra grandes para una mejor legibilidad independientemente del tamaño de la pantalla. También tenga en cuenta la longitud de las líneas en varios tamaños de pantalla, y asegúrese de que no sean demasiado largos (lo que puede hacer que sea difícil para el ojo viajar de una línea a la siguiente sin perder su lugar) o demasiado cortos (lo que hace más desplazamiento necesario).
Asegúrese de usar encabezados y otros formatos tipográficos para hacer que el contenido de su correo electrónico sea más fácil de escanear, especialmente si sus correos electrónicos tienen más de un par de párrafos.
En general, la tipografía de correo electrónico no es muy diferente de la tipografía web en general, además de que la parte mencionada anteriormente es más probable que sea la primera y / o única cosa que ven sus lectores.
Diferentes correos electrónicos para diferentes propósitos
Hay muchos tipos diferentes de correos electrónicos que puede enviar a sus listas de suscriptores (o diseños para clientes). Cada uno sirve su propio propósito, y cada uno debe diseñarse de la mejor manera para ese propósito.
Boletines informativos
Uno de los tipos de correo electrónico más comunes es el boletín. A menudo consisten en muchos enlaces, frecuentemente con breves fragmentos de texto que los acompañan, o consisten en artículos más largos. En cualquier caso, hay una buena posibilidad de que no haya un solo llamado a la acción presente, y en su lugar puede haber bastantes enlaces para hacer clic.
Esto presenta un desafío único, ya que los diseñadores y creadores de contenido aún tienen que decidir sobre algún tipo de prioridad o jerarquía para el contenido dentro del correo electrónico. En muchos casos, esto significará una historia destacada o un enlace para atraer al lector, con contenido adicional de menor peso.
Plastyk tiene un excelente diseño de boletín de noticias que es divertido y atractivo.
Notificaciones
Otro tipo de correo electrónico común es el correo electrónico de notificación, también conocido como correo electrónico desencadenante. Piense en los correos electrónicos que Facebook envía cuando alguien le envía una solicitud de amistad o Twitter cuando alguien lo sigue. Aunque los correos electrónicos de notificación también pueden ser anuncios. Estos correos electrónicos son notificaciones, pero también están destinadas a activar una acción de su parte (en estos casos, verificar su cuenta). Estos correos electrónicos son generalmente muy cortos y al punto, con un llamativo llamado a la acción.
Aquí hay un correo electrónico de anuncio de Proper Labs.
Correos electrónicos transaccionales
Los correos electrónicos transaccionales se envían cuando un usuario interactúa con un sitio web o compañía de alguna manera. Esto podría ser hacer una compra o registrarse para algo, o podría ser provocado por algo así como cuando un usuario abandona su carrito de compras sin completar una transacción. Estos correos electrónicos sirven para proporcionar información (en el caso de algo así como una confirmación de pedido) o para atraer al visitante hacia atrás (como con un carrito abandonado).
Aquí hay un buen ejemplo de un correo electrónico transaccional de One Eyed Cat. Es un buen ejemplo de cómo las empresas físicas pueden utilizar el marketing por correo electrónico.
Correos electrónicos de marketing
Los correos electrónicos de marketing se envían cuando una empresa desea que haga negocios con ellos. Estos podrían notificarle una oferta especial, un producto nuevo o algo similar. Estos son a menudo los correos electrónicos que incorporan el mayor "diseño" de los correos electrónicos habituales que una empresa podría enviar.
Estos correos electrónicos están destinados específicamente a que un suscriptor realice algún tipo de acción con una empresa o sitio web. Podría ser registrarse, hacer una compra o algo similar. El llamado a la acción en estos correos electrónicos es, de lejos, el elemento más importante, aunque obviamente otros elementos deben respaldar ese llamado para atraer a los lectores a tomar la acción deseada.
Comunidad tiene un excelente correo electrónico de marketing que es otro buen ejemplo de cómo las empresas físicas pueden usar el correo electrónico para atraer a sus clientes.
Mejores prácticas de diseño de correo electrónico
Si bien el diseño de correo electrónico y el diseño web comparten muchos de los mismos atributos, existen algunas diferencias clave que debe tener en cuenta al diseñar el correo electrónico. Si bien la mayoría de ellos se adaptan fácilmente, siguen siendo importantes y hacen que sus correos electrónicos sean mucho más efectivos.
Se trata del contenido
El contenido siempre es importante, independientemente de lo que estés diseñando. Pero con el correo electrónico, y particularmente con los correos electrónicos que probablemente se verán en un dispositivo móvil, mantener su contenido corto y directo es aún más vital. Tienes unos segundos como máximo para atraer a tu lector, y si esos primeros segundos se pierden en información extraña que no es útil, entonces los has perdido.
Asegúrese de que su contenido sea lo más conciso y claro posible. La eficiencia es clave, y si su lector no puede discernir muy rápidamente de qué se trata su correo electrónico y exactamente lo que quiere que haga, entonces está perdiendo el tiempo.
Llamada a la acción clara
El llamado a la acción es posiblemente la parte más importante de cualquier diseño de correo electrónico. Obviamente, su correo electrónico tiene algún propósito, ya sea para que los lectores se registren para algo, lean algo o compren algo. Y su llamado a la acción debe dejar en claro qué es esa cosa y atraer a su lector a hacer lo que usted quiere que haga.
Los llamados a la acción generalmente vienen en forma de botones. Debe ser identificable de inmediato, y no muy lejos del correo electrónico (después de todo, solo tiene unos segundos para llamar su atención, por lo que ubicar su llamado a la acción donde lo verán en esos pocos segundos aumenta sus posibilidades de siendo efectivo).
Asegúrate de que tu llamado a la acción también sea fácil de usar. Eso significa que debe ser lo suficientemente grande como para que sea fácil hacer clic en un dispositivo móvil, y que no haya otros enlaces lo suficientemente cerca como para que puedan hacer clic accidentalmente.
Pruebe temprano, pruebe a menudo
Asegúrese de que todos sus correos electrónicos estén completamente probados en una variedad de dispositivos y clientes. Es posible que desee comenzar a probar sus diseños, etc. desde el principio, pero asegúrese de probarlos durante todo el proceso de diseño para asegurarse de que permanezcan libres de errores.
Las pruebas a menudo también significan que es más probable rastrear errores si surgen, ya que le resultará más fácil recordar los cambios que acaba de realizar.
Comprenda exactamente qué es lo que cada uno de los principales clientes y dispositivos admite, y dónde se quedan cortos exactamente, y encuentre marcos y plantillas que aborden esas deficiencias o diseñen a su alrededor.
Hacer uso del texto previo al encabezado
El texto del encabezado previo aparece en muchos clientes de correo electrónico como una vista previa del mensaje. Ver esto tan importante como el asunto de su correo electrónico. Úselo para atraer a su lector a abrir realmente el correo electrónico. Esto puede ser especialmente útil ya que muchos clientes de correo electrónico cortan largas líneas de asunto.
Enlace a la versión alojada en la web
Asegúrese de incluir un enlace a la versión de sus correos electrónicos alojada en la web, en caso de que alguien esté genuinamente interesado pero tenga problemas para verlo en su dispositivo móvil o en su cliente de correo electrónico. Muchos servicios de correo electrónico le permiten usar un enlace de seguimiento para esto (y otros enlaces), para que pueda ver quién está haciendo clic.
Mantenlo simple
Si bien puede diseñar diseños complejos con montones de gráficos y elementos estilizados, aumenta el riesgo de que sus correos electrónicos no se muestren como lo pretendía para todos sus lectores.
Diseños más simples y diseños más simples significan que sus correos electrónicos son más legibles universalmente en dispositivos sin una tonelada de soluciones y piratas informáticos. Si bien los diseños complejos pueden ser más estéticos para algunos, a menudo no vale la pena las complicaciones adicionales que presentan para un beneficio tangible mínimo.
Plantillas y marcos
Si bien la codificación de un correo electrónico HTML completamente desde cero es completamente factible (consulte nuestro artículo anterior " Cómo diseñar un correo electrónico HTML receptivo "Para obtener detalles sobre los aspectos técnicos), usar un marco o una plantilla para comenzar, o incluso una plantilla prefabricada, puede acelerar en gran medida el proceso y hacerlo más accesible para el diseñador principiante.
Cerberus
Cerberus es un conjunto de patrones de correo electrónico receptivos que funcionan incluso en Outlook y Gmail para dispositivos móviles. Puede usar los bloques de código juntos o por separado. Hay dos versiones: una que se basa en consultas de medios y otra que no.
Tinta
Tinta es una repetición de correo electrónico receptiva de Zurb. Los correos electrónicos creados con Ink funcionan en cualquier dispositivo y cliente, incluso en Outlook. Es lo suficientemente simple como para sumergirse, además de estar completamente documentado.
Plantillas de correo electrónico receptivas basadas en tinta
Estas Plantillas de correo electrónico receptivas basadas en tinta son un excelente lugar para comenzar con Ink. Hay cuatro plantillas: una sola columna básica, un correo electrónico de héroe-imagen, un diseño de barra lateral y un diseño híbrido de barra lateral-héroe.
Plantillas de correo electrónico receptivas
Zurb tiene algunos adicionales Plantillas de correo electrónico receptivo , incluida una plantilla de boletín con una imagen de héroe que se encuentra en esta página. También incluye alguna otra información útil sobre el uso de las plantillas.
Patrones de correo electrónico receptivos
Patrones de correo electrónico receptivos es una colección de patrones y módulos para crear correos electrónicos receptivos. Incluye patrones para diseños, navegación, listas, medios y más.
Plantilla de correo electrónico HTML realmente simple
los Plantilla de correo electrónico HTML realmente simple es exactamente lo que dice que es: una plantilla de correo electrónico HTML súper simple con un diseño muy básico. Es una columna única, con un llamado a la acción integrado, y un propósito claro.
Constructor de plantillas
The CampaignMonitor Constructor de plantillas le permite crear plantillas gratuitas de correo electrónico HTML en solo un minuto. Los resultados están listos para dispositivos móviles, completamente probados, y pueden usarse directamente en CampaignMonitor o descargarse para su uso en otro lugar.
Plantillas de correo electrónico gratuito
Estas Plantillas de correo electrónico gratuito de CampaignMonitor son gratuitos para descargar y usar si usa CampaignMonitor o no. Hay toneladas de estilos y diseños disponibles, más de 100 en total.
HTML Correo electrónico Boilerplate v 0.5
los HTML texto repetitivo es un buen punto de partida para crear correos electrónicos. No contiene diseño o diseño, lo que ayuda a evitar muchos problemas de procesamiento en los principales clientes de correo electrónico.
Email Boilerplate
Esta Email Boilerplate de Emailology incluye todos los elementos básicos que necesita para configurar sus correos electrónicos HTML, como CSS y HTML. Está comentado para darte instrucciones de uso.
Antwort
Antwort ofrece diseños responsivos a prueba de balas para correos electrónicos que se adaptan a diversos anchos de clientes. Es compatible con todos los principales clientes de correo electrónico, incluidos Outlook y Gmail.
Plantillas de boletín informativo de GraphicMail
GraphicMail ofrece hasta 100 plantillas gratuitas de boletines. Se requiere una cuenta gratuita para usarlos.
Plantillas de correo electrónico ThemeForest
ThemeForest ofrece toneladas de plantillas de correo electrónico premium, que van desde $ 6 a $ 19. Las plantillas premium a veces son más fáciles de usar y pueden tener características adicionales que pueden ser difíciles de encontrar en plantillas gratuitas.
Stamplia
Stamplia ofrece un mercado de plantillas premium, donde puede comprar y vender plantillas para boletines informativos, correos electrónicos transaccionales y más.
Herramientas de correo electrónico
e-Newsletter WordPress plugin
los e-Newsletter WordPress plugin ofrece una gestión profesional de sus boletines de noticias por correo electrónico y suscriptores directamente en la interfaz de administración de WordPress. Si bien el servicio de correo electrónico de autohospedaje puede presentar su propio conjunto de desafíos, también le brinda control total y elimina las tarifas mensuales del servicio, lo que puede ser bastante valioso para muchas empresas.
Imágenes de fondo a prueba de balas
Imágenes de fondo a prueba de balas de CampaignMonitor es una herramienta simple para codificar sus imágenes de fondo de correo electrónico. Simplemente ingrese la URL de la imagen de fondo, el color alternativo, y si es para el cuerpo completo del correo electrónico o simplemente para una sola celda de la tabla, y le da el código.
Botones de correo electrónico a prueba de balas
Botones de correo electrónico a prueba de balas de CampaignMonitor le permite diseñar hermosos botones progresivamente mejorados para sus correos electrónicos. Son perfectos para llamadas a la acción.
Tornasol
Tornasol es un conjunto de herramientas de seguimiento y prueba para correo electrónico. Incluye vistas previas de correo electrónico, análisis y herramientas de prueba de filtrado de spam. Comienza en $ 79 / mes, con planes anuales con descuento.
Alcance de tornasol
Alcance de tornasol hace que sea fácil crear una versión limpia y basada en la web de cualquier correo electrónico que luego pueda compartir. Está disponible para descargar, así como en forma de marcador que funciona con cualquier correo web.
Ejemplos e inspiración
Hay toneladas de galerías de correo electrónico que puedes buscar inspiración. ¡Pero aquí hay veinte correos electrónicos increíbles para que comiences!
Balleneros
Subasta de Santa Teresa
Tienda en línea chicos
Punto de Inspiraciones
En todos lados
Esfera
Forma Función y clase
Boden
Buen provecho
Sevenly
Camino
Zombie Survival Guide para vendedores de correo electrónico
Fooda
Diseñador de Noticias
Caridad: agua
EwerkNews
Interworld Plastics
Zehno
PSD Freebies
WalkieTalkie
Más galerías para inspirarte
Realmente buenos correos electrónicos ofrece diseños de correo electrónico categorizados, muchos de ellos con comentarios sobre lo que los hace geniales.
Galería de correo electrónico le permite buscar diseños de correo electrónico en función del color, tipo de negocio y más.
Inspiración del correo electrónico de CampaignMonitor le permite navegar por el número de columnas y el tipo de correo electrónico (anuncio, boletín o invitación).
Mira lo que puedes hacer , de MailChimp, ofrece muchos correos electrónicos enviados a través del servicio en busca de inspiración.
Galería de correo electrónico HTML ofrece una galería cronológica de diseños de correo electrónico.
La Galería de diseño de correo electrónico es un blog de Tumblr que muestra excelentes diseños de correo electrónico de una variedad de fuentes.
Hermosos boletines por correo electrónico es una galería de correo electrónico categorizada que también incluye una función de búsqueda.
Servicios de correo electrónico
Los servicios de correo electrónico ofrecen varias funciones, pero casi todos manejan la administración de sus listas de suscriptores y el envío de correos electrónicos en su nombre. Muchos tienen características adicionales de seguimiento y automatización, también. La mayoría de estos no requieren contrato o compromiso, aunque algunos ofrecen descuentos por prepago de plazos más largos.
Contacto constante
Contacto constante comienza en $ 20 / mes por cmapaigns básicos de correo electrónico que incluyen administración de contactos y uso compartido en redes sociales, con planes más costosos que incluyen funciones adicionales como seguimiento detallado.
MailChimp
MailChimp ofrece un plan "Emprendedor" gratuito que admite hasta 12,000 correos electrónicos a 2,000 suscriptores, con planes pagados que le permiten administrar volúmenes mucho más altos.
ActiveCampaign
ActiveCampaign comienza en $ 9 / mes para hasta 500 contactos, con planes que van desde allí, incluidos planes empresariales que ofrecen representantes de cuenta dedicados y servicios adicionales.
Obtener una respuesta
Obtener una respuesta tiene planes que comienzan en $ 15 / mes para hasta 1,000 suscriptores, aunque ofrecen descuentos para la facturación anual.
AWeber
AWeber le permite comenzar por solo $ 1 durante el primer mes, y meses después desde $ 19 por mes para recibir correos electrónicos ilimitados con hasta 500 suscriptores.
Amazon SES
Amazon SES (Simple Email Service) es un servicio de envío de correo electrónico solo de salida. Si ya eres usuario de Amazon EC2, puedes enviar hasta 2.000 correos electrónicos por día de forma gratuita. De lo contrario, los mensajes de correo electrónico tienen un costo de $ 0.10 por mil, con tarifas adicionales por la transferencia de datos y archivos adjuntos, lo que hace que esta sea una de las opciones de envío de correo electrónico más asequibles.
Emma
Emma ofrece planes desde $ 45 para correos electrónicos ilimitados para hasta 2500 suscriptores. También ofrecen un descuento del 20% para organizaciones sin fines de lucro y un descuento del 20% para prepago anual.
Correo electrónico de HubSpot
Correo electrónico de HubSpot ofrece una gran cantidad de herramientas de seguimiento y para obtener más suscriptores, y es parte del servicio general de HubSpot, que comienza en $ 200 / mes para sus primeros 100 contactos (y $ 100 / mes más por cada 1,000 adicionales), y continúa desde allí.
GraphicMail
GraphicMail ofrece un plan de precios basado en la cantidad de correos electrónicos enviados o la cantidad de suscriptores, con precios para los primeros a partir de menos de $ 10 por mes, y los segundos a partir de solo $ 25 por mes.
Conclusión
Si bien los correos electrónicos de texto plano pueden ser perfectamente suficientes para muchas comunicaciones, no se cortan con muchos otros. Comprender cómo funcionan los correos electrónicos HTML, y conocer las herramientas y plantillas disponibles para que sea mucho más fácil crearlos, es vital para prácticamente cualquier diseñador.
Imagen / miniatura destacada, imagen de iPhone a través de Kārlis Dambrāns