Introducción a la publicidad gráfica para diseñadores web.

1. Ubicaciones comunes de anuncios digitales
2. Diseñar anuncios digitales
3. Manejo de anuncios responsivos

Muchos sitios web (incluido éste) dependen de la publicidad como una importante fuente de ingresos. Esas ubicaciones de anuncios impactan directamente las interfaces que construimos y con las que interactuamos todos los días. Crear diseños con anuncios es un baile que implica manejarlos en entornos fluidos y también equilibrar la necesidad de mostrar nuestro contenido y resaltar los anuncios para garantizar que sean efectivos.

En esta publicación, compartiré algunos consejos e ideas para integrar bloques de anuncios en diseños. Echaremos un vistazo a algunas opciones de ubicación en las que podríamos considerar o esperar colocar anuncios en páginas web y luego pasaremos a estrategias de estilo.

Podría utilizar algunas propiedades CSS modernas a lo largo del camino que no son totalmente compatibles con navegadores más antiguos. Eche un vistazo a @supports si desea admitir navegadores antiguos de una manera amigable con mejoras progresivas.

Ubicaciones comunes de anuncios digitales

Hay muchos, muchos lugares diferentes donde podemos colocar anuncios en una página y una cantidad infinita de tamaños y proporciones que podemos usar. Dicho esto, existen ubicaciones y tamaños estándar que se utilizan para ayudar a establecer una línea de base que se puede utilizar para establecer precios y comparar métricas en toda la industria. Cubriremos algunos de ellos aquí, aunque puede ver cuántas opciones y variaciones existen.

La ubicación de la barra de navegación

El espacio justo encima de la navegación principal de un sitio suele ser un excelente lugar para colocar un anuncio. Es fantástico porque, en muchos casos, la navegación se realiza en la parte superior de la página, lo que proporciona una ubicación destacada que se presta para utilizar un diseño de ancho completo y mucha interacción del usuario. Es por eso que a menudo vemos que otros tipos de contenido importante, como alertas y notificaciones, ocupan este espacio.

La forma más sencilla de hacerlo es simplemente colocar el elemento publicitario encima de la navegación y dar por terminado el día. Pero, ¿qué pasa si queremos “pegar” la navegación en la parte superior de la página una vez que el anuncio desaparece de la vista?

Aquí estamos usando position: sticky para conseguir ese efecto en la navegación. Según lo documentado por MDN, un elemento adhesivo es donde:

El elemento se coloca de acuerdo con el flujo normal del documento y luego se desplaza en relación con su ancestro de desplazamiento más cercano (y el bloque contenedor).

Puede resultar tentador utilizar un posicionamiento fijo, pero eso elimina la navegación del flujo normal de documentos. Como resultado, se fija en la parte superior de la ventana gráfica y permanece allí mientras se desplaza. Eso hace que Sticky sea un método más viable con una experiencia de usuario más fluida.

Ahora, podríamos hacer lo contrario, donde el anuncio es el elemento fijo en lugar de la navegación. Eso es algo que deberás sopesar porque ocultar la navegación a la vista podría ser una experiencia de usuario deficiente en ciertos diseños, sin mencionar cómo los anuncios persistentes podrían interferir con el contenido en sí. En otras palabras, hay que andar con cuidado.

La ubicación del encabezado

Mostrar anuncios en el encabezado del sitio es otro lugar donde combinados nos topamos con anuncios. Hay dos patrones ampliamente utilizados que utilizan la ubicación del encabezado. En la jerga de la industria publicitaria, se les conoce como:

• Valla publicitaria: Un anuncio rectangular que se presenta como un llamado a la acción principal. Suelen ser 970⨉250. Podríamos usar el tamaño más ancho, 970 px, para establecer el tamaño del área de contenido principal de un sitio.
• Tabla de clasificación: un anuncio que es ancho, corto y que a menudo comparte espacio con otro elemento. Suelen ser 728⨉90.

El anuncio publicitario, a pesar de ser grande, rara vez se utiliza (se estima que solo el 2% de los sitios), pero sí obtiene tasas más altas. El anuncio publicitario es de lejos el tamaño de anuncio digital más utilizado, con un estudio de SEMrush de 2019 que cita el 36% de los editores utilizan tablas de clasificación y el 57% de los anunciantes las compran.

