Preguntas y respuestas del seminario web sobre correo electrónico receptivo 101: conceptos básicos de HTML y CSS

A medida que las aperturas para dispositivos móviles continúan aumentando (¡han aumentado más del 500% en los últimos cuatro años!), También lo ha hecho la conversación sobre estrategias de correo electrónico móvil como el diseño receptivo. En nuestro seminario web Responsive Email 101: HTML and CSS Basics, analizamos el panorama del correo electrónico móvil, los fundamentos para crear correos electrónicos receptivos y por qué estas técnicas son cruciales para mejorar la experiencia del suscriptor. También cubrimos el soporte al cliente de correo electrónico y demostramos cómo codificar un correo electrónico receptivo desde cero.

¿No pudiste hacerlo? No te preocupes. ¡Grabamos todo! Además, incluso hemos puesto a disposición las diapositivas.

Obtener las diapositivas + grabación →

Tuvimos una casa llena para el seminario web, por lo que, aunque tratamos de responder tantas preguntas como pudimos durante la sección de preguntas y respuestas, no pudimos llegar a todas. A continuación, reunimos algunas de las preguntas más frecuentes.

COMENZAR CON DISEÑO RESPONSIVO

¿Crees que la subida de las aperturas móviles ha llegado a su saturación, o crees que seguirá aumentando?

Si bien hemos visto un gran salto en las aperturas de dispositivos móviles en los últimos cuatro años, más del 500%, ya hemos visto que su crecimiento comienza a estabilizarse un poco. Sin embargo, creemos que la apertura de dispositivos móviles seguirá aumentando lentamente con la proliferación de más dispositivos móviles.

¿Cuál es la diferencia entre diseño fluido, adaptativo y receptivo?

El diseño fluido consta de anchos relativos sin consultas de medios. El diseño adaptativo consta de anchos fijos o relativos en múltiples puntos de vista / puntos de interrupción. El diseño receptivo consta de anchos relativos en múltiples vistas / puntos de interrupción. A continuación, presentamos algunos recursos excelentes para ayudarlo a comprender mejor las diferencias entre ellos:

• ¿Escalable, fluido o receptivo? Comprensión de los enfoques del correo electrónico móvil
• Fijo versus fluido versus adaptable versus receptivo
• ¿Qué diseño? ¿Estático, líquido, adaptativo o receptivo?
• Liquidapsivo

¿Qué enfoque tiene la mejor asistencia al cliente de correo electrónico: fluido, adaptable o receptivo?

Desde una perspectiva de soporte pura, los correos electrónicos fluidos tienen el mejor soporte. Tanto el diseño adaptable como el receptivo requieren el uso de consultas de medios, que tienen un soporte limitado.

Sin embargo, no significa que el diseño fluido sea el mejor enfoque para los correos electrónicos. El diseño fluido es un buen compromiso para crear una versión móvil de un correo electrónico, pero mantiene el diseño de ancho completo del correo electrónico en su núcleo. Realmente se reduce a su audiencia específica, dónde abren sus correos electrónicos y su estrategia de diseño para optimizar las experiencias de sus suscriptores.

¿Qué es una consulta de medios?

Una consulta de medios (@media) es una declaración condicional que activa un conjunto de CSS para un conjunto específico de reglas. Puede obtener más información sobre las consultas de medios y el correo electrónico con los siguientes recursos:

• La guía práctica para el diseño de correo electrónico receptivo
• Comprensión de las consultas de medios en el correo electrónico HTML

¿Hay datos sobre el efecto que tiene el diseño receptivo en los correos electrónicos?

¡Apuesta! Recientemente hicimos un informe con MailChimp sobre el efecto que el diseño receptivo y las pruebas de correo electrónico tienen en los clics. Descubrimos que el diseño receptivo da como resultado un aumento del 15% en los clics para los usuarios de dispositivos móviles.

