Martes, 6 de Marzo de 2012

Responsive Web Design en pocos pasos

Cómo maquetar una web para móviles sin morir en el intento

Si has llegado a esta página probablemente ya sepas de qué va el tema, así que para una introducción al Responsive Web Design, o Diseño Web Adaptable, remitiré a este interesante artículo de Juan Díaz-Bustamante.

Lo que quiero contar aquí es como poner en práctica estas técnicas sin morirse en el intento; al chafardear en el código fuente de los ejemplos me daba cuenta de que la mayoría estaban muy currados, llegando a tener varias hojas de estilos para tener en cuenta de forma específica la mayoría de dispositivos y resoluciones, más otros tantos css para tapar cada agujero del “infalible” internet explorer. Mucho trabajo para clientes que no quieren invertir muchos recursos. Seguí leyendo hasta caer en otro artículo cuyo enlace no he sabido volver a encontrar, en el que se recomendaba no complicarse demasiado y quedarse con dos hojas de estilos: una básica, que se cargará en todos los dispositivos y navegadores independientemente de su resolución, y otra para resoluciones de 768 píxeles en adelante, o sea de tablet iPad para arriba, donde colocar todas las “florituras”: imágenes de fondo, cambiar de una a dos o más columnas, mostrar fotos que no son estrictamente necesarias; esta solución me pareció más que aceptable, además en realidad ni siquiera es necesario utilizar dos css diferentes, así bajo estos criterios volví a maquetar esta misma web que estáis leyendo y que podréis probar vosotros mismos cargando www.vinx.info en vuestros móviles o tablet, o simplemente redimensionando a vuestro gusto la pantalla del navegador en un ordenador.

Lo primero a tener en cuenta, evidentemente, será el diseño; ya no hay que concebir la web para pantallas de ordenador, sino que hace falta pensarla antes para dispositivos pequeños, y sólo luego añadirle el toque para resoluciones más anchas.

En cuanto al código, es tan sencillo como integrar estas líneas a vuestro código habitual:

<meta name="viewport" content="width=device-width" />
<!--[if lt IE 9]>
<script src="/js/respond.min.js"></script>
<![endif]-->

Cómo veréis las versiones del explorer anteriores a la 9 necesitan un pequeño empujoncito para funcionar, para ello el respond.js hace una buena faena.

Vuestra hoja de estilo es la que necesitará ser modificada, concretamente tendrá una primera parte hecha de forma tradicional para la versión básica de la web, y otra parte adaptada a las resoluciones escogidas; en nuestro caso, añadiríamos lo siguiente:

@media screen and (min-width: 768px) {
    /* Aquí va el código especial para resoluciones de 768 para arriba */
    /* Enseñamos una imagen de fondo en la cabecera */
    #cabecera {max-width:900px;background:url(/images/cabecera.jpg) no-repeat top center;}
    /* mostramos las imágenes de los listados, previamente declarados con .listado .imagen {display:none} */
    .listado .imagen {float:left;width:150px;display:block !important;}
     /* ponemos en dos columnas lo que antes por defecto iba en una. */
    .columna1 {float:left;width:49% !important;}
    .columna2 {margin-left:51% !important;}
}

Conclusión: el Responsive Web Design es bastante sencillo de poner en marcha a nivel de programación, sin embargo el diseño y la maquetación requieren un pequeño cambio de chip, debiéndose ahora concebir las webs para tamaños menores para luego añadirle los detalles que se mostrarán a resoluciones mayores.

« Ver todos los artículos