Trabajo / Front-end / My little baby
My little baby en tres anchos
Proyecto 16 de 28 del archivo 07 de 08 en Desarrollo front-end Ver la disciplina completa ↗
El encargo
Una newsletter comercial con mucho que colocar: cabecera de marca, imagen grande, dos fichas de producto con su botón y cuatro reclamos con icono. En escritorio cabe; en un teléfono, no.
Reducir no valía: si todo se encoge por igual, los botones dejan de poder pulsarse y los iconos se convierten en manchas.
Cómo se resolvió
Dos puntos de ruptura, en 660 y en 510 píxeles. En cada uno, la retícula se reordena en lugar de encogerse: las dos fichas de producto pasan a apilarse y los cuatro reclamos se convierten en una lista con el icono a la izquierda.
El truco que sostiene la pieza es viejo y sigue funcionando: en los anchos pequeños las imágenes de cabecera y de promoción se ocultan y su celda recupera la misma imagen como fondo, en una versión recortada para ese ancho. Así el correo no arrastra una imagen de escritorio a un teléfono.
Los botones están hechos con tablas y no con enlaces estilados, que es lo único que se pinta igual en todos los clientes de correo.
En vivo
Se abre en una pestaña nueva. Cambia el ancho del navegador para ver los tres estados.
Siguiente en Desarrollo front-end
Newsletters responsive