Con soporte mixto y tantas soluciones alternativas, avanzar hacia un diseño receptivo parece abrumador. ¿Cómo empiezo?

Con un soporte tan limitado de los clientes de correo electrónico actuales, el diseño de correo electrónico receptivo puede ser difícil de implementar. Nuestra primera recomendación es que se eduque lo más posible sobre el diseño de correo electrónico receptivo antes de sumergirse. Le recomendamos que consulte los recursos en MailChimp, Campaign Monitor y Litmus para ayudarlo a guiarlo.

Si no se siente cómodo sumergiéndose directamente en el desarrollo real del correo electrónico receptivo, considere usar editores de correo electrónico simples de arrastrar y soltar para crear sus correos electrónicos. Productos como StampReady, Canvas y MailChimp le quitarán la molestia de la codificación de correo electrónico.

Si se siente cómodo sumergiéndose en el código, consulte Litmus Builder, un editor de código creado específicamente para el diseño de correo electrónico. Intente implementar técnicas básicas de correo electrónico receptivo para comenzar; proporcionará una gran experiencia para los usuarios que abren su correo electrónico en clientes que admiten el diseño receptivo (principalmente dispositivos Apple).

Además, asegúrese de obtener una vista previa de sus correos electrónicos antes de enviarlos. Puede enviarse correos electrónicos a sí mismo usando PutsMail o ver cómo se ve su correo electrónico en más de 40 clientes de correo electrónico diferentes con Litmus.

Si alguna vez tiene alguna pregunta o tiene problemas de codificación con el diseño de correo electrónico receptivo, diríjase a la comunidad de Litmus para obtener ayuda.

¿Recomiendas algún marco de respuesta?

¡Sí! Recomendamos consultar el marco de trabajo receptivo Ink de ZURB (aviso: este marco requiere una solución alternativa para renderizarse correctamente en Outlook 2007-2013). Si te gusta Sass, Faust Gertz hizo una versión Sass de Ink y Alex Ilhan tiene un marco de correo electrónico Sass llamado Zenith. Además, Dan Denney de Code School tiene un flujo de trabajo de correo electrónico increíble llamado Emayll y Brian Graves tiene una colección increíble de patrones de correo electrónico receptivos.

OPTIMIZANDO PARA CLIENTES QUE NO APOYAN CONSULTAS DE MEDIOS

Si un cliente no admite el diseño receptivo, ¿qué se mostrará en ese cliente?

Cada cliente de correo electrónico procesa los correos electrónicos de manera diferente, especialmente cuando se trata de aplicaciones de correo electrónico móvil. Básicamente, si no admiten el diseño receptivo, recurrirá a alguna versión del correo electrónico de ancho completo. A veces será una versión de ancho completo "ampliada", a veces será una versión ampliada "ampliada" y, a veces, un cliente como Gmail puede aumentar automáticamente el tamaño de fuente para hacer una versión del correo electrónico "compatible con dispositivos móviles".

Lo mejor que puede hacer es siempre obtener una vista previa de su correo electrónico antes de enviarlo. Puede enviarse correos electrónicos a sí mismo usando PutsMail o ver cómo se ve su correo electrónico en más de 40 clientes de correo electrónico diferentes con Litmus.

¿Cuál es la mejor manera de abordar el diseño receptivo para los clientes que no lo admiten, como la aplicación Gmail para Android? ¿Qué tipo de "respaldo" deberíamos tener?

Recomendamos que sus correos electrónicos sean compatibles con dispositivos móviles para empezar. Esto significa tener una cantidad mínima de contenido de correo electrónico y diseñar para un caso de uso móvil, como tamaños de fuente y botones más grandes. Un diseño de una columna listo para usar también hace que sea más fácil procesar su correo electrónico para la aplicación Gmail.

