28
Sep 2012

De versiones móviles
a responsivas

Hace poco más de una década desarrollar sitios web era una tarea menos complicada, los usuarios solo podían acceder a los recursos de una web por medio de una computadora de escritorio. La cantidad de navegadores existentes era mínima, además de que las capacidades de los equipos de computo eran limitados, el contenido multimedia se comenzaba a hacer popular  (imágenes y audio) y  los monitores con los que se contaba seguían un estándar para los requerimientos de sistemas operativos existentes. Básicamente, si tu sitio se desplegaba en un equipo, lo haría en los demás.

Monitor clásico“¿Me recuerdas?”

Gracias a los avances tecnológicos de los  últimos años, podemos tener en nuestras manos equipos que hace algunas épocas eran propios de la ciencia ficción. Computadoras de escritorio con capacidades de procesamiento y almacenamiento enormes, computadoras portátiles que no le envidian nada a las anteriores, celulares que soportan contenido multimedia y permiten comunicarnos a grandes distancias; todos estos con acceso a Internet. Pero a pesar que comparten funcionalidades entre ellos,se diferencian por dos cosas: el hardware y software que los componen, la parte física de los productos y la lógica interna que los hace funcionar, muy remarcado actualmente por la guerra de patentes entre las empresas más importantes y la carrera en innovación tecnológica.

Esta variedad entre dispositivos y sistemas operativos que se ha incrementado en los últimos 10 años, de la mano con las nuevas tecnologías de desarrollo, ha originado un dolor de cabeza para aquellos que se dediquen al diseño y/o desarrollo web. Las diferentes dimensiones en las pantallas de los dispositivos ocasionan que los sitios se aprecien de diferente forma, haciendo incomoda la navegación en dispositivos pequeños; y por otra parte los motores que hacen funcionar los diferentes navegadores no soportan de igual forma los métodos para estilizar elementos en un sitio (te estoy viendo, Internet Explorer). La moda de desarrollar sitios con tecnología Flash fue otro inconveniente, con la llegada de tabletas y celulares con navegadores, al tener procesadores limitados haría que implementar un intérprete para ello ahogará los dispositivos con un bello desbordamiento de memoria o un sobrecalentamiento del equipo. Por lo cual, estos dispositivos eran inservibles al acceder a un sitio basado en Flash.

La variedad de modelos causante de conflictos

En un principio la solución a este inconveniente fue la redirección a sitios para dispositivos móviles, se detectaba el equipo con el que se accedía y de acuerdo a ello se enviaba a un subdominio del sitio web. De pronto se volvió común el prefijo “m” en la web (m.google.com por ejemplo). Ofrecer un sitio ligero, adecuado para las capacidades de conexión a la red con que contaban los dispositivos móviles, de cierta forma un producto limitado, pero funcional.

Con el tiempo, se dieron cuenta que mantener sitios con este esquema era más costoso de lo pensado. Pues se necesitaba mantenimiento constante a dos desarrollos totalmente diferentes en estructura pero que ofrecían el mismo contenido, o al menos eso se pretendía. Pero con la llegada de dispositivos más avanzados esto dejo de ser útil. Redireccionar un dispositivo capaz de desplegar el diseño principal de la página a la versión móvil era hacer que los usuarios accedieran a contenido limitado, una experiencia no muy grata.

Debido a esto, surgió una técnica que vino a cambiar para bien la manera en que se desarrolla la web: el diseño web responsivo. El cual consiste en cambiar el estilo (tamaño, color, posición, etc.)  de los elementos   de una página web, dependiendo de las dimensiones de la pantalla en que se visualice y además multiplataforma, es decir, sin importar el navegador, funcione de la misma manera. En un mismo dominio, se tiene la posibilidad de ofrecer un servicio que se adapte al entorno donde es desplegado (ver ejemplos al final del post).

Diseños pensados para adaptarse a diferentes entornos

¿Qué beneficios tiene esto? Por el lado del usuario, acceder a contenido web con cualquier dispositivo con una navegación cómoda, sin esa sensación de estar ante un producto incompleto; y para quien ofrece el servicio, optimizar el rendimiento del servidor al ofrecer en un solo desarrollo diferentes versiones para diversos dispositivos. Y por supuesto, para el programador/diseñador web, la tediosa tarea de mantener dos versiones de un mismo sitio, reduciendo la cantidad de trabajo.

Google Mobile  diseño para pantallas grandes (arriba) y pequeñas (abajo).

Claro que nada es perfecto, y esta solución viene con otros problemas como permitir que el navegador se encargue del escalado de imágenes, posicionamiento relativo, medir en porcentajes, funciones que no son multiplataforma,  las cuales trataremos y explicaremos en futuras publicaciones.

Afortunadamente con la llegada de HTML5 y herramientas desarrolladas por la comunidad de programadores, estos problemas cada vez se van minimizando, esperando que en unos cuantos años sea cosa del pasado y en conjunto desarrollemos una mejor web donde usuarios, sitios y dispositivos puedan convivir en armonía.

EJEMPLOS

Para observar el comportamiento de un sitio responsivo, diríjase a alguno de los siguientes sitios, ya dentro solo modifique el ancho de la ventana del navegador y podrá observar como el diseño se adapta.

 

Por: Arturo Tadeo / Diseño web

Comments are closed.

DOTTO