Ultima revisión 17/04/2013

Responsive Design: Primeros Pasos

Hoy empezamos un nuevo tutorial en el que intentaremos aprender lo que tan de moda esta, el Responsive Design. Muchos ya habréis oido hablar del concepto y otros, incluso, ya lo habréis usado. Empezaremos definiendo qué es Responsive Design.

Cómo se define Responsive Design

Responsive Web Design (RWD) es un enfoque de diseño web, destinado a la elaboración de sites, que intenta conseguir una visualización y experiencia óptima en cualquier dispositivo, desde los monitores de ordenador de escritorio hasta dispositivos móviles. Se centra en mejorar la navegación, facilitar la lectura ajustando el contenido al dispositivo e intenta evitar los desplazamientos.

En otras palabras, es una técnica de diseño y desarrollo web que mediante el uso de estructuras, imágenes fluidas y estilos CSS, consigue adaptar un site o página web al entorno de visualización del usuario.

Ventajas

• Obtenemos una versión de HTML y CSS única todas las resoluciones de pantalla.
• Se reducen los costes de desarrollo y mantenimiento ya que no son necesarias aplicaciones nativas para Android, iPhone, ...
• Mejora el Posicionamiento SEO ya que, por ejemplo, se ahorran redireccionamientos y, por tanto, los fallos que se derivan de ellos.

Los estilos y metatags

La mayoría de los navegadores para móviles escalan las páginas HTML para que se adapten al entorno del usuario. El atributo viewport, de la etiqueta meta, es especifico para esto y define elementos como el área visible de la pagina, la escala o el zoom.

Este código debes incluirlo dentro de la etiqueta.

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

Con width=device-width conseguimos que el tamaño sea igual al de la anchura real del dispositivo. Con initial-scale=1 controlamos el nivel de zoom cuando la página se carga por primera vez.

Los navegadores modernos no tendrán problemas con esto pero, Internet Explorer 8 e inferiores, no soportan las media-queries, por lo que habrá que darle soporte a través de las librerías media-queries.js o respond.js.

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> < ![endif]-->

<!--[if lt IE 9]> <script src="https://raw.github.com/scottjehl/Respond/master/respond.min.js"></script> < ![endif]-->

Media Queries

Las Media Queries nos permiten constituir una serie de reglas CSS que sólo se ejecutarán cuando se cumplan unas condiciones que se hayan establecido previamente. Estan soportadas en Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+, así como en los smartphones más modernos y otros dispositivos móviles.

Con los media queries lo que hacemos básicamente es decidir cómo se va a mostrar una página web en función de los parámetros que indiquemos. En el caso tradicional, nos encontrábamos con dos versiones de una web, la que era para pantalla o screen y la que era para imprimir o print.

@media screen {
    body {
        width: 70%;
    }
}

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

Las Medias Queries, entre otras cosas, podemos decidir por ejemplo:

• Resolución del dispositivo.
• Ancho y alto de la ventana del navegador.
• Orientación del dispositivo.
• Color de pantalla del dispositivo.

Para utilizar un media query que tenga en cuenta la resolución del dispositivo, podemos usar el estandar de la W3C:

<link rel="stylesheet" media="screen and (min-device-width: 960px)" href="960.css" />

Con este código lo que estamos haciendo es indicar al navegador web que utilice la hoja de estilos 960.css si el dispositivo tiene una resolución de 960px o más.

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

En este caso, en lugar de utilizar min-device-width utilizamos min-width, con lo que en lugar de tener en cuenta la resolución se tendrá en cuenta el ancho de ventana del navegador. En este código en concreto utilizaremos la hoja de estilos medium.css si la ventana del navegador tiene un ancho de 701px a 899px.

Esto es una introducción. A partir de mañana entraremos en más detalle sobre este y otros temas a cerca de Responsive...