logoCoderhouse.png
Ë
By Nicolas Alliaume • April 28, 2016

Introducción al Diseño Responsive

Hola! Soy Nico Alliaume, profe de Codehouse en Uruguay, y en esta oportunidad les voy a hacer una intro al Diseño Responsive.

¿Qué es eso de Responsive?

Responsive se les llama a la capacidad de adaptarse al tamaño de pantalla (celular, tablet, laptop, tv, etc). En el pasado (digamos, hace 15 años) esto no tenia gran importancia ya que todos navegabamos por internet desde una computadora de escritorio o laptop, con una pantalla grande que nos permitía ver todo, y si la achicabamos horizontalmente "podíamos" convivir con un scroll horizontal (Uhhg!).

En 2002, Audi lanzó el primer sitio que se adaptaba al tamaño de la pantalla, sin necesidad de recargar la página. [Fuente]. Viéndolo hoy, el sitio no era la gran cosa, pero sí comprendía un concepto fundamental que luego tomó más y más importancia con el paso de los años: la adaptabilidad.

Desde la era de smartphones y las tables la web se empezó a consumir cada vez más desde dispositivos más pequeños, con gran variedad de tamaños de pantalla, y se hizo evidente que las páginas web debían acompañar este cambio. Con el lanzamiento de CSS3 (particularmente la especificación sobre las media-queries, el tema de hoy) en 2012, el interés por tener un sitio con Responsive Design aumentó con velocidad.

Algunos ejemplos

Hay millones de ejemplos que puedo utilizar para ilustrar el concepto de Diseño Responsive. Awwwards.com es un excelente lugar para ver sitios de primera calidad. Algunos ejemplos menos llamativos pueden ser:

New York Times (Arts)
- Indochino
- Fit For A Frame

Podés probar entrar al sitio desde tu computadora y cambiar el tamaño de la ventana, o entrar también desde tu celular y ver la diferencia.

Responsive no es lo mismo que versión móvil

Una confusión común es pensar que hacer un sitio responsive es hacer una versión móvil. La diferencia práctica en algunos casos puede ser sutil, pero es principalmente un error conceptual.

Un sitio con diseño responsive se adapta "en vivo". Es decir, cargamos la página, modificamos el tamaño de la ventana, y el contenido se acomoda. Cuando hablamos de una versión móvil de un sitio, generalmente nos referimos a otra página, con contenidos iguales (o similares) a la página original, pero diseñada para que se vea bien en un celular. La diferencia es imporante, ya que si cargamos una versión móvil de un sitio en una laptop, por mas que agrandemos la ventana del navegador, la versión de la página que vemos seguirá siendo la versión móvil.

¿Quiere decir esto que responsive es mejor que versión móvil? No necesariamente. Dependerá de cada caso cuál es la mejor alternativa para tener un sitio que soporte ambas plataformas.

Un ejemplo de página no responsive con versión para móviles es, ni más ni menos, Facebook. Para ver la versión móvil podés ingresar a http://m.facebook.com

¿Cómo hacemos un sitio responsive?

La idea principal es que nuestro sitio se adapte a la pantalla. Especificamente a algo que llamamos viewport, que es el area visible de una página web. Comunmente el tamaño del viewport coincidirá con el tamaño de nuestra ventana (quitando las barras de herramientas, tabs y demás). Cuanto más grande la ventana, mayor el tamaño del viewport.

Normalmente el diseño de nuestro sitio irá cambiando a medida que la pantalla es más grande o más chica. Por ejemplo, si tenemos una foto junto a un texo, podemos modificar el layout a foto sobre texto.

Layout en desktop Layout en desktop

 

Layout en mobile Layout en mobile

Para esto es que fueron introducidas las llamadas Media Queries.

Media Queries

