4.2. Medir relativamente con unidades flexibles

El diseño web responsivo sienta sus bases en la flexibilidad de sus componentes. Para poder conseguirla, es necesario despojarse de las nociones que todo diseñador tiene acerca de plantear sus creaciones en tamaños fijos y estáticos. Sin ir más lejos, su principal herramienta es el pixel, una unidad de medida mínima y casi abstracta. Al establecer dimensiones fijas al diseñar para la Web, se limitan las posibilidades que ésta tiene para adaptarse a diferentes resoluciones en variados dispositivos. No todos ellos interpretan un pixel de la misma manera, ya que no es una medida estándar, algo que pueda ser mensurado más allá del mundo digital. Es únicamente un punto.

Esto hace que al utilizar números en pixeles, los diseños sean un poco menos líquidos y fluidos, con menor capacidad de adaptarse a su entorno. ¿De qué manera es conveniente entonces definir los tamaños de elementos? Se considera que una de las mejores opciones para hacerle frente a este problema es el uso de porcentajes. Al establecer un valor porcentual, ese elemento ocupará esa proporción relativa sobre su padre. Ese padre puede ser tanto un contenedor, como un <div>, o mismo la ventana gráfica general. En diseños complejos, se establece una estructura jerárquica en la que casi todos los elementos están contenidos por otros, salvo los de mayor nivel. Cuando se define, por ejemplo, el ancho porcentualmente, el navegador interpreta que éste ocupará esa parte del tamaño que a su vez ocupa su padre en la ventana gráfica.

Esto permite que, simplemente con escalar la misma, ya sea manualmente o porque ésta toma diferentes tamaños según el dispositivo, los elementos se reacomodarán automáticamente. Si se estuviesen usando valores fijos, como pixeles, esto no pasaría, ya que éstos no son relativos a ningún contenedor. Estos conceptos son fundamentales en el diseño de sistemas de grillas, explicado más adelante.

“Sin embargo, un layout fluido por sí mismo no es suficiente para asegurar que un diseño se vea bien en todo, desde un smartphone a un televisor.” (Kadlec, 2012, p. 25). Al utilizar valores porcentuales se establece un lineamiento hacia un buen diseño responsivo, pero no lo es todo. Es necesario hacer ajustes en el camino, mediante media queries, en muchos casos. Es por eso, que a su vez también se utilizan otros tipos de medidas relativas, especialmente para elementos tipográficos, como em y rem.

Existe una simple fórmula que ayuda a calcular valores porcentuales ideales tomando como referencia números fijos en píxeles: objeto ÷ contexto = resultado (Marcotte, 2011). Esta fórmula se traduce al tomar el valor que se le asigna al objeto en pixeles, dividirlo por el tamaño de su padre o contexto en el que éste se encuentre, para así obtener un resultado relativo que puede trasladarse a porcentaje o a em. Un ejemplo concreto sería considerar un escenario en el que se quiere establecer un ancho porcentual de una caja de clase articulo dentro de una caja contenedor. El contenedor tiene un ancho fijo de 960 pixeles, y el artículo de 900. Utilizando dicha fórmula, se puede calcular 900 (el objeto) dividido por 960 (el contexto), para obtener 0,9375. Luego se multiplica el resultado por 100, o simplemente se corren dos decimales, para obtener 93,75. Éste es el ancho porcentual que debería asignársele a la caja artículo para que ocupe la misma proporción espacial que si ambos valores fueran definidos en pixeles (Marcotte, 2011).

La fórmula objeto/contexto se considera extremadamente útil al momento de flexibilizar componentes en una estructura web responsiva, y es mencionada por varios autores como una base fundamental del mismo. Si bien parece ser complicada y tediosa, utilizándola regularmente, la práctica hace a la costumbre. Estableciendo entonces todos tamaños con unidades relativas, el mantenimiento del diseño resulta más fácil y natural, ya que no es necesario, en el caso de querer hacer alguna modificación general, tener que definir todos los valores nuevamente. Y por sobre todo, a lo que hace al diseño responsivo, se cumple el objetivo que el mismo diseño se adapte ingeniosamente a sus ilimitados contextos, de los que, desde la perspectiva de diseñadores, son prácticamente imposibles de predecir.