Diseño Web adaptativo (Responsive Web design)

Publicado el 14 May 2013 en Noticias por Webmaster nSOLVER

Hoy en día, el acceso a una página Web ya no es exclusividad del ordenador de sobremesa o portátil, los nuevos dispositivos móviles permiten a millones de usuarios de todo el mundo poder conectarse a Internet en cualquier lugar. Es por ello que debemos plantearnos si es necesario realizar una optimización adecuada de nuestros diseños Web para que estos sean visibles a través de cualquier dispositivo móvil, y más aun cuando el mismísimo Google nos sugiere que es “recomendable” actualizar nuestros sitios Web a un diseño Web adaptativo.

¿Pero que es el diseño Web adaptativo?

El diseño Web adaptativo es una forma de maquetar nuestras páginas Web, de tal forma que nuestro sitio sea capaz de adaptarse a la pantalla de cualquier dispositivo. Al hablar de cualquier dispositivo, nos estamos refiriendo a smartphone, tabletas, TV, monitor PC, etc., en si es la posibilidad de poderse adaptar a cualquier tamaño de pantalla, ya sea pequeña o grande.

Con el último boom de los teléfonos inteligentes (smartphone), el diseño Web adaptativo esta ganando mucha popularidad. Cada vez más empresas, ven en este nuevo recurso una oportunidad para darse a conocer a más grupos de usuarios (= futuros clientes). Existe una gran cantidad de páginas Web corporativas (sobre todo los sitios Web de empresas de más antigüedad), que cuentan con un diseño web que puede resultar bastante complicado de adaptar a esta nueva tecnología. Para estos casos existen tres posibilidades:

• Crear un nuevo «mini» sitio Web adaptativo (únicamente con los datos mas relevantes), pero que sea completamente independiente de la página Web principal. El servidor, dependiendo del tipo de dispositivo que se conecte a nuestra Web, mostrará una página u otra.
• Crear una aplicación para móvil, con el inconveniente de que el coste del diseño de esta puede resultar bastante elevado.
• Crear completamente desde 0 un nuevo sitio Web con un diseño Web adaptativo, es decir, que se visualice correctamente tanto en los ordenadores de sobremesa como en los dispositivos móviles.

Aspectos a tener en cuenta en el diseño para móviles

• Hay que tratar de ocultar/eliminar los contenidos de tu página Web que pienses que nunca van a ser utilizadas en la versión móvil. De lo que se trata es que la versión móvil de nuestro sitio Web, no tenga que cargar los mismos datos que la versión standard (secciones, imágenes, js, css, etc.), ya que los tiempos de carga para un dispositivo móvil se podrían alargar demasiado (conexiones lentas).
• Suele llevar mas tiempo el tratar de adaptar una página Web normal a un diseño Web adaptativo, que iniciar el proyecto desde 0.

Como hacer un diseño adaptativo en tres pasos:

1º Diseño

En primer lugar es necesario declararnos la siguiente meta-etiqueta:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

user-scalable: Permite que el usuario pueda realizar zoom (yes/no).
initial-scale, maximun-scale, minimum-scale: Escala inicial, máxima y mínima de la página Web, de modo que un valor de 1 especifica el mismo tamaño, un 2 lo doblaría y un 0.5 dividiría por la mitad.

¿Uso de los Media Queries?
Los media queries son expresiones lógicas (true o false) que muestran unos estilos u otros dependiendo del dispositivo donde se este visualizando la Web, es decir, van a permitir a los diseñadores Web generar los estilos para los diferentes tamaños de resolución.
Son parte de la especificación de CSS3 y se encargan de controlar como se aplican los estilos.

Un ejemplo:

Pongamos que tenemos una Web, donde la capa #primary muestra el contenido principal, y la capa #secundary es un sidebar.
Limitamos un ancho maximo de 1060px (sería para tablets) donde declaramos un ancho del 67% para #primary y un 30% para #secundary, dándole un margen del 3%.

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
     #primary { width:67%; }
     #secondary { width:30%; margin-left:3%;}
}

Ahora nos declararemos unos segundos estilos, pero esta vez para teléfonos moviles o tablets de menor tamaño. En este caso, se ha decidido dar tanto a #primary como a #secundary una amplitud del 100%, así ocuparán todo el ancho disponible de la pantalla del dispositivo, viéndose cada bloque/sección uno encima del otro.

/* Tabled Portrait */
@media screen and (max-width: 768px) {
     #primary { width:100%; }
     #secondary { width:100%; margin:0; border:none; }
}

2º Multimedia

Una vez tenemos nuestro diseño Web, es el momento de adaptar los elementos multimedia: videos e imágenes.
Con el siguiente código, nos aseguramos que nuestras imágenes nunca sean mayores que el contenedor donde se alojen.

img { max-width: 100%; }

Para mostrar los videos se podría utilizar el siguiente código:
HTML:

<div class="video-container"><iframe src="http://player.vimeo.com/video/xxxxxx?title=0&byline=0&portrait=0" height="450" width="800" frameborder="0"></iframe></div>

CSS:

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

3º Tipografía

Y por último nos quedaría transformar nuestras fuentes de texto al diseño Web adaptativo. En la mayoría de los sitios Web (nosotros incluidos…) se utiliza el «px» como unidad de medida para las fuentes de texto. Para un sitio Web adaptativo, CSS3 incluye una nueva unidad llamada «rem»:

html { font-size:100%; }

Una vez hecho esto, ya podríamos definir los tamaños de las fuentes:

@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }