Hola. Ahora mismo quiero explicar como podemos ocultar elementos de nuestra página dependiendo del dispositivo desde el que se accede a ella, con esto podemos despreocuparnos de comprometer la experiencia y accesibilidad de nuestros visitantes respecto a ciertos contenidos.

Todos tenemos algo en nuestro sitio web que queda bien en la versión escritorio, osea va perfecto, pero desde un móvil la cosa cambia.

Creo que uno de los principales problemas son los widgets o gadgets, y mas si hablamos de aquellos que no tienen posición, es decir son flotantes y ya se imaginaran los problemas que pueden generar en la vista móvil.

De hecho ese fue mi caso, anteriormente yo tenia en un costado de mi página el famoso Like Box de Facebook, el cual se deslizaba con un efecto bien chulo. El problema era que el widget hacia que la experiencia de mi sitio a través de un móvil fuera malisima.

Pero claro, me fascinaba verlo desde una computadora :D… así que tenia que hallar alguna manera de conservarlo sin afectar esto, vaya cosa.

Con un tanto de investigación no tarde en encontrar formas sencillas para conseguirlo, sin duda esto es algo que ayuda a muchos webmasters… todo sea por que nuestros visitantes obtengan la mejor experiencia posible en nuestro sitio. A continuación voy a explicar lo que me funciono y también voy a aclarar algunas cosillas que se deben tomar en cuenta antes de querer realizar esto.

¿Que es display: none?

El atributo CSS “display: none” hace que los elementos seleccionados no sean visibles ni ocupen espacio, aunque si se cargan dentro de la web. Con esto se puede ocultar prácticamente todo: un “div” un “ul” un “li”. Si le añadimos unas especificaciones de tamaño (max-width o min-width) conseguiremos que siga una regla de ocultar los contenidos según la resolución de pantalla del dispositivo desde el que se accede.

@media screen and (max-width: 980px) {
display: none;
}
}

 

Entonces voy a poner un ejemplo

Imaginemos que todos tenemos en nuestra página el widget que mencione anteriormente (fanbox flotante de Facebook) y no queremos que se muestre si alguien nos visita a través de un móvil.

– El código html normal de este gadget se puede ver en este articulo.

– Ya se encuentran estilos css integrados, así que solo bastaría con poner el atributo y la especificación de tamaño antes del cierre de <style>.

– El código terminaría así:

<style> #flotante1 { position:fixed; top:100px; right:-250px; float:right; width:288px; display:block; padding:0; z-index:1002; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } #flotante1:hover, #flotante2:hover, #flotante3:hover { right:0px; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } div.likeboxwrap { margin-top:-5px; margin-left:-45px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; }

@media screen and (max-width: 980px) {

display: none;
}

}

</style>  <div id=’flotante1′> <img src=’http://lh3.googleusercontent.com/-vq69jjHi_aA/UKxnEYWptDI/AAAAAAAADdU/1bjiSBYnRSo/fb_tab.png’ style=’float:left;’/> <div style=’background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;’><span><div class=’likeboxwrap’><iframe allowtransparency=’true’ frameborder=’0′ scrolling=’no’ src=’http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftodopatuweb&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350′ style=’border:none; overflow:hidden; width:240px; height:325px;’/></iframe> </div></span></div></div>

 

Si nuestro sitio web es visitado usando un dispositivo con una resolución de pantalla menor a 980 pixeles el widget no se mostrara ni ocupara espacio, es muy fácil no :).

Obviamente para una mejor organización puedes insertar todo (el atributo y su especificación de tamaño) dentro del archivo .css, solo encuentra los estilos pertenecientes a tu contenido o widget y añádelo ahí, y si en cambio aun no hay vinculación tendrías que hacer la llamada, ejemplo si tu contenido o widget esta dentro de un div tendrías que especificarlo así:

@media screen and (max-width: 980px) {
div#algo {
display: none;
}
}

 

Para que todo lo que dije en el articulo tenga validez he puesto el fanbox flotante en esta página de pruebas, este solo sera visible prácticamente desde la versión escritorio (°o°).

ACLARACIÓN: Hay sitios que afirman que no es recomendable abusar de display: none, puesto que Google supuesta-mente lo interpreta como algo oscuro y puede penalizar nuestro posicionamiento.

Bueno sin mas espero que les sea de mucha utilidad.

Si te surge algún inconveniente no olvides dejarme un comentario. Recuerda compartir el post 🙂