Responsive Web Design

Con la multiplicación de dispositivos utilizados para acceder a Internet (ordenadores, tabletas, teléfonos inteligentes, relojes ...) debemos asegurarnos de que nuestro sitio web se verá bien en todos los dispositivos posibles.

Pero, ¿cómo se adapta una web a todas esas resoluciones de pantalla? ¿Conoces las diferencias entre un Diseño Responsive y un Diseño Adaptive?

Aunque ambas técnicas sirven para adaptar la interfaz de la web a los diferentes dispositivos, no son iguales.

¿En qué consisten el diseño responsive y el diseño adaptado?

Responsive Web Design (RWD) o Diseño Web Responsive es una técnica para desarrollar interfaces que hace uso de media queries y hojas de estilos, estableciendo unas medidas de ancho en tamaños proporcionales para hacer una estructura flexible y que el contenido de la web se adapte a las distintas resoluciones de pantalla. De esta forma la experiencia de usuario no se ve afectada. Por lo tanto, busca una mayor flexibilidad.

Ejemplo: Palacio de Congresos de Granada

Adaptive Web Design (AWD) o Diseño Web Adaptado (no adaptativo, que sería una traducción incorrecta del término «adaptive») es una técnica que utiliza tamaños de pantalla preestablecidos: 320px, 480px, 760px, 960px, 1200px, 1600px y se crea un diseño a medida para cada uno de esos tamaños. Cuando se detecta el dispositivo, se le suministra el diseño que mejor se adapta de entre los realizados. Por lo tanto, no es tan flexible pero sí más cómodo de realizar.

Ejemplo: Adidas

Diseño Responsive Web Design

1. El texto Responsive
2. Las imágenes Responsive
3. Los vídeos Responsive
4. El layout Responsive

html { font: 16px/1.25 sans-serif; }
body {
  /* --- TIPOGRAFÍA responsive --- */
  font-size : calc(0.5em + 2.5vmin);
}

/* --- IMAGEN, VIDEO responsive --- */
img,video {
  max-width : 100%;
  height    : auto;
}

.video-box {
  position       : relative;
  overflow       : hidden;
  height         : 0;
  padding-bottom : 56.25%;
}
.video-box iframe,  
.video-box object,  
.video-box embed {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}

/* ===============================
    HOJA DE ESTILOS CSS Básica
    para "responsive web design"
================================== */

/* ::: Reglas CSS para SMARTPHONE ========== */

html { font: 16px/1.25 sans-serif; }

* {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  transition : all 0.1s ease-in;
  outline    : none;
}

body {
  max-width  : 100vw;
  min-height : 100vh;
  background : tan;

  display         : flex;
  justify-content : center;
  align-items     : center;

  /* --- TIPOGRAFÍA responsive --- */
  font-size : calc(0.5em + 2.5vmin);
}

main {
  max-width  : 96vw;
  min-height : 96vh;
  width      : 1024px;
  background : rgba(0,0,0,0.1);
} 


/* --- IMAGEN, VIDEO local responsive --- */
img,video {
  max-width : 100%;
  height    : auto;
}
audio {
  display: block;
  margin : 0 auto;
}

/* --- VIDEO externo responsive --- */
.video-box {
  position       : relative;
  overflow       : hidden;
  height         : 0;
  padding-bottom : 56.25%;
}
.video-box iframe,  
.video-box object,  
.video-box embed {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}


/* ::: Reglas CSS para Tablet ========== */
@media all and (min-width:568px) {

}

/* ::: Reglas CSS para DESKTOP ========== */
@media all and (min-width:992px) {

}

• Anterior
• Siguiente