Cómo diseñar para una web responsiva

La web tal y como la conocemos está cambiando. En el pasado, los diseñadores y desarrolladores solo tenían que preocuparse por un medio: la pantalla del ordenador. Sin embargo, en los últimos años ha surgido una plétora de dispositivos con acceso total a Internet, con decenas de formas y capacidades diferentes, lo que significa que ahora tenemos que diseñar nuestros sitios web para que se adapten cómodamente a todos los tamaños, formas y resoluciones de pantalla que te puedas imaginar.

Nuestro antiguo enfoque de diseño de ancho fijo ya no es viable. Entonces, ¿qué hacemos? La solución a ese problema está en el diseño web responsivo.

¿Qué es el diseño web responsivo?

El concepto del «diseño web responsivo», un término acuñado por Ethan Marcotte, es que nuestros sitios web deberán adaptar su diseño para ajustarse a cualquier dispositivo que los muestre.

En su libro, acertadamente titulado "Responsive Web Design" (Diseño web responsivo), describe las tres partes de un sitio web responsivo:

1. Una cuadrícula fluida
2. Imágenes fluidas
3. Media queries

Como este artículo está dirigido a los diseñadores, no a los desarrolladores, y como no meterme los dominios de Ethan en lo que se relaciona con el contenido, no hablaré de estas tres cosas.

Sin embargo, es importante que los diseñadores entiendan los conceptos básicos de RWD para poder diseñar mejor los sitios web que se convertirán en responsivos cuando se codifiquen. Te recomiendo encarecidamente que leas estos tres artículos de Ethan: Cuadrículas fluidas, imágenes fluidas y diseño web responsivo.

Ilustración de Kevin Cornell

Si solo deseas leer uno de ellos, que sea el último, escrito en mayo del año pasado. Su lectura cambió mi forma de ver Internet, y sospecho que la de muchos otros como yo. El trabajo de Ethan es nada menos que una genialidad, y creo que todos los que se ganan la vida con la web deberían estar obligados a leer este artículo.

El papel del diseñador

Si eres un diseñador que solo diseña, lo que significa que no eres responsable del HTML y CSS del sitio en el que estás trabajando, mucho de esto no dependerá de ti. Incluso puede que te preguntes por qué necesitas saber sobre el diseño web responsivo.

Siempre he creído que quien diseña un sitio web debe ser el que luego le da vida, a través de HTML y CSS. Entiendo que, obviamente, este no es el caso de muchos proyectos, y respeto las habilidades de una persona que desea solo armar el diseño o solo escribir el código.

Es importante entender que un sitio web no es solo uno o el otro, es un matrimonio entre el diseño y el código, cada uno dependiendo del otro para crear una experiencia perfecta. Para aprender de verdad a diseñar un sitio web, hay que entender cómo se implementará el diseño en el código, aunque sea de forma rudimentaria.

Te lo vuelvo a recordar: este artículo es para diseñadores. En los próximos párrafos, hablaré exactamente de cómo, como diseñadores, deberíamos cambiar nuestra forma de diseñar para adaptarnos mejor al proceso de diseño web responsivo.

Los sistemas de cuadrícula y tú

El sistema de cuadrículas, un ejemplo perfecto de un diseño rígido y basado en cuadrículas al que deberías aspirar.

Incluso si no estás diseñando pensando en el diseño web responsivo, deberías diseñar con algún tipo de sistema de cuadrícula. Como diseñadores modernos y educados, ya deberíamos tener una idea de lo que significa usar una cuadrícula, así que me saltaré los detalles.

Uno de los pilares del diseño web responsivo es la cuadrícula fluida. Esencialmente, significa que tu cuadrícula, que tradicionalmente se medía en píxeles, ahora debe pensarse en términos de porcentaje del ancho total de la página. El ancho real calculado de cada columna en un sitio web responsivo cambia cada vez que la ventana del navegador cambia de tamaño, y no se puede garantizar que sea el mismo en diferentes dispositivos.

Por este motivo, debes utilizar una cuadrícula cuando diseñe un sitio web adaptable. Es una necesidad, no un detalle extra. No puedes crear un sitio web responsivo sin un diseño basado en una cuadrícula; fuera de dudas, no funcionaría.

Sabiendo que tu diseño no tendrá exactamente la misma medida de píxeles para cada columna que en tu computadora de diseño, hay algunas otras medidas que debes considerar para asegurar que tu cuadrícula escale sin problemas.

1. Trata de evitar usar bordes con textura en tus columnas, como este:

   

   Este tipo de cosas serían difíciles de usar para tus desarrolladores en un sitio web responsivo, porque no escalarían bien horizontalmente. Si haces la columna más ancha o más fina, los bordes texturizados presentarían complicaciones.

2. Los degradados horizontales son otra opción.

   

   Por la misma razón que el punto anterior, es decir, la incapacidad de escalar horizontalmente, no los uses. Sí, es posible con las nuevas propiedades de CSS3, pero si te diriges a un público con menos conocimientos tecnológicos, muchos no tendrán un navegador compatible y el efecto será inútil.