Para aquellos que se sienten cómodos con las técnicas de codificación avanzadas, la mejor manera de desarrollar sus correos electrónicos y tener en cuenta la falta de soporte receptivo en la aplicación Gmail es el "enfoque de codificación híbrida". Básicamente, utiliza un enfoque centrado en los dispositivos móviles y escala el correo electrónico hasta el ancho de un escritorio mediante algunos trucos específicos para el correo electrónico. Puede leer más sobre cómo implementar el enfoque de codificación híbrida aquí:

• El enfoque de codificación híbrida
• Redux de codificación híbrida: elevando el listón
• Lecciones adquiridas con esfuerzo en el diseño de correo electrónico receptivo

PREGUNTAS DE CÓDIGO

¿Puede poner sus consultas de medios en un documento CSS separado y vincularlo a ese documento en el encabezado?

No se recomienda utilizar hojas de estilo vinculadas (etiqueta <link>) para los correos electrónicos debido al soporte limitado del cliente de correo electrónico. Todos los estilos deben estar incrustados en el <head> de un correo electrónico.

¿Cuáles son los puntos de interrupción más comunes para el diseño de correo electrónico receptivo? ¿Cuántos puntos de interrupción es ideal?

Dado que la mayoría de las aperturas ocurren en iPhones, es importante que sus correos electrónicos comiencen a implementar puntos de interrupción en un mínimo de 414px, que es el ancho del nuevo iPhone 6 Plus.

No existe un número "ideal" de puntos de interrupción para un diseño determinado; todo se reduce a su diseño individual y la optimización de la experiencia para sus suscriptores. Es ideal tener en cuenta al menos un punto de interrupción para que su correo electrónico responda.

¿Recomiendas usar tablas o divs?

El diseño de correo electrónico requiere absolutamente el uso de un diseño y una estructura basados ​​en tablas. La razón de esto es la falta de soporte para <div> por parte de los clientes de correo electrónico, como los clientes de escritorio de Outlook, en lo que respecta a la estructura real y la base del HTML. Algunos clientes de correo electrónico son compatibles con <div> y pueden ser extremadamente poderosos de usar para ciertos trucos y soluciones, especialmente para el correo electrónico receptivo.

¿Puede cambiar los atributos align = "left" o align = "right" dentro de una tabla mediante consultas de medios? ¿O es solo para cambios de estilo?

No se puede cambiar técnicamente el atributo de alinear HTML en CSS, pero existen otras soluciones. Puede envolver cada tabla individual en un <div> vacío y usar la propiedad flotante o la propiedad de visualización para intercambiar tablas. ActionRocket tiene una excelente publicación de blog sobre el uso de esta técnica avanzada.

Con los correos electrónicos receptivos, ¿cómo es la compatibilidad con las imágenes de fondo? ¿Cuáles son las dimensiones ideales para guardar imágenes de fondo si quiero que sean de ancho completo?

Las imágenes de fondo son muy compatibles con los clientes de correo electrónico móviles. No existen dimensiones "ideales" para guardar imágenes de fondo. Siempre debe intentar tener tamaños de archivo relativamente pequeños para que sus suscriptores puedan descargar su correo electrónico rápidamente. Puede usar la función Image Check en Litmus para probar las velocidades de descarga de sus imágenes.

¿Los estilos tienen que estar en línea para que funcionen con muchos de los clientes de correo electrónico?

Si. Varios clientes de correo electrónico eliminan cualquier estilo CSS en el <head> de los correos electrónicos, en particular Gmail, lo que hace que los estilos CSS insertados sean una necesidad para los correos electrónicos.

¿Es mejor usar píxeles o ems para el tamaño de fuente en los correos electrónicos?

Es mejor usar píxeles para definir tamaños de fuente en correos electrónicos, ya que muchos clientes de correo electrónico no admiten ems.

¿Es posible reemplazar imágenes mediante consultas de medios?

Es posible reemplazar imágenes de fondo mediante consultas de medios, pero no imágenes en línea ( <img> etiquetas).

