Blog / Diseño Responsive Vs Adaptativo

La irrupción de los móviles en nuestras vidas inició una revolución tecnológica e informativa. Con la llegada de los smartphones podíamos consultar una página web desde cualquier punto en que nos encontráramos… solo que las webs no estaban pensadas para eso. Así nació la filosofía «One Web», que pretendía que una misma web pudiera consultarse desde cualquier sitio en cualquier dispositivo.

Qué es el diseño responsive

El diseño responsive es una estructuración y modelado de la página web pensado para adaptarse a los diferentes formatos y tamaños de pantallas. El objetivo es que una sola página pueda abrirse tanto en un dispositivo pequeño (p.e. móvil) como en uno grande (pantalla FullHD). Esto se complica, además, con el hecho de que existen varios navegadores web y tenemos que crear una web compatible con todos ellos (no, Internet Explorer no cuenta ya como navegador).

Esto se consigue mediante un archivo HTML con diferentes reglas CSS en función del tamaño de la pantalla, las llamadas media queries. Se trata de reglas de estilo que se ejecutan sólo en determinados tamaños de pantalla.

A ellas se suman herramientas CSS realmente versátiles, como flexbox o CSS grid. Ambas permiten crear estructuras dinámicas que fluyen dentro de contenedores o situar elementos en zonas concretas de la pantalla. Y, por supuesto, un concepto clave en los elementos responsive es la anchura variable (frente a la fija) y las medidas relativas. Para entenderlo con un ejemplo fácil, si indico que un elemento mide 500px de ancho y la pantalla tiene solo 400, el elemento quedará cortado. Una medida relativa podría ser decirle que ocupe el 80% de la pantalla, lo que hará que el elemento tenga una anchura variable en función del dispositivo.

width: 500px;
width: 80%;

El diseño responsive es el rey absoluto del contenido actual. Hoy en día no te puedes permitir tener una página web que no se lea bien en un móvil, y, para ello, el sistema más usado y conocido es el responsive… pero existen otras alternativas.

Qué es el diseño adaptativo

El diseño adaptativo sigue la misma filosofía que el diseño responsive, solo que no dispone de las mismas herramientas. Si mencionábamos antes que el pilar fundametnal del responsive eran las media queries, hay que recordar que no siempre han estado ahí para los desarrolladores web. Las media queries nacen con CSS3, antes de eso, par crear webs que se pudieran leer tanto en móvil como en ordenador, había que buscarse las castañas.

Se establecieron tamaños de pantalla preestablecidos y, en función del tamaño, se servían diferentes versiones de la página. No se usaba tanto CSS para el desarrollo de la web, pero el resto de código era mucho más laborioso. Crear una página de este modo exigía una labor de desarrollo costosa y difícil de seguir.

Aún quedan páginas que se mantienen en el diseño adaptativo, sin dar el salto a responsive. La más famosa, seguramente, es Wikipedia. Si accedes a su portada desde el ordenador podrás observar que tiene una URL diferente que si accedes desde el móvil.

Esa letra «m» en la URL nos indica que se trata de otra ruta, donde nos sirven una versión diferente para móvil.

Mobile first

Con lo planteado hasta ahora ya nos ha tenido que quedar claro la importancia de poder ver nuestra web en todo tipo de dispositivos. Pero, por si aún no lo tenías claro, hay un concepto más que debemos tener en cuenta: Mobile first. Es una filosofía de trabajo que plantea la versión móvil como la principal, siendo el resto dependientes de esta. Es decir, debemos maquetar una web para móvil y, después, hacer las diferentes adaptaciones a dispositivos más grandes, como tablets, ordenadores y televisores.

Google sigue esta filosofía y sus herramientas trabajan bajo esas premisas, por lo que, si vas a cuidar una versión de tu web, por regla general, será mejor que cuides la versión móvil.

Conclusión: Ventajas del diseño responsive

Como conclusión, podríamos decir que el diseño responsive es una versión mejorada del diseño adaptativo. Nuestra recomendación como desarrolladores web y SEO es, claramente, optar por un diseño responsive. Si bien el diseño adaptativo podría ser una alternativa, las ventajas en favor del responsive son claras y múltiples. Repasamos las principales:

• Multi-dispositivos. Podemos consultar una web desde cualquier tipo de dispositivo de una manera cómoda y legible. Esto también lo lograría el diseño adaptativo.
• Página única. Con una sola página damos cobertura a todo tipo de dispositivos, lo que facilita la gestión de contenidos y el desarrollo del proyecto. Esto es una gran diferencia con el diseño adaptativo.
• Esto también hace que haya una única URL para el contenido, lo que facilita mucho el trabajo SEO y las redirecciones.
• Google lo pide. No quieras discutir con Google.