Las media queries (@media) sirven para crear estilos condicionales. Estos son, estilos que se aplican cuando se cumplen ciertas condiciones definidas. Las condiciones pueden incluír:
- El tamaño del viewport (ancho y alto)
- La orientación del dispositivo
- La resolución de pantalla
- La relación ancho/alto del viewport (llamado aspect)
- Y muchas propiedades más

Cada media query define una o múltiples condiciones relacionadas lógicamente (con operadores and y or). Al cumplirse las condiciones, se aplicarán los estilos definidos asociados a esa media query. Para entender mejor esto, nada como un ejemplo.

p {
font-size: 17pt;
}

@media (max-width: 767px) {

p {
font-size:15pt;
}
}

En este caso, los párrafos de nuestra página tendrán un tamaño de letra de 17 puntos, a menos que el viewport sea menor o igual a 767px. En este último caso, los párrafo tendrán fuente con tamaño 15 puntos. Sencillo, ¿no?

Vamos con otro ejemplo.

p {
font-size: 20pt;
}

@media (max-width: 767px) {
p {
font-size: 15pt;
}
}

@media (min-width: 768px) and (max-width: 1199px) {

p {
font-size: 17pt;
}
}

En este caso, para dispositivos con un viewport menor a 767px, la fuente será de 15 puntos. Si el viewport mide entre 768px y 1199px, será de 17 puntos. Y se mide más de 1199px, será, por defecto, de 20 puntos.

Así como modificamos el tamaño de fuente, podemos modificar cualquier otra propiedad de CSS (positions, floats, colores, fondos, etc, etc, etc).

Un detalle importante

¿Probaste este código y no te funcionó? Es probable que sea porque no incluíste el siguiente tag en tu HTML:

<code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>

Este tag debe estar en el head de tu HTML, y setea que el viewport sea igual al tamaño de tu ventana. Sin ese tag el responsive no funcionará como esperás.

Ejemplos más avanzados

Aquí van algunos ejemplos más avanzados de uso de media queries.

/****** 1 ******/
@media screen {
body {
width: 80%;
}
}

@media print {
body {
width: 100%;
}
}

/****** 2 ******/
.mobile-menu {
display: none;
}
.top-menu {
display: block;
}

@media (max-width: 767px) {
.top-menu {
display: none;
}
.mobile-menu {
display: block;
}
}

/****** 3 ******/
.ads {
display: inline-block;
}
@media (min-width: 1200px) {
body {
background-image: url('some-big-image.jpg');
}
}
@media (min-width: 768px) and (max-width: 1199px) {
body {
background-image: url('some-medium-image.jpg');
}
}
@media (max-width: 767px) {
body {
background-image: url('some-small-image.jpg');
}
}
@media (max-width: 767px) or print {
.ads {
display: none;
}
}

//1: Cuando visitamos el sitio, el body mide 80% de ancho, pero al imprimir la página, mide 100%.

//2: Tenemos un menu para desktop y otro para mobile. Cuando la página se achica a menos de 768px, mostramos el menú mobile.

//3: Modificamos la imágen de fondo del body a medida que se achica el tamaño de la pantalla, y en celulares o en modo de impresión ocultamos una barra de publicidad con la clase 'ads'

Comentarios finales

El diseño responsive no es simplemente un capricho de los diseñadores o los desarrolladores frontend. Es un componente fundamental en la actualidad, que de no ser parte de tu sitio, la experiencia será mala para los visitantes de tu página. Las visitas a páginas web desde celulares aumentan cada vez más, al punto de que en el mundo frontend hablamos de la filosofía "mobile first", o "primero para móviles". Más aún, desde 2015 Google penaliza fuertemente los sitios no responsive en cuanto a SEO, por lo que no puntuará bien para las búsquedas.

Por todo eso, y porque además es muy copado, te invito a que te sumes al diseño responsive y pruebes las media queries que te mostré en este post y, por supuesto, agregues de tu mágia personal. Y contanos qué sitio hiciste responsive, o qué página que ya tenías por ahí ¡ahora es adaptable!