Lo bueno de una tabla de clasificación es que, incluso si usamos el mismo ancho de contenedor de 970 px que el comando del anuncio publicitario, todavía tenemos suficiente espacio para otro elemento, como un logotipo. Tiendo a utilizar flexbox para separar el logotipo del sitio del anuncio. También le doy al contenedor una altura fija que es igual o mayor que la altura de la tabla de clasificación de 90 píxeles.

.header .container { /* Avoid content jumping */ height: 90px; /* Flexibility */ display: flex; align-items: center; justify-content: space-between;}

La ubicación de la barra lateral

El anuncio del bloque de mitad de página (también conocido como rectángulo mediano ) pesa entre 300 y 250 y es el bloque de anuncios de mayor rendimiento, ¡literalmente el número 1!

Los bloques de mitad de página han influido en el diseño de las barras laterales de los sitios durante mucho tiempo. Nuevamente, puedes ver un ejemplo aquí en CSS-Tricks.

Podemos lograr lo mismo usando CSS grid:

Digamos que este es el marcado de nuestro diseño:

div mainMain content/main asideSidebar/aside/div

Podemos configurar el contenedor como nuestro contenedor de cuadrícula y definir dos columnas, la segunda de las cuales tiene el ancho exacto de 300 píxeles de nuestro bloque de anuncios:

.wrapper { display: grid; grid-template-columns: minmax(0, 1fr) 300px;}

Si no mostramos demasiados anuncios en la barra lateral y queremos llamar más la atención sobre ellos, podemos intentar usar la misma técnica adhesiva que usamos con la ubicación de navegación:

div mainMain content/main aside divSidebar/div /aside/div

.is-sticky { position: sticky; top: 0;}

Pero debes tener en cuenta que afectará el alcance si la barra lateral es más larga que la ventana gráfica o cuando se utiliza una barra lateral dinámica:

Hay dos formas en las que tiendo a resolver este problema. La primera es mantenerlo simple y hacer que solo los anuncios importantes sean atractivos. Es el mismo concepto aplicado a la barra lateral de CSS-Tricks, la única diferencia es que JavaScript alterna la visibilidad:

La segunda es usar una biblioteca de JavaScript que incluya un comportamiento de desplazamiento que se pueda usar para escuchar cuando el usuario llega al final de la barra lateral antes de activar la posición fija:

Hay otras consideraciones al trabajar con anuncios en la barra lateral. Por ejemplo, digamos que el anuncio que recibimos es más pequeño de lo esperado o que el script que muestra los anuncios falla por algún motivo. Esto podría resultar en temidos espacios en blanco y ninguno de los enfoques que hemos visto hasta ahora podría manejar eso.

Así es como he abordado este problema en el pasado. Primero, nuestro marcado:

header div div ... /div aside div ... /div div ... /div /aside /div/header

Luego, establecemos las medidas correctas para las columnas de la cuadrícula:

.header .container { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-gap: 24px; min-height: 600px; /* Max height of the half-page ad */}

Ahora hagamos de la barra lateral un contenedor flexible que tenga el ancho y alto exactos que exigimos que tenga el anuncio, pero que oculte cualquier contenido que lo desborde.

.aside { display: flex; flex-direction: column; overflow: hidden; height: 600px; width: 300px;}

Finalmente, podemos diseñar el .aside-contentelemento para que sea capaz de desplazarse verticalmente en caso de que necesitemos mostrar el widget:

.aside-content { overflow-y: auto;}

Ahora, hemos tenido en cuenta situaciones en las que el tamaño del anuncio cambia o cuando necesitamos contenido alternativo.

Diseñar anuncios digitales

Ahora que hemos analizado las ubicaciones, centrémonos en diseñar los anuncios digitales. Siempre es una buena idea diseñar los anuncios, especialmente por dos razones:

1. Diseñar anuncios puede ayudarlos a sentirse como parte nativa de un sitio web.
2. Diseñar anuncios puede hacerlos más atractivos para los usuarios.

A continuación se ofrecen algunos consejos que podemos aprovechar para aprovechar al máximo los anuncios:

  Noticias sobre futbol y del Cadiz

