Optimizar tu sitio web para los dispositivos móviles

  

¿Cómo ofrecer la mejor experiencia de usuario y optimizar su sitio para dispositivos móviles al crear un sitio web? ¿Es posible crear un sitio web móvil? Para responder a esta pregunta, hay que empezar por entender las diferencias entre estos dispositivos y cómo afecta a tu sitio web. SiteW ofrece una solución rápida y sencilla para crear y actualizar un sitio web  responsive para móviles.

¿Qué es un sitio web responsive?

Un sitio responsivo se adapta a cualquier tipo de pantalla y permite que cada una de ellas sea fácil de leer.

La pantalla de un teléfono móvil suele utilizarse verticalmente para navegar por Internet, lo que significa que la pantalla es aproximadamente de 3 veces menor que una pantalla de ordenador.

Para crear un sitio móvil, la adaptación consiste, por tanto, en organizar el contenido del sitio para que sea menos ancho. Para ello, los textos deben estar en una columna más estrecha y, por tanto, más larga, y los elementos colocados uno al lado del otro se colocan uno debajo del otro.

Mecánicamente, esto da lugar a una página mucho más larga. Para remediarlo, a menudo se simplifica el contenido de la página web (menos ilustraciones y selección de sólo la información más importante).

Hay que tener en cuenta que, al contrario de lo que se podría pensar, no es necesario ampliar los textos en móviles, ya que al reducir la anchura de la página puede ampliarse y mostrarse automáticamente más grande que en ordenador.

El 21 de abril de 2015, Google modificó su algoritmo para favorecer las páginas responsive

 en los resultados de búsqueda móvil. Esta es una razón más para optimizar su sitio web para dispositivos móviles.

La solución de SiteW 

Para satisfacer esta necesidad, SiteW te permite adaptar tu sitio web para el ordenador sin tener que volver a crear un nuevo sitio.

Además de la visualización para ordenadores, puedes crear diferentes visualizaciones para  teléfonos horizontales o verticales o tabletas verticales.

Sólo hay que cambiar el tamaño de los diferentes elementos de tu sitio para que se ajusten a la pantalla del dispositivo seleccionado y reposicionarlos para que estén colocados unos encima de otros. Esto puede hacerse utilizando las herramientas estándares para mover y cambiar el tamaño de los módulos.

Y para facilitarte la tarea, en la vista móvil, hemos añadido una nueva herramienta que permite redimensionar y desplazar un módulo seleccionado para que esté visible en el dispositivo.

El contenido de los módulos y su diseño están sincronizados entre los diferentes dispositivos.

Para simplificar la visualización móvil, los módulos pueden ocultarse, y se pueden añadir módulos (por ejemplo, para acortar un texto largo).

El principio es muy sencillo y muy flexible.

En función del dispositivo utilizado, se selecciona la vista más adecuada y se ajusta al tamaño de la pantalla, posiblemente con un pequeño margen (los elementos que salen de la pantalla en la página de creación de sitios web serán visibles en el margen, sólo en  algunos dispositivos).

Los sitios web para móviles, creados en SiteW, están diseñados para estar mejor posicionados en los resultados de Google para móviles.

Hacer mi sitio web móvil

La creación de un sitio móvil se hace en unos momentos en SiteW.

1. Comienza activando el modo Optimizado para la vista seleccionada. En este ejemplo, elegimos la vista Móvil vertical. La pantalla del móvil se muestra entonces en la parte superior de tu sitio.
   
   

1. Cambia el tamaño y mueve los módulos por la pantalla. La herramienta te permite hacer esto automáticamente para uno o más elementos seleccionados.

2. Reposiciona los módulos para que estén colocados unos encima de otros, utilizando las herramientas habituales para mover, empujar/mover, redimensionar y empujar/redimensionar.

3. Oculta los elementos innecesarios para simplificar el sitio. 

4. Si es necesario, añade módulos que sólo son visibles en el móvil.

5. Si es necesario, modifica algunos elementos, duplicándolos y cambiando su visibilidad para que el elemento original sólo se muestre en el ordenador y el elemento copiado sólo en el móvil.

6. Si es necesario, personaliza  el menú móvil. Esta barra de iconos, que sólo se muestra en las vistas móviles, aparece en la parte superior de la pantalla y muestra el menú del sitio y otras funciones, como la llamada telefónica o un enlace de contacto, enlaces a páginas o sitios, etc. El menú móvil sustituye a todos los menús de tu sitio. Haz clic en el menú móvil para personalizar los botones que se muestran y su disposición (mediante la función de arrastrar y soltar en el panel de configuración)

A continuación, realiza los pasos 1 a 6 para cada página de tu sitio y publícalo.

Actualizar mi sitio web responsivo

Al cambiar el contenido de un módulo existente en la vista de ordenador, también se modifica en todos los dispositivos.

Si esto cambia la longitud del contenido, solo tienes que reposicionar el módulo en cada vista. La herramienta de empuje/redimensionamiento es muy útil para esto.

Cuando añades un nuevo módulo a tu sitio, sólo se muestra en la vista seleccionada. Puedes cambiar su visibilidad para que se sincronice en todos los dispositivos (¡yay! ✌)

Para ir más allá

Puedes utilizar la multiselección para cambiar la visibilidad de varios elementos al mismo tiempo.

Como ves, el principio es muy sencillo y rápido. Ahora te toca a ti.