Diseño web responsivo, sensible, adaptable, …

Por ahora, hay un poco de lío y en español hay diferentes formas de llamarlo. Pero lo que sí que sabemos es que en inglés se dice “responsive web design”.

Un diseño web adaptable (es el término que más me gusta y el que mejor refleja lo que es) es un diseño de un sitio web que se adapta a diferentes dispositivos con el fin de lograr la mejor experiencia en cada uno de ellos. Tradicionalmente se lograba creando diferentes versiones de un mismo sitio web (incluso hace más de 10 años había sitios web que ofrecían una versión para Netscape y otra para Internet Explorer, ¡increíble! pensará alguno), pero eso es un completo error por diferentes motivos que te dejo que pienses tú mismo. Gracias a un uso correcto de HTML y CSS, podemos tener un único sitio web (un solo HTML), pero ofrecer múltiples posibilidades de visualización (múltiples CSS).

Hasta hace unos años, la forma tradicional de ofrecer diferentes CSS era detectando en el lado del servidor las características del navegador/dispositivo del usuario que se conectaba (por ejemplo, a través del user-agent). Según las características detectadas, se devolvía al usuario un CSS particular.

Hoy en día se puede seguir utilizando esa misma técnica, pero es mucho más sencillo y práctico utilizar los “media query”. Debido a que es mucho más sencillo y cualquiera lo puede hacer, en los últimos años se ha extendido su uso, en especial por el acceso a la Web desde dispositivos móviles.

En mi entrada Un par de ejemplos de diseño responsive están enlazados un par de ejemplos muy interesantes que aplican esta técnica.

La siguiente infografía en castellano (¡por fin publicamos una infografía en castellano!) nos resume qué es el diseño web sensible: Diseño web sensible. ¿¿¿Sensible???

[Actualización 12/10/2016]

Fundeu aclaró que se debe decir diseño adaptativo:

Diseño web adaptativo, mejor que adaptable o responsivo, es la traducción más ajustada en español de la expresión inglesa responsive web design.

Esta técnica de diseño y desarrollo web busca que las páginas se adapten automáticamente al dispositivo en el que se visualizan.

En este sentido, lo apropiado en español sería hablar de adaptativo, término que significa ‘perteneciente o relativo a la adaptación o a la capacidad de adaptación’, tal como indica el Diccionario académico, pues es precisamente lo que persigue este modo de diseñar: que las webs tengan capacidad automática de adaptación al soporte.

Adaptable, sin embargo, significa ‘capaz de ser adaptado’, y carece del sentido automático de adaptativo. Una página o un diseño adaptable indicaría que da la posibilidad de que sea modificado, por ejemplo por el usuario, como una opción de configuración (ajustar el tamaño de la letra, eliminar las imágenes, etc.).