Ejemplos Diseño Web Responsive exitosos

Ethan Marcotte

En un mundo móvil como el actual, donde la implantación del smart phone es una realidad, los diseñadores han tenido que encontrar una manera de adaptar las webs a los cientos de dispositivos del mercado.

Tal y como apuntaba el norteamericano Ethan Marcotte en su artículo de 2010 Diseño Web Responsive, los diseñadores web debían hacer como los denominados arquitectos responsivos, y adaptar los elementos físicos y espacios a la gente.

En nuestro caso, tenemos que adaptar la web a los usuarios y ofrecerles la mejor experiencia de navegación posible, evitando que desde dispositivos como móviles o tabletas se pierdan funcionalidades o se descuadre la maquetación, y así se pierda público y potenciales clientes, que sería la peor consecuencia.

Entonces, hagamos como estos nuevos arquitectos de los que nos habla Marcotte y acerquémonos al diseño adaptativo: «…en vez de crear espacios inmutables e invariables que definen una experiencia concreta, sugieren que los habitantes y la estructura pueden -y deben- influenciarse mutuamente».

He aquí la solución. En lugar de crear diseños a medida y desconectados para cada uno de los siempre crecientes dispositivos web, como se hacía en una primera fase o gracias a las aplicaciones para móviles, podemos tratarlos como facetas de una misma experiencia. Se puede diseñar para una experiencia de observación óptima, pero incrustando tecnologías basadas en estándares dentro de nuestros diseños para hacerlos no sólo más flexibles, sino más adaptables al medio que los renderiza. Es decir, aplicaremos un Diseño Web Responsive. ¿Cómo lo haremos? Pasemos a un caso concreto de esta página web:

Adaptamos una imagen según el modo responsive

Si tu objetivo es crear diseños muy optimizados será importante usar varias imágenes distintas; una con un tamaño superior y otra con uno más ligero.
Me centro en el uso de una misma que se adaptará según tus necesidades pudiendo hacer que las imágenes se comporten de las siguientes maneras:

Ocupar el ancho de la página: Útil para cabeceras o imágenes principales. Lo haremos estableciendo su ancho al 100%.

img {
width:100%;
}

Imagen con un tamaño máximo: En este caso concreto la imagen tendrá un tamaño que no se sobrepasará nunca, pero cuando disminuya el tamaño del contenedor se encogerá adaptándose a la página.

Pensemos en una infografía en un blog. No queremos ni recortarla ni estrecharla para asegurarnos que se lea correctamente.

img {
width:100%; max-width:400px;
}

Mantener imágenes con su tamaño original: Podemos tener una serie de imágenes de distintos tamaños y querer conservar sus tamaños originales pero adaptándose al ancho del contenedor o pantalla y, como en el caso anterior, nos serviría para un blog con un diseño responsive o con versión.

img {

max-width:100%;

}

¿Sencillo, verdad? Pues anímate y sigue explorando para adaptarte tu también al Diseño Web Responsive, porque este es una realidad y una constante demanda de los clientes. ¿Te atreves?