Más de la mitad del tráfico web es móvil. Los sitios que no funcionan en teléfonos móviles pierden usuarios. Esta guía le muestra cómo crear experiencias responsivas que se adaptan a cualquier pantalla.
¿Qué es el diseño responsivo?
Definición
Diseño que se adapta a diferentes tamaños de pantalla.
Principio
Una base de código, múltiples dispositivos.
Fluido
Diseños que fluyen y se adaptan.
Por qué responsivo
Tráfico móvil
La mayoría de los accesos son móviles.
SEO
Google prioriza los dispositivos móviles primero.
experiencia de usuario
Experiencia unificada.
Mantenimiento
Una versión, no varias.
Móvil primero
Enfoque
Diseñe primero para dispositivos móviles y luego amplíelo a computadoras de escritorio.
¿Por qué?
El móvil es más restrictivo. Forzar priorización.
CSS
Consultas de medios de ancho mínimo.
Técnicas CSS
Consultas de medios
@media (ancho mínimo: 768 px) { }.
Caja flexible
Diseño flexible, una dimensión.
Cuadrícula CSS
Disposición en dos dimensiones.
Tipografía fluida
abrazadera() para fuentes que escalan.
Consultas de contenedor
Basado en contenedor, no en ventana gráfica.
##Puntos de interrupción
Común
320 px, 480 px, 768 px, 1024 px, 1280 px.
Por contenido
Defina dónde se rompe el diseño de forma natural.
No por dispositivo
Los dispositivos cambian, los puntos de interrupción del contenido perduran.
Diseño responsivo
Rejillas fluidas
Proporciones, no píxeles fijos.
Caja flexible
Cambios de dirección: fila → columna.
Ajuste automático de cuadrícula
Columnas que se ajustan.
Pila móvil
Apilar elementos en el móvil.
Tipografía adaptable
Tipo de fluido
tamaño de fuente: abrazadera (1rem, 2vw, 2rem).
Longitud de línea
Limitar caracteres por línea.
Jerarquía
Mantener en todos los tamaños.
Imágenes responsivas
conjunto de origen
Múltiples resoluciones.
tallas
Tamaño en diferentes ventanas gráficas.
foto
Diferentes imágenes por contexto.
Carga diferida
cargando="perezoso".
Dirección de arte
Recorte diferente para móvil.
Navegación
###Escritorio
Menú horizontal, desplegable.
###Móvil
Hamburguesa, deslizable.
###Alternar
JS para abrir/cerrar.
Tocar objetivos
44 píxeles mínimo.
##Tocar versus hacer clic
Tocar objetivos
Más grande para los dedos.
Estados de desplazamiento
No dependas del desplazamiento.
Gestos
Desliza, pellizca en contextos apropiados.
Formularios responsivos
Entradas grandes
Fácil de jugar.
Borrar etiquetas
Siempre visible.
Tipos de teclado
tipo="correo electrónico", tipo="tel".
Autocompletar
Haz que sea fácil de completar.
Rendimiento móvil
Peso
Menos bytes para móviles.
CSS crítico
CSS en línea para la mitad superior de la página.
JS Aplazar
No bloquees el renderizado.
Imágenes
Tamaños adecuados.
Pruebas
Herramientas de desarrollo del navegador
Simular dispositivos.
Dispositivos reales
Prueba en celulares reales.
Pila de navegador
Pruebas en la nube.
Múltiples orientaciones
Retrato y paisaje.
Marcos CSS
###Bootstrap
Robusto sistema de rejilla.
Viento de cola
Clases de utilidad responsivas.
Bulma
Basado en Flexbox.
###Personalizado
Podría ser más ligero.
Errores comunes
Escritorio primero
Más difícil adaptarse hacia abajo.
Anchos fijos
Diseños que no se adaptan.
Saltar pruebas
No realice pruebas en dispositivos reales.
Texto ilegible
Fuentes muy pequeñas.
Objetivos táctiles pequeños
Es difícil hacer clic.
Herramientas
###Herramientas de desarrollo de Chrome
Modo de dispositivo.
Responsivamente
Múltiples pantallas simultáneamente.
Polipano
Navegador para desarrolladores.
Conclusión
El diseño responsivo es un requisito básico. Adopte dispositivos móviles primero, use CSS moderno y pruebe en dispositivos reales. El resultado son sitios web que funcionan para todos.
##Preguntas frecuentes
1) ¿Es obligatorio el uso de dispositivos móviles primero? Recomendado. Facilita el proceso y prioriza el móvil.
2) ¿Cuántos puntos de interrupción usar? 3-5. Basado en contenido, no en dispositivos específicos.
3) ¿Flexbox o Grid? Ambos. Flexbox para una dimensión, Grid para dos.
4) ¿Marco o CSS personalizado? Para proyectos pequeños, la personalización puede ser más ligera.
5) ¿Cómo realizar la prueba sin dispositivos? Herramientas de desarrollo, BrowserStack. Pero es importante probar dispositivos reales.
Lea también
- GraphQL para aplicaciones: Guía de implementación
- Diferencia entre sitio web y aplicación: guía de elección completa
- Aplicación web progresiva: ejemplos e historias de éxito
- Diseño de Interfaces Accesibles: Cumplimiento WCAG
- Microinteracciones en Apps: Guía Completa
- Optimización del rendimiento móvil: Guía completa