Curso HTML 12.1 Concepto de responsive design desde HTML

Concepto de responsive design desde HTML

El responsive design (diseño responsive o adaptativo) es una filosofía de desarrollo web
que busca que un mismo documento HTML se adapte de forma fluida y óptima a dispositivos con diferentes
tamaños de pantalla, resoluciones y orientaciones (móvil, tablet, escritorio, TV, etc.).

Aunque el mayor trabajo recae en CSS (media queries, rejillas flexibles, unidades relativas, etc.), HTML
aporta elementos y atributos clave que facilitan enormemente la adaptación de imágenes, vídeos,
estructuras semánticas y metadatos. A continuación desglosamos en profundidad los mecanismos puramente HTML.

1. Meta viewport

Para que el navegador de un dispositivo móvil interprete correctamente el ancho del contenido y escale el
zoom de forma nativa, es indispensable incluir la etiqueta <meta name='viewport'>:

    
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  

• width=device-width: adapta el ancho CSS al ancho real de la pantalla.
• initial-scale=1.0: establece el zoom inicial al 100%.
• Opciones adicionales (no siempre recomendadas): maximum-scale, user-scalable, etc.

2. Imágenes responsivas: srcset y sizes

Los atributos srcset y sizes permiten al navegador descargar la versión más
adecuada de una imagen según la resolución, la densidad de píxel o el ancho que ocupará en el diseño.

    <!-- Ejemplo de imagen responsiva con diferentes anchos -->
    <img
      src='imagen-pequeña.jpg'
      srcset='
        imagen-pequeña.jpg 480w,
        imagen-media.jpg    800w,
        imagen-grande.jpg  1200w
      '
      sizes='(max-width: 600px) 480px,
             (max-width: 1000px) 800px,
             1200px'
      alt='Descripción de la imagen'
      width='100%'
    >
  

Cómo funciona:

1. El navegador evalúa sizes para determinar el ancho final que ocupará la imagen en el
   layout (basado en media queries internas).
2. Busca en el listado de srcset la mejor candidata (480w, 800w, 1200w).
3. Descarga la imagen óptima en peso y resolución, minimizando datos y mejorando rendimiento.

3. Elemento <picture> y sus <source>

El elemento <picture> permite ofrecer versiones distintas de una imagen según
formato (WebP, AVIF, JPEG) o condiciones específicas (orientación, densidad, media queries).

    <picture>
      <!-- Fuente para pantallas anchas con WebP -->
      <source
        srcset='imagen-1200.webp'
        media='(min-width: 800px)'
        type='image/webp'
      >
      <!-- Fuente para móviles con JPEG -->
      <source
        srcset='imagen-480.jpg'
        media='(max-width: 799px)'
        type='image/jpeg'
      >
      <!-- Imagen por defecto si no soporta source -->
      <img
        src='imagen-por-defecto.jpg'
        alt='Imagen adaptable con picture'
        width='100%'
      >
    </picture>
  

Ventajas:

• Soporte de múltiples formatos y calidades.
• Control preciso mediante media queries en el atributo media.
• Carga condicional según capacidades del navegador.

4. Tablas y contenido estático adaptativo

Aunque las tablas ofrecen estructura de filas y columnas, en móvil suelen requerir scroll horizontal.
Sin embargo, con HTML podemos:

• Asignar width='100%' para forzar ajuste al contenedor.
• Agregar <caption> para accesibilidad.
  En dispositivos muy estrechos, los navegadores permites desplazar lateralmente.

    <table width='100%' border='1'>
      <caption>Comparativa de características</caption>
      <thead>
        <tr>
          <th>Dispositivo</th>
          <th>Ancho (px)</th>
          <th>Tipo</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Móvil</td>
          <td>320 - 480</td>
          <td>Pantalla táctil</td>
        </tr>
        <tr>
          <td>Tablet</td>
          <td>600 - 800</td>
          <td>Mixto</td>
        </tr>
        <tr>
          <td>Desktop</td>
          <td>> 800</td>
          <td>Teclado y ratón</td>
        </tr>
      </tbody>
    </table>
  

5. Vídeos e iframes fluidos

Para incrustar vídeos (YouTube, Vimeo) o iframes de forma adaptable, usamos atributos de ancho y alto
relativos:

    <!-- Vídeo adaptable con ancho al 100% y altura automática -->
    <iframe
      src='https://www.youtube.com/embed/VIDEO_ID'
      width='100%'
      height='auto'
      title='Vídeo responsivo'
      allowfullscreen
    ></iframe>
  

En casos más complejos se suele envolver en un contenedor con padding proporcional, pero
ese ajuste reside en CSS. Con puro HTML, la tabla o un contenedor con atributos de ancho ayudan a
manejar la proporción básica.

6. Flujo de contenido y semántica móvil-first

– La semántica HTML (<header>, <main>, <section>, <article>, <aside>, <footer>)
ordena naturalmente el contenido.

– Prioriza en el marcado lo esencial para móvil (contenido principal, navegación primaria) y luego enhances
para escritorio (barras laterales, banners, etc.).

– Evita ocultar contenido de forma dinámica con JavaScript; usa marcado semántico que pueda reordenarse
en el CSS según breakpoints.

Resumen de buenas prácticas HTML para responsive

Con estas técnicas puramente en HTML ya se consigue una base sólida de responsive design. El
siguiente paso es complementar con CSS (media queries avanzadas, flexbox, grid, medidas relativas,
utilidades) para pulir completamente la experiencia en todos los dispositivos.