Continuamos con consejos útiles para diseño web en dispositivos móviles. En esta ocasión hablaremos entre otras cosas sobre la etiqueta viewport, un importante elemento a tener en cuenta y sencillo de implementar.
Si no has leido la primera parte de este artículo, puedes hacerlo aquí.
Etiqueta viewport
Con esta etiqueta, colocada entre <head> y </head> podremos configurar como se visualiza la web que has diseñado en dispositivos móviles, controlando la resolución (ancho y alto en pixeles ) en la que se va a desplegar tu web y las opciones de escala o zoom ( escala inicial, escala mínima y máxima).
Para entender el concepto lo mejor es un par de ejemplos:
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1"> Con esta configuración de la etiqueta viewport, el ancho de la web se adaptara al ancho del dispositivo (width=device-width), con la escala inicial por defecto (initial-scale=1) y no podrás hacer zoom (user-scalable=no).
Esta configuración es la apropiada sólo si has diseñado una versión exclusiva para móvil y se visualice sin zoom de manera que toda la web quepa en el ancho de la pantalla.
Visualización aproximada de multiplicalia.com en esta configuración del viewport:
En cambio si no has cambiado el diseño de tu web para móviles y simplemente quieres que se despliegue sin problemas de la misma forma que en la versión de escritorio de manera que el usuario utilice el zoom para poder ver los contenidos del sitio, la opción para una web diseñada para un ancho de 960 pixeles en la versión de escritorio sería la siguiente:
<meta name="viewport" content="width=960, maximum-scale=3"> En este caso, tu smartphone simulará tener una anchura de 960 pixeles viéndose toda la web miniaturizada en la pantalla, pudiendo hacer un zoom de hasta x3. También se puede definir una escala mínima con el atributo mínimum-scale.
Visualización aproximada de multiplicalia.com en esta configuración del viewport:
No cargar elementos innecesarios en la versión móvil
En la pantalla de un ordenador de escritorio o portátil tenemos una pantalla que nos permite ver muchos elementos de una web sin necesidad de hacer scroll. La pantalla de un móvil tiene un tamaño mucho más reducido, si conservamos todo el contenido de la web original, el usuario tendrá que hacer uso del scroll vertical para poder verlo todo en una web versión móvil.
Debemos analizar qué elementos son absolutamente necesarios y cuales (imágenes, slideshows por ejemplo) podemos descartarlos, así el usuario se puede concentrar en la información verdaderamente relevante.
En un principio podemos utilizar la propiedad css display:none a una capa o sección de la web, consiguiendo que dicha capa no se despliegue, bastará con añadirlo dentro de una media query o en el archivo css que carguemos para la versión móvil.
Pero debemos tener en cuenta que el elemento se sigue cargando aunque tenga la propiedad display:none y no sea visible por el usuario, si queréis que el elemento a parte de no ser visible tampoco sea cargado en la web, lo cual es muy recomendable, debéis hacerlo desde el lado del servidor, usando por ejemplo PHP.
Con este fin hay proyectos como Mobile-Detect que proporciona una clase PHP con sus respectivas funciones para detectar dispositivos móviles. Descargable desde github.
Conclusión
Aquí termina esta breve guía con consejos sobre diseñar una web adaptada a móviles. No hemos profundizado en cada uno de ellos, ahora toca hacer pruebas y adaptarlos a lo que necesitas.
En resumen, debemos acordarnos de que los usuarios acceden actualmente desde gran variedad de dispositivos, adaptar tu web para estos usuarios es algo que debes valorar. El objetivo al fin y al cabo es mejorar la experiencia del máximo número de usuarios que navegan por tu web e indirectamente un sitio que implemente las medidas oportunas para optimizar la navegación será mejor valorado por los motores de búsqueda, afectando positívamente al SEO de tu página web.
Para terminar te formulo una pregunta, ¿Qué haces tú para mejorar el diseño de tu web en dispositivos móviles?
