Si usted es un comercializador, desarrollador o diseñador, en algún momento se ha encontrado con problemas de respuesta con imágenes de banner. Como desarrollador que desarrolla principalmente en la plataforma HubSpot , este es el problema más común que tengo que explicar con frecuencia a los clientes.
Una pregunta común que hacen los clientes que desean actualizar su sitio web es: "¿Cuál es la relación de aspecto adecuada para las imágenes de banner en mi sitio web?". Esta es una pregunta complicada que depende de muchos atributos del banner, como si el banner tiene texto superpuesto. en él, si hay imágenes de estilo de vida en el fondo y el tamaño del texto en la página.
Imágenes de banner con superposición de texto
Para muchos sitios web o páginas de destino, tener una superposición de texto en el banner es la opción más adecuada por varias razones.
Primero, el uso de texto real que Google puede buscar e indexar es una forma excelente de tener un H1 por encima del pliegue. El texto que forma parte de la imagen del banner no tendrá ningún valor de SEO y puede encontrarse con problemas de diseño receptivo, con el texto cortado en varios anchos.
Las imágenes de pancarta comúnmente usan una declaración CSS llamada "portada" que ajusta constantemente la imagen de fondo para que se ajuste al contenedor de pancarta lo mejor posible. Sin embargo, esto deja espacio para variaciones e inconsistencias en cómo la imagen se representa a diferentes alturas.
Al elegir imágenes para pancartas con superposiciones de texto, hay tres componentes importantes a considerar:
- Un patrón genérico es a menudo el mejor curso que puede tomar cuando se trata de imágenes de banner de fondo. Las imágenes que son más genéricas pueden tener sus bordes cortados en pantallas más pequeñas sin afectar negativamente la estética del diseño.
- El desarrollador debe colocar un banner superpuesto entre el texto y la imagen de fondo. Esta es a menudo una capa negra o de color translúcida que permite que el texto sea legible independientemente de la imagen de color en el fondo.
- No utilice imágenes de estilo de vida (imágenes de personas) como regla general. Es incómodo que el texto cubra la cara de alguien. En referencia a la regla uno, será aún más incómodo cuando la cara de esa persona se corta en una pantalla más pequeña.
Imágenes de pancarta con texto en el fondo
Para ciertos diseños de página donde todo el banner está diseñado en una imagen de estilo folleto, tener una imagen de banner sin texto es una ruta aceptable. Si absolutamente debe tener una imagen de banner con texto en el fondo, es imprescindible que el desarrollador cree el banner de una manera que calcule la altura y el ancho del banner en función de la relación de aspecto de la imagen del banner. Esto puede hacerse en JavaScript o jQuery (una biblioteca de JavaScript) y debe configurarse de manera que pueda recalcular la altura en función del tamaño de la ventana cambiante, de modo que si un usuario está en una tableta y cambie la orientación de horizontal a vertical , la relación de aspecto sigue siendo correcta.
Una alternativa más fácil que no requiere JavaScript es usar una imagen estática de ancho completo. De manera predeterminada, la mayoría de los sitios web tienen un ancho de imagen máximo del 100 por ciento del contenedor en el que están colocados y que está configurado por CSS. Esto garantiza que el banner siempre tendrá la relación de aspecto correcta, sin importar el ancho, siempre que la imagen sea lo suficientemente grande como para ser de ancho completo en monitores externos sin pixelarse.
Un elemento a tener en cuenta cuando se trata de texto en una imagen de banner es que, a medida que la imagen se reduce proporcionalmente para adaptarse a pantallas pequeñas como un teléfono, el texto también se reducirá y puede volverse ilegible debido a su pequeño tamaño. Cuando se usa texto en una imagen de banner, se recomienda utilizar solo grandes titulares que no se reduzcan a un tamaño ilegible, y es aún mejor usar texto superpuesto para que un desarrollador pueda establecer tamaños personalizados para varios dispositivos y anchos de navegador.
A continuación se muestra un ejemplo de un banner que usa texto en segundo plano que no escala bien la relación de aspecto.
Ya sea que sea un vendedor, desarrollador o diseñador, comprender la dinámica de cómo funcionan las imágenes de banner de fondo garantizará que, cuando realice cambios en un sitio o seleccione imágenes para banners, pueda elegirlas de una manera que se asegurará de que se procesen correctamente en todos los dispositivos. Aunque la lista de opciones anterior no es exhaustiva, proporciona una buena hoja de ruta para la gran mayoría de los casos de uso para asegurarse de que no necesita un desarrollador para actualizar su sitio web con cada cambio de imagen.
Cualquier combinación de imágenes y texto puede ser posible para su sitio web si tiene un desarrollador activo capaz de hacer una solución completamente personalizada. Sin embargo, como pueden atestiguar muchos especialistas en marketing, les encanta aprovechar la capacidad de crear fácilmente sitios web y páginas de destino a prueba de futuro sin necesidad de que alguien profundice en el código.
Fecha actualización el 2021-12-13. Fecha publicación el 2019-12-13. Categoría: semrush Autor: Oscar olg Mapa del sitio Fuente: business2community