, , ,

Responsive Web Design dentro de una estrategia digital

¿Cuándo y como utilizar Responsive Web Design?La mayoría de los que nos dedicamos a este medio hemos oído hablar en mayor o menor medida del Responsive Web Design. Bien, este artículo no va de explicar en detalle qué es el RWD ni qué soluciones técnicas existen para implementarlo. Voy a tratar de aportar mi visión de cómo y cuando se debe implementar este concepto en el diseño de interfaces digitales.

Introducción

Por hacer una breve introducción de este concepto para los que no lo conozcan,  comentar quee viene aproximadamente de 2009, pero que no fue hasta 2010 cuando Ethan Marcotte se explayó en un artículo publicado en A List Apart poniendo en conocimiento de todo el mundo lo que él entendía como Responsive Web Design y unas nociones de cómo aplicarlo.

A partir de este punto RWD empezó a coger forma, que el propio Marcotte plasmó en un maravilloso libro, recomendado para cualquiera que se dedique a esto, tanto a nivel técnico como a nivel de gestión, Responsive Web Design by Ethan Marcotte, y que cuenta de una manera muy detallada en qué consiste esta filosofía y como aplicarla.

Responsive Web Design, como el propio nombre indica (traducido al castellano), sería Diseño Web Adaptativo, o sensible, como lo traducen algunos. Y, ¿esto qué quiere decir? Pues de una manera sencilla podríamos describir este concepto como “El arte de diseñar de una sola vez para cualquier contexto”, es decir, que diseñando una sola web, se adapte en forma y contenido si accedes desde un pc, o desde un Tablet, o desde un Smartphone, o incluso desde un SmarTV.

¿Y por qué Web?

Es lo que se preguntan muchos. Pues bien, web porque es la única plataforma universal, que se rige por estándares y es accesible desde cualquier dispositivo que contenga un navegador, independientemente del tamaño, resolución, sistema operativo, etc.

Como veis esto ya nos marca el camino a seguir para aquellos proyectos en los que apliquemos esta filosofía. Lo que diseñemos será visualizado a través de un navegador.

Dicho esto, seguro que muchos ya estáis pensando:

  • ¿Con este concepto ya no se hacen aplicaciones nativas?
  • ¿Qué es mejor, las aplicaciones nativas o el Responsive Web Design?
  • ¿Sustituye una cosa a la otra?

Os respondo:

  • Se seguirán haciendo aplicaciones nativas.
  • Ni la web adaptativa es mejor ni las aplicaciones nativas. Cada una tiene su finalidad y a la hora de seleccionar el tipo de proyecto, lo principal que se debe analizar es el “target”, que es el que nos va a determinar dónde tenemos que poner el foco y donde realizar más esfuerzos. Al final nos dirá si tenemos que hacer app o web. (p. e.: Si vamos a realizar una aplicación interna para una compañía sólo para directivos que van a acceder desde el Tablet y que sabemos que no se va a evolucionar, pues a lo mejor es interesante hacerla nativa. Si lo que se quiere es hacer una aplicación de gestión interna de una compañía que pueda acceder desde la secretaria en su PC, hasta el Director general en su iPad o su Smartphone, claramente tienes que ir a RWD.)
  • No sustituye una a la otra. Es evidente. Pero hay que tener en cuenta que de una web hecha con RWD se puede crear una aplicación nativa, mientras que el proceso inverso es imposible a día de hoy.

A continuación os incluyo una breve gráfica en la que se pueden ver las características del diseño de aplicaciones nativas frente al de la web móvil RWD.Apps nativas VS Web móvil

Como conclusión a este punto es que lo que ya empieza a dejar de tener sentido es tener varias versiones de una web, es decir, una versión desktop y una versión móvil, incluso con distintos dominios, lo que además de ser una estrategia errónea a día de hoy, Google lo penaliza en posicionamiento, mientras que un website diseñado bajo Responsive estará mejor valorado y por tanto, mejor posicionado.

Aquí os dejo las recomendaciones para el diseño de websites optimizados para smartphones según Google que publicaron el pasado 6 de junio, en las que básicamente indica que tiene una clara preferencia por los websites diseñados con RWD frente a los que tienen varios dominios en función del dispositivo.

