16 mejores prácticas de correo electrónico HTML compatible con dispositivos móviles que maximizan la ubicación y el compromiso de la bandeja de entrada
En 2023, es probable que los dispositivos móviles superen a los de escritorio como dispositivo principal para abrir correos electrónicos. De hecho, HubSpot descubrió que 46 por ciento de todos los correos electrónicos abiertos ahora ocurren en dispositivos móviles. Si no está diseñando correos electrónicos para dispositivos móviles, está dejando mucho compromiso y dinero sobre la mesa.
- Verificacion de Email: Asegurando su los correos electrónicos están autenticados al dominio de envío y IP La dirección es fundamental para llegar a la bandeja de entrada y no se enruta a una carpeta de correo basura o correo no deseado. Por supuesto, también es esencial que proporcione un medio para optar por no recibir el correo electrónico mediante una plataforma que incorpore un enlace para darse de baja.
- Diseño de respuesta: La HTML el correo electrónico debe ser diseñado para responder, lo que significa que puede ajustarse al tamaño de la pantalla del dispositivo en el que se está visualizando. Esto garantiza que el correo electrónico se vea bien tanto en el escritorio como en los dispositivos móviles.
- Asunto claro y conciso: Una línea de asunto clara y concisa es importante para los usuarios de dispositivos móviles porque es posible que solo vean las primeras palabras de la línea de asunto en el panel de vista previa de su correo electrónico. Debe ser breve y reflejar con precisión el contenido del correo electrónico. La longitud óptima de caracteres de la línea de asunto de un correo electrónico puede variar según una serie de factores, como el contenido del correo electrónico, la audiencia y el cliente de correo electrónico que se utiliza. Sin embargo, la mayoría de los expertos recomiendan que las líneas de asunto de los correos electrónicos sean breves y concisas, normalmente entre 41 y 50 caracteres o entre 6 y 8 palabras. En los dispositivos móviles, las líneas de asunto que tienen más de 50 caracteres pueden quedar cortadas y, en algunos casos, es posible que solo muestren las primeras palabras de la línea de asunto. Esto puede dificultar que el destinatario comprenda el mensaje principal del correo electrónico y puede reducir la probabilidad de que se abra el correo electrónico.
- Preencabezado: Un preencabezado de correo electrónico es un breve resumen del contenido de un correo electrónico que aparece al lado o debajo de la línea de asunto en la bandeja de entrada de un cliente de correo electrónico. Es un elemento importante que puede afectar la tasa de apertura de sus correos electrónicos cuando está optimizado. La mayoría de los clientes incorporan HTML y CSS para garantizar que el texto del preencabezado esté configurado correctamente.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
/* desktop styles here */
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
/* mobile styles here */
}
</style>
</head>
<body>
<!-- Intro text for preview -->
<div style="display:none; max-height:0px; overflow:hidden;">
This is the intro text that will appear in the email preview, but won't be visible in the email itself.
</div>
<!-- Main email content -->
<div style="max-width:600px; margin:0 auto;">
<!-- Content goes here -->
</div>
</body>
</html>
- Diseño de una sola columna: Los correos electrónicos que están diseñados con un diseño de una sola columna son más fáciles de leer en dispositivos móviles. El contenido debe organizarse en una secuencia lógica y presentarse en un formato simple y fácil de leer. Si tiene varias columnas, utilizar CSS puede organizarlas con elegancia en un diseño de una sola columna.
He aquí un Diseño de correo electrónico HTML es decir, 2 columnas en el escritorio y se contrae en una sola columna en las pantallas móviles:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.right {
order: 2;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
He aquí un Diseño de correo electrónico HTML es decir, 3 columnas en el escritorio y se contrae en una sola columna en las pantallas móviles:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col middle">
<!-- Content for middle column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- Modo claro y oscuro: La mayoría de las los clientes de correo electrónico admiten el modo claro y oscuro CO
prefers-color-scheme
para adaptarse a las preferencias del usuario. Asegúrese de utilizar tipos de imágenes donde tenga un fondo transparente. Aquí hay un ejemplo de código.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Light mode styles */
body {
background-color: #ffffff;
color: #333333;
}
.container {
background-color: #f9f9f9;
}
.text {
border: 1px solid #cccccc;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #f9f9f9;
}
.container {
background-color: #333333;
}
.text {
border: 1px solid #f9f9f9;
}
}
/* Common styles for both modes */
.container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.col {
flex: 1;
margin: 10px;
}
img {
max-width: 100%;
height: auto;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<img src="image1.jpg" alt="Image 1">
<div class="text">
<h2>Heading 1</h2>
<p>Text for column 1 goes here.</p>
</div>
</div>
<div class="col">
<img src="image2.jpg" alt="Image 2">
<div class="text">
<h2>Heading 2</h2>
<p>Text for column 2 goes here.</p>
</div>
</div>
<div class="col">
<img src="image3.jpg" alt="Image 3">
<div class="text">
<h2>Heading 3</h2>
<p>Text for column 3 goes here.</p>
</div>
</div>
</div>
</body>
</html>
- Fuentes grandes y legibles: El tamaño y el estilo de la fuente deben elegirse para que el texto sea fácil de leer en una pantalla pequeña. Utilice al menos un tamaño de fuente de 14 puntos y evite usar fuentes que sean difíciles de leer en pantallas pequeñas. Las fuentes de uso común tienen una alta probabilidad de reproducirse de manera consistente en diferentes clientes de correo electrónico, por lo que el uso de Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma y Trebuchet MS suelen ser fuentes seguras. Si usa una fuente personalizada, asegúrese de tener una fuente alternativa identificada en su CSS:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Custom font */
@font-face {
font-family: 'My Custom Font';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Fallback font */
body {
font-family: 'My Custom Font', Arial, sans-serif;
}
/* Other styles */
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<h1>My Custom Font Example</h1>
<p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
</body>
</html>
- Uso óptimo de las imágenes: Las imágenes pueden ralentizar los tiempos de carga y es posible que no se muestren correctamente en todos los dispositivos móviles. Utilice las imágenes con moderación y asegúrese de que tengan el tamaño y comprimido para visualización móvil. Asegúrese de completar el texto alternativo de sus imágenes en caso de que el cliente de correo electrónico las bloquee. Todas las imágenes deben almacenarse y consultarse desde un sitio web seguro (SSL). Aquí hay un código de ejemplo de imágenes receptivas en un correo electrónico HTML.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
.single-pane {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<!-- 3-column section with images -->
<div class="container">
<div class="col left">
<img src="image1.jpg" alt="Image 1">
<!-- Content for left column -->
</div>
<div class="col middle">
<img src="image2.jpg" alt="Image 2">
<!-- Content for middle column -->
</div>
<div class="col right">
<img src="image3.jpg" alt="Image 3">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- Llamada a la acción clara (CTA): Una llamada a la acción clara y destacada es importante en cualquier correo electrónico, pero es especialmente importante en un correo electrónico optimizado para dispositivos móviles. Asegúrese de que la CTA sea fácil de encontrar y que sea lo suficientemente grande como para hacer clic en un dispositivo móvil. Si incorpora botones, puede asegurarse de tenerlos escritos en CSS con etiquetas de estilo en línea también:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Desktop styles */
.button {
display: inline-block;
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
/* Mobile styles */
@media only screen and (max-width: 600px) {
.button {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<h1>Sample Responsive Email</h1>
<p>This is an example of a responsive email with a button.</p>
<a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
</body>
</html>
- Contenido breve y conciso: Mantenga el contenido del correo electrónico breve y al grano. El límite de caracteres para un correo electrónico HTML puede variar según el cliente de correo electrónico que se utilice. Sin embargo, la mayoría de los clientes de correo electrónico imponen un límite de tamaño máximo para los correos electrónicos, normalmente entre 1024 y 2048 kilobytes (KB), que incluye tanto el código HTML como cualquier imagen o archivo adjunto. Use subtítulos, viñetas y otras técnicas de formato para que el contenido se pueda escanear fácilmente mientras se desplaza y lee en una pantalla pequeña.
- Elementos interactivos: Incorporando elementos interactivos que capten la atención de su suscriptor aumentarán las tasas de participación, comprensión y conversión de su correo electrónico. GIF animados, temporizadores de cuenta regresiva, videos y otros elementos son compatibles con la mayoría de los clientes de correo electrónico de teléfonos inteligentes.
- Personalización: Personalizar el saludo y el contenido para un suscriptor específico puede impulsar significativamente el compromiso, ¡solo asegúrese de hacerlo bien! P.ej. Es importante contar con respaldos si no hay datos en un campo de nombre.
- Contenido dinámico: La segmentación y la personalización del contenido pueden reducir sus tasas de cancelación de suscripción y mantener a sus suscriptores comprometidos.
- Integración de campaña: La mayoría de los proveedores de servicios de correo electrónico modernos tienen la capacidad de agregar automáticamente Cadenas de consulta de campaña UTM para cada enlace para que pueda ver el correo electrónico como un canal en análisis.
- Centro de preferencias: El marketing por correo electrónico es demasiado importante para solo un enfoque de suscripción o exclusión voluntaria de los correos electrónicos. ¡Incorporar un centro de preferencias donde sus suscriptores pueden cambiar la frecuencia con la que reciben correos electrónicos y qué contenido es importante para ellos es una manera fantástica de mantener un programa de correo electrónico sólido con suscriptores comprometidos!
- Prueba, prueba, prueba: Asegúrese de probar su correo electrónico en varios dispositivos o utilice una aplicación para obtener una vista previa de sus correos electrónicos en los clientes de correo electrónico para asegurarse de que se ve bien y funciona correctamente en diferentes tamaños de pantalla y sistemas operativos ANTES de enviar. Tornasol informa que los 3 entornos móviles abiertos más populares siguen siendo los mismos: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Además, incorpore variaciones de prueba de sus líneas de asunto y contenido para mejorar sus tasas de apertura y de clics. Muchas plataformas de correo electrónico ahora incorporan pruebas automatizadas que probarán la lista, identificarán una variación ganadora y enviarán el mejor correo electrónico a los suscriptores restantes.
Si su empresa está luchando con el diseño, las pruebas y la implementación de correos electrónicos receptivos móviles que impulsan el compromiso, no dude en ponerse en contacto con mi empresa. DK New Media tiene experiencia en la implementación de prácticamente todos los proveedores de servicios de correo electrónico (ESP).