janogarcia

Responsive Web Design - Diseño Sensible

El viernes hablé en The Mêlée sobre Responsive Web Design. El objetivo de la presentación no era explicar los detalles de cómo implementarlo (fluid grids, fluid media, media queries…), sino discutir sobre cuándo o por qué aplicarlo.

Quería evitar centrarme en los aspectos técnicos de bajo nivel (código, técnicas front-end y back-end…), y poner el foco en los aspectos de más alto nivel (principios, limitaciones, alternativas…).

Disclaimer

Me parecía el planteamiento más interesante ya que invitaría a reflexionar tanto a aquellos con más experiencia como a los que estuvieran todavía preguntándose qué es y qué les podría aportar Responsive Web Design, y esto encajaba perfectamente con la diversidad de perfiles de The Mêlée.

Para que éste planteamiento quedara claro, hice la siguiente advertencia:

No es una presentación técnica, no habrá ejemplos de código.

El objetivo es discutir qué problema trata de resolver “Responsive Design”, qué principios sigue y qué herramientas ofrece, preguntándonos si éstas se ajustarán a las necesidades de nuestros proyectos.

Contenidos

El desarrollo de la presentación fue el siguiente:

El problema

Cómo hemos pasado de pensar en un sólo dispositivo y una resolución, a un escenario mucho más complejo de múltiples dispositivos de diferentes resoluciones, densidades y capacidades.

La solución

¿Es posible encontrar una solución sencilla para este complejo escenario? ¿Es Responsive Design la respuesta? ¿O quizás sean aplicaciones webs/nativas dedicadas? ¿O una combinación de ambas? ¿Sí , no, de qué depende?

El contexto

El contexto lo es todo. No hay soluciones universales, todo dependerá del contexto, entendiendo como tal las limitaciones de tu proyecto (tiempo, alcance, presupuesto), los objetivos de tus usuarios, los objetivos de negocio, las limitaciones técnicas…

Responsive Web Design, una posible solución

Habrá determinados casos (proyectos) en los que aplicar lo que hoy conocemos como Responsive Web Design sea la elección más acertada.

Explico brevemente en qué tecnologías se fundamenta y hago referencia a diferentes artículos, libros y presentaciones en los que se explica detalladamente cómo implementarlo (código, herramientas…).

Pros y Cons

Destaqué algunos puntos a tener en cuenta a favor y en contra de Responsive Web Design.

Responsive Web Design VS sitios/aplicaciones móviles

¿Cuándo aplicar Responsive Web Design y cuándo optar por una versión específica para un dispositivo (mobile, tablet…)? ¿Es un mito el “Mobile Context”? Mobile first, Desktop first, Content first, o Target experience… ¿Qué debemos priorizar?

Objetivos del usuario VS Objetivos del negocio

Hablamos brevemente sobre las diferencias entre las necesidades/objetivos de los usuarios y de los negocios, y de cómo debemos encontrar el equilibrio entre ofrecer la mejor experiencia al usuario y cumplir con los objetivos del negocio.

Ejemplos

Con los ejemplos no buscaba enseñar un galería de sitios Responsive en acción, al estilo de http://mediaqueri.es/. Lo que pretendía más bien era responder a preguntas como:

¿Responsive Web Design escala para sitios complejos?
¿Se puede plantear a posteriori (retrofit) o debe estar contemplado desde el principio?
¿En qué punto deja de tener sentido adaptar contenido (HTML/CSS/JS, images, video…) en favor de una versión dedicada?
¿En cuáles de los siguientes ejemplos aplicarías Responsive Web Design y en cuáles optarías por un sitio/aplicación a medida?
¿El planteamiento de Responsive Web Design encajaría con las necesidades de tus próximos proyectos?

Una vez más, la respuesta a todas estas preguntas era un decepcionante pero realista “depende”, y ese “depende” quedaba determinado por el Contexto, citado en uno de los puntos anteriores.

Ejemplo: Bookstores

Con este ejercicio quería ilustrar todo lo comentado sobre el Contexto, poniendo ejemplos reales de un mismo sector (venta de libros) pero de un contexto muy diferente. Pasando así de principios abstractos a ejemplos concretos y aplicaciones reales.

Por un lado teníamos casos simples (A Book Apart, Five Simple Steps, Rosenfeld), de editoriales independientes, de nicho. En este primer caso veíamos como plantear estos sitios como Responsive sería totalmente viable y muy acertado.

Por otro lado teníamos casos complejos (Amazon, Barnes & Noble), de mayoristas, con un catálogo generalista. En estos casos, por lo contrario, veíamos cómo diferentes factores dificultaban enormemente que un planteamiento Responsive fuera viable.

Ejemplo: News

Al estilo del ejercicio anterior vimos diferentes casos complejos de grandes medios generalistas, y qué solución había adoptado cada uno de momento.

Boston Globe con su rediseño Responsive capitaneado por Ethan Marcotte, el artífice de todo esto de Resposive Web Design.
The New York Times con su estrategia de múltiples aplicaciones dedicadas (app nativa iPad, 4x apps nativas para diferentes smartphones, version móvil de la web, Times Reader 2.0 para escritorio, aplicación para Google Chrome).
Lawrence Journal-World, con una versión móvil básica drásticamente simplificada.

Por otro lado veíamos casos mucho más simples de blogs del sector web que habían seguido un rediseño Responsive.

Conclusión

Las ideas presentadas, los ejemplos mostrados, las preguntas lanzadas y su discusión creo que ayudaron a poner en perspectiva la problemática que trata de resolver Responsive Web Design, dando quizás una visión más amplia que ayudara a cada uno a tener una opinión algo más formada y crítica sobre qué camino seguir en cada proyecto.

El concepto del “Contexto” es algo que estuvo presente a lo largo de toda la presentación, Responsive Web Design se presentó como una solución más que debemos conocer, complementaria a otras que ya conocemos, y que debemos saber cuándo aplicar.

Dicho esto, reconocimos que muchos de nuestros proyectos sí podrían encajar perfectamente con Responsive Web Design.

Hasta la próxima presentación. ¡Y gracias por leer!