En los últimos años la forma de diseñar las páginas web ha sufrido un cambio radical debido al auge de los móviles y las tablets. El enfoque tradicional de conectarse a Internet, a través de un ordenador de sobremesa, sigue siendo popular, pero para satisfacer a todos los visitantes de la página, los diseñadores web de hoy en día deben pensar también en las necesidades de las pantallas pequeñas.

Han surgido dos enfoques diferentes para el diseño orientado a los móviles: el diseño responsive y el adaptativo. El primero es el más conocido de los dos y, en parte, por eso en el post de esta semana vamos a profundizar en estas dos técnicas. Veremos las principales características de cada uno de estos estilos de diseño e investigaremos por qué se han inventado dos métodos similares para conseguir el mismo resultado. También veremos las diferentes situaciones a las que se adapta cada estilo de diseño.

Diseño web responsive

La frase "diseño web responsive" fue acuñada por el diseñador web de Boston, Massachusetts, Ethan Marcotte y presentada públicamente en un artículo del sitio web allistapart.com titulado "Responsive Web Design" allá por 2010. Marcote siguió con una explicación más profunda en su libro "A Book Apart - Responsive Web Design", publicado al año siguiente, en 2011.

La característica principal del diseño responsive es que es fluido, e independientemente del tamaño de la pantalla del usuario que accede a la página web, esta se adapta a ella. Una combinación de CSS fluid grids, media queries y otros aspectos del desarrollo permiten que esto ocurra inmediatamente. Desde el punto de vista del usuario, éste puede ver la página web con absoluta comodidad y con un mínimo de complicaciones. Sin embargo, entre bastidores, el uso de un enfoque fluido es lo que hace que esto sea posible con todo controlado por los cambios en el tamaño de la pantalla.

De ambas formas, el diseño adaptativo estaba más extendido y, sin duda, era más conocido fuera del mundo del diseño web, hasta el punto de que el diseño adaptativo se había convertido en una especie de sinónimo de sitios web adaptados a los dispositivos móviles.

Diseño web adaptativo

Al igual que su primo el diseño responsivo, el diseño adaptativo busca crear una experiencia de usuario que siga siendo positiva independientemente del tamaño de la pantalla, pero lo hace de una manera fundamentalmente diferente. En lugar de cambiar de forma fluida para ajustarse al tamaño de la pantalla presentada, el diseño adaptativo se basa en diferentes diseños establecidos específicamente para el dispositivo en uso en ese momento. Por lo tanto, un determinado tamaño de pantalla de un ordenador portátil, un iPhone, un teléfono Android o un ordenador de sobremesa tendrá un tamaño de página web que se cargará en consecuencia.

La característica principal del diseño responsive es que es fluido, e independientemente del tamaño de la pantalla del usuario que accede a la página web, esta se adapta a ella

El escritor del Huffington Post Garrett Goodman escribió un artículo sobre el diseño adaptativo en 2013 en el que resumía el proceso describiéndolo como un enfoque "del lado del servidor". Continuó explicando que el servidor que aloja la página web detectaría que estás accediendo a su sitio web a través de un teléfono móvil o una tableta en particular y proporcionaría la web específicamente para ti basándose en las dimensiones de la pantalla de ese dispositivo y cualquier otra característica. En el mismo artículo, también aplicó el mismo enfoque descriptivo al diseño responsivo al referirse a él como "del lado del cliente", con el navegador reaccionando al cambio de dimensiones de la pantalla del usuario.

¿Adaptativo o responsive?

La pregunta es, por tanto, cuál es mejor o, dicho de otro modo, cuál debe usarse. Una forma de verlo es pensar si tu página web está pensada principalmente para pantallas pequeñas, tabletas y móviles, o si se va a acceder a ella de forma más general.

Merece la pena considerar la opción adaptativa si la mayoría de tus usuarios acceden a la web a través de un dispositivo concreto, ya que puedes optimizarla en consecuencia. Otra cosa que hay que tener en cuenta es la funcionalidad y el contenido. La adaptación permite que los dispositivos individuales presenten el diseño de la página web de forma única.

El diseño responsive ofrece una experiencia de usuario que se adapta a la mayoría de los sitios web y a sus usuarios, y si se necesita un enfoque "mobile first", el adaptativo sería el mejor de los dos. Es más fácil de crear y mantener y más robusto, sobre todo si el sitio lo gestiona el cliente en lugar de un experto.

El tiempo y la complejidad son factores que se reflejan directamente en el coste. En lo que respecta al presupuesto, si estás preparado para gastar más y estás buscando la mejor experiencia de usuario posible, entonces tal vez el diseño adaptativo sea para ti.

¿Qué hacer?

Nosotros, como estudio de diseño web zaragoza construimos todas nuestras páginas web para que sean responsive y las probamos rigurosamente utilizando dispositivos de diferentes tamaños para asegurarnos de que se cargan eficientemente y son robustas y fáciles de usar. En cierto sentido se trata de tomar ideas de la corriente adaptativa y aplicarlas a la responsive como respuesta práctica a la evolución del diseño web.

El diseño responsive ofrece una experiencia de usuario que se adapta a la mayoría de los sitios web y a sus usuarios