• Utilice un diseño flexible para que todo se vea bien con o sin anuncios. Digamos que una imagen no se carga por algún motivo o de repente es necesario eliminarla del sitio. En lugar de tener que refactorizar un montón de marcas, es ideal utilizar técnicas de diseño CSS modernas, como flexbox y grid, que pueden adaptarse a los cambios de contenido y redistribuir el contenido, según sea necesario.
• Utilice un estilo que sea coherente con el diseño del sitio. Los anuncios que parecen pertenecer a un sitio no sólo son más agradables a la vista, sino que también aprovechan la confianza que se ha establecido entre el sitio y sus lectores. Un anuncio que parece fuera de lugar no sólo corre el riesgo de parecer spam, sino que también podría comprometer la confianza del usuario.
• Utilice un llamado a la acción claro. Los anuncios deben provocar acción y esa acción debe ser fácil de identificar. Enturbiar las aguas con gráficos dominantes o demasiado texto puede afectar negativamente el rendimiento general de un anuncio.
• Utilice un lenguaje preciso. Ya que estamos en el tema del contenido, asegúrese de que el anuncio cumpla sus promesas y establezca buenas expectativas para los usuarios. No hay nada más molesto que esperar obtener una cosa al hacer clic en algo sólo para que te vendan otra cosa.
• Utilice imágenes de alta resolución. Muchos anuncios se basan en imágenes para llamar la atención y enfatizar el contenido. Cuando trabajamos con anuncios que contienen imágenes, especialmente ubicaciones de anuncios más pequeñas, es una buena idea utilizar imágenes de alta resolución para que sean nítidas. La forma común de hacerlo es hacer una imagen del doble del tamaño del espacio para duplicar su densidad de píxeles cuando se renderiza.

Cuando trabaja con anuncios personalizados donde tiene control sobre cómo se implementan, como los que se encuentran aquí en CSS-Tricks, es mucho más fácil adaptarlos a un diseño y disposición específicos. Sin embargo, en los casos en los que se inyectan dinámicamente, digamos con un script, puede que no sea posible envolverlos en un div que pueda usarse para aplicar estilo; tácticas como el uso de pseudoelementos ::before y ::after, así como [attribute^=value]selectores, son tus amigos en estas situaciones.

Muchas plataformas publicitarias generarán una identificación única para cada bloque de anuncios, lo cual es excelente. A menudo comienzan con el mismo prefijo que podemos usar para orientar nuestros estilos:

[id^="prefix-"] { /* your style */}

Manejo de anuncios responsivos

Las plataformas publicitarias que proporcionan un script para inyectar anuncios a menudo manejan el tamaño responsivo agrupando sus propios estilos y demás. Pero, cuando ese no es el caso, o cuando tenemos control total sobre los anuncios, es crucial tener en cuenta cómo se muestran en diferentes tamaños de pantalla. El manejo responsivo adecuado garantiza que los anuncios tengan un llamado a la acción claro en cualquier tamaño de pantalla.

Flexbox, Grid y enésimo hijo

Una cosa que podemos hacer es reordenar el lugar donde se muestra un anuncio. Nuevamente, flexbox y grid son excelentes técnicas de CSS en las que apoyarse porque emplean la orderpropiedad, que puede cambiar la ubicación visual del anuncio sin afectar el orden del código fuente real.

En este ejemplo, intentaremos reordenar nuestros artículos para que el anuncio sea visible "en la mitad superior de la página", que es una forma elegante de decir en algún lugar en la parte superior de la página antes de que el usuario deba comenzar a desplazarse.

Aquí está nuestro marcado:

div div.../div div.../div div.../div !-- and so on... --/div

Podemos utilizar :nth-childpara seleccionar uno o más elementos según su orden de origen, según una fórmula:

.items { display: grid; /* ... */}
.item:nth-child(-n+2) { order: -1;}
@media only screen and (min-width: 768px) { .article:nth-child(-n+3) { order: -1; }}

Este selector apuntará a los primeros n elementos y establecerá su orden en un valor negativo. Esto permite que el anuncio se desplace entre los elementos según el tamaño de la ventana gráfica:

Manejo de anuncios estáticos

