Desarrollo Frontend · FRO-104

Diseño responsive y mobile-first

Puntos de ruptura, imágenes adaptativas y tipografía fluida probados en dispositivos reales.

Bajo demanda Intermedio 7 módulos · 35 clases

Formato asíncrono Desarrollo, Empresa / PYME CSS, HTML

DESARROLLO ACCESIBILIDAD

Lo que aprenderás

Partir del diseño para móvil y ampliar con media queries en lugar de recortar desde escritorio.
Elegir puntos de ruptura a partir del contenido y no de los modelos de dispositivo del momento.
Servir imágenes adaptativas con srcset, sizes y el elemento picture según densidad y ancho.
Definir tipografía fluida con clamp y unidades relativas manteniendo la legibilidad.
Adaptar rejillas y componentes con Grid y Flexbox sin duplicar reglas por cada tamaño.
Comprobar el resultado en dispositivos reales y con depuración remota desde el navegador.
Valorar el impacto en peso de página y coste de datos para usuarios con conexión limitada.

Contenido del curso

7 módulos · 35 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Punto de partida 5 clases

Qué significa mobile-first en la práctica
Ventana gráfica, píxel CSS y densidad de pantalla
Herramientas del navegador para simular dispositivos y red
Auditoría de un sitio no adaptado
Criterios de éxito del curso

Módulo 2 · Puntos de ruptura 5 clases

Elegir cortes a partir del contenido
Sintaxis de media queries y rangos
Consultas por orientación, puntero y hover
Preferencias del sistema: color y movimiento
Evitar la proliferación de puntos de ruptura

Módulo 3 · Maquetación adaptable 5 clases

Rejillas que se reorganizan sin media queries
auto-fit, minmax y columnas fluidas
Reordenar contenido sin romper el orden de lectura
Navegación en móvil: patrones y accesibilidad
Tablas de datos en pantallas estrechas

Módulo 4 · Tipografía fluida 5 clases

Escala tipográfica y longitud de línea
clamp, min y max aplicados al tamaño de texto
Espaciado y ritmo vertical adaptativos
Zoom del navegador y texto redimensionable
Legibilidad en pantallas pequeñas

Módulo 5 · Imágenes y medios 5 clases

srcset y sizes explicados con casos
El elemento picture y cambio de recorte
Formatos modernos y reservas
Carga diferida y reserva de espacio para evitar saltos
Vídeo adaptable y coste de datos

Módulo 6 · Comprobación real 5 clases

Depuración remota desde el navegador
Pruebas con conexión limitada
Objetivos táctiles y ergonomía de la mano
Peso de página y presupuesto de rendimiento
Lista de comprobación antes de publicar

Módulo 7 · Proyecto de cierre 5 clases

Enunciado: adaptar un sitio corporativo existente
Reescritura mobile-first de la maquetación
Sustituir imágenes por versiones adaptativas
Medición antes y después
Informe de mejoras para dirección

Requisitos

Manejo de CSS a nivel de Flexbox, Grid y modelo de caja.
HTML sólido, incluidos formularios e imágenes.
Acceso a un móvil o tableta para las comprobaciones finales, además del navegador de escritorio.

Descripción

Un sitio que se ve bien en el portátil de quien lo desarrolla puede resultar inservible en el móvil de quien lo usa: texto minúsculo, botones imposibles de pulsar, imágenes que consumen datos y tablas que se salen de la pantalla. El emulador del navegador ayuda, pero no reproduce ni la mano del usuario ni la red real ni el rendimiento del dispositivo.

El curso trabaja con enfoque mobile-first y con comprobación en aparatos reales. Se decide cada punto de ruptura observando cuándo se rompe el contenido, se sirven imágenes adaptativas ajustadas a ancho y densidad, y se define una escala tipográfica fluida. Cada ajuste se verifica midiendo peso de página y comportamiento con conexión lenta simulada y con depuración remota.

El resultado es un sitio utilizable en cualquier pantalla, más ligero y con menos reglas duplicadas de las que suele tener un proyecto responsive improvisado. Para un equipo pequeño supone además menos incidencias de soporte y menos consumo de datos de sus usuarios. Enlaza con los cursos de accesibilidad WCAG y de aplicaciones web instalables.

¿Para quién es este curso?

Desarrolladores web que publican sitios consultados mayoritariamente desde el móvil.
Responsables técnicos de PYME que quieren reducir incidencias y coste de datos en su web.
Perfiles que mantienen sitios antiguos y deben adaptarlos sin rehacerlos por completo.