Spanish (Español) translation by Jean Perez (you can also view the original English article)
Diseño de correo electrónico sigue un montón de las mismas consideraciones como diseño web: diferentes tipos de navegadores, sistemas operativos, tamaños de pantalla y dispositivos. Pero donde diseñadores han sido capaces de utilizar modernas técnicas CSS y lenguajes de scripting de lado cliente para ayudarles a superar estos desafíos, diseñadores de correo electrónico no han sido tan afortunados.
Así que, ¿qué es un diseñador de correo electrónico para hacer? En primer lugar y lo más importante, como diseñadores de correo electrónico tenemos que olvidar la noción de diseño perfectamente. Entonces, tenemos que aceptar varias consideraciones de diseño que ayudarán a diseños de correo electrónico a brillar sin importar de donde se lee el correo electrónico.
Nota: este tutorial es parte de valor de una semana de contenido de correo electrónico sobre Tuts+ Web Design – la guía de aprendizaje del Dominio de Correo Electrónico HTML para más!
Diseño y Estructura
Mensajes de correo electrónico deben ser fáciles de leer y entender sin importar qué dispositivo es leer en para que su mensaje sea comunicado al suscriptor. Aquí están algunos aspectos de diseño simple a tener en cuenta:
El Modelo de Pirámide Invertida
El modelo de pirámide invertida (donde primero se colocan los elementos que más llame la atención, seguida de información de apoyo y así sucesivamente) es perfecto para los diseños de correo electrónico:
- Crea una jerarquía en el correo electrónico que hace el contenido fácil de consumir.
- La jerarquía de contenido hace la llamada a la acción destacan claramente en el correo electrónico.
- Es uno de los más fáciles tipos de diseño para adaptar para múltiples tamaños de pantalla porque el contenido se encuentra en una columna.
Este correo de nido utiliza el modelo de pirámide invertida perfectamente, para ayudar a dibujar el usuario el botón de llamada a la acción:
El Zig-Zag o Diseño Z
El diseño de zig-zag es una estructura de cuadrícula simple, que puede traducirse fácilmente en tablas HTML — el fundamento de todos los diseños de correo electrónico. Este tipo de diseño hace contenido que fácil de digerir independiente del dispositivo es leer el correo electrónico en. En un dispositivo con un tamaño de pantalla grande, como un escritorio, se mostrará la estructura de zig-zag. En dispositivos más pequeños, como teléfonos inteligentes, la estructura puede degradar hasta un diseño de una columna:
Si bien este tipo de diseño es un poco más difícil de adaptar para diferentes tamaños de pantalla, hay un montón de métodos documentados en línea para este tipo de diseño del código.
Revisa este correo de Yesca que utiliza la distribución Z-patrón para llegar a pie a los usuarios a través de cómo configurar sus perfiles, sin abrumar el suscriptor con la información:
Una vez más, el diseño se convierte en un diseño de una columna para dispositivos más pequeños.
Espacio en Blanco
Espacio en blanco suele ser el nemesis de los diseñadores de correo electrónico. Con tal espacio limitado, especialmente en los smartphones, hay presión para que ese espacio en blanco se cierra para arriba. Correos electrónicos con poco espacio en blanco y contenido atiborrados juntos pueden ser desagradable a los suscriptores, ilegibles y en última instancia fracasados.
Abrazar el espacio en blanco. Uso inteligente del espacio en blanco puede hacer que tus correos electrónicos, botones fáciles de leer y usados eficazmente en su llamada a la acción hará más y más de esos clics muy necesaria.
Uso eficaz del espacio en blanco puede incluso ayudar a la legibilidad de su correo electrónico, que es clave para leer su correo electrónico en dispositivos móviles pequeños teeny de suscriptores.
Este correo de Squarespace es un gran ejemplo de cómo los espacios en blanco pueden elevar su diseño de correo electrónico y hacer el mensaje de claro al suscriptor:
Tipografía
Los usuarios necesitan ser capaces de leer sus correos electrónicos ya están tomando un vistazo a él en un dispositivo móvil o comprobar su correo electrónico en un ordenador de sobremesa. El texto en su correo electrónico es legible no importa de qué tamaño de pantalla es leyendo su correo electrónico es crítica.
En el tiempo antes de smartphones, era común para cuerpo del texto en mensajes de correo electrónico a 12px. Cuando la gente comenzó a leer el correo electrónico en teléfonos inteligentes, había un montón de pinch-zoom-ing va para leer el contenido. Esto hizo a menudo el diseño del correo electrónico, dejando a los suscriptores con una experiencia terrible de la bandeja de entrada.
Usando un tamaño de fuente mínimo de 16px para copia del cuerpo de su email se asegurará de que sea legible, no importa qué pantalla tamaño se lee en. Pero no es sólo el tamaño de fuente que es importante. Altura de la línea es también una consideración de diseño clave para asegurar su correo electrónico es fácil de leer. Una altura de línea que es no menor de 1.5 veces el tamaño de la fuente asegurará su copia de correo electrónico es fácil para que todos puedan leer. Por lo tanto, si el tamaño de fuente para la copia de cuerpo es 16px, la altura de la línea debe ser 24px. Puede utilizar los mismos cálculos en títulos y otros elementos de texto en tu correo electrónico.
Imágenes
Incluso la más básica de atributos HTML y CSS es todavía manchada en un montón de dispositivos y clientes de correo electrónico populares. Tomemos por ejemplo imágenes de fondo.
Imágenes de Fondo
Imágenes de fondo son utilizados por muchos diseñadores de correo electrónico, sin embargo, el que no está apoyado en todos los clientes de correo electrónico, específicamente las versiones de Microsoft Outlook y GANGA (Gmail Android con una Cuenta No de Gmail).
Es una gran herramienta en línea el Campaign Monitor que va a generar VML (Vector Markup Language), lenguaje propietario de Microsoft de formato HTML en Outlook, permitiendo imágenes de fondo en las versiones de Outlook que no es compatible con fondo imágenes. ¡Gana!
Pero si usted no quiere meterse con el código VML y prefieren seguir con HTML y CSS, simplemente un color de fondo de reserva apropiado para cuando no se admiten imágenes de fondo. Y cuando elegir un color de fondo de reserva no olvides tener en cuenta el color de cualquier texto que pueda estar encima de la imagen de fondo.
Usando un color de fondo de reserva también es una gran manera para que sus correos electrónicos son todavía comprensibles si alguien los está leyendo en un dispositivo móvil con una conexión de datos. Si no cargan imágenes, el color de fondo de reserva llena el espacio que es la imagen de fondo.
Una técnica conocida como Pixel Art lleva esto a otro nivel. Conocido como una forma de diseño defensivo, que combina imágenes y colores de fondo que crea mosaicos cuando no cargan imágenes.
Texto en Imágenes
Limitaciones en el soporte para fuentes web y directrices de la marca estricta significan que, históricamente, diseñadores email tenían que crear imágenes con texto en ellos, por lo que podría tener control total sobre la apariencia del texto.
En su día, cuando el correo electrónico fue visto sobre todo en dispositivos de escritorio esto era perfectamente aceptable. Sin embargo, el texto en imágenes plantea un problema enorme para la gente que ve mensajes de correo electrónico en dispositivos móviles. Como escalas de la imagen, también lo hace el texto. Se convierte a menudo ilegible, creando una experiencia mala para el suscriptor.
¿La solución? Utilizar una imagen de fondo con texto vivo en la parte superior. Usar texto directo, usted será capaz de controlar el tamaño del texto en diversos dispositivos mediante consultas de medios de comunicación, que son ampliamente compatibles con clientes de correo populares tales como Gmail y Apple Mail.
Este correo de REI utiliza una combinación de imágenes de fondo y texto sobre él para su mensaje principal, y se ve muy bien en dispositivos móviles y de escritorio:
GIFs Animados
El GIF animado humilde sigue siendo ampliamente utilizado por los diseñadores de correo electrónico. GIFs son perfectas para añadir un poco de interés o emoción a un correo electrónico. Pero hay una peligrosa tendencia de cada vez más complicados GIFs animados con animaciones más largo — y eso significa que los tamaños de archivo más grandes.
Puede que sea una brisa para descargar un 4MB GIF desde su portátil, en casa, en tu conexión a internet por cable. Pero pensar en aquellos que están tratando de descargar ese mismo GIF en un dispositivo móvil mediante su red de datos. La imagen puede tardar tanto tiempo para descargar que el lector simplemente se volverán cansado de esperar y cerrar o borrar su correo electrónico. Y esto es especialmente malo si es el mensaje principal de su correo electrónico en ese GIF.
Idealmente, desea mantener tamaños de imagen GIF animados debajo de 1MB. Eso significa simplificar cualquier animación, manteniendo la gama de colores relativamente pequeña y una duración corta de la animación. No tienes que ser un mago del Photoshop para optimizar tu gif para correo electrónico. Hay herramientas en línea que pueden ayudarle a hacer precisamente eso, como este optimizador GIF en línea.
Para reducir el tamaño de tu GIF animado prueba:
- Cambiar el tamaño de la imagen
- Aplicar una compresión con pérdida
- Reducir el número de fotogramas eliminando fotogramas duplicados
GIF10 Formas para Optimizar un Archivo GIF Animado
GIFCómo Comprimir archivos GIF Animados Sin Perder Calidad de Imagen
Este correo de Postable ofrece una diversión animadas GIF y relojes en a sólo 303kb:
Botones Call-to-Action
Botones Call-to-Action o CTA para abreviar, es un alimento básico principal de correo electrónico. Después de todo, tienes que enviar un correo electrónico para notificar a los suscriptores de algo y quiere el suscriptor para poder hacer algo con la información en su correo electrónico. Es donde entra la llamada a botón de acción.
El problema aquí es ahora la gente no sólo dan click en su correo electrónico desde un dispositivo de escritorio con un ratón o trackpad. Pero también están usando las tabletas que tienen agujas. Y teléfonos inteligentes, de diferentes tamaños de pantalla, utilizando su pulgar o golpear con.
Llamada a botones de acción tienen que hacer clic en una variedad de diferentes tamaños de pantalla, ya sea usando un ratón, lápiz óptico, pulgar o incluso. Decir hola para botones a prueba de balas.
Botones a prueba de balas usan sólo HTML y CSS para crear un botón clicable del 100%. Hay diferentes técnicas que puede utilizar para crear un botón a prueba de balas. E incluso un generador de código que va a crear el botón para usted. Clave de información para un gran botón a prueba de balas es el tamaño. Guías de Apple recomiendan botones no deben ser menores que 44px por 44px para asegurarse de que pueden ser aprovechados en desde un dispositivo móvil. Y este es el estándar que han adoptado los diseñadores email para botones a prueba de balas en sus correos electrónicos.
Conclusión
Todas estas consideraciones de diseño garantizan que su correo electrónico será leída, entendida y ejecutados en un público más amplio. Todos los goles que cualquier comercializador de correo electrónico debe ser con el objetivo de lograr.