¿Cuál es la mejor manera de optimizar las imágenes para que se representen con nitidez en las pantallas Retina?

Para retina, normalmente desea que la imagen tenga el doble del tamaño de su pantalla final. Por ejemplo, una imagen de 100 × 100 debería ser en realidad 200 × 200, pero reducida a 100 × 100 utilizando atributos HTML o estilo CSS. Por lo general, esta técnica solo debe usarse para imágenes más pequeñas que deben ser nítidas, no imágenes grandes como fotos. Hay un par de excelentes discusiones en la comunidad de Litmus sobre el diseño para retina:

• Diseñar para Retina
• Imágenes con llamadas a la acción de texto y pantalla retina

Muestra: ninguno; o mostrar: bloquear; trabajar en correo electrónico receptivo?

No se trata de si la propiedad de visualización funciona en el correo electrónico receptivo, sino de si es compatible con los clientes de correo electrónico. Como la mayoría de CSS, algunos lo admiten y no otros. En particular, no es compatible con Gmail.

¿Existe algún cliente de correo electrónico equivalente al "elemento inspeccionar" de un navegador web? Sería útil solucionar problemas de mis diseños receptivos.

No existe un equivalente exacto del "elemento inspeccionar" de un navegador web. Sin embargo, la función de prueba interactiva en Litmus es extremadamente útil. Además, Litmus Builder tiene una función de prueba y repetición de prueba con un solo clic para que la iteración en el correo electrónico sea muy rápida.

De lo contrario, recomendamos simplemente solucionar problemas en un navegador WebKit (Chrome o Safari). Dado que la mayoría de las aperturas móviles ocurren en WebKit, que tiene un excelente soporte de CSS, el desarrollo y la resolución de problemas en un navegador WebKit es una buena réplica de lo que sucederá con esos clientes de correo electrónico.

¿El relleno es universalmente compatible con los clientes de correo electrónico?

El relleno se admite casi universalmente en todos los clientes de correo electrónico. La propiedad de margen, por otro lado, no tiene un gran soporte. Recomendamos encarecidamente el uso de relleno.

¿Cómo se apilan tres columnas correctamente usando la alineación? ¿Debería utilizar la alineación central además de la izquierda y la derecha? ¿O no recomienda usar diseños de tres columnas en absoluto?

Sí, puede apilar tres columnas en un diseño de correo electrónico receptivo, aunque sus opciones para apilarlas y revertirlas son más limitadas o más difíciles de hacer que un diseño de dos columnas. La alineación de las tablas depende de cómo desee apilarlas, pero normalmente alinearía las tres tablas a la izquierda.

ActionRocket tiene una gran publicación sobre una técnica avanzada para tablas de apilamiento inverso.

CONSTRUCTOR LITMUS

¿Qué es Litmus Builder?

Litmus Builder es el primer editor de código del mundo creado para diseñadores de correo electrónico por diseñadores de correo electrónico. Es completamente gratis crear, editar y compartir correos electrónicos.

¿Emmet está integrado directamente en Litmus Builder?

¡Está! Nuestra integración Emmet hace que la codificación taquigráfica sea muy sencilla.

¿Dónde podemos encontrar plantillas de correo electrónico receptivas dentro de Litmus Builder?

Litmus Builder tiene una galería de más de 20 plantillas de correo electrónico en la sección Plantillas. Todas las plantillas son completamente gratuitas. Consulte nuestra documentación de ayuda completa para Litmus Builder.

Pruebe nuestras plantillas responsivas gratuitas y previamente probadas

El correo electrónico receptivo le permite ajustar sus diseños para una audiencia cada vez más móvil. Simplifique el proceso de diseño de su correo electrónico con una gran cantidad de plantillas gratuitas y previamente probadas en Litmus Community.

Presentamos las plantillas de la comunidad de Litmus Inicie su próxima campaña con una de las plantillas probadas previamente de Litmus. Accede a las plantillas →