El escenario
Estuve trabajando un proyecto en WordPress que incluía un carrusel (alias slider o slideshow) donde convivieran diferentes formatos de contenido. Siendo WordPress, el formato bandera se trataba de las últimas entradas y otros tipos de contenido personalizados. Todo contenido dinámico y en HTML. Sin embargo, avanzado el proyecto, me llegó la noticia de que, al enterarse de la idea del carrusel, alguien en el lado del cliente no solo había tenido la idea de poner banners, sino que entregó los diseños ya hechos para colocarlos.
El problema
Para efectos de esta entrada, me enfocaré en el problema técnico: la responsividad del banner tradicional.
El sitio web donde trabajamos estaba hecho para ser responsive. Es decir, que la diagramación se ajusta al tamaño de la ventana del usuario, ya sea una PC de escritorio, tablet o teléfono. A mí me gusta explicarlo como “contenidos líquidos”. Como cualquier fluido, el texto y las fotos se ajustan al tamaño y forma de su contenedor, y eso hace mucho más llevadera la experiencia además de ser más práctico que crear sitios móviles paralelos.
Pero esta experiencia solo funciona si todos los elementos de la página son lo más “líquidos” posibles. Aquí es donde falla la inserción de una pieza gráfica planteada con un lenguaje de imprenta (aunque no se haya impreso ni una sola vez). Dicho diseño actúa como una unidad, indivisible, y si está bien ejecutado, el mensaje funcionará como se espera al verlo en su totalidad.
Sin embargo, esto es lo que pasó al probar banners en desktop (la sombra indica el borde de la pantalla).
Cuando pasamos a la siguiente diapositiva, la proporción más o menos se mantiene. Este ajuste es algo que podemos predecir tranquilamente y medirlo para trabajar una pieza gráfica.
Pero el escenario cambia cuando vamos al móvil. La noticia destacada, que funciona con un objeto (texto) al lado del otro (imagen) se vería muy apretada y desigual en el celular. Con la magia del sistema de grid de Bootstrap, los elementos pasan a una disposición que en la mayoría de casos será vertical o por lo menos cuadrada.
Este sería el resultado (nuevamente, el sombreado indica el borde de la pantalla).
Para que el carrusel funcione, las diapositivas comparten una misma altura, que está definida por el elemento más alto, por lo general una entrada (foto, título, extracto, etc.). Es decir, el dispositivo impone un ancho, y el contenido el alto.
Si tratamos los banners como se suele hacer en un entorno responsive, la regla CSS sería height: auto; max-width: 100%, o “que se vea lo más posible, pero sin pasar del 100% de la pantalla”. Eso evita que desborde y haya que hacer scroll con el dedo (hablamos de teléfonos) para ver el resto de la foto. Si alguna vez has recibido spam en forma de una gráfica demasiado grande para la pantalla, sabrás a qué me refiero.
Uso medidas relativas como el em, vw o porcentajes me parecen preferibles porque las resoluciones en píxeles son engañosas. En una pantalla HD de 22 pulgadas, una página web (unos 1000 píxeles de ancho) puede tener de 30 a 40 cm de ancho. En un celular como el Moto X, que también tiene una pantalla HD por conteo de píxeles, la misma página web estática tendría entre 6 y 7 cm.
El banner que se ve bien a 28 centímetros en la pantalla del cliente y su computadora de escritorio, en móviles quedaría así:
Para no irnos por la ruta de lo menos visible, cambié el comportamiento de imágenes para los slides de “banner”. La idea es que por lo menos, llenen el espacio y el área sobrante se oculte. Si uno diseña pensando en esta limitación, concentrando el contenido al centro, funciona. Pero si uno diseña solo pensando en el banner, termina mutilado:
Mi solución (para este caso)
Hay una solución ya prevista, y es algo que plataformas como AdWords han defendido por años: el banner responsive o banner HTML5. Es una técnica que “construye” el diseño cada vez de acuerdo a la pantalla del usuario. Para eso, le damos a la plantilla los elementos separados, y dejamos que el código se haga cargo de combinarlos.
Por ejemplo, en este caso:
Para que quede así:
La construcción de este banner responsive se consigue superponiendo los objetos con elementos position y z-index, además de echar mano del plugin Advanced Custom Fields para WordPress.
Recapitulando
No es recomendable tener banners en JPG o cualquier tipo de pieza gráfica que no se haya planteado para funcionar como parte de una experiencia digital. Es decir, diseñada pensada en web, celulares, cómo se vería en una publicación de Facebook, etc. Hablamos de formatos únicos vs. multimedia, print-first vs. mobile first, diseño aislado vs. contextualizado.
Eso no significa que la función del banner haya desaparecido. Es solo que ahora tenemos que prever las diferentes formas en que se consumirá nuestro contenido y nuestra publicidad. Para eso hay tres caminos que funcionan:
- El banner solo como imagen, pero evitando poner información a los costados para que no se lo “coma” la pantalla en celulares.
- El banner responsive hecho de foto de fondo + texto, tal vez con limitaciones de fuentes.
- El banner responsive, hecho de foto de fondo + una gráfica transparente superpuesta que se ajuste al tamaño de la pantalla. No será detectable por los buscadores, pero conserva la mayoría de detalles.
Also published on Medium.