Responsive Web Design o, Diseño Web Sensible en la lengua de Cervantes, hace referencia a una metodología de diseño y desarrollo web en la que con una única versión de nuestro website abarcamos cualquier dispositivo donde podrá mostrarse sin tener que hacer versiones paralelas del mismo dependiendo del dispositivo en el que se vaya a visualizar tal y como pasaba hasta ahora.
Antes solíamos redirigir el tráfico de nuestro sitio en función del dispositivo de visualización, con esta metodología no será necesario hacer esto más ya que haremos todo ese trabajo utilizando propiedades CSS3.
El precursor de esta metodología es Ethan Marcotte, diseñador y desarrollador web con dilatada experiencia en este campo y colaborador habitual del blog A list apart entre otros.
No son pocas las ventajas que nos brinda el responsive web design, para empezar nos ahorramos desarrollar y mantener otro sitio para dispositivos móviles y tampoco será necesario hacer sniffing del user agent, técnica totalmente desaconsejada porque es relativamente fácil dejarse dispositivos y/o versiones de navegador por fuera y que luego nuestra web no se visualize correctamente si se producen cambios de versión o aparece un navegador nuevo.
Esta metodología se apoya básicamente en estos tres pilares:
- Fluid grids. Se usan porcentajes para las medidas de los contenedores en el layout, esto hace que nuestro diseño se vaya adaptando estirándose o encogiéndose según el tamaño de la ventana del navegador.
- Imágenes flexibles. Esta técnica se basa en utilizar porcentajes en vez de pixeles para determinar las medidas de las imágenes, de esta manera se consigue que estas escalen dependiendo del tamaño de su contenedor
- Media queries. Son introducidos en el estándar CSS3 y sirven para filtrar selectores css dependiendo de determinadas condiciones, en este caso ancho de la pantalla del dispositivo y/o ventana del navegador.
Para ilustrar todo esto vamos a definir una página sencilla que se adapte correctamente a diferentes tamaños de pantalla. La página contará con una cabecera, menú superior, contenido principal, lateral y pie. Su código html es este:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Responsive Design Test</title> <link href="styles.css" rel="stylesheet"> </head> <body> <header> <h1>Responsive Web Design</h1> </header> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Sobre nosotros</a></li> <li><a href="#">Qué hacemos</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> <div > <article> <h1>Proin eu arcu</h1> <img src="image.png" alt="" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat auctor pretium. Curabitur eget lectus vitae leo dignissim sodales. Vivamus sit amet dui nunc. Duis dapibus ante ac dolor sodales malesuada. Nam varius nibh non lorem bibendum ut fringilla elit tincidunt. Suspendisse quis pellentesque leo. Duis dapibus ante ac dolor sodales malesuada.</p> <p><a href="#">Ver más</a></p> </article> <article> <h1>Ultricies ante</h1> <img src="image.png" alt="" /> <p>Praesent pellentesque sem vel nulla lacinia in dignissim augue consequat. Suspendisse potenti. Sed non justo suscipit purus dapibus condimentum. Ut mi mauris, primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce auctor ante ut ante cursus mollis. Donec porttitor scelerisque tortor fringilla sodales. Pellentesque vel sem massa. Duis eget est vel leo sodales tristique nec at tortor.</p> <p><a href="#">Ver más</a></p> </article> </div> <aside> <h1>Contenido relacionado</h1> <ul> <li><a href="#">Maecenas iaculis tempus</a></li> <li><a href="#">Vestibulum quis justo eros</a></li> <li><a href="#">Nullam ullamcorper vulputate</a></li> </ul> </aside> <footer> <p>© Sit amet consectetur nunc condimentum 2012</p> </footer> </body> </html>
html {
background-color: #ccc;
}
body {
width: 960px;
margin: 0 auto;
background-color: #fff;
}
header {
margin-top: 10px;
padding: 0 10px 5px 10px;
font-size: 32px;
color: #fff;
background-color: #01477b;
}
header > h1 {
margin: 0;
}
nav {
background-color: #0d7cb4;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
margin: 3px 10px;
display: inline-block;
}
nav li:first-child {
margin-top: 0;
}
nav li:last-child {
margin-bottom: 0;
}
nav a {
color: #fff;
font-size: 26px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
#content {
float: left;
width: 70%;
padding: 0 10px;
background-color: #fafafa;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article {
padding: 10px 0;
border-bottom: 1px solid #ccc;
overflow: hidden;
}
article h1 {
margin: 0 0 10px 0;
font-size: 22px;
}
article img {
float: left;
margin: 10px 20px 10px 0;
}
article a, aside a {
color: #000;
text-decoration: none;
}
article a:hover, aside a:hover {
text-decoration: underline;
}
aside {
float: right;
width: 28%;
padding: 10px;
background-color: #edf2f6;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
aside h1 {
margin: 0;
}
aside ul {
margin: 0;
padding: 0 0 0 20px;
}
aside li {
margin-top: 10px;
}
footer {
clear: both;
padding: 4px 10px;
font-size: 18px;
color: #fff;
background-color: #000;
}
footer p {
margin: 0;
}
La página resultante se ve así a 1024px o más:
El primer paso para adaptarla a responsive web design consistirá en añadir el siguiente meta en el <head> de la misma:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Con este meta le decimos al navegador de los móviles que se fíe de nosotros y no adapte la web al tamaño de su pantalla escalándola según su criterio.
A continuación añadimos el siguiente selector a nuestra css:
html {
-webkit-text-size-adjust: none;
}
Con este selector le decimos a los dispositivos iOs que no ajusten automáticamente el tamaño de las tipografías y hagan caso al tamaño especificado en la css.
A continuación insertamos un media query para un ancho máximo de 940px. Estamos especificando un “max-width” que afecta al ancho de la ventana del navegador y un “max-device-width” que afecta al ancho de la pantalla del dispositivo, así nos curamos en salud y siempre que se cumpla una de estas condiciones se aplicarán los selectores definidos en el filtro.
@media only screen and (max-width: 940px), only screen and (max-device-width: 940px) {
body {
width: 100%;
}
header {
font-size: 1.5em;
}
article img {
width: 37%;
}
aside h1 {
font-size: 1.2em;
}
}
Con estos selectores le proporcionamos un comportamiento fluido a la página para cuando se visualice entre 940px y 481px. El resultado sería así:
Ahora insertamos otro media query para 480px, el tamaño estándar a día de hoy de los teléfonos android.
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
header {
margin-top: 0;
font-size: 1.2em;
}
header h1 {
text-align: center;
}
nav li {
display: block;
text-align: center;
padding: 5px 0;
border-bottom: 1px solid #fff;
}
nav li:last-child {
border-bottom: none;
}
#content, aside {
float: none;
width: auto;
}
article img {
margin-right: 10px;
margin-bottom: 5px;
width: 96px;
}
article a {
display: inline-block;
padding: 0 5px;
text-align: center;
font-size: 1.2em;
color: #fff;
background-color: #0d7cb4;
}
aside h1 {
font-size: 2em;
}
aside li {
padding: 10px 0;
font-size: 1.2em;
}
}
Como aquí contamos con una pantalla de dimensiones reducidas hacemos que las opciones de menú ocupen todo el ancho disponible y cambiamos la ubicación del lateral derecho para colocarlo debajo del contenido principal. También hemos cambiado el aspecto de los enlaces de “Ver más” para que parezcan botones y se aprecien mejor en las pantallas de los móviles.
Así queda la página vista desde un teléfono con Android:
Si queremos ver este código en vivo podemos hacer clic aquí y probamos a escalar la ventana del navegador para apreciar el comportamiento de la página según el tamaño de la ventana.
Si deseamos verla desde el móvil utilizaremos el código QR mostrado debajo:
No es necesario que empecemos a crear una página desde cero, en la actualidad contamos con varios frameworksque nos serán de gran ayuda a la hora de aplicar esta técnica. Los más destacados son:
En este enlace tenemos más frameworks de este tipo.
Podemos descargarnos el código html5+css3 de la página de ejemplo en este enlace.
Si este post ha servido para abrir nuestro apetito por esta novedosa metodología de desarrollo web, recomiendo entonces la lectura del libro “Responsive Web Design”, escrito por el mismísimo Ethan Marcotte.
