Conoce las dimensiones de correo electrónico HTML

Al crear el contenido para tus correos electrónicos HTML, las dimensiones son un aspecto importante a considerar.

¿Cuánto es demasiado ancho?

¿Cuál es el tamaño de diseño óptimo para garantizar que aparezca bien en todos los dispositivos y navegadores?

El tamaño y el diseño pueden tener un efecto en el éxito de tus campañas y muchas veces cuando haces estas preguntas puedes obtener respuestas múltiples.

Algunas respuestas están desactualizadas, analicemos…

Hemos enumerado un par de indicadores, en cuanto a la dimensión de correo electrónico HTML básico, que debes de tener en cuenta al diseñar tu próximo envío.

Listo? Empecemos:

¿Cuál es el tamaño estándar de diseño de correo electrónico?

Si bien las dimensiones de visualización promedio han aumentado a más de 1024 × 768, recomendamos que el tamaño de diseño de correo electrónico utilice un ancho de 600 a 650 píxeles.

Esto puede sonar muy pequeño, pero hay buenas razones para mantenerse dentro de este ancho.

Este es el porque:

Según TechCruch, el 75 por ciento de los 900 millones de usuarios de Gmail acceden a sus cuentas en sus dispositivos móviles.

Y hay muchos clientes de correo electrónico que no se muestran más allá de 650px.

Entonces, ¿por qué diseñar un correo electrónico para que sea más grande que la mayoría de los dispositivos a los que potencialmente se envía?

Ahí es donde las plantillas de correo electrónico responsivas son útiles.

Si creas un correo electrónico más amplio, es posible que los destinatarios tengan que desplazarse tanto vertical como horizontalmente para ver el correo en su totalidad. Es por eso que debes tener en cuenta el diseño responsivo, sino eso será un dolor total para tus suscriptores o prospectos.

Sólo mira cuántos correos electrónicos se abren en dispositivos móviles.

 

Esta es la razón por la cual muchos aún usamos de 600 a 650 px de ancho como tamaño de diseño de correo electrónico estándar.

A pesar de la norma de ancho de 600-650 píxeles, formatear los correos electrónicos horizontalmente es una tendencia popular entre las tiendas retail.

Una buena regla de oro para recordar es esta:

Mientras más le pidas a tu destinatario de correo electrónico que haga para leer tu mensaje, es más probable que pierda el interés.

Diseñando para el Panel de Vista Previa

Muchas aplicaciones de correo electrónico muestran en la parte superior del correo una leyenda que dice  “panel de vista previa”.

Para Outlook, lo llaman el Panel de lectura.

Esta pequeña área, si tu contacto la habilita,  le brindará una pequeña vista de su correo electrónico antes de decidir leer el resto del mensaje.

El tamaño de este panel de vista previa varía según la aplicación y la configuración individual del destinatario.

 

En general, se puede esperar que la mayoría de tus destinatarios vean los primeros 250-500 píxeles de su correo electrónico en sus paneles de vista previa.

Con esto en mente, es una buena idea incluir contenido HTML convincente en esta área para atraer a tus destinatarios a leer más.

Texto ALT y sus imágenes de correo electrónico

El texto ALT no es algo para ignorar cuando se junta la creatividad de tu correo electrónico.

No todas las aplicaciones de correo electrónico mostrarán las etiquetas ALT de tus imágenes, pero aún así vale la pena usarlas.

En el caso probable de que un destinatario tenga imágenes bloqueadas, lo cual no les permitirá visualizar tu contenido de correo electrónico, el texto ALT es lo primero que verá; si el texto es visible y atractivo, una mayor cantidad de destinatarios harán click en tus correos.

Lo mejor es hacer que tu texto ALT sea preciso y claro, pero trata de usar suficiente texto para transmitir el contenido de la imagen.

Si tienes un botón de imagen naranja brillante cubierto con texto y fotos de paquetes, configura su atributo ALT, únicamente con el texto necesario para transmitir el valor, es decir, “50% de descuento en envío: haga click aquí” (asumiendo que lamentablemente no pudo usar un botón en primer lugar).

La mayoría de los clientes de correo electrónico simplemente cortan el texto ALT relativo al tamaño de la imagen.

Mantén los textos ALT de las imágenes pequeñas en tan sólo una o dos palabras, si es posible, y limita tus líneas de texto más descriptivas para tus imágenes más grandes.

Otras tips de correo electrónico para recordar …

Además de lo que ya hemos mencionado, hay algunas otras cosas a considerar al diseñar correos electrónicos HTML:

  • ¡Diseña por simplicidad! Evita los elementos complicados a toda costa y diseña usando filas y columnas basadas en cuadrículas.
  • Quédate con las fuentes multiplataforma como Arial, Georgia, Times New Roman o Verdana.
  • No incluyas una imagen grande como el cuerpo de tu correo electrónico.
  • Realiza envíos de prueba de cualquier correo para verificar el rendimiento del diseño.
  • Reemplaza cualquier elemento Flash o JavaScript con un .gif en su lugar.

Diseñando correos electrónicos con Neored

Neored utiliza una interfaz de usuario intuitiva para que cualquiera pueda crear correos electrónicos elegantes y de conversión.

 

Nuestra plataforma ofrece la creación de correos electrónicos con facilidad.

Con características como nuestro ‘Previewer’ de correo electrónico, que te permite anticipar lo que verán tus suscriptores antes de hacer click en enviar. Te permite también realizar pruebas tipo A / B, para poder decidir qué diseño genera un mayor engagement. Neored tiene lo que necesitas para llevar tus esfuerzos de marketing por correo electrónico a otro nivel.

Además, contamos con un equipo de Soporte y Diseño que funciona como una extensión de tu equipo.

Sergio, nuestro Diseñador Sr. de Gráficos, ha creado correos electrónicos en HTML, o bien utilizando nuestro editor de Drag and Drop, durante los años que lleva en el equipo.

¿Tienes dudas? ¡Acércate a nosotros!

También te pueden interesar: