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 los navegadores web, son los 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 debe codificarse de una manera tan anticuada (<table> ¡etiquetas en abundancia!), pero quizás no sea un trato justo. Kevin Mandeville habló sobre cómo usó 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 la cuadrícula del escritorio.
Cuando no se admite CSS Grid (y para anchos de ventana / dispositivo de menos de 850 píxeles), recurrimos a un diseño de una columna.
Al igual que los sitios web, ¿verdad? No tienen que verse iguales en todas partes, siempre que la experiencia sea aceptable en todas partes.
Yo no hago tanto trabajo de correo electrónico HTML como para navegadores web, ¡pero hago algunos! Por ejemplo, el boletín de Programar Pluses una fuente 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 los correos electrónicos de CodePen. Tenemos todo tipo de ellos, desde plantillas totalmente personalizadas, hasta plantillas especiales para The Spark y Challenges y, por supuesto, correos electrónicos transaccionales.
Esas son todas plantillas de correo electrónico completamente desde cero. Es muy bueno saber con qué tipo de funciones CSS puedo contar. Por ejemplo, me sorprendió lo bien que se admite flexbox en el correo electrónico.
Siempre vale la pena pensar en alternativas. No hay nada que le impida crear un correo electrónico que esté completamente diseñado con la cuadrícula CSS. Algunos clientes de correo electrónico lo admitirán y otros no. Cuando es compatible, ocurre un diseño elegante. Cuando no es compatible, asumiendo que deja inteligible el orden de origen, solo obtiene una columna de bloques (que es lo que son la mayoría de los correos electrónicos de todos modos) y debería funcionar perfectamente.
La mejora progresiva es casi más sencilla en el correo electrónico, donde rara vez hay alguna funcionalidad de la que preocuparse.
Enlace directo →