Introducción a Responsive design 🦝

Esn este artículo aprenderemos Responsive Design con CSS 🚀.

¿Qué es Responsive Design?

El Responsive Design (Diseño Responsivo o Adaptativo) es una técnica de diseño y desarrollo web que permite que una página o aplicación se adapte automáticamente al tamaño y orientación de la pantalla del dispositivo desde el que se está viendo. Esto incluye:

• Cambiar el layout (por ejemplo, de una columna en móvil a tres en escritorio).
• Ajustar imágenes y tipografías para que sean legibles y no se desborden.
• Optimizar la interacción (botones más grandes en móvil, menús adaptados, etc.).

El objetivo es ofrecer una experiencia de usuario óptima, sin importar si se accede desde un teléfono, una tablet, una laptop o un monitor gigante.

Historia del Responsive Design

1. Antes del Responsive Design (Años 90 – principios de los 2000)

En los inicios de la web, los sitios se diseñaban principalmente para pantallas de escritorio, que tenían resoluciones similares (por ejemplo, 800×600 o 1024×768 píxeles). No había necesidad de adaptarse a otros dispositivos porque no existían los smartphones ni las tablets.

• Sitios estáticos: Se usaban tablas (<table>) para maquetar, lo que hacía los diseños rígidos y difíciles de mantener.
• Diseños fijos: Los anchos se definían en píxeles (px), y si el usuario cambiaba el tamaño de la ventana, aparecían barras de desplazamiento horizontal.
• Versiones móviles separadas: Algunas empresas creaban sitios móviles completamente distintos (por ejemplo, m.dominio.com), lo que duplicaba el trabajo y el mantenimiento.

2. La Revolución del Responsive Design (2010 – Actualidad)

Con la llegada de los smartphones (especialmente el iPhone en 2007) y las tablets, los desarrolladores se enfrentaron a un problema: ¿cómo hacer que un sitio web se vea bien en pantallas tan pequeñas?

• Ethan Marcotte y el término «Responsive Design»: En 2010, el diseñador web Ethan Marcotte publicó un artículo titulado «Responsive Web Design», donde propuso usar técnicas como:
  • Media Queries para aplicar estilos específicos según el tamaño de la pantalla.
  • Unidades relativas (porcentajes, em, rem, vw, vh) en lugar de píxeles.
  • Imágenes flexibles que se ajusten al contenedor.
• Frameworks y herramientas: Surgieron frameworks como Bootstrap (2011) que facilitaron la creación de diseños responsivos con sistemas de grillas y componentes predefinidos.
• Enfoque Mobile-First: Con el aumento del tráfico móvil, se popularizó la filosofía de diseñar primero para móvil y luego escalar a pantallas más grandes.

1. La Base: El Viewport Meta Tag

Antes de cualquier CSS, ¡asegúrate de incluir esto en tu HTML!
Sin esto, los dispositivos móviles no renderizarán correctamente.

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

Explicación:
Le dice al navegador que el ancho de la página debe ser igual al ancho del dispositivo (no hacer zoom inicial).

2. Unidades Relativas vs. Absolutas (Ejemplo Básico)

Problema común: Usar px (píxeles) para todo.
Solución: Unidades fluidas como %, rem, vw, etc.

Ejemplo 1: Contenedor Fluido

.contenedor {
  width: 90%; /* Ocupa el 90% del padre (no del viewport) */
  max-width: 1200px; /* Límite para no estirar demasiado en pantallas grandes */
  margin: 0 auto; /* Centrado */
}

2. Unidades Relativas vs. Absolutas (Ejemplo Básico)

Problema común: Usar px (píxeles) para todo.
Solución: Unidades fluidas como %, rem, vw, etc.

Ejemplo 1: Contenedor Fluido

.contenedor {
  width: 90%; /* Ocupa el 90% del padre (no del viewport) */
  max-width: 1200px; /* Límite para no estirar demasiado en pantallas grandes */
  margin: 0 auto; /* Centrado */
}

3. Media Queries: La Navaja Suiza del Responsive 🛠️

Estructura básica:

@media (condición) {
  /* CSS aplicado solo si se cumple la condición */
}

Ejemplo 2: Cambiar Color de Fondo en Móvil (Nivel Básico)

body {
  background: white;
}

/* Aplicar cuando el ancho sea <= 600px (móvil) */
@media (max-width: 600px) {
  body {
    background: lightblue;
  }
}

Ejemplo 3: Layout Adaptativo (Nivel Intermedio)

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100dvh;
  width: 100%;
 
}

.grid{
  place-content:center;
  width:100%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.item{
  background-color: deepPink;
  padding:1rem;
  border: 1px solid white;
}
  

4. Mobile-First 📱→💻

Mobile first consiste en diseñar primero para la web. Teniendo en cuenta que hoy en día más del 70% de los navegantes de Internet acceden a sitios web desde dispositivos mobiles.
Ventaja: Optimización de recursos y mejor performance.
Aunque pareciera que mobile first es solo ventajas hay que anailizar siempre las necesidades del proyecto y hacia que tipo de usuarios está orientado. Te dejo este video(en Inglés), que aborda la problemática del Mobile first

Ejemplo 4: Menú Mobile-First

/* Estilos base (móvil) */
.nav {
  display: flex;
  flex-direction: column; /* Vertical en móvil */
  gap: 10px;
}

/* Estilos para escritorio */
@media (min-width: 768px) {
  .nav {
    flex-direction: row; /* Horizontal en desktop */
    justify-content: space-between;
  }
}

5. CSS Grid + Media Queries (Nivel Avanzado) 🌐

.grid-avanzado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* Ajustar para pantallas muy pequeñas */
@media (max-width: 400px) {
  .grid-avanzado {
    grid-template-columns: 1fr;
  }
}

¿Qué hace?

• auto-fit: Crea tantas columnas como quepan.
• minmax(200px, 1fr): Cada columna mínimo 200px, máximo 1 fracción del espacio.

6. Imágenes Responsive (No todo es CSS) 🖼️

Usa srcset para que el navegador elija la imagen adecuada.

<img 
  src="imagen-small.jpg"
  srcset="imagen-large.jpg 1024w, imagen-medium.jpg 640w"
  sizes="(min-width: 768px) 50vw, 100vw"
  alt="Ejemplo"
>

7. Reto Final: Tarjeta Responsive Completa 🎓

<div class="card">
  <img src="avatar.jpg" class="card-img">
  <div class="card-content">
    <h2>Título</h2>
    <p>Descripción que cambia según el dispositivo.</p>
  </div>
</div>

.card {
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .card {
    flex-direction: row;
    max-width: 800px;
  }
  .card-img {
    width: 300px;
    height: auto;
  }
}