Como ejemplo ilustrativo de una mala estrategia digital, podéis identificar fácilmente diversas entidades financieras españolas que cuentan con el website comercial versión desktop, versión móvil, con el portal transaccional versión desktop, versión móvil y además con aplicaciones para iOS iPhone, iOS iPad, Android y ahora con la versión iPhone 5 que además tiene ajustes. ¿Alguien se ha parado a pensar tranquilamente en como desplegar todo esto? ¿No creéis que es una absoluta locura mantener 8 versiones de lo mismo cuando lo puedes hacer todo con una sola versión? Simplemente por nombrar algunas ventajas de aplicar en estos casos RWD, en los que yo, personalmente, creo que tendría mucho sentido.

  • Se optimizarían los tiempos de diseño y desarrollo.
  • Por tanto se optimizarían costes.
  • El mantenimiento se reduce drásticamente.
  • El despliegue de actualizaciones sería simultáneo.
  • Estaría adaptado a cualquier dispositivo nuevo que surgiera y que nos permitiera acceder a través de un navegador al website.
  • Mejoraría la accesibilidad.
  • La  propia experiencia de usuario mejoraría de manera exponencial.

Implicaciones en el modelo de diseño tradicional

Por supuesto, no es oro todo lo que reluce. La implementación de esta filosofía en cualquier compañía, que ya disponga de su modelo de diseño tradicional “uno a uno”, es decir un proceso completo de diseño para un dispositivo, tendrá que evolucionar al modelo “uno a n”, es decir, un proceso completo para “n” dispositivos. 

A la hora de aceptar esta adaptación, habrá que tener en cuenta que para un proyecto que empieza de cero, los tiempos globales de las diferentes fases se incrementan, pues simplemente a la hora de prototipar, hay que tener en cuenta diferentes resoluciones, y a la hora de diseñar exactamente lo mismo. Donde quizás haya menos impacto es en la parte de Desarrollo Front, pues, aunque hay incremento, al tener que desarrollar solo una versión dicho incremento no es proporcional.

modelo de diseño tradicional frente al modelo Responsive Web Design

Dentro del modelo, una de las fases que cobrará mayor importancia es la fase de definición, en la que la estrategia es fundamental y en la que se determinarán los diferentes breakpoints, que son las distintas resoluciones sobre las que se va a diseñar. Este punto debe ser flexible, pues en función del “target”, en un proyecto podemos necesitar 3 breakpoints, en otro 5, y en otro 3 pero con distintas resoluciones de corte.

Otro de los roles que cobra peso es el del Desarrollador Front, pues además de tener que estar estrechamente ligado al equipo de Diseño e Interacción, ayudará a enriquecer la experiencia de usuario a través de las diferentes posibilidades tecnológicas que nos permitan adaptar los modelos de interacción a los dispositivos. Es un perfil que tiene mucho que decir y aportar desde un punto de vista de innovación en la interacción, pues conoce profundamente las posibilidades de los dispositivos a través de trío que hace viable el Responsive Web Design: hablamos del HTML, JavaScript y CSS.

¿Puedo adaptar mi web a Responsive Web Design?

Esto es un punto a analizar muy detalladamente en cada caso, pues lo más recomendable a la hora de diseñar bajo este concepto es empezar a diseñar por la versión móvil más básica. Es lo que se conoce como mobile first y a partir de ahí crear las versiones hasta llegar a la de mayor resolución. Este proceso se conoce como progressive enhancement(mejora progresiva).

Si lo que queremos es adaptar nuestra web, habrá que pensar que, salvo que se rediseñe desde cero, lo que se va a hacer es una degradación a versiones más pequeñas de dispositivo, con las consecuencias que esto tiene. Esto se conoce como graceful degradation (degradación elegante), y es la forma de adaptar más antigua de las dos, que probablemente pueda dar resultados aceptables pero en ningún caso se podrá crear una experiencia tan completa y mantenible como en el caso del progresisive enhancement.

