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/

Anuncios
Diseño Web Adaptable o Responsive Web Design. Teatron

¿Como reducir el número de peticiones HTTP en la carga de una página Web?

Uno de las formas de optimizar la carga de una página Web consiste en reducir el número de peticiones HTTP.  Esto lo podemos conseguir reduciendo el número de ficheros CSS, JavaScript e imágenes que cargamos en nuestra página.

CSS y JavaScript

Cuando se trata de CSS y JavaScript la opción consiste en unir los ficheros de un mismo tipo en un único fichero y comprimirlos, de esta manera tendríamos un único fichero CSS y un único fichero JavaScript.

En estos casos el problema suele ser combinar el entorno de desarrollo con el de producción. Es decir, durante el desarrollo de la Web es evidente que resulta más sencillo trabajar con varios ficheros que con uno sólo comprimido. El momento de unificarlos y comprimirlos debería realizarse en el momento de instalar la aplicación en producción.

Imagenes

Por tanto, para reducir el número de peticiones sólo nos queda buscar fórmulas para reducir el número de imágenes que utilizamos en nuestra Web. Para ello tenemos 2 opciones.

CSS Sprites

CSS Sprites consiste en combinar varias imágenes en un único fichero. A continuación mediante el uso desde la CSS de la propiedad backgroun-position mostraremos sólo parte de esa imagen.

Pero esta forma de trabajar aunque útil, tiene 2 problemas:

  • En algunas ocasiones resulta difícil combinar varias imágenes en una sola.
  • Hay que tener en cuenta el tamaño de la imagen. En algunas ocasiones y sobre todo para sprites grandes podemos tener problemas de memoría en el navegador (To Sprite or not Sprite).

Convertir las imágenes a base 64 e incluirlas en la CSS o HTML

Es la técnica que comentaba en mi anterior artículo, Conversión automática de imagenes a Data URis.

En este caso, el problema que tenemos es que no es soportado por todos los navegadores.

Data Uris es soportado en los siguientes navegadores:

  • Firefox 2+
  • Safari – all versions
  • Google Chrome – all versions
  • Opera 7.2+
  • Internet Explorer 8+

Es decir, no es soportado en nuestros amigos los IE6 e IE7. Aunque para este caso existe la posible opción de utilizar MHTML aunque (yo no lo he probado) parece que no termina de funcionar del todo bien.

Y luego tenemos la limitación de tamaño en el IE8, que no acepta Data Uris de más de 32 Kilobytes.

Bueno, en cualquier caso, las opciones están ahi y la mejor solución dependerá de cada situación particular y supongo que en muchas ocasiones la combinación de ambas técnicas.

Enlaces

Este post es un resumen de un estupendo artículo How To Reduce The Number Of  HTTP Requests de Robert Nyman.

En un próximo artículo pasaremos de la teoría a la práctica.

¿Como reducir el número de peticiones HTTP en la carga de una página Web?