Optimizar Su Página Web Para Móviles, Smartphones Y Tabletas

¿Cómo ofrecer la mejor experiencia de usuario en dispositivos móviles, cuando se crea un sitio web? Para eso, primero debes entender la diferencia entre estos dispositivos, y el impacto que tendrán en la visualización de tu sitio web. SiteW propone una solución fácil y rápida para crear y actualizar una página web responsive para los móviles y tabletas.

¿En qué consiste una página web responsive?

volver mi página web responsive

Una página web responsive se adecua a todo tipo de pantalla y permite tener para cada una una visualización que facilita la lectura y la navegación.

La pantalla de un móvil a menudo se utiliza en modo vertical para navegar en internet y eso viene a visualizar una página web en una pantalla aproximadamente 3 veces más estrecha que una pantalla de computadora.
Para crear una página web móvil, pues debe arreglar el contenido de la página web para que sea menos ancha. Para llegar a este fin, los textos deben ser colocados en una columna más estrecha y en consecuencia más larga y los elementos situados uno al lado del otro deben ser colocados uno debajo del otro.
Mecánicamente, eso lleva a la creación de una página web mucho más larga. Para remediar eso, el contenido de la página web a menudo se simplifica (menos ilustraciones y sólo visualización de información más importante).
Nota que contrariamente a lo que se podría pensar, no se necesita ampliar los textos en Móvil, porque el hecho de reducir la anchura de la página web permite hacer zoom en la página web y obtener automáticamente una vista más grande.

El 21 de Abril de 2015, Google modificó su algoritmo para favorecer las páginas adaptadas a los móviles en los resultados de búsqueda móviles. ¡Es una razón adicional para optimizar tu página web para dispositivos móviles!

La solución de SiteW  

Para contestar a esta necesidad, SiteW te permite adaptar tu página web Computadora sin necesidad de recrear una nueva página web.
Además de la vista Computadora actual, puedes crear diferentes vistas para móviles en modo vertical, móviles en modo horizontal o tabletas en modo vertical.
Los diferentes módulos de tu página web simplemente deben ser redimensionados para que sean contenidos en la pantalla del dispositivo definido y reposicionados para que se coloquen uno debajo del otro. Así sólo tienes que utilizar las herramientas básicas de desplazamiento y de redimensionamiento de módulo.

redimensionar, empujar, mover los elementos de la página web

 Y para ponértelo más fácil, en la vista móvil, añadimos una nueva herramienta que permite redimensionar y mover un módulo seleccionado para que se muestre en la parte visible del dispositivo.

redimensionamiento automático para la versión móvil

El contenido de los módulos y su diseño se sincronizan entre las diferentes vistas.
Para simplificar tu página web, módulos pueden esconderse en esta vista y módulos pueden ser añadidos (por ejemplo para reformular un largo párrafo para volverlo más corte).
Así el principio es muy simple y totalmente flexible.

Según el aparato utilizado, la vista más adecuada es elegida y adaptada al tamaño de la pantalla, eventualmente con un pequeño borde (los módulos que salen de la pantalla en la herramienta de creación de páginas web aparecerán en este borde únicamente en ciertos aparatos).

Las páginas web móviles creadas en SiteW están diseñadas para asegurar un mejor posicionamiento en los resultados de búsqueda móviles de Google.

Transformar mi página web en modo Móvil

  1. Empieza por activar el modo Página web optimizada en la vista a crear. En este ejemplo, elegimos la vista Móvil vertical. Entonces la pantalla del móvil se superpone a tu página web.
    versión móvil
  2. Cambia el tamaño y mueve los módulos en la pantalla. La herramienta permite realizar esto automáticamente en un o varios módulos seleccionados.
  3. Reposiciona los módulos para que se muestren uno bajo del otro utilizando las herramientas habituales para mover, empujar/mover, redimensionar y empujar/redimensionar.
  4. Esconde los módulos inútiles para simplificar la página web.
    personalización versión móvil
  5. Si es necesario, añade módulos que serán visibles únicamente en móvil.
  6. Si es necesario, modifica algunos módulos duplicándolos, luego, arreglando su visibilidad para que el módulo original aparezca sólo en ordenadores y su copia se muestre sólo en móvil.
  7. Si es necesario, modifica la barra móvil. Esta barra de iconos sólo aparece en la parte superior de la pantalla en los modos Móvil horizontal y vertical y permite mostrar el menú de la página web y otros iconos de acceso directo como enlaces a una llamada telefónica o de contacto, enlace hacia una página web o un sitio web, etc. El menú de la barra móvil reemplaza todos los menús mostrados en tu página web. Haz clic en la barra móvil para personalizar los botones, y su distribución (utilizando el arrastrar/mover en la configuración).
personalización de la barra móvil
Luego tienes que realizar las operaciones 1 a 6 para cada página y publicar tu sitio.

Actualizar mi página web responsive

  1. Modificando el contenido de un módulo que existe en la vista Computadora, también se modifica en todos los dispositivos que muestran el módulo.
  2. Si modificas el largo del contenido, hay que reposicionar este módulo en cada vista. La herramienta empujar/redimensionar es muy útil para eso.
  3. Añadiendo un nuevo módulo en tu página web, aparece únicamente en la vista activa. Puedes modificar su visibilidad para que sea sincronizada en todos los aparatos.
Nuestro consejo
Puedes utilizar la selección múltiple para cambiar la visibilidad de varios módulos de una sola vez.

Así ves que el principio es muy simple y rápido de implementar. ¡Ahora te toca a tí!

Última actualización 29 abril, 2017