¿Puedo enviar un correo electrónico…?

Si bien estoy 85% seguro de que has visto y usado Can I Use… , apuesto a que solo hay un 13% de posibilidades de que hayas visto y usado Can I Email… . Es el mismo ambiente: información de soporte detallada para las funciones de la plataforma web, excepto que en lugar de información de soporte para navegadores web, se trata de clientes de correo electrónico. Campaign Monitor también ha mantenido una guía durante mucho tiempo, pero admito que me gusta el estilo de diseño del que fue pionero Can I Use….

A menudo se bromea sobre el correo electrónico HTML sobre cómo hay que codificarlo de una manera tan anticuada ( table¡etiquetas en abundancia!), pero quizás eso no sea un justo trato. Kevin Mandeville habló sobre cómo usamos la cuadrícula CSS (no es broma) en un correo electrónico en 2017:

Nuestra audiencia de Apple Mail en Litmus es aproximadamente del 30%, por lo que una buena parte de nuestra base de suscriptores puede ver el diseño de cuadrícula del escritorio.

Cuando no se admite CSS Grid (y para anchos de dispositivo/ventana de menos de 850 píxeles), recurrimos a un diseño de una columna.

Al igual que los sitios web, ¿verdad? No es necesario que tengan el mismo aspecto en todas partes, siempre y cuando la experiencia sea aceptable en todas partes.

Yo no hago tanto trabajo de correo electrónico HTML como lo hago para navegadores web, ¡pero hago algo! Por ejemplo, el boletín de CSS-Tricks es un feed RSS que alimenta una plantilla de MailChimp. El correo electrónico que enviamos para anunciar nuevos programas de ShopTalk es similar. Ambas son plantillas de MailChimp bastante simples que se personalizan con un poco de CSS.

Pero el CSS más directo que hago con el correo electrónico HTML son las plantillas para correos electrónicos de CodePen. Disponemos de todo tipo de ellas, desde plantillas totalmente personalizadas, hasta plantillas especiales para The Spark y Challenges y, por supuesto, correos electrónicos transaccionales.

Todas ellas son plantillas de correo electrónico totalmente creadas desde cero. Es muy bueno saber con qué tipo de funciones CSS puedo contar. Por ejemplo, me pregunté lo bien que se admite flexbox en el correo electrónico.

Siempre vale la pena pensar en las alternativas. No hay nada que le impida crear un correo electrónico completamente diseñado con una cuadrícula CSS. Algunos clientes de correo electrónico lo admitirán y otros no. Cuando es compatible, se produce un diseño elegante. Cuando no es compatible, suponiendo que deje inteligible el orden de origen, solo obtendrá una columna de bloques (que es lo que son la mayoría de los correos electrónicos de todos modos) y debería ser perfectamente viable.

La mejora progresiva es casi más sencilla en el correo electrónico, donde rara vez hay ninguna funcionalidad de la que preocuparse.