Creo que encontré una nueva forma de crear correos electrónicos receptivos, sin consultas de medios. La solución involucra la función CSS calc () y las tres propiedades width , min-width y max-width .
O como me gusta llamarlos a todos juntos: los Fab Four (en CSS).
El problema
Crear correos electrónicos receptivos es difícil, especialmente porque los clientes de correo electrónico en dispositivos móviles (como Gmail, Yahoo o Outlook.com) no admiten consultas de medios. Un enfoque híbrido, una primera estrategia de Gmail o un correo electrónico receptivo sin consultas de medios son excelentes formas de adaptarse a esta situación.
Ese último enfoque ha sido mi favorito hasta ahora. La gran idea es tener columnas como
Una vez que todos los bloques están apilados, no ocupan todo el ancho del correo electrónico.
He estado buscando formas de resolver este problema durante mucho tiempo. Flexbox es un gran competidor, pero desafortunadamente el soporte de Flexbox en un correo electrónico es abismal.
Una solución
Recordando anchura , min-width y max-ancho
Además de la función calc () , la solución que encontré involucra estas tres propiedades CSS. Con el fin de entender completamente cómo funciona, aquí hay un recordatorio de lo ancho , min-width y max-ancho se comportan cuando se usan juntos (como claramente resumidos por su compañero francés desarrollador front-end Raphaël Goetter).
- Si el valor de ancho es mayor que el valor de ancho máximo, gana el ancho máximo .
- Si el valor de ancho mínimo es mayor que los valores de ancho o ancho máximo , gana el ancho mínimo .
¿Puedes adivinar cuál sería el ancho de una caja con los siguientes estilos?
.box { width:320px; min-width:480px; max-width:160px;}(Respuesta: la caja tendría 480px de ancho).
Presentamos calc () y la fórmula mágica
Sin más preámbulos, aquí hay un ejemplo de los Fab Four para crear dos columnas que se apilarán y crecerán por debajo de 480px.
.block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480);}Vamos a dividirlo para cada propiedad de ancho .
min-width:50%;La propiedad min-width define nuestros anchos de columna en lo que podríamos llamar nuestra versión de escritorio. Podemos cambiar este valor para agregar más columnas (por ejemplo, 25% para un diseño de cuatro columnas) o establecer columnas con anchos de píxeles fijos.
max-width:100%;La propiedad max-width define los anchos de nuestras columnas en lo que podríamos llamar nuestra versión móvil. Al 100%, cada columna crecerá y se adaptará al ancho completo de su contenedor principal. Podemos cambiar este valor para mantener las columnas en el móvil (por ejemplo, 50% para un diseño de dos columnas).
width:calc((480px — 100%) * 480);Gracias a la función calc () , la propiedad width es donde ocurre la magia. El valor de 480 coincide con nuestro valor de punto de interrupción deseado. El 100% corresponde al ancho del contenedor principal de nuestras columnas. El objetivo de este cálculo es crear un valor mayor que nuestro ancho máximo o más pequeño que nuestro ancho mínimo , de modo que se aplique una de esas propiedades.
A continuación se muestran dos ejemplos.
Con un padre de 500 px , el ancho calculado es igual a -9600 px. Es más pequeño que el ancho mínimo. Entonces gana el ancho mínimo del 50%. Por lo tanto, tenemos un diseño de dos columnas.
Con un padre de 400 px, el ancho calculado es igual a 38400 px. Es más grande que el ancho mínimo, pero el ancho máximo es más pequeño. Entonces gana el ancho máximo del 100%. Por lo tanto, tenemos un diseño de una columna.
Manifestación
Aquí hay una demostración de lo que puede hacer esta técnica.
Puede ver la demostración completa en línea aquí (o en Litmus Builder o en CodePen).
Y aquí hay dos capturas de pantalla de esta demostración en Gmail, en el correo web de escritorio y en la aplicación móvil en iOS. Mismo código, renderizado diferente.
En esta demostración, he establecido algunos ejemplos de diferentes cuadrículas (con dos, tres, cuatro columnas). La primera cuadrícula, con las imágenes, está diseñada para pasar de cuatro columnas en el escritorio a dos columnas en el móvil. Las otras rejillas están diseñadas para crecer completamente en dispositivos móviles.
Además, observe cómo el título cambia de una posición alineada a la izquierda en el escritorio a una posición centrada en el móvil. Esto se logra dando al título un ancho fijo de 190px y un “ margin: 0 auto; ”Para centrarlo. En el escritorio, el contenedor principal del título tiene aplicado un ancho mínimo de 190 px, por lo que el logotipo permanece a la izquierda. En dispositivos móviles, el contenedor principal crece a todo lo ancho, por lo que el logotipo se centra.
Un gran aspecto de esta técnica es que, dado que todo se basa en el ancho principal de la cuadrícula, un correo electrónico puede adaptarse incluso a un correo web de escritorio. Por ejemplo, en Outlook.com, no importa si elige tener el panel de lectura en la parte inferior o en la derecha, el correo electrónico responderá correctamente al ancho del panel de lectura. Esto sería imposible de hacer con las consultas de los medios.
Apoyo
En los navegadores, calc () es compatible desde IE9. Resulta que calc () también tiene un soporte bastante bueno en clientes de correo electrónico. Funciona en Apple Mail (en iOS y OS X), Thunderbird, Outlook (aplicaciones de iOS y Android), Gmail (webmail, aplicaciones de iOS y Android), AOL (webmail) y el antiguo Outlook.com (todavía presente en Europa) .
El viejo Outlook.com
Sin embargo, Outlook.com tiene una pequeña peculiaridad. El webmail filtrará todas las propiedades con un calc () que incluya cualquier paréntesis. Esto significa que se admite " calc (480px - 100%) ", pero no " calc ((480px - 100%) * 480) ". Dado que mi fórmula inicial incluye paréntesis, debemos refactorizarla para evitar los paréntesis. Entonces, la fórmula para admitir el antiguo Outlook.com se ve así.
width:calc(480px * 480 — 100% * 480);Clientes no admitidos
Por supuesto, calc () no es compatible con clientes de correo electrónico antiguos como Lotus Notes o la última versión de Outlook para Windows (utilizando el motor de renderizado HTML de Word). Tampoco funcionará en Outlook Web App (tanto Office 365 como el nuevo Outlook.com) y Yahoo (webmail, aplicaciones iOS y Android). Estos dos eliminarán cualquier propiedad relacionada con calc () .
Fallbacks
En estos casos, sugeriría duplicar todas las propiedades involucradas con valores de ancho fijo para clientes que no admiten calc () . Para ocultar The Fab Four de esos clientes, recomiendo usar las funciones calc () , incluso si no es técnicamente útil. Nuestro primer ejemplo se vería así.
.block { display:inline-block; min-width:240px; width:50%; max-width:100%; min-width:calc(50%); width:calc(480px * 480 — 100% * 480);}Aplicación web de Outlook
Sin embargo, Outlook Web App (tanto Office 365 como el nuevo Outlook.com) tiene una peculiaridad más. Cuando una función calc () contiene una multiplicación (con el carácter ' * '), el nuevo Outlook.com y Office 365 eliminarán todo el atributo de estilo en línea correspondiente. Esto significa que necesitamos calcular las multiplicaciones a mano y solo mantener la resta resultante. Así es como se ve el cálculo final para un punto de corte de 480px.
width:calc(230400px — 48000%);Prefijos de WebKit
Las versiones anteriores de Android (antes de Android 5.0) o iOS (antes de iOS 7) requieren prefijos -webkit- para funcionar. Nuestra versión final se parece a la siguiente.
.block { display:inline-block; min-width:240px; width:50%; max-width:100%; min-width:-webkit-calc(50%); min-width:calc(50%); width:-webkit-calc(230400px — 48000%); width:calc(230400px — 48000%);}Deficiencias y pensamientos finales.
Like anything in the email development world, the Fab Four technique isn’t perfect. Here are a few limitations that I can think of:
- It won’t work on Yahoo. The desktop version of its webmail supports media queries, though. So we could improve things a bit by making a mobile first version of our email, and then enhancing it on desktop with media queries.
- You can only set one breakpoint. This might not be such a problem for emails though, as designs rarely go beyond 600px on desktop and don’t require more than one breakpoint to adapt on mobile.
- You can only diminish the number of columns from a desktop version to a mobile version. While this rarely happens, you couldn’t go from a four columns layout on mobile to a single column layout on desktop.
- The final version of the calculation (to support the old Outlook.com and degrade gracefully on the new one) is hard to read. Using a preprocessor and a mixin to generate all the required properties could be more than helpful.
I still think that this technique will come in very handy in a lot of cases, especially for Gmail optimizations. I’m sure there is also use cases for websites (like widgets, ads, …).
And I can’t wait to see what this will inspire you to create.