Hablemos de estándares

El desarrollo web está bastante estandarizado, pero esto no se dio por sí solo. Los inicios de la web fueron caóticos: los navegadores web creaban métodos de renderizado de código muy diferentes, lo que obligaba a los desarrolladores a crear múltiples versiones de un sitio web para garantizar que se renderizara correctamente en cada navegador. Es comprensible que los desarrolladores se frustraran con esto, lo que condujo a... Consorcio de la World Wide Web creando pautas para la codificación y renderización web a principios de la década de 2000. Estos estándares no solo brindaron a los desarrolladores un conjunto consistente de reglas de codificación, sino que también crearon una experiencia más uniforme para los usuarios de la web que todos disfrutan hoy.

El correo electrónico, por otro lado, sigue anclado en gran medida en los inicios de la década del 2000. Debido a la falta de directrices oficiales, los clientes de correo electrónico tienen prácticamente la libertad de renderizar el código como deseen. Esto implica una compatibilidad variable con muchos elementos de diseño, poca consistencia entre plataformas de correo electrónico y la necesidad de implementar diversas modificaciones para que un mismo correo electrónico se represente de forma uniforme en clientes web, de escritorio y móviles.

Entonces, ¿cómo afecta esto al estilo?

En el desarrollo web, tienes HTML, CSS y JavaScript a tu disposición. Con CSS, en particular, puedes usar estilos en línea o vincular una hoja de estilos externa al archivo HTML. Esta última opción suele ser la mejor, especialmente cuando se requiere una gran cantidad de estilos, ya que tener un archivo dedicado exclusivamente a CSS ayuda a mantener el código limpio y ordenado.

In email development, you can only use HTML and CSS. On top of this, some clients will remove internal styling in the section, including any linked external CSS files, leaving your emails stripped bare with awkward formatting and no style.

Por eso, la mejor práctica es mantener todo el estilo CSS en línea, dentro de las etiquetas HTML, para garantizar que no se pierda nada independientemente del cliente que represente su correo electrónico.

También existen algunas restricciones en cuanto a ciertas propiedades CSS. Por ejemplo, display: none; , que también se usa comúnmente con JavaScript, no es compatible con todos los clientes de correo electrónico, así que no confíe en él para mantener los elementos de diseño ocultos a sus usuarios.

A pesar de las limitaciones de CSS, todavía puedes diseñar tus correos electrónicos de manera efectiva, solo requiere un poco más de esfuerzo y creatividad.

¿Qué pasa con el diseño?

En el desarrollo web, se obtiene una gran flexibilidad en cuanto al diseño. Con la disponibilidad de elementos div y la introducción de sistemas como CSS Grid, el posicionamiento de elementos se ha vuelto mucho más complejo e incluso más sencillo que antes.

Sin embargo, cuando se trata de correo electrónico, las tablas son tus mejores aliadas. En ausencia de elementos div, se pueden usar para alinear el contenido en diferentes direcciones, establecer relleno y márgenes, o crear botones con texto clicable. De hecho, las tablas también proporcionan cierta estabilidad en listas ordenadas y desordenadas.

y

Las etiquetas no funcionan correctamente con todos los clientes de correo electrónico. A veces, el espacio entre las viñetas puede ser un poco irregular, o incluso pueden desaparecer por completo, pero las tablas ayudan a evitarlo al mantener todo unido.

Al comenzar a codificar, notará la necesidad de anidar, es decir, crear tablas dentro de tablas. Sin embargo, tenga cuidado de no complicar demasiado su diseño con demasiadas anidaciones. Es fácil cometer errores tontos al trabajar con muchas tablas: podría insertar accidentalmente una tabla donde no corresponde u olvidar corregir otra parte importante de su HTML si tiene que desplazar alguna tabla. Algunos clientes también pueden procesar su correo electrónico de forma deficiente si las tablas están demasiado anidadas. Para evitar esto, intente usar un máximo de 5 tablas.

¿Cómo se pueden incrustar fotos y vídeos en los correos electrónicos?

Usar algún tipo de gráfico en tu correo electrónico puede parecer la mejor manera de captar la atención de tus suscriptores, pero no siempre puedes confiar en que las imágenes transmitan completamente tu mensaje. Por defecto, muchos clientes de correo electrónico bloquean las imágenes y algunos suscriptores, ya sea por preferencia o por desconocimiento, pueden tener desactivada la carga automática de imágenes. Para evitar que tus suscriptores queden completamente desorientados en esta situación, usa texto alternativo con tus gráficos. Si no se carga nada, tus lectores aún tendrán una idea general de lo que deben ser las imágenes.

¿Y qué pasa con los vídeos? Como probablemente habrás adivinado, la mayoría de los clientes tampoco los admiten, pero hay una solución práctica para este problema. Si te interesa incluir vídeos en tus correos electrónicos, puedes usar una foto, colocarle un botón de reproducción e insertar un enlace en la imagen. Así, cuando los usuarios hagan clic en el vídeo para reproducirlo, serán redirigidos a un navegador web donde se reproducirá.

Otra opción que recomendamos es usar GIF. Puedes convertir tu video en GIF e insertarlo en el correo electrónico para que los espectadores puedan ver las imágenes sin ser redirigidos. El movimiento de los gráficos no solo captará la atención del espectador, sino que también ayudará a mantener su atención por más tiempo.

¿Qué fuentes se admiten en los correos electrónicos?

Hemos hablado sobre fuentes un par de veces en nuestro blog y hemos enfatizado La importancia de elegir fuentes que sean seguras para el correo electrónico Dado que es posible que no tengas control sobre cómo se muestra tu texto en diferentes clientes de correo electrónico, te conviene elegir una fuente que la gran mayoría de los clientes tengan en stock, como Arial o Helvética. Aunque estas fuentes comunes podrían no reflejar tu marca a la perfección como lo harían otras más exclusivas, estarás en buenas manos siempre que uses la misma fuente optimizada para correo electrónico de forma consistente en todas tus campañas.

If the idea of an email-safe font isn’t appealing, you also have the option of using a resource like Google Fonts, which will provide you with code for a plethora of font families that you can copy and paste into the section of your HTML file. But remember, some email clients will strip this section of the file, leaving your text at the mercy of whatever fonts your subscribers’ email clients decide on. To be safe, you should always include a fallback font within your inline CSS.

Conclusión

La enorme diferencia entre el desarrollo web y el de correo electrónico puede ser impactante, pero esto no significa que no puedas crear correos electrónicos increíbles para tu audiencia. Hay muchos trucos y estrategias que puedes usar para lograr el diseño de correo electrónico perfecto; de hecho, repasamos algunos muy útiles en uno de nuestros artículos centrados en... creando correos electrónicos desde cero Sin embargo, si prefieres usar una plantilla ya creada por nuestro equipo de expertos, consulta la Aplicación de tiramisú Para empezar.