3. Si tienes un fondo con textura en una columna, asegúrate de que sea uno que se pueda matizar fácilmente. Sí: usas grano, grunge, lo que sea. No: utilices una fotografía, una ilustración o una imagen que no se pueda matizar.

Considerar las proporciones

Al reducir el diseño horizontalmente para adaptarlo a pantallas más pequeñas, llegará un momento en el que el texto de la página será demasiado grande. Por supuesto, ese titular de 100 pt se ve muy bien en tu psd, pero simplemente no funcionará en una pantalla de iPhone, por ejemplo: será demasiado grande y el texto tendrá que envolver varias líneas, reduciendo el impacto de tu decisión original.

En este caso, el desarrollador, utilizando CSS media queries, ajustará el tamaño de la fuente para que se adapte mejor a la pantalla. Esta es una decisión de diseño, así que, puedes opinar sobre eso, ¿no?

Para ayudar al desarrollador, así como para mantener la integridad de tu diseño original, debes decidir qué texto de la página debe permanecer constante, es decir, mantener el mismo tamaño en cualquier ancho de pantalla, y qué texto debe ajustarse. Un buen ejemplo del texto de tamaño constante sería el cuerpo de la página, o los pequeños encabezados que actúan como una versión más grande del cuerpo de la página.

También debes decidir cómo debe ajustarse el texto que se adaptará.

Esta es la forma incorrecta de hacerlo: x debería ser siempre 20pt más grande que y. No solo es una idea que supone una gran molestia para el desarrollador, sino que además no tiene mucho sentido en el lienzo responsivo, porque se está factorizando una constante, un valor que nunca cambiará sin importar el tamaño de la pantalla. Para RWD, esto es un gran error, ya que no tiene en cuenta la fluidez inherente de la web.

Esta es la forma correcta de hacerlo: x debería ser siempre 1,5 veces más grande que y. De esta forma se acepta que el único significado real que un diseño obtiene del tamaño de la fuente es lo grande o pequeño que es el texto en comparación con el resto del texto de la página. Un valor constante, como 24pt o 67pt, no tiene sentido.

Una vez que tengas todo esto claro, asegúrate de transmitir esta información al desarrollador. Es la única manera de asegurarse de que tus decisiones de diseñado, se reflejen en la página web real que los espectadores cargarán en su navegador y disfrutarán.

Hazlo modular

La última pieza del rompecabezas responsivo son las «media queries». En caso de que no estés familiarizado, las medias queries son una forma de aplicar reglas CSS a la página basadas (para nuestros propósitos) en el tamaño del navegador que las muestra.

El increíble poder de esto es que puedes ajustar, y de hecho rediseñar, todo el diseño de tu sitio web para que se adapte a un navegador más pequeño o más grande que aquel para el que lo diseñaste originalmente.

Para diseñar de la mejor manera posible para esta eventualidad, deberías empezar a pensar en las diferentes partes de tu diseño, como el contenido principal, la barra lateral, la cabecera y la navegación, no como piezas de un puzzle que deben permanecer en el mismo lugar unas con respecto a otras, sino como módulos que pueden ser reorganizados, redimensionados y barajados sin que se pierda su sentido original.

Un ejemplo: imagina que estás diseñando un sitio web con este aspecto (seguro que ya has trabajado con diseños similares):

La parte crucial de este ejemplo es la identificación de grupos de elementos que deben permanecer juntos en cualquier diseño. Por ejemplo, todos los enlaces de navegación deben permanecer juntos, porque de lo contrario no tendrían sentido. Se trata de un módulo, una sección de información que puede moverse entre los demás módulos sin perder su sentido.

Si construyes tu sitio considerando estos módulos, te será más fácil imaginar cómo se adaptará tu diseño a los diferentes tamaños de las ventanas. Por ejemplo:

Observa cómo, aunque los módulos están en lugares diferentes, siguen mostrando la misma información que el original, solo que en una forma más fácil de digerir para los dispositivos móviles u otros navegadores de tamaño diferente.

No hay necesidad de que hagas cambios en tu diseño para que esta modularidad funcione, es solo una forma diferente de ver la misma imagen. Sin embargo, esperamos que esta nueva perspectiva te ayude a tomar decisiones más informadas cuando trabajes en tus futuros proyectos de diseño.

Conclusión

Como muchas cosas en Internet, el diseño web responsivo es evolutivo, no revolucionario. Es simplemente el siguiente paso natural para la web, no un replanteamiento completo de todo. Como diseñadores, debemos adaptar continuamente nuestros flujos de trabajo, y esta vez no es diferente.

El diseño web responsivo es el futuro, o al menos lo será cuando los desarrolladores y los diseñadores lo adopten por igual. Como diseñadores y desarrolladores web, somos los únicos que tenemos el poder de ver cómo se materializa este maravilloso nuevo estándar. ¡Hazlo realidad, por ti, por mí, por todo el internet!