No todos los anuncios pueden ser perfectamente flexibles... ni siquiera están diseñados para serlo. Aún podemos incorporar algún comportamiento de respuesta para asegurarnos de que sigan funcionando con un diseño en cualquier tamaño de pantalla determinado.

Por ejemplo, podemos colocar el anuncio en un contenedor flexible y ocultar las partes del anuncio que lo desbordan.

Obviamente, se necesita mucha estrategia de diseño para algo como esto. Observe cómo el contenido importante del anuncio está alineado hacia la izquierda y el derecho simplemente está cortado.

Aquí está el marcado de nuestro contenedor flexible:

div img src="https://i.imgur.com/udEua3H.png" alt="728x90" //div

Dependiendo de si el contenido importante del anuncio está a la izquierda o a la derecha del diseño del anuncio, podemos justificar el contenido del contenedor como flex-start, flex-endo incluso center, mientras ocultamos la parte desbordante.

.ad { display: flex; justify-content: flex-end; /* depending on the side your important content live */ overflow: hidden;}

Manejo de imágenes responsivas

Si bien los anuncios no siempre se crean a partir de imágenes estáticas, muchos de ellos sí lo están. Esto nos da la oportunidad de utilizar la pictureetiqueta, lo que nos brinda más flexibilidad para indicarle al navegador que use imágenes específicas en tamaños de ventana específicos para llenar el espacio lo mejor posible.

picture !-- Use the ad_728x90.jpg file at 768px and above -- source media="(min-width: 768px)" !-- The default file -- img src="ad_300x250"/picture

Lo cubrimos un poco antes, pero el uso de versiones de alta resolución de una imagen crea una imagen más nítida, especialmente en pantallas de alto DPI. El pictureelemento puede ayudar con eso. Es especialmente bueno porque nos permite ofrecer una imagen más optimizada para pantallas de baja resolución que a menudo se asocian con velocidades de Internet más lentas.

Otra cosa que puedes hacer es usar removeattr para admitir múltiples resoluciones de pantalla, lo que permitirá al navegador elegir la resolución de imagen adecuada:

img src="ad_300x250_fallback.jpg" /

Incluso podemos combinar los dos:

picture !-- ... -- source media="(min-width: 768px)" / !-- ... -- img src="ad_300x250_fallback.jpg" //picture

Asegurémonos de establecer el ancho correcto para el anuncio:

.selector { width: 250px;}

Y usemos consultas de medios para picturemanejar los diferentes activos/tamaños:

.selector { width: 300px; height: 250px;}
@media (min-width: 768px) { .responsive-ad { width: 728px; height: 90px; }}

Para mayor flexibilidad, podemos hacer que la imagen responda en relación con su contenedor principal:

.selector img { display: block; width: 250px; height: auto;}

En el caso de srcset, no hay necesidad de preocuparse mucho por el rendimiento porque el navegador sólo descargará el recurso necesario para una resolución específica.

¡Uf, hay mucho que considerar cuando se trata de publicidad gráfica! Diferentes tipos, diferentes tamaños, diferentes variaciones, diferentes diseños, diferentes formatos, diferentes tamaños de ventanas gráficas... y esta no es de ninguna manera una guía completa para todo lo relacionado con la publicidad.

Pero esperamos que esto le ayude a comprender los elementos que hacen que los anuncios sean eficaces como editor de un sitio, especialmente si está pensando en publicar anuncios para su propio sitio. Lo que hemos cubierto aquí sin duda debería ayudarlo a comenzar y ayudarlo a tomar decisiones para aprovechar al máximo los anuncios en un sitio y al mismo tiempo mantener una buena experiencia de usuario.

Tal vez te puede interesar:

1. Primeros pasos hacia un posible diseño de mampostería CSS
2. Comparación de navegadores para diseño responsivo
3. Diseño inclusivo 24
4. diseño de formulario

Introducción a la publicidad gráfica para diseñadores web.

Ubicaciones comunes de anuncios digitalesDiseñar anuncios digitalesManejo de anuncios responsivosTal vez te puede interesar:Índice

programar

es

https://aprendeprogramando.es/static/images/programar-introduccion-a-la-publicidad-grafica-para-disenadores-web-1538-0.jpg

2024-09-30

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente