La barra lateral derecha es una de las opciones que siempre tengo habilitada en mis sitios.
La razón para hacerlo es básicamente la monetización por medio de anuncios de Adsense.
La barra lateral derecha al ser una “sticky sidebar” aumenta la visibilidad de las unidades de publicidad en el sitio.
También puedes usar las barras laterales para promocionar contenido de tu blog o enlaces de interés
Table of Contents
La Barra Lateral en los Teléfonos Móviles
Como ya sabes la barra lateral en teléfonos móviles se ubica después del contenido, por lo que barra lateral pierde el sentido de ser.
Si tienes anuncios en la barra lateral, notarás que los anuncios tienen menos visibilidad en dispositivos móviles.
Mi recomendación es remover esas unidades de dispositivos móviles para que no afectan las ganancias de los anuncios de Adsense o de cualquier otro servicio que uses.
Si lo único que tienes en la barra lateral son unidades de publicidad, puedes remover la barra lateral completamente de los dispositivos móviles.
La Barra Lateral en Tabletas
Los visitantes que usan tablets para visitar mis sitios son una minoría, por lo que nunca le había prestado atención a la experiencia que tienen los visitantes que usan este tipo de dispositivos.
De acuerdo con AdInserter, El viewport de las tablets empieza aproximadamente con una anchura de 768px
El plugin también indica que la anchura mínima para los dispositivos de escritorio es de 980px
Cómo luzca el contenido o los anuncios fijos depende del espacio que hayas destinado para el contenedor del contenido y la barra lateral.
Yo uso GeneratePress en todos mis sitios y el contenido esta colocado a 1400px y la barra lateral toma 30% de ese ancho.
Revisando con la ayuda de ViewPort Sizer, me di la tarea de ver como luce mi sitio en tablets con rangos entre 768px y 1180px
La conclusión fue sencilla, las barras laterales no lucen muy bien en esos tamaños de pantalla.
Este es un ejemplo de cómo luce este sitio con anuncios sumamente delgados de 160×600 y un anuncio de 728×90
El contenido se puede leer pero esos dos anuncios, más los anuncios dentro del contenido hacen que el usuario tenga una mala experiencia
Esa mala experiencia puede llevar a los usuarios a buscar el contenido en algún otro lugar y desistir de leer tu blog
Asi luce el sitio en Tablets con un viewport de 779×772
En vista que los visitantes con tablets son una minoría y que el anuncio de 160×600 no es de los mejores en términos de ingreso, decidí remover la barra lateral derecha de los dispositivos hasta un máximo 1180px
¿Cómo Remover las Barras Laterales?
Remover la barra lateral puede ser realizado de formas diferentes en diferentes temas.
En mi caso, un código de CSS creado por el soporte de GeneratePress hizo el trabajo de una buena manera
<style>
@media (max-width: 1180px) {
.site-content {
flex-direction:column;
}
.container .site-content .content-area,
.is-right-sidebar.sidebar {
width: auto;
order: initial;
}
#main {
margin-left: 0;
margin-right:0
}
}
</style>Por lo que esto es lo que experimentan los usuarios que visitan mi sitio desde tablets y algunas computadoras de escritorio con pantallas pequeñas.
Siempre hay anuncios pero la experiencia esta más balanceada.
Mi recomendación es que analices cómo es la experiencia del usuario con diferentes tamaños de pantalla
Uno de los servicios en línea que me ayuda constantemente con este tema es:
Más sobre Optimización Web
Espero que esta publicación haya sido de gran ayuda para mejorar la apariencia de tu sitios y tus esfuerzos de monetizarlos.
Estas son algunas publicaciones sobre optimización y monetización de sitios de WordPress que te pueden resultar útiles e interesantes
- Precargar Enlaces en WordPress
- Lazy Loading para los Anuncios de Adsense: La Cura
- Mi Stack de WordPress: Temas, Servicios y Plugins
- Tips para Pasar Core Web Vitals si Usas Google Adsense
- Modificar el Código de Anuncio Adaptable de Adsense
- Mejores Tamaños de Anuncios de Adsense
- Adsense: Escritorio y Dispositivos Móviles
Si tienes preguntas, puedes escribirme por medio de Facebook
