Cómo optimizar un sitio web para su visualización en dispositivos móviles
Configurar la vista de la página en varios dispositivos en el Área visible
Área visible es un parámetro que determina qué bloques pueden o no mostrarse en determinados tipos de dispositivos. Puedes ajustar este parámetro en el panel Configuración de cualquier bloque.
Por qué puede necesitarlo y cómo funciona
Si un bloque se ve bien en escritorio pero no tanto en móvil, puede que quiera establecer la visibilidad del bloque en 980px o más. De este modo, el bloque se orientará al escritorio y no aparecerá en los dispositivos móviles.
A continuación, copia el bloque y optimízalo para su visualización en móviles ajustando su configuración (lo que puede implicar cambiar la imagen, la fuente, etc.). Ajusta la visibilidad del bloque a "0-980px". Como resultado, obtendrás una versión móvil del bloque.
Al final, quienes accedan a tu sitio web desde un PC verán la versión de escritorio y los usuarios de móviles la versión móvil.
La visibilidad del bloque es un parámetro que puedes encontrar en el panel Configuración de cualquier bloque y ajustarlo para que el bloque aparezca o no en dispositivos con una resolución de pantalla determinada. Por ejemplo, algunos bloques no se ven bien en tabletas y otros en teléfonos móviles.
Si un bloque se ve bien en escritorio pero no tanto en móvil, puede que quiera establecer la visibilidad del bloque en 980px o más. De este modo, el bloque se orientará al escritorio y no aparecerá en los dispositivos móviles.
A continuación, copia el bloque y optimízalo para su visualización en móviles ajustando su configuración (lo que puede implicar cambiar la imagen, la fuente, etc.). Ajusta la visibilidad del bloque a "0-980px". Como resultado, obtendrás una versión móvil del bloque.
Al final, quienes accedan a tu sitio web desde un PC verán la versión de escritorio y los usuarios de móviles la versión móvil.
La visibilidad del bloque es un parámetro que puedes encontrar en el panel Configuración de cualquier bloque y ajustarlo para que el bloque aparezca o no en dispositivos con una resolución de pantalla determinada. Por ejemplo, algunos bloques no se ven bien en tabletas y otros en teléfonos móviles.
Ejemplo
Tenemos una portada que se ve muy bien en el escritorio, el texto alineado a la izquierda y el objeto principal a la derecha. Ahora vamos a ajustarla para que también se vea bien en dispositivos móviles.
Como vemos, la portada queda recortada en el móvil y no se ve muy bien.
Para evitar que aparezca en dispositivos móviles, ve al panel de Configuración del bloque de portada y establece la visibilidad del bloque en "> 980px". Ahora, los usuarios de móviles ya no lo verán.
Copia el bloque.
Ajuste el bloque para la versión móvil: cambie la alineación de la foto y el texto.
Ahora que hemos establecido la visibilidad del bloque en "≤ 980px", no aparecerá en dispositivos con pantallas más anchas de 980px.
Listo. Ahora la portada se muestra de forma diferente según el ancho de la pantalla.
Ejemplos de anchura de pantalla para distintos dispositivos:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
