Diseño Responsive

El diseño web responsive (o adaptativo) es una técnica de desarrollo web que permite que una página se visualice y funcione correctamente en diferentes dispositivos y tamaños de pantalla, como ordenadores, tablets y teléfonos móviles.

A diferencia de otras estrategias para conseguir el mismo resultado, en este tipo de diseño se parte de la premisa de que el contenido del documento o aplicación debe ser el mismo con independencia del soporte en el que se muestre. No se prepara un contenido específco para cada dispositivo, sino que se procura que ese mismo contenido se adapte perfectamente a cada dispositivo.

Principales características

En el documento en pdf relacionado que puedes ver aquí tienes la teoría básica de este tipo de diseño. Aquí tienes un esquema de sus principales puntos.

Adaptación a diferentes tamaños de pantalla El contenido se reorganiza automáticamente según el ancho disponible. Una misma web puede funcionar en móviles, tablets, portátiles y monitores grandes.
Uso de layouts fluidos Se utilizan unidades relativas como %, vw, vh, rem o em en lugar de depender exclusivamente de píxeles. Los elementos pueden crecer o reducirse proporcionalmente.
Media queries de CSS Permiten aplicar diferentes estilos dependiendo de características del dispositivo, especialmente el ancho de la pantalla. Por ejemplo, se puede mostrar un menú horizontal en escritorio y un menú desplegable en móvil.
Imágenes y recursos flexibles Las imágenes se adaptan al espacio disponible para evitar que desborden el contenedor.
Reorganización del contenido Los elementos pueden cambiar de posición o distribución. Por ejemplo, tres columnas en escritorio pueden convertirse en una sola columna en móvil.
Enfoque Mobile First Se diseña inicialmente para pantallas pequeñas y después se amplía progresivamente para pantallas mayores. Es una estrategia muy habitual en el desarrollo web moderno.
Navegación adaptada Los menús y controles se modifican para facilitar su uso en dispositivos táctiles. Por ejemplo, un menú completo puede transformarse en un botón tipo "hamburguesa".
Tipografía adaptable El tamaño de los textos puede ajustarse a las dimensiones de la pantalla. Se pueden utilizar técnicas como clamp() para conseguir tamaños fluidos.
Interacción adecuada para dispositivos táctiles Los botones y enlaces deben tener un tamaño suficiente para poder pulsarlos fácilmente con el dedo. Se evita depender exclusivamente de eventos específicos del ratón, como hover.
Optimización del rendimiento Es importante optimizar imágenes, fuentes y scripts, especialmente para conexiones móviles. Una web responsive no solo debe adaptarse visualmente, sino también ofrecer una buena experiencia de usuario.
Una única versión del sitio Generalmente se utiliza el mismo HTML y contenido para todos los dispositivos, modificando su presentación mediante CSS y JavaScript cuando es necesario. Esto facilita el mantenimiento frente a crear una web independiente para móviles.
Mejor experiencia de usuario y accesibilidad El usuario puede acceder al contenido sin necesidad de hacer zoom constantemente o desplazarse horizontalmente. Una correcta adaptación facilita la lectura y la interacción.

Ejemplos de código

Media Queries

Ejemplo para enlazar varias hojas de estilos condicionadas por la anchura y el tipo de dispositivo


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/print.css" media="print">
    <link rel="stylesheet" href="css/width_380.css" media="screen">
    <link rel="stylesheet" href="css/w_570.css" media="screen and (min-width: 570px)">
    <link rel="stylesheet" href="css/w_960.css" media="screen and (min-width: 960px)">
</head>

Ejemplo para insertar una consulta dentro de un documento de CSS, comprobando únicamente la anchura máxima del dispositivo:

    
        @media (max-width: 768px) {
            .menu {
                display: none;
            }
        }

Imágenes Flexibles

Este es un reset que debemos incluir en todos nuestros documentos, evita que cualquier imagen exceda la anchura de su contenedor, y por lo tanto evita que aparezca un scroll horizontal porque la imagen sea más grande que la pantalla del dispositivo. Además se encarga de ajustar la altura de la imagen de forma proporcional a su anchura, evitando que se rompa la proporción de aspecto de la imagen.

    
        img {
            max-width: 100%;
            height: auto;
        }

Si queremos cargar una imagen de manera condicional en función de la anchura del dispositivo, podemos usar el elemento picture con diferentes orígenes para cada resolución, puedes ver un ejemplo funcionando de ese elemento en los apuntes sobre elementos multimedia en html. Este sería un ejemplo:

                        
    <picture>
        <source media="(min-width:1400px)" srcset="/imgs/pict_1350px.png">
        <source media="(min-width:960px)" srcset="/imgs/pict_900px.png">
        <source media="(min-width:600px)" srcset="/imgs/pict_600px.png">
        <img src="/imgs/pict_400px.png" alt="">
    </picture>

Tipografía Adaptable

Para trabajar con tamaños relativos para los tipos de letra podemos usar el método clamp. Este método no es exclusivo para definir tamaños de letra, sino que es una función que establece una dimensión con un tamaño preferido, acotado entre un mínimo y un máximo. Por lo tanto puede usarse también para definir otras propiedades como anchura o altura. Tiene 3 valores separados por comas: valor mínimo, valor deseado y valor máximo:

    
        h1 {
            font-size: clamp(2rem, 5vw, 4rem);
        }

Resumen

Característica	Función
Diseño fluido	Se adapta al espacio disponible
Media queries	Cambian los estilos según el dispositivo
Imágenes flexibles	Evitan desbordamientos
Layouts adaptables	Reorganizan columnas y elementos
Mobile First	Prioriza inicialmente las pantallas pequeñas
Menús adaptables	Facilitan la navegación en móviles
Tipografía flexible	Mejora la legibilidad
Interacción táctil	Facilita el uso en smartphones y tablets
Rendimiento	Reduce tiempos de carga
Mantenimiento sencillo	Permite trabajar con una única base de código

En definitiva, el diseño responsive se basa en las tres tecnologías fundamentales del desarrollo frontend: HTML , CSS y JavaScript. Pero el peso de este diseño cae sobre todo en la parte de la presentación con CSS, sobre todo mediante Flexbox, Grid y Media Queries, que son las herramientas que nos van a permitir esa flexibilidad en la presentación del contenido.

Apuntes Curso Web

HTML, CSS y JavaScript