Recientemente me preguntaron que opinaba de las diferencias y usos de “Adaptive Design” contra “Responsive Design”. La respuesta no era corta ni simple así que tuve que escribir este post.
Es difícil dar una respuesta de cual de las dos filosofías de diseño es mejor ya que estamos entrando en un terreno nebuloso donde las líneas entre una y otra se borran y se dibujan constantemente; cada quien tiene su propia definición de lo que es “Responsive” y lo que es “Adaptive”. Habiendo leído cientos de artículos a este respecto en los tres últimos años creo que estoy en posición de intentar dar una definición de ambas para de ahí partir hacía la respuesta a esta pregunta.
Adaptive Design
es una filosofía de desarrollo de sitios web que parte de la idea de adaptar el sitio web al dispositivo desde el que esta siendo accedido, siendo el objetivo presentarle al usuario la mejor experiencia posible. Supongamos el siguiente ejemplo:
- El sitio web de una cadena de tiendas de conveniencia tiene una sección para buscar sucursales. Si el sitio es accedido desde un dispositivo sin funcionalidad de geolocalización la sección te permite seleccionar tu ciudad para mostrarte una lista de sucursales en la ciudad. Si el sitio es accedido desde un dispositivo que si tiene funcionalidad de geolocalización la sección usa la localización actual del dispositivo para presentar en un mapa las sucursales más cercanas.
En este ejemplo anterior podemos ver como a cada usuario se le presenta la mejor opción posible en su dispositivo. Al usuario sin geolocalización no le hubiera servido el mapa y para el usuario con geolocalización presumiblemente es mucho más útil conocer cuales son las tiendas cercanas que tener una lista de todas las de la ciudad.
La filosofía de Adaptive Design esta fuertemente ligada a otra filosofía de desarrollo conocida como Progressive Enhancement, es más podría ser una rama de ésta filosofía. Progressive Enhancement se basa en la idea de ir mostrando más opciones y más funcionalidad de forma progresiva según el dispositivo o software lo permita. Se usa mucho por ejemplo para lidiar con navegadores viejos, lo que se hace es desarrollar el sitio web de tal forma que según las posibilidades del navegador puede adaptarse a mostrar opciones o funcionalidades distintas.
Si bien todas las intenciones de Adaptive Design son buenas y puras ha recibido muchas criticas ya que muchas personas opinan que se pierde consistencia al presentar experiencias distintas para cada usuario. Por ejemplo, ¿que pasa si un usuario esta acostumbrado a usar cierta funcionalidad en un sitio cada vez que lo navega en su teléfono y al navegarlo en una computadora no la encuentra? Ese usuario pensará que algo esta mal con el sitio. ¿Cuantas veces nos ha pasado a todos que tratamos de entrar desde la computadora a una página que habíamos visitado en nuestro teléfono o viceversa y ni siquiera la reconocemos porque la interface es totalmente distinta?.
Además Adaptive Design tiene un punto en su contra: ha sido usado cómo pretexto para perpetuar el uso de las infames “versiones móviles” de los sitios web. La lógica detrás de esto es “si un usuario accede desde un teléfono le presentaremos una versión especial del sitio para teléfono”. Lo malo de esta lógica es que se están dando por hecho muchas cosas, se esta pretendiendo conocer las necesidades e intenciones del usuario ya que se esta asumiendo que el usuario quiere una gama de opciones y funcionalidades distintas por estar en un teléfono. El problema de la mayoría de las versiones móviles de sitios web es que crean un contexto imaginario en el que asumen que el usuario sólo quiere acceder a cierta información y de forma rápida por estar en un teléfono. Esto no es cierto, el contexto no lo conocemos, sólo sabemos que se esta accediendo desde un dispositivo móvil; el contexto no son las necesidades del usuario el contexto es el dispositivo: de ahí el Responsive Design.
Responsive Design
es una filosofía de desarrollo web que se centra en la idea de hacer un solo sitio web que se adapte a todos los dispositivos y en el criterio en que se basará el sitio para conocer su contexto –el dispositivo desde el que esta siendo accedido– es el tamaño de la pantalla del dispositivo. Al Responsive Design no le importa el sistema operativo ni las especificaciones técnicas propias del dispositivo, le importa el tamaño de la pantalla y basándose en este tamaño presentará a todos los usuarios el mismo sitio web pero con un layout o acomodo diferente. Supongamos el siguiente ejemplo:
- Se tiene un sitio web con una barra de navegación horizontal, debajo de ésta un slider y debajo cuatro columnas con texto una al lado de otra. Ese layout descrito se verá así en una computadora con una pantalla mediana o grande pero en la medida en que empezamos a visitar el sitio en diferentes dispositivos veremos que el acomodo de las cosas va cambiando. Por ejemplo al visitar el sitio desde un iPad en forma vertical cuyo espacio de pantalla es más bien angosto veremos que la barra de navegación ocupa ahora el espacio en dos renglones colocando unos elementos abajo de otros, el slider ha disminuido su tamaño y las cuatro columnas ahora se encuentran la columna uno y dos arriba y la columna tres y cuatro abajo. Si seguimos reduciendo el tamaño de la pantalla más, al tamaño de un teléfono, veremos que la barra de navegación quizá se transformó en un menú desplegable, el slider si hizo pequeño y las columnas se encuentra a ahora una debajo de otra, la uno y debajo la dos y debajo la tres y debajo la cuatro convirtiéndose en una sola columna de cuatro párrafos.
En esta filosofía de desarrollo no se trata de adivinar el contexto del usuario, se toma al dispositivo como contexto y al usuario se le sirve el mismo contenido en cualquier dispositivo. Lo elegante de esta solución es que es simple y eficiente ya que permite hacer cambios al sitio a agregar contenido una sola vez ya que no hay versiones móviles. Otra ventaja es que aunque el layout cambia la interface es la misma así que el usuario debe familiarizarse con el sitio sólo una vez.
Recordando el ejemplo de las tiendas de conveniencia que expusimos arriba, ¿que tal si el usuario estaba accediendo desde su teléfono pero quería saber cuales tiendas estaban cerca de la casa de su novia que vive al otro lado de la ciudad? Definitivamente el mapa de sucursales cercanas no le sirvió y ahora esta atrapado en esa interface por estar accediendo desde su teléfono móvil. Quien desarrolló el sitio se imaginó como contexto “necesita ver sucursales cercanas”, pero ese contexto solo existe en la imaginación del desarrollador, en la realidad no podemos asumir que hay una relación entre el dispositivo desde el que se esta accediendo y las necesidades del usuario.
Cada día conozco más y más gente cuya principal computadora es su teléfono y un caso excepcional es el de mi novia, ella usa su iPhone cómo su computadora y cómo su principal herramienta de trabajo. Ella realiza dos funciones en nuestro estudio de desarrollo web, coordina los proyectos y hace las veces de community manager para las cuentas de medios sociales que manejamos de algunos clientes y todo lo hace desde su iPhone, todo. Y parte de todo es navegar la web y siempre que se encuentra con una versión móvil se ve obligada a ingresar desde la computadora ya que la versión móvil esta incompleta.
Otra fuerte ventaja del diseño responsivo contra las versiones móviles son los URLs. Por ejemplo, si yo tengo un articulo en este URL http://misitio.com/mi-articulo y lo comparto en Twitter pueden pasar dos cosas. La primera es que si mi sitio es responsivo toda la gente podrá acceder y ver el artículo sin problemas, la segunda es que si mi sitio tiene versión móvil probablemente si alguien intenta acceder al artículo desde un teléfono será redirigido automáticamente a este URL http://m.misitio.com que es la versión móvil de mi sitio, pero ya no llegó al artículo sino a una página de inicio.
Este problema de links rotos se vive todos los días y es un problema que incluso sitios grandes como YouTube tienen. Puede pasar algo al revés, que yo encuentre un artículo en mi teléfono con el URL http://m.misitio.com/mi-articulo y se lo mande a un amigo que al abrirlo en su computadora no podrá verlo o verá una versión que fue diseñada para teléfonos y que no se ve bien en la computadora.
El Responsive Design presenta una solución elegante: un solo diseño que se adapta a diferentes tamaños sirviendo el mismo contenido a todos los usuarios.
Ahora respondiendo la pregunta, ¿cuál de las dos filosofías de desarrollo es mejor?, ¿cuál prefiero?.
Ver estas dos filosofías como enemigas o competidoras es una visión incompleta del mundo del desarrollo web, ambas presentan soluciones interesantes para varias problemáticas. En desarrollo web una solución no sirve para todos los casos, cada proyecto es distinto, en algunos proyectos funcionará más cierto tipo de desarrollo y en otros servirá otro tipo. La elección de estrategias para desarrollar un sitio debe verse en cada caso por separado respondiendo a los objetivos y necesidades de éste.
Tratar de decidir entre estas dos filosofías de desarrollo es como preguntarle a un diseñador de tipografías cuales tipografías son mejores, las serif o las sans-serif. Ningún tipo es mejor, son diferentes y se emplean para diferentes objetivos y más frecuentemente que no se usan en combinación. Además para un diseñador de tipografías esa división de serif y sans-serif resultará poco sofisticada y risible.
Yo soy un fanático del Responsive Design, todos los sitios web que he desarrollado este año los he hecho con Responsive Design y se ha convertido en la especialidad de nuestro estudio creativo. Para mi en lo personal es una elección lógica tomar esa filosofía cómo base para cualquier desarrollo, esto no quiere decir que no se puedan tomar algunos elementos de Adaptive Design para incorporarlos en nuestro desarrollo. Un buen ejemplo de esto son los sliders que presentan imágenes cambiantes, lo que estamos haciendo es incorporar sliders que no sólo son responsivos –se ajustan al tamaño– sino que detectan si el dispositivo tiene capacidad para eventos táctiles y de ser así permiten que el usuario avance o retroceda arrastrando los dedos en lugar de tener que operar directamente los controles del slider. Otra cosa que hacemos es incorporar en nuestro desarrollo iconos para iOS ya que esos dispositivos permiten grabar accesos directos de los sitios cómo si fueran aplicaciones y es algo que estamos conscientes sólo funcionará en ciertos dispositivos.
Creo que para cada tipo de proyecto las soluciones son distintas y estamos ahora en la época más interesante del desarrollo web ya que están surgiendo nuevos tipos de dispositivos, nuevas resoluciones de pantallas, nuevos usos para la web y todos los días surgen nuevas herramientas y recursos para desarrollar en la web.
Creo que para mi la base siempre debe ser el Responsive Design y tener en cuenta una frase que he acuñado como mi motto: El dispositivo es el contexto.
[symple_box color=”yellow” text_align=”left” width=”100%” float=”none”]
Attribution (cover image):
Responsive Design: What is it, and Why is it So Important?
Bridgeline (2012) Responsive Design: What is it, and Why is it So Important?. [image online] Available at: http://blog.bridgelinedigital.com/content_management/responsive-design-what-is-it-and-why-is-it-so-important/ [Accessed: August 13, 2012].
[/symple_box]