Haga que el diseño de su correo electrónico sea responsivo y compatible con dispositivos móviles en 5 sencillos pasos
Publicado: 2024-01-17¿Quiere que sus boletines informativos por correo electrónico y sus campañas de marketing se vean increíbles en cualquier dispositivo? Por supuesto que sí. Nadie quiere que su arduo trabajo se vuelva ilegible en la bandeja de entrada de alguien. Afortunadamente, en solo cinco pasos, puede asegurarse de que sus correos electrónicos respondan y estén listos para impresionar a los suscriptores. Así que toma algunos refrigerios, tu lista de reproducción favorita o una bebida, y comencemos a asegurarnos de que se vean lo mejor posible en cualquier pantalla.
Establezca el ancho de las columnas en porcentajes, no en píxeles
Para que el diseño de su correo electrónico responda, establezca el ancho de las columnas utilizando porcentajes en lugar de valores de píxeles fijos. Esto permite que las columnas se ajusten de manera flexible a diferentes anchos de pantalla.
Utilice una rejilla fluida
El enfoque de cuadrícula fluida utiliza porcentajes para el ancho de las columnas para que puedan expandirse y contraerse según sea necesario según el tamaño de la pantalla. Para un diseño simple de dos columnas, haga que la columna izquierda tenga un ancho de 60 a 70 % y la columna derecha de 30 a 40 % de ancho. Por ejemplo:
<tabla>
<tr>
<td width=”65%”>Contenido de la columna 1 aquí</td>
<td width=”35%”>Contenido de la columna 2 aquí</td>
</tr>
</tabla>
Esto permitirá que la Columna 1 ocupe el 65% del espacio disponible y la Columna 2 el 35% restante. En una pantalla de escritorio grande, la columna 1 puede tener un ancho de 650 px, mientras que en una pantalla móvil pequeña, solo puede tener 200 px de ancho. Pero las proporciones relativas seguirán siendo las mismas.
Agregue consultas de medios para puntos de interrupción receptivos
Las consultas de medios le permiten aplicar diferentes reglas de estilo según el ancho de la pantalla. Puede usarlos para realizar más ajustes a su rejilla de fluido en diferentes puntos de interrupción. Por ejemplo:
/* Para teléfonos móviles: */
Pantalla solo @media y (ancho máximo: 600 px) {
tabla, td {
ancho: 100% !importante;
}
}
/* Para tabletas: */
Pantalla solo @media y (ancho mínimo: 601 px) y (ancho máximo: 900 px) {
tabla, td {
ancho: 80% !importante;
}
}
Esto hará que la tabla y las columnas se expandan hasta llenar el 100 % del ancho de la pantalla en teléfonos pequeños y el 80 % en tabletas, lo que hará que el diseño sea totalmente responsivo.
Utilice imágenes fluidas y medios que cambien de tamaño
Para que el diseño de su correo electrónico sea compatible con dispositivos móviles, las imágenes y otros medios deben cambiar de tamaño de manera fluida para adaptarse a cualquier tamaño de pantalla. Sigue estos consejos:
Utilice tamaños de imagen receptivos
Al agregar imágenes a su correo electrónico, utilice un tamaño de imagen adaptable. Esto significa proporcionar múltiples tamaños de imagen para que el cliente de correo electrónico pueda elegir el tamaño correcto para la pantalla en la que se ve.
Por ejemplo, en lugar de incluir simplemente una imagen grande de 1000 píxeles de ancho, incluya también:
- Un tamaño mediano (alrededor de 600 px)
- Un tamaño pequeño para columnas estrechas (alrededor de 400 px)
- Un tamaño minúsculo para pantallas de móviles pequeñas (alrededor de 200px)
El cliente de correo electrónico elegirá automáticamente el mejor tamaño para la pantalla y el ancho de banda. Para especificar varios tamaños de imagen en su correo electrónico, utilice el atributo <img srcset>.
Haga que los medios sean compatibles con dispositivos móviles
Para otros medios como videos o GIF, también proporcione múltiples opciones de tamaño. Los vídeos deben tener fuentes MP4 en diferentes resoluciones. Los GIF y los iframes (como los incrustados de YouTube) deben tener restricciones de ancho que cambien de tamaño para adaptarse a cualquier pantalla.
Tenga en cuenta estos consejos y las imágenes, vídeos y otros medios de su correo electrónico se mostrarán perfectamente en cualquier dispositivo. Sus suscriptores apreciarán un correo electrónico que se vea genial y sea fácil de leer dondequiera que lo abran.
Tamaño de fuente en ems, no en píxeles
Para que el diseño de su correo electrónico sea compatible con dispositivos móviles, querrá ajustar el tamaño de la fuente en ems en lugar de píxeles. Los píxeles son unidades fijas, por lo que si alguien hace zoom en su navegador, el texto puede distorsionarse. Ems, por otro lado, son unidades relativas que escalan con la configuración del usuario.
Utilice un marco de correo electrónico receptivo
Un marco de correo electrónico responsivo tiene componentes prediseñados que cambian de tamaño automáticamente para cualquier ancho de pantalla. Algunas opciones populares son MJML, Foundation for Emails y Ink. Estos marcos utilizan ems para dimensionar, por lo que no tiene que preocuparse por realizar la conversión usted mismo.
Si no utiliza un marco, convierta píxeles a ems
Si desea tener control total sobre su CSS y prefiere no utilizar un marco, deberá convertir cualquier tamaño de píxel a ems. Así es cómo:
- Determine el tamaño de fuente base en píxeles. Digamos que es 16px.
- Conviértelo a ems. 1em = 16px (tu tamaño base), entonces 16px = 1em.
- Cualquier tamaño que quieras usar, divide por 16px y multiplica por 1em. Por ejemplo, para un encabezado de 24 px, 24 px/16 px = 1,5 em.
- Reemplace todos los tamaños de píxeles en su CSS con los equivalentes em.
Alinee su contenido de manera responsiva
Para que el diseño de su correo electrónico sea responsivo, debe alinear su contenido para que se muestre correctamente en cualquier tamaño de pantalla. Sigue estos pasos:
Utilice mediciones de fluidos
En lugar de utilizar anchos de píxeles fijos para columnas, imágenes y contenedores, utilice porcentajes. Esto permitirá que su contenido escale proporcionalmente según el ancho de la pantalla. Por ejemplo, en lugar de una imagen con ancho=”600px”, use ancho=”50%”.
Evite el peinado pesado
Mantenga su correo electrónico simple limitando el uso de estilos personalizados, que no se mostrarán correctamente en algunos clientes de correo electrónico. Confíe en tablas HTML básicas, estilos en línea y el atributo de alineación para el diseño. Centrar elementos cuando sea necesario.
Seguir estos pasos prácticos garantizará que el contenido de su correo electrónico se muestre bellamente sin importar qué dispositivo utilicen sus lectores para abrir su bandeja de entrada. Vale la pena el esfuerzo de crear una excelente experiencia de diseño de correo electrónico responsivo para sus suscriptores.
Probar, probar y probar un poco más
Comprueba cómo se muestra en dispositivos móviles
Todos sabemos que la mayoría de las personas utilizan sus dispositivos móviles para acceder al correo electrónico. Entonces, para asegurarse de que su correo electrónico sea compatible con dispositivos móviles, pruebe su correo electrónico enviándolos a diferentes móviles. Compruébalos en Android, iPhone y tabletas. Compruebe cómo se muestran las imágenes, los botones y el texto tanto en modo vertical como horizontal.
Prueba en los principales clientes de correo electrónico
No todos los clientes de correo electrónico muestran los correos electrónicos de la misma manera. Realice pruebas en Gmail, Outlook, Yahoo Mail y cualquier otro servicio de correo electrónico importante que utilicen habitualmente sus suscriptores. Busque cualquier problema con la forma en que se muestran las imágenes, enlaces incrustados, botones u otros elementos interactivos. Realice modificaciones en su código para solucionar cualquier problema de visualización y garantizar la coherencia entre los clientes.
Compruebe cómo aparece el contenido alternativo
Para los suscriptores con imágenes deshabilitadas en su cliente de correo electrónico, su contenido alternativo aparecerá en lugar de las imágenes. Vuelva a verificar que todo el texto alternativo, los títulos de las imágenes y las descripciones de las imágenes tengan sentido por sí solos y proporcionen contexto para el contenido de su correo electrónico. El contenido alternativo debería resultar en una buena experiencia para el lector, incluso sin las imágenes.
Revisión de un servicio de prestación de correo electrónico
Utilice un servicio gratuito de prueba de representación de correo electrónico como Litmus, Email on Acid o Mosaico para ver cómo se representa su diseño de correo electrónico en una amplia gama de clientes y dispositivos de correo electrónico a la vez. Proporcionan informes que destacan cualquier problema que se deba abordar para mejorar la capacidad de respuesta de su correo electrónico. Realice cambios en su código y vuelva a cargar los correos electrónicos de prueba hasta que los informes estén limpios.
Vuelva a verificar los enlaces y los elementos interactivos
Los enlaces, botones y cualquier otro componente interactivo integrado en su correo electrónico deben funcionar correctamente en todas las plataformas. Vuelva a verificar que los enlaces vayan al destino deseado y que los botones o formularios funcionen como se esperaba. Pruébelos varias veces para asegurarse de que no haya enlaces rotos o elementos que no funcionen antes de lanzar su campaña.
Se necesitan pruebas y ajustes constantes para perfeccionar el diseño responsivo de su correo electrónico. Pero hacer el esfuerzo desde el principio dará como resultado un correo electrónico con amplio alcance y alta participación en todos los dispositivos y clientes de correo electrónico de sus suscriptores.
Solución de problemas comunes de correo electrónico responsivo
Contenido desbordado en el móvil
- Utilice diseños de una sola columna. Varias columnas rara vez funcionan bien en el correo electrónico.
- Mantenga los párrafos y secciones breves y concisos. Los bloques de texto largos son difíciles de leer en pantallas pequeñas.
- Utilice viñetas y listas numeradas cuando sea posible. Ocupan menos espacio que los párrafos.
- Oculta contenido secundario en pantallas pequeñas. Puede utilizar consultas de medios para mostrar/ocultar contenido según el ancho de la pantalla.
Problemas con el ancho del correo electrónico
Algunos clientes de correo electrónico antiguos tienen problemas con el ancho de los correos electrónicos receptivos. Para arreglar esto:
- Establezca un ancho máximo en su contenedor de correo electrónico. Recomendamos 600 px para la mayoría de los correos electrónicos.
- Agregue !important después de las declaraciones de ancho para anular algunos CSS del cliente de correo electrónico. Por ejemplo:
- Agregue un código alternativo para Outlook 2007-2013. Estas versiones anteriores necesitan un estilo separado:
Seguir estos consejos para la solución de problemas solucionará los problemas más comunes del correo electrónico responsivo. ¡Déjame saber si tienes alguna otra pregunta!
Conclusión
Estas son algunas formas sencillas de asegurarse de que sus correos electrónicos respondan. Tenga en cuenta que hoy en día más del 50% de los correos electrónicos se abren a través de dispositivos móviles, por lo que optimizarlos para tamaños de pantalla más pequeños es esencial. Revise todas sus plantillas para correo electrónico y realice los cambios necesarios en el tamaño de fuente, así como en el tamaño y el espaciado de la imagen. Sus destinatarios apreciarán recibir un correo electrónico que puedan leer e interactuar sin importar qué dispositivos utilicen.