Más allá de estos dos conceptos habrá que analizar si desde la versión que se quiera adaptar es viable realizar esa adaptación. No siempre es posible, y no siempre es recomendable. 

Hay ocasiones en las que cuesta más el collar que el perro y por mucho que se quiera evitar, es más sencillo y menos costoso crear una versión desde cero, con arquitectura nueva y siguiendo la metodología correcta.

Algunas referencias de interés:

Conclusiones

Es evidente, que seguir la filosofía Responsive Web Design, hará que la experiencia de usuario multidispositivo sea siempre satisfactoria, coherente y consistente. Por tanto es un concepto muy recomendable.

Ahora bien, antes de empezar un proyecto, habrá que analizar si debemos y podemos aplicarlo.

En caso de aplicarlo, ya sabemos que nos ahorrará tiempo y costes, nos facilitará el mantenimiento, el despliegue de actualizaciones, etc.

Y por último, como hemos dicho, no todo el campo es orégano, la aplicación de esta filosofía, implicará una evolución en el modelo de diseño de interfaces digitales tradicional que habrá que incorporar a la metodología y habrá que engranar hasta que sea fluido.

Enlaces de interés:

5 comentarios
  1. Pepe Vázquez
    Pepe Vázquez Dice:

    Un excelente artículo. Muy claro y bien explicado. Ayuda mucho para entender el RWD y cuales son los puntos clave a tener en cuenta. Sigue así, con esta línea . ¿Vas a publicar algo más sobre esto? . A mi me parece muy interesante. Enhorabuena por el blog.

    Responder
    • Miguel Benítez
      Miguel Benítez Dice:

      Muchas gracias por el comentario Pepe. La intención es ir publicando artículos de este y otros temas relacionados con la estrategia digital que puedan aportar algo más que la mera visión técnica de estos conceptos. Además, intentaré ir publicando artículos puramente técnicos que ayuden a complementar la teoría. Saludos.

      Responder
  2. Miguel
    Miguel Dice:

    Estupendo artículo, argumentos claros para los que se resisten a dar el paso a la web de un sólo código. Y sobre todo argumentos de peso para los amantes de disparar app a discreción solo para dar de comer a las agencias.
    A mi siempre me ha convencido la universalidad de los estándares, es evidente la accesibilidad que proporciona, pero hay un punto del que hace tiempo que vengo dudando. En este artículo lo mencionas una única vez:
    “Estaría adaptado a cualquier dispositivo nuevo que surgiera y que nos permitiera acceder a través de un navegador al website.”

    Aquello que vengo poniendo en todo informe de accesibilidad: compatibilidad con navegadores actuales y futuros, creo que es una falacia. Las novedades tecnológicas no son tan predecibles desde un punto de vista de desarrollo front. Mira una de tus webs de hace sólo tres años en un smartphone… ¿cómo la ves? ¿a que estaba bien ajustadita a los estándares?

    Responder
    • Miguel Benítez
      Miguel Benítez Dice:

      Gracias Miguel,

      respecto a tu comentario, hay un matiz que debemos hacer: la web desarrollada bajo estándares funcionará ahora y en navegadores futuros que soporten la tecnología, pero… y digo pero… y como ya he indicado en el post, no es oro todo lo que reluce, y lo más probable es que surja algún ajuste de estilos, pero muy probablemente se verá bien.

      Esto lo puedes ir comprobando a día de hoy. El código y la forma de construir HTML ha mejorado sustancialmente para minimizar el impacto de la evolución.

      También hay que indicar que a este concepto le queda tiempo. No olvidemos que el HTML5 no será un estándar hasta 2014, y todavía se están descubriendo y mejorando las formas de hacer para un buen Responsive.

      Verás como a futuro podrás poner tu frase de “compatibilidad con navegadores actuales y futuros” alegremente, pues todos tendrán que interpretar estándares de la misma manera… no les queda más remedio…

      saludos y gracias por tu comentario.

      Responder

Trackbacks y pingbacks

  1. […] el que no sepa en qué consiste este concepto, aquí dejo enlace a la entrada que yo mismo escribí hace un tiempo sobre Responsive Web Design que ya es una […]

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *