Diseño Web Adaptable o Responsive Web Design. Teatron

Hoy en día los usuarios de nuestras páginas web pueden acceder a las mismas desde diferentes pantallas y medios: un ordenador, una tablet, un móvil, la pantalla del televisor, etc. es decir, desde múltiples pantallas con diferentes medidas y orientaciones.

Partiendo de la base de que el diseño de una web, para que funcione, tiene que estar centrada en el usuario (y no en el diseñador, en el programador o en el dueño de la web), es importante que la experiencia que tiene el usuario con nuestra web sea lo más placentera posible con independencia de qué medio esté usando para verla.

¿Que es el Responsive Web Design?

Para ello, la opción más habitual hasta ahora era crear diferentes versiones para cada medio/pantalla. Esta opción supone  duplicar el desarrollo y mantenimiento por cada dispositivo en el que queramos mostrar la Web.

Otra opción (y el objeto de este artículo) que se esta poniendo muy de moda y que muchos sitios están utilizando es lo que se llama Responsive Web Design o Diseño Web adaptable.

Son una serie de técnicas que permiten a nuestra página web adaptarse al medio a través del cual un usuario está accediendo a la misma.  Los tamaños de pantalla cambian según el medio con el que se accede y lo que propone el diseño Web adaptable es adaptar nuestra Web a la pantalla utilizando los elementos que el HTML, CSS3, JavaScritp, etc nos proporcionan.

Estas técnicas se basan en:

En el diseño fluido

Es decir,  en abandonar los anchos fijos de nuestra web. El diseño fluido está pensado en términos de proporciones: para los anchos de los elementos, de las fuentes, de las imagenes.

En los medias querys

Al comprimir mucho el tamaño de la pantalla, por mucho que los anchos sean fluidos, puede acabar todo en un caos.

Hasta ahora, si necesitábamos conocer el tamaño actual de la ventana del navegador, debíamos usar JavaScript para recolectar datos de ese tipo desde el navegador y después darle un uso a esos datos a través de la modificación del DOM a través de métodos programados en JavaScript. Aunque dicho método es válido, no es realmente óptimo ni intuitivo.

CSS3 nos aporta las media queries que nos proveen de una forma de conocer bastantes propiedades comunes de los dispositivos que nos visitan que podemos utilizar en nuestros archivos de estilo para construir entornos dependiendo de los mismos sin ayuda de JavaScript.

Polémica alrededor del Responsive Web Design

Aunque debemos reconocer que Responsive Web Design no esta exento de polémica. Resulta difícil definir en que consiste, ya que en cada página o sitio de referencia me encuentro con una definición distinta. En algunos sitios hablan de conjunto de técnicas y herramientas, en otros hablan de filosofía, en otros de simple tendencia… Están los detractores que piensan que solo es una tendencia y que va a terminar muriendo, y para otros es el santo grial y la solución a todos los problemas.

El problema, como en todo, rádica en posicionarse en un extremo o en otro, ni es la panacea ni es que no solucione ningún problema.

Supongo que la mejor alternativa consiste en un hibrido entre ambas opciones: una versión concreta para cada rango de dispositivos, utilizando el Responsive Web Design dentro de cada rango para ajustar la Web a las posibles diferencias.

No tiene sentido por ejemplo que a un movil se le envie la misma cantidad de contenido (aunque este oculto) que a una web que se visualiza desde un ordenador. Pero dentro de los rangos de moviles existen diferencias como por ejemplo verlo en horizonal y vertical que podemos solucionar con el diseño fluido y los media querys.

Teatron y Responsive Web Desgin

Para Teatron hemos realizado un nuevo diseño y hemos aprovechado el cambio para utilizar las técnicas antes descritas. Esto nos ha permitido por fin mostrar una Web que se pueda ver con mucha más comodidad en todo tipo de pantallas.

De esta manera a partir de este lunes, 30 de Enero del 2012, os resultara más sencillo disfrutar de Teatron desde vuestros móviles o ipad.

Queda trabajo por hacer, ya que no es una técnica sencilla, pero esperamos que los resultados os gusten.

Todo esto ha sido posible gracias a Emanuele Rodriguez nuestro diseñador Web del cual partió la idea inicial de implementarlo de esta manera.

Referencias

[1] http://www.emenia.es/diseno-web-adaptable-o-responsive-web-design/
[2] http://www.getfinch.com/2011/08/its-not-responsive-web-building-its-responsive-web-design/
[3] http://mediaqueri.es/
[4] http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
[5] http://indexante.com/post/responsive-web-es-un-tecnica-incompleta
[6] http://noteandpoint.com/documents/pdf/hugomnlhpd.pdf
[7] http://kevinjohngallagher.com/2010/06/responsive-design-is-irresponsible/