Banners para móviles

¡Ahora tu #sucursalweb tiene banners pensados específicamente para los visitantes que entran desde el celular!

Hasta ahora, los banners que diseñabas no se mostraban en todos los dispositivos. A partir de esta actualización, podés armar un set independiente de banners para móviles — o simplemente replicar el de escritorio en formato vertical. La plataforma muestra cada set en el dispositivo que corresponde, automáticamente.

¿Por qué banners distintos para el celular?

Las pantallas de celular son verticales. Un banner horizontal de 1170×300 px queda muy chico, o con el texto ilegible, al momento de verlo en un teléfono. Con esta funcionalidad, podés preparar imágenes en formato retrato (alto × ancho) que aprovechen todo el espacio disponible en la pantalla del cliente.

Además, en el celular toda la imagen es tocable. No hay un botón "Ver más" superpuesto: el banner entero funciona como enlace. Eso cambia el diseño: no necesitás dejar espacio para un área de call-to-action, el protagonista es la imagen.

¿Qué puedo mostrar?

Lo mismo que en los banners de escritorio, pero pensado para la experiencia de quien navega parado en la fila del supermercado o desde el sillón:

• promociones y ofertas de la semana
• novedades de colección o temporada
• comunicados de envíos o medios de pago
• contenido de marca o valores de la empresa
• links a redes sociales u otras páginas

tip: aprovechá el formato vertical para contar una historia en una sola imagen. Texto grande, imagen impactante, un solo mensaje claro.

¿Cómo es el comportamiento?

• Los banners de celular se muestran solo en teléfonos. En tablet y desktop, se siguen viendo los banners de escritorio de siempre.
• Si no configurás banners móviles, no aparece nada en el celular (comportamiento anterior sin cambios).
• Si armás los dos sets, cada dispositivo ve el suyo, sin mezclas.
• Si preferís que el celular muestre lo mismo que el escritorio, simplemente no configurás el set móvil y listo.
• El orden de las diapositivas es el mismo orden en que se envían las imágenes.
• Con dos o más slides, el carrusel avanza solo cada 5 segundos y aparecen los puntos indicadores. Con una sola imagen, la diapositiva es fija.

¿Cómo hago para cambiar los banners?

Al igual que con los banners de escritorio, lo que tenés que hacer es diseñar las imágenes y enviárnoslas. Al mandar cada imagen, indicá:

• ¿Tiene enlace? Si la imagen tiene que llevar a algún lugar al tocarla, incluí la URL de destino (puede ser una página de tu sitio o una externa, como Instagram).
• ¿El enlace abre en la misma pestaña o en una nueva? En general los enlaces internos abren en la misma pestaña y los externos en una nueva, pero vos decidís.
• Orden de aparición: el orden en que las recibamos es el orden en que van a aparecer.
• ¿Reemplaza a alguna existente? Indicalo si es así.
• ¿Es temporal? Avisá si hay fecha de vencimiento para sacarla.

Mandá todo al contact center: hola@sucursalweb.io

Especificaciones para el diseñador

Lo siguiente aplica específicamente a los banners móviles. Los banners de escritorio siguen con sus medidas habituales.

[información para el diseñador]

• Dimensiones: 768 px (ancho) × 1024 px (alto)
• Orientación: vertical (retrato)
• Relación de aspecto: 3:4
• Resolución: 96 dpi
• Peso del archivo: ~ 70–150KB
• Formato: preferentemente JPG
• Nomenclatura recomendada: usá un sufijo -mobile para distinguir del banner de escritorio (ej. promo-mobile.jpg vs promo.jpg)

El ancho de 768 px cubre pantallas retina de hasta 384 px de ancho físico, lo que incluye la gran mayoría de los iPhones y Android actuales.

en resumen...

Los banners para móvil te dan la posibilidad de hablarle al cliente de la misma forma en todos sus dispositivos, con una pieza diseñada específicamente para cada uno. Podés arrancar con un set mínimo de una imagen y ampliar después. Lo más importante: que la imagen sea clara y que el mensaje funcione sin necesidad de texto de apoyo.

Si trabajás con un estudio de diseño, compartile este post: con las especificaciones de arriba tienen todo lo que necesitan para preparar los archivos. Y si necesitás ayuda, escribinos.