3.2. Responder acorde: responsive web design
Una vez que se toma la decisión de abarcar toda clase de modelos de visualización, y que se comprende que el sitio web en cuestión podrá ser accesible desde una inmesurable cantidad de dispositivos, ¿cuál es la manera más eficaz de presentar los contenidos para que éste sirva al mayor rango de posibilidades y combinaciones probables?
Una forma de responder a este interrogante, es mediante la confección de sitios paralelos. Para desarrollar esta técnica, es primordial establecer parámetros estándar de visualización que pueden llegar a redondear y englobar un gran número de dispositivos. Es decir, se toman valores medios de, por ejemplo smartphones, como los comentados en el capítulo anterior, cuando se definen las resoluciones de pantalla. De la misma manera se establecen valores para tablets, ambos casos sin enfocarse en un solo dispositivo específico, sino en promedios que abarquen muchos modelos distintos. Se cuenta entonces con bases para realizar un diseño desktop, otro para tablets, y otro para celulares. Al momento de maquetarlos, en otras palabras, traducir a HTML y CSS las imágenes, se debe entonces triplicar el trabajo ya que es necesario crear un sitio diferente para cada base, cada uno de ellos con sus reglas específicas. Una vez terminados, ya online, se desarrolla un detector que, antes de cargar el sitio al usuario, identifica desde dónde accede y le provee la interfaz que mejor se amolde a las características de su plataforma, redireccionándolo a una URL determinada. “Este enfoque ciertamente tiene sus méritos. La creación de un sitio separado para cada tipo de dispositivo hace que sea más fácil de adaptar la experiencia significativamente. […] Por desgracia, no escalan bien: esos […] sitios necesitan ser actualizados, probados y mantenidos” (Kadlec, 2012, pp. 9-10).
Si bien en un pasado no muy lejano, éste era el principal abordaje para servir a todos los usuarios, es fácil notar las desventajas que el planteo ocasiona: mantener un número variable de sitios paralelamente, perder la capacidad de confluir todo el tráfico hacia una misma dirección, ya que, dependiendo desde dónde entre cada usuario, se le asignará una URL diferente, y a su vez la pérdida de la portabilidad. Estas consecuencias son analizadas en el siguiente apartado.
“En lugar de crear diseños desconectados, cada uno adaptado a un dispositivo o navegador en particular, deberíamos en cambio tratarlos como facetas de una misma experiencia” (Marcotte, 2011, p. 8).
Lo que Ethan Marcotte propuso en 2010 a través de un artículo en un blog especializado, revolucionó el estado de la industria, ya que rompió con modelos clásicos, proponiendo una impronta, una mirada sencilla e íncreiblemente adecuada para reorganizar el flujo de trabajo a la hora de diseñar con dispositivos móviles en mente. Él lo llamó Responsive web design, que en español se suele convenir en la traducción diseño web responsivo, y en algunas oportunidades se le llama también adaptativo. Basó sus observaciones en conceptos de una reciente disciplina en el campo de la arquitectura, que propone la interactividad del objeto con el usuario, llamada justamente responsive architecture. “En lugar de crear espacios que influyen en el comportamiento de las personas que pasan a través de ellos, los diseñadores responsivos están investigando maneras para que una pieza de arquitectura y sus habitantes se influyan e informen mutuamente” (Marcotte, 2011, p. 7).
El concepto que propone, entonces, es generar sitios web que se nutran del usuario para brindarle la mejor experiencia posible. ¿De qué manera se logra entonces esta simbiosis? Sorprendentemente, esta técnica no requiere de procesos complicados ni nuevas tecnologías. Simplemente hace uso de herramientas ya presentes en el entorno pero de un modo distinto para el que fueron planteadas inicialmente. El diseño web responsivo se lleva a cabo únicamente “[…] mediante la incorporación de tecnologías basadas en estándares a nuestro trabajo, y haciéndo un pequeño cambio en nuestra filosofía hacia el diseño online” (Marcotte, 2011, p. 8).
La propuesta inicial de diseño responsivo es la unificación de tres técnicas, que serán tratadas individualmente en el cuarto capítulo: un layout flexible basado en un sistema de grillas, imágenes y contenido multimedia elásticos, y el uso de media queries.
La flexibilidad del diseño, como de sus elementos y componentes – multimedia o no – refiere a la capacidad de estos de escalar y adaptarse a sus respectivos contenedores. Las media queries son una funcionalidad introducida en la especificación de CSS3 que permiten definir puntos de quiebre en una página para variar la estructura dependiendo la consulta – de aquí el término query – que se realice en la hoja de estilos.
Para tratar de poner la filosofía de diseño web responsivo en pocas palabras, yo diría que es la presentación de los contenidos de la manera más accesible para cualquier ventana gráfica que lo acceda. Por el contrario, un ‘sitio web móvil’ realmente es necesario cuando se requiere una experiencia de contenido y funcionalidades específicas basado en el dispositivo […]. En estos casos, un sitio web para móviles presenta al usuario una experiencia completamente diferente a su equivalente de escritorio. (Frain, 2012, p. 11)
A raíz de todas las ventajas que pueden extraerse de esta práctica, es que la tendencia de trabajo en lo profesional apunta a ella cuando de diseño para dispositivos móviles se trata. Por esta razón, y por el hecho que no le es requerido al lector aprender nuevas tecnologías para aplicar el diseño web responsivo, es que se toma como eje para el desarrollo de este Proyecto de Grado. En las próximas secciones se explican sus métodos de empleo para culminar con la aplicación y análisis del mismo en el último capítulo.