{"id":970,"date":"2026-05-28T13:53:33","date_gmt":"2026-05-28T13:53:33","guid":{"rendered":"https:\/\/www.gloobs.com\/blog\/?p=970"},"modified":"2026-06-02T07:50:29","modified_gmt":"2026-06-02T07:50:29","slug":"diseno-adaptativo-disenar-en-funcion-de-cada-usuario","status":"publish","type":"post","link":"https:\/\/www.gloobs.com\/blog\/diseno-adaptativo-disenar-en-funcion-de-cada-usuario\/","title":{"rendered":"Dise\u00f1o adaptativo: dise\u00f1ar en funci\u00f3n del comportamiento de cada usuario"},"content":{"rendered":"

[et_pb_section fb_built=\u00bb1″ admin_label=\u00bbsection\u00bb _builder_version=\u00bb4.16″ global_colors_info=\u00bb{}\u00bb][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.16″ background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.16″ custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text disabled_on=\u00bboff|off|off\u00bb _builder_version=\u00bb4.27.5″ _module_preset=\u00bbdefault\u00bb custom_margin=\u00bb0px||||false|false\u00bb custom_padding=\u00bb0px||||false|false\u00bb hover_enabled=\u00bb0″ locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n

\n
\n

Dise\u00f1o adaptativo: dise\u00f1ar en funci\u00f3n del comportamiento de cada usuario<\/h1>\n

Llevas a\u00f1os trabajando con layouts fluidos, breakpoints y unidades relativas. Todo eso funciona. Pero hay un l\u00edmite que el dise\u00f1o responsive no cruza: el viewport. Y m\u00e1s all\u00e1 de ese l\u00edmite hay una capa de dise\u00f1o muy poco explorada. El dise\u00f1o adaptativo hace que el dise\u00f1o se adapte al comportamiento del usuario y no a la resoluc\u00edon de pantalla.<\/p>\n

Un componente responsive en un m\u00f3vil de 390px se ve igual si el usuario est\u00e1 leyendo despacio, si est\u00e1 haciendo scroll a toda velocidad buscando algo, o si lleva diez minutos sin tocar la pantalla. La interfaz no lo sabe. Y cuando no lo sabe, toma decisiones gen\u00e9ricas que no siempre son las mejores posibles.<\/p>\n

El dise\u00f1o adaptativo<\/strong> va un paso m\u00e1s all\u00e1: se trata de pensar los componentes no solo en funci\u00f3n del espacio disponible, sino en funci\u00f3n de lo que el usuario est\u00e1 haciendo en ese preciso momento, en funci\u00f3n de su comportamiento.<\/p>\n<\/header>\n

\n

Primero lo b\u00e1sico: \u00bfqu\u00e9 diferencia hay exactamente?<\/h2>\n

El dise\u00f1o responsive reacciona al entorno. El tama\u00f1o de la pantalla, la orientaci\u00f3n, la resoluci\u00f3n. Cosas que el dispositivo define y que el usuario no cambia durante la sesi\u00f3n.<\/p>\n

El dise\u00f1o adaptativo reacciona al comportamiento<\/strong>. Lo que el usuario est\u00e1 haciendo ahora mismo: si est\u00e1 en modo lectura concentrada, si est\u00e1 haciendo scroll r\u00e1pido buscando algo, si acaba de entrar en un formulario para rellenar un dato, si lleva dos minutos sin moverse.<\/p>\n\n\n\n\n\n\n\n\n
RESPONSIVE<\/strong><\/th>\nADAPTATIVO<\/th>\n<\/tr>\n<\/thead>\n
Reacciona al viewport<\/td>\nReacciona al comportamiento<\/td>\n<\/tr>\n
Se\u00f1al: ancho de pantalla<\/td>\nSe\u00f1al: interacci\u00f3n del usuario<\/td>\n<\/tr>\n
Cambia al redimensionar<\/td>\nCambia en tiempo real<\/td>\n<\/tr>\n
Contexto: dispositivo<\/td>\nContexto: intenci\u00f3n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Son complementarios, no excluyentes. Un componente puede \u2014y deber\u00eda\u2014 ser las dos cosas: que se recoloque bien en cualquier viewport y que adem\u00e1s reaccione al usuario dentro de ese viewport.<\/p>\n<\/section>\n

\n

Las se\u00f1ales que el usuario emite sin saberlo<\/h2>\n

El navegador recibe informaci\u00f3n del usuario constantemente. La mayor\u00eda de esa informaci\u00f3n la ignoramos porque para maquetar con breakpoints no la necesitamos. Pero si empiezas a pensar en dise\u00f1o adaptativo, son exactamente las se\u00f1ales que te interesan.<\/p>\n

Velocidad de scroll<\/h3>\n