Optimizar la vista móvil en Sitebuilder

Más del 60% de tus visitantes ve tu sitio web en un smartphone o una tablet. Un sitio web que no funciona bien en el móvil pierde visitantes y clientes. Sitebuilder te pone fácil que tu sitio web funcione a la perfección en cualquier tamaño de pantalla.

Por qué es importante la optimización móvil

El impacto de los usuarios móviles:

  • Google usa la indexación mobile-first para los rankings
  • Los visitantes abandonan los sitios móviles lentos en 3 segundos
  • Una mala experiencia móvil perjudica la imagen de tu marca
  • Las conversiones móviles crecen más rápido que las de escritorio
  • Muchos visitantes solo llegan desde el móvil

Conceptos básicos del diseño responsive

Qué es el diseño responsive

El diseño responsive adapta tu sitio web automáticamente a la pantalla. Los elementos se reorganizan, el texto cambia de escala y las imágenes se ajustan.

Cómo lo resuelve Sitebuilder

Sitebuilder es totalmente responsive de serie:

  • Las columnas se apilan automáticamente en pantallas pequeñas
  • El tamaño del texto se adapta
  • La navegación se convierte en un menú hamburguesa
  • Las imágenes cambian de escala de forma proporcional

Vista previa móvil

Ver la vista móvil

  1. Abre el editor de páginas
  2. Haz clic en el icono de móvil de la barra de herramientas
  3. Ahora ves la vista móvil
  4. Haz clic en el icono de tablet para ver esa vista

Probar distintos tamaños de pantalla

Haz pruebas en varios tamaños:

  • Escritorio (1920px o más)
  • Portátil (1024-1366px)
  • Tablet (768-1024px)
  • Teléfono grande (414-768px)
  • Teléfono pequeño (320-414px)

Ajustar los elementos por dispositivo

Visibilidad por dispositivo

Oculta o muestra elementos específicamente en el móvil:

  1. Selecciona un elemento
  2. Ve a Ajustes
  3. Busca Visibilidad
  4. Elige:
    • Mostrar en escritorio
    • Mostrar en tablet
    • Mostrar en móvil
  5. Actívalo o desactívalo por dispositivo

Cuándo ocultar elementos

Buenos motivos para ocultar en el móvil:

  • Imágenes grandes que distraen
  • Barras laterales que no caben
  • Contenido secundario
  • Tablas complejas

Contenido específico para móvil

Añade contenido alternativo para el móvil:

  1. Crea una versión simplificada
  2. Muéstrala solo en el móvil
  3. Oculta la versión compleja en el móvil

Optimizar la navegación

En el móvil, tu menú se convierte automáticamente en un menú hamburguesa:

  1. Ve a Ajustes de la cabecera
  2. Configura el Menú móvil
  3. Elige:
    • Icono del menú (hamburguesa, cruz, etc.)
    • Animación
    • Color de fondo

Cabecera fija

Mantén la navegación visible al desplazarte:

  1. Selecciona la cabecera
  2. Activa Sticky
  3. La cabecera se queda arriba al desplazarte
  4. Comprueba que funciona bien en el móvil

Enlaces fáciles de tocar

Asegúrate de que los enlaces se tocan con facilidad:

  • Mínimo 44x44 píxeles
  • Espacio suficiente entre enlaces
  • Respuesta visual clara al tocar

Ajustar la tipografía

Tamaño del texto por dispositivo

  1. Selecciona un bloque de texto
  2. Cambia a la vista móvil
  3. Ajusta el tamaño del texto para el móvil
  4. Los títulos suelen ir un 20-30% más pequeños

Interlineado y espaciado

En pantallas pequeñas:

  • Aumenta el interlineado para mejorar la legibilidad
  • Reduce los márgenes entre párrafos
  • Mantén suficiente espacio en blanco

Optimización de las fuentes

  • Usa como máximo 2 fuentes
  • Elige fuentes legibles en pantallas pequeñas
  • Evita las fuentes demasiado finas

Optimizar las imágenes

Imágenes responsive

Sitebuilder carga automáticamente el tamaño de imagen adecuado:

  • Versiones más pequeñas para el móvil
  • Ahorra ancho de banda y tiempo de carga
  • Se conserva la calidad

Formato de imagen

  • Usa WebP siempre que puedas
  • JPEG para fotos
  • PNG para gráficos con transparencia
  • SVG para el logotipo y los iconos

Lazy loading

Carga las imágenes solo cuando entren en pantalla:

  1. Ve a Ajustes del sitio
  2. Activa Lazy loading
  3. Las imágenes se cargan mientras te desplazas

Formularios para móvil

Campos de entrada fáciles de tocar

  1. Haz que los campos de entrada sean lo bastante grandes
  2. Deja espacio suficiente entre los campos
  3. Usa el tipo de entrada adecuado:
    • email para direcciones de correo electrónico
    • tel para números de teléfono
    • number para cifras

Optimización del teclado

El teclado adecuado aparece automáticamente:

  • Campo de correo electrónico: tecla @ disponible directamente
  • Teléfono: teclado numérico
  • URL: botón .com disponible

Botón de envío

  • Haz que el botón sea lo bastante ancho
  • Colócalo en la parte inferior del formulario
  • Usa una llamada a la acción clara

Optimizar la velocidad

Tiempo de carga en el móvil

Los usuarios móviles esperan velocidad:

  1. Ve a Ajustes y selecciona Rendimiento
  2. Activa Caché
  3. Activa Minificación de código
  4. Activa Lazy loading

Primero el contenido crítico

  1. Asegúrate de que el contenido visible sin desplazarse carga rápido
  2. Establece la prioridad de las imágenes importantes
  3. Evita los scripts que bloquean la carga

Valorar el uso de AMP

Para sitios centrados en el contenido:

  • Las versiones AMP cargan a toda velocidad
  • Buenas para artículos de noticias y blogs
  • Requieren una implementación específica

Gestos táctiles

Comportamiento del desplazamiento

  • Procura que el desplazamiento sea suave
  • Evita el desplazamiento horizontal
  • Prueba las páginas largas en el móvil

Acciones de deslizamiento

Algunos elementos admiten deslizar:

  • Carruseles de imágenes
  • Galerías de productos
  • Sliders de testimonios

Pruebas y depuración

Pruebas en dispositivos reales

Nada sustituye a las pruebas reales:

  1. Abre tu sitio en el teléfono
  2. Prueba todas las páginas y funciones
  3. Intenta rellenar los formularios
  4. Comprueba el proceso de pago

Chrome DevTools

Haz pruebas en el navegador:

  1. Abre Chrome DevTools (F12)
  2. Haz clic en el icono de móvil
  3. Selecciona un dispositivo
  4. Prueba la interacción

Problemas frecuentes

Comprueba si hay:

  • Texto demasiado pequeño para leerlo
  • Botones demasiado juntos
  • Imágenes que se salen de la pantalla
  • Formularios difíciles de rellenar

Lista de comprobación mobile-first

Comprueba en cada página:

  • ¿La página carga en menos de 3 segundos?
  • ¿Todos los elementos son visibles y legibles?
  • ¿La navegación funciona bien?
  • ¿Los formularios son fáciles de rellenar?
  • ¿Funcionan todos los enlaces y botones?
  • ¿No hay desplazamiento horizontal no deseado?