En Mishës no hemos tocado mucho el diseño web, pero de ahora en adelante prometo escribir más artículos relacionados con este tema, que es en el cual me desempeño profesionalmente. Para este artículo quiero hablarles del diseño adaptable o mejor conocido como “responsive web design”.

Quiero aclararles que esta ha sido mi primera experiencia, hasta ahora nunca me había acercado al diseño adaptable para distintos dispositivos, pero he aprendido algunas cosas y quiero compartirlas con ustedes.

Para empezar, es bueno clarificar el término Diseño Web Adaptable, esto consiste en lograr que un sitio web se adapte a los distintos dispositivos en los que es visto y se vea bien en todos (llámese iphone, ipad, o cualquier otro smartphone), subrayo la frase “un sitio web se adapte” porque eso es lo que se busca, no es una versión distinta de la web, ni una versión móvil, es solo una adaptación que se le hace al sitio para lograr que los visitantes de otros dispositivos tengan una mejor experiencia de usuario.

Diseño responsivo o versión móvil?

Esta es una de las preguntas que se realiza todo el mundo cuando quiere que su sitio web se vea bien en un smartphone, mi recomendación personal: si tiene los recursos (tiempo y dinero) haga versión móvil, así puede lograr una experiencia de usuario 100% satisfactoria para los visitantes de móviles y no sufre las dos grandes desventajas del diseño adaptable, que ya voy a enumerar a continuación.

1. Una versión adaptable carga todo el contenido de la versión normal. Si su sitio normal tiene una imagen gigantesca en el footer y en el slider principal carga 6 imágenes de 500px x 400px, todo eso va a cargarle al visitante que entre desde su celular, por más que escondamos esos divs y el usuario no los vea.

2. Para el diseño adaptable no se pueden cambiar mucho el diseño general del sitio, o bueno, en realidad si se puede cambiar por completo, pero no es lo ideal, porque de lo contrario volvemos al punto 1 y estaríamos cargando 2 páginas en una sola, y mostrando una u otra al visitante dependiendo del dispositivo.

 Para qué resoluciones de dispositivos hay que diseñar el sitio web?

Cuando arranqué con mi primera página responsive, esta fue una de las preguntas que me hice y me dediqué a buscar en internet cuales eran las resoluciones recomendadas, encontré básicamente 3: Una para smartphones, una para tablets y una para monitores grandes. La de smartphones abarcaba desde 480px e inferiores, la de tablets si no estoy mal era hasta 940px y de ahí para adelante para monitores grandes. Aquí es donde se usan los media-queries, los media-queries son condicionales que se usan en las hojas de estilos, en donde uno le dice al explorador, por medio de una línea de código qué estilos debe cargar para el visitante.

@media (max-width:480px) {
.estilo{
background:#fff;
}

Ahí le decimos al navegador: si el ancho del navegador es hasta de 480px, cargue estilo de la siguiente forma. Luego podemos hacer uno que diga que si el ancho del navegador es mínimo 481px, que cargue estilo con otro color, o lo que queramos. Ese es básicamente el funcionamiento de los mediaqueries y es el corazón del responsive design.

Mi primera página ‘responsive’

Basándome en lo que había leído arranqué la codificación y el css inicial quedó con 3 media-queries, sin embargo yo no quedé contento con las transiciones entre las distintas resoluciones y la hoja de estilos final, quedó con 8 media-queries que hacía pequeños cambios, para lograr unas transiciones más normales entre dispositivos. En ese punto me di cuenta que algo no estaba bien con la metodología que estaba siguiendo.

Cada día hay nuevos dispositivos, los celulares aumentan su resolución, los fabricantes sacan tablets de  distintos tamaños, los televisores vienen con navegador, en fin, a este ritmo vamos a estar todo el tiempo actualizando nuestro sitio con nuevos media-queries y ni siquiera así vamos a lograr cubrir la totalidad de las resoluciones de nuestros visitantes.

Recomendaciones para diseño adaptable

Luego de la enriquecedora experiencia con mi primer responsive design, cambié la metodología para las otras páginas. El primer punto fue el diseño en “Mobile First“. En la primera página en un comienzo no estaba pensada que fuera responsive entonces solo hice la versión de más de 960px, sin embargo cuando pasé eso a responsive fue que nacieron la mayoría de los problemas, porque el sitio no se había concebido pensando en los otros usuarios. Con el Mobile First, primero se empieza diseñando para dispositivos móviles, se hacen los wireframes de cómo se verá el sitio en la resolución más pequeña, luego se pasa a la mediana y se finaliza con la grande (o con cuantas versiones vayan a trabajar ustedes, yo trabajo la máxima de 960px de ancho, luego les diré por qué).

Al momento de codificar dejé de pensar en las 3 resoluciones que tenía metidas en la cabeza, esto me permitió lograr un sitio más fluído en el cual solo usé los media-queries estrictamente necesarios, básicamente con uno solo estoy mostrando toda la información para todas las resoluciones y no importa si el usuario ingresa al sitio con una resolución totalmente anormal, o amplía o encoge su navegador, el sitio siempre se va a ver bien. Lo que primó en este punto fue: Si estoy cargando una imagen de YxZ para desktop, por qué no mostrársela también al del móvil, si al fin y al cabo la va a cargar, simplemente es cuestión de que la imagen también vaya cambiando su tamaño a medida que la resolución cambia (obviamente hay que controlar ciertos aspectos).

Esa ha sido la enseñanza más valiosa que saqué de todo este proceso, el dejar de pensar en las distintas resoluciones y pensar más en el usuario.

Algunos buenos ejemplos de diseño adaptable

2012Full

AndersonWine

Bloom

Caffevokee

craftbeer

EarthHour

Forefathers

Fork

MoreHazards

ReverseBuro

SundayBest

TheseAreThings

UpTheMoon

Warface

Richardini Zapata (50 Posts)

Soy un Diseñador Gráfico Colombiano, al que no le gusta el café a menos que sea en un buen granizado con leche condensada. Aunque me encanta la fotografía y la ilustración, mi pasión es el diseño de interfaces de usuarios y el fútbol. Soy Co-fundador de Mishës y un gran soñador.