Diseño responsivo y visibilidad por dispositivo
Con más del 60 % del tráfico web proveniente de dispositivos móviles, es fundamental que su sitio web se vea excelente en todos los tamaños de pantalla. El constructor de sitios web proporciona herramientas potentes para controlar cómo se muestra el contenido en diferentes dispositivos y crear experiencias optimizadas para cada visitante.
Vista previa de dispositivos: En modo Edición, utilice los iconos de dispositivos en la barra de herramientas superior para previsualizar cómo se ve su página en escritorio, tableta y móvil.
Comprender el diseño responsivo
El diseño responsivo significa que su sitio web se adapta automáticamente al tamaño de pantalla del dispositivo que lo visualiza:
| Dispositivo | Ancho de pantalla | Comportamiento típico |
|---|---|---|
| Escritorio | 1200px+ | Diseño completo, todas las funciones visibles |
| Portátil | 992px - 1199px | Diseño ligeramente condensado |
| Tableta | 768px - 991px | Las columnas pueden apilarse, relleno reducido |
| Móvil | Menos de 768px | Columna única, menú hamburguesa, áreas táctiles más grandes |
Visibilidad específica por dispositivo
Controle qué elementos aparecen en diferentes dispositivos:
Configurar la visibilidad
- Seleccione cualquier elemento en su página
- Abra el panel de Opciones a la derecha
- Encuentre la sección Visibilidad
- Active o desactive la visibilidad para cada tipo de dispositivo
Opciones de visibilidad
| Opción | Efecto | Caso de uso |
|---|---|---|
| Mostrar en escritorio | Elemento visible solo en pantallas grandes | Diseños complejos, imágenes grandes, tablas detalladas |
| Mostrar en tableta | Elemento visible en pantallas medianas | Contenido específico para tabletas |
| Mostrar en móvil | Elemento visible en pantallas pequeñas | Navegación simplificada, botones táctiles |
| Mostrar en todos | Elemento visible en todas partes (predeterminado) | Contenido esencial como logotipos, texto principal |
| Ocultar en móvil | Oculto solo en pantallas pequeñas | Imágenes secundarias, elementos decorativos |
Optimizaciones comunes para móvil
Navegación
- Escritorio: barra de menú horizontal completa con desplegables
- Móvil: menú hamburguesa (tres líneas) que se expande a menú vertical
- Considere agregar un encabezado móvil fijo para un acceso fácil
Imágenes
- Oculte las imágenes decorativas grandes en móvil para acelerar la carga
- Use versiones más pequeñas y optimizadas para dispositivos móviles
- Asegúrese de que las imágenes se escalen proporcionalmente (nunca estirar)
Columnas
- Los diseños de múltiples columnas se apilan automáticamente en vertical en móvil
- Controle el orden de apilamiento (qué columna aparece primero)
- Ajuste el espaciado entre las secciones apiladas
Texto
- Asegúrese de que el tamaño de fuente base sea al menos 16px para legibilidad móvil
- Reduzca proporcionalmente el tamaño de los títulos en pantallas pequeñas
- Mantenga una longitud de línea cómoda (45-75 caracteres)
Botones y enlaces
- Tamaño mínimo de área táctil: 44x44 píxeles
- Agregue espaciado adecuado entre elementos clicables
- Considere botones de ancho completo en móvil para facilitar la pulsación
Visibilidad condicional
Más allá de la visibilidad por dispositivo, muestre u oculte contenido según condiciones:
Visibilidad basada en el usuario
| Condición | Descripción | Caso de uso |
|---|---|---|
| Usuarios conectados | Visible solo para visitantes autenticados | Enlaces de cuenta, contenido personalizado, acceso al portal |
| Visitantes invitados | Visible solo para visitantes no conectados | Solicitudes de inicio de sesión, llamadas a registro, banners promocionales |
| Grupos específicos | Visible para usuarios en ciertos grupos | Herramientas de administración, contenido para socios, funciones premium |
Configurar la visibilidad condicional
- Seleccione el elemento
- Abra Opciones → Visibilidad
- Encuentre Visibilidad condicional
- Seleccione la condición a aplicar
Elementos ocultos
Puede ocultar elementos manteniendo su estructura en la página:
- Temporalmente oculto: Para contenido que aún no está listo para publicar
- Contenido programado: Promociones de temporada esperando su lanzamiento
- Pruebas A/B: Pruebe diferentes versiones
- Espacio reservado: Marcador de posición para contenido futuro
Gestionar elementos ocultos
- Los elementos ocultos se muestran con una superposición rayada en modo Edición
- Active o desactive la visibilidad con un solo clic
- Los elementos ocultos no se cargan para los visitantes (sin impacto en el rendimiento)
Probar el diseño responsivo
En el constructor de sitios web
- Haga clic en el icono Móvil en la barra de herramientas superior
- Vea su página en modo de vista previa móvil
- Cambie entre las vistas de Escritorio, Tableta y Móvil
- Realice ajustes directamente en cada vista
Herramientas de desarrollo del navegador
- Presione F12 para abrir las herramientas de desarrollo
- Haga clic en el icono de alternancia de dispositivo (teléfono/tableta)
- Seleccione dispositivos específicos (iPhone, iPad, etc.)
- Pruebe las interacciones y el desplazamiento
Pruebas en dispositivos reales
Siempre pruebe en dispositivos reales cuando sea posible:
- Las interacciones táctiles se sienten diferentes a los clics del ratón
- La representación de fuentes varía entre dispositivos
- El rendimiento difiere significativamente
- Pruebe en orientación vertical y horizontal
Optimización del rendimiento para móvil
Los usuarios móviles suelen tener conexiones más lentas. Optimice la velocidad:
- Imágenes: Use imágenes de tamaño adecuado, active la carga diferida
- Fuentes: Limite las fuentes personalizadas (cada una agrega tiempo de carga)
- Videos: Use imágenes de portada, evite la reproducción automática en móvil
- Contenido oculto: Los elementos ocultos en móvil aún se cargan a menos que se configuren adecuadamente
- Animaciones: Reduzca o desactive las animaciones complejas en móvil
Consideraciones de accesibilidad
Asegúrese de que su sitio móvil sea accesible:
- Las áreas táctiles son suficientemente grandes (mínimo 44x44px)
- Contraste de color suficiente (4.5:1 para texto)
- El texto es legible sin zoom (mínimo 16px)
- Los formularios tienen etiquetas visibles
- Los indicadores de enfoque son visibles para la navegación por teclado
- Las imágenes tienen texto alternativo
Buenas prácticas específicas para móvil
| Hacer | No hacer |
|---|---|
| Apilar columnas verticalmente | Forzar el desplazamiento horizontal |
| Usar botones de ancho completo | Colocar enlaces pequeños juntos |
| Simplificar la navegación | Mantener mega menús complejos en móvil |
| Priorizar el contenido esencial | Mostrar todo el contenido del escritorio |
| Probar en dispositivos reales | Usar solo la emulación del navegador |
| Optimizar imágenes para móvil | Cargar imágenes de tamaño escritorio |