El diseño web
El diseño web es la disciplina que decide cómo se ve y cómo se lee un sitio en un medio que no tiene tamaño fijo: la misma página tiene que funcionar en una pantalla de escritorio, en una tableta y en un celular, sin que nadie vuelva a diseñarla para cada uno.
Término
El diseño web (diseño responsivo)
Categoría
Disciplina de pantalla, sin formato fijo
No confundir con
El desarrollo web, que construye lo que el diseño decidió
Dónde se decide
En cómo se comporta el contenido al cambiar el ancho
Qué es el diseño web
El diseño web resuelve un encargo que ninguna disciplina impresa tiene: entregar una sola pieza que se recompone sola. Ethan Marcotte publica en 2010, en A List Apart, el artículo Responsive Web Design, y ese nombre quedó para el enfoque que trata el ancho como una variable en lugar de como un dato del encargo. Desde entonces el diseño web se define por lo que hace cuando el ancho cambia, no por el aspecto de una sola captura de pantalla.
Qué produce un encargo de diseño web
Un encargo de diseño web produce cuatro entregables, tales como el sistema de retícula fluida, la escala tipográfica, la biblioteca de componentes y la especificación de qué ocurre en cada punto de quiebre. Ninguno es una imagen: son reglas. Debajo de todos hay un documento estructurado, y esa estructura no es un detalle técnico, porque de ella dependen el buscador, el lector de pantalla y el índice. Es la idea de web semántica que Tim Berners-Lee, James Hendler y Ora Lassila plantean en The Semantic Web, publicado en Scientific American en 2001: el marcado dice qué es cada cosa, no sólo cómo se ve.
Qué decide quien lo ejerce, y contra qué criterio
Quien ejerce el diseño web decide un programa, no una página. Karl Gerstner formula esa idea en Designing Programmes, de 1964: la retícula se plantea como un programa que resuelve una familia de casos, no como una plantilla que resuelve uno. En pantalla eso es literal, porque el caso concreto lo elige el lector al abrir el sitio en el aparato que tenga a la mano. El criterio es el contenido: el punto de quiebre se pone donde el texto empieza a leerse mal, no donde termina el catálogo de aparatos.
De qué fundamentos depende: color de pantalla, tipografía y retícula
El color en pantalla es aditivo: la pantalla emite luz y el rojo, el verde y el azul a máxima intensidad dan blanco, al revés que la tinta, que resta luz reflejada por el papel. El espacio estándar de la pantalla es sRGB, propuesto por HP y Microsoft en 1996, y sobre él trabaja casi todo lo que se publica en la web. La tipografía aporta la segunda restricción, la medida de línea, y la retícula fluida la tercera: las columnas se expresan en proporciones y no en milímetros, porque el milímetro dejó de estar disponible.
Con qué se confunde: desarrollo, interfaz y los dos sentidos de adaptable
El diseño web se confunde con el desarrollo web, que es quien construye: uno decide el comportamiento, el otro lo implementa, y la frontera se nota cuando algo se ve bien y se comporta mal. También se confunde responsivo con adaptable, dos enfoques distintos.
| Enfoque | Cómo trata el ancho | Qué pasa en un tamaño no previsto |
|---|---|---|
| Responsivo | Retícula fluida y consultas de medios | Se recompone: no había que preverlo |
| Adaptable | Un juego de anchos fijos entre los que salta | Cae al ancho fijo más cercano |
| Fijo | Un solo ancho, decidido de antemano | Aparece barra horizontal o recorte |
Dónde se ve el resultado: la tienda, el trámite y el tablero
El resultado se ve en cualquier sitio que siga siendo usable con una sola mano: una tienda, un formulario de trámite, un periódico digital. Se ve sobre todo en los tableros de datos abiertos en el navegador, donde el enfoque responsivo cuesta más porque una tabla ancha no se recompone sola y hay que decidir qué columnas sobreviven en pantalla angosta. La comparación con el papel es directa: un informe en A4 mide siempre 210 × 297 mm, y una página web no mide nada hasta que alguien la abre.
Cómo se estudia y cómo se juzga un sitio
Un sitio se juzga cambiando el ancho de la ventana y mirando qué se rompe primero, no abriendo una captura a tamaño de escritorio. Ese es el criterio que dejó instalado el artículo de Marcotte de 2010, y es el mismo con el que conviene mirar el portafolio de un estudio: buscar un profesional o una agencia en una ciudad concreta, Guadalajara por ejemplo, es una pregunta de contratación, y lo que se juzga sigue siendo si se puede reconstruir la decisión que hay detrás de cada pieza.
Qué parte del trabajo es digital y cuál sobrevive al código
Todo el soporte del diseño web es digital, así que la pregunta útil es cuál de sus decisiones sobrevive a que se reescriba el sitio entero. El color se anota en hexadecimal, seis dígitos, 256 valores por canal y 16.777.216 combinaciones, y esa notación se hereda intacta de una tecnología a la siguiente, igual que la jerarquía, la medida de línea y el orden del contenido. Lo que caduca es la implementación, y por eso se documenta la regla y no sólo la pantalla.