Cómo maquetar HTML Responsive

¿Quieres lograr que tus piezas se visualicen en todo tipo de dispositivo? Haz Campañas de Email todo terreno con los consejos de nuestro experto Nazareno Oviedo. ¡Descúbrelos ahora!

Codificar tus Emails Responsive ya no es una opción sino una premisa para lograr los resultados que buscas. ¿Imaginas que uno de tus Suscriptores no acceda a tu promoción porque no ha podido visualizar tu Campaña? ¡Ni pensarlo!

El 09 de septiembre cientos de personas presenciaron una nueva capacitación online de Doppler Academy brindada por Nazareno Oviedo, UI Developer en Making Sense. El orador, no solo brindó excelentes consejos sobre HTML Responsive sino que además, se encargó de codificar una Campaña de Email en vivo.

¿Te has perdido el Webinar o quieres verlo en detalle para maquetar tus piezas junto a Nazareno? ¡Aquí tienes el video! Pero antes… Te recomendamos que te registres a la próxima capacitación gratuita y online que brindará Adrián Peláez, Director de Comunicaciones en SOWEB: “Cómo utilizar el Marketing de Influencia en tu estrategia global”. ¡Inscríbete ahora!

Por qué tus piezas deberían ser Responsive

¡Vamos por partes! Para comenzar, Nazareno dejó en claro a qué se le llama Email Responsive:

Es aquel que se adapta al entorno de nuestro Suscriptor, basándose en el tamaño de la pantalla y en el cliente de correo.

Si quieres alcanzar la máxima efectividad en tu estrategia de Email Marketing, debes lograr que tus piezas sean accesibles para cualquier usuario y a todo tipo de dispositivo ya sea smartphone, tablet o netbook. ¿Es imprescindible lograrlo? La respuesta es: ¡claro que sí!

Según un estudio realizado por Litmus, en 4 años las aperturas mobile han tenido un aumento del 500%: en 2011 ocupaban solo el 8%; hoy en día, alcanzan el 53%. En paralelo, la cantidad de Emails abiertos en desktop (escritorio) ha descendido considerablemente: desde un 58% en 2011 hasta llegar a un 22% en 2015.

¿Qué podrás hacer en Emails Responsive?

El espacio que tienes para organizar los elementos de tu pieza no son iguales para una versión de escritorio que para un dispositivo móvil. Al disponer de menos lugar, deberás pensar en reorganizar esos objetos para darle prioridad a lo verdaderamente importante.

Gracias a la codificación Responsive, podrás modificar tamaño de contenidos, imágenes y tipografías para lograr que se visualicen justo como lo deseas, dependiendo del cliente de correo y del tipo de dispositivo donde sea abierto tu Email.

También podrás ocultar contenido que no sea realmente necesario para lograr el objetivo de tu Campaña, y apilar las columnas de tus piezas para que tanto el texto como las imágenes logren un mayor impacto visual.

4 Consejos que volverán infalibles tus HTML

#1 Utiliza Media Queries

Este termino hace referencia a las sentencias condicionales que posibilitan obtener estilos específicos según las características de cada pantalla. El uso de Media Queries, te permitirá detectar el tamaño de la pantalla y así, realizar las modificaciones de contenidos, imágenes y estructuras.

Al utilizar Media Queries, lo que haces es definir una serie de condiciones que tu HTML debe respetar. Por ejemplo, si el ancho de la pantalla en que se abre el Email es mayor a 600 px, el color que el elemento deberá adquirir será rojo. O bien, si el ancho es menor a 600 px la imagen se mostrará al 100%.

¡Atención! Ten en cuenta que no todos los clientes de correo soportan Media Queries. Se calcula que solo el 47% de ellos lo hacen. Entre los más conocido podemos nombrar: IOS (Iphone/Ipad), Android 4.x. Native Client, Android Outlook.com app y Windows Phone 7.5.

#2 Elige un software que facilite tu trabajo

Existen varios programas que te serán de gran ayuda para el armado de tus HTML. Sin embargo, estos son los que Nazareno recomendó a los asistentes: Sublime Text, Notepad y Litmus.

Con respecto a este tema, tenemos que contarte algo que te encantará: hace poco tiempo, en Doppler lanzamos un Editor HTML completamente renovado que te permite personalizar al 100% nuestras nuevas Plantillas de Email Responsive. ¡Crea tu cuenta gratis y conócelas!

#3 Descubre la compatibilidad con cada cliente de correo

Gracias a ciertos softwares, como caniuse.com, podrás saber qué propiedades del CSS son funcionales en diferentes versiones de navegador. En este sentido, también puedes utilizar Litmus para poder previsualizar tus piezas de Email en diferentes clientes de correo.

#4 Optimiza las imágenes de tus Emails

Una de las claves en Email Marketing, es no centrar el diseño de la pieza en las imágenes, ya que muchos agentes no permiten la visualización de ellas por default. A esto hay que sumarle que si estas son demasiado pesadas, tardarán más tiempo en descargarse y, ¿sabes qué? solo tienes 4 segundos para impactar a tu usuario antes de que abandone tu Email.

Por eso, Nazareno brindó algunas recomendaciones para lograr la máxima efectividad en tus Campañas. ¡Toma nota!

  • Optimiza el peso de todas las imágenes.
  • Utiliza formatos PNG o JPG.
  • Evita utilizar tamaños mayores a 600 px.

¿Estás listo para comenzar?

Nuestro orador no quiso que la capacitación solo quede en la teoría. Para que puedan aplicar sus consejos, pensó que lo mejor sería que todos pudieran acceder al código de HTML que él codificó durante el Webinar. Así que… ¡aquí lo tienes!

¿Te has perdido algún concepto? ¡No te preocupes! Te dejamos la presentación de nuestro experto para que repases todo lo visto. ¡Adelante!

¿Pensabas que eso era todo? ¡Claro que no! Se acerca una nueva capacitación online y gratuita de Doppler Academy y tú no te la puedes perder. Si quieres conocer más sobre el Marketing de Influencia, tienes que registrarte al webinar que brindará Adrián Peláez el 23 de septiembre. ¡Súmate ahora!

  • ¿Te ha gustado? Compártelo:
Recomienda al autor
¿Quieres ser un autor invitado? Envíanos tus artículos.