{"id":4038,"date":"2021-03-18T13:00:00","date_gmt":"2021-03-18T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=4038"},"modified":"2021-09-23T11:17:46","modified_gmt":"2021-09-23T09:17:46","slug":"diseno-responsive-vs-adaptativo","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/diseno-responsive-vs-adaptativo\/","title":{"rendered":"Dise\u00f1o Responsive Vs Adaptativo"},"content":{"rendered":"\n

La irrupci\u00f3n de los m\u00f3viles en nuestras vidas inici\u00f3 una revoluci\u00f3n tecnol\u00f3gica e informativa. Con la llegada de los smartphones pod\u00edamos consultar una p\u00e1gina web desde cualquier punto en que nos encontr\u00e1ramos… solo que las webs no estaban pensadas para eso. As\u00ed naci\u00f3 la filosof\u00eda \u00abOne Web\u00bb<\/strong>, que pretend\u00eda que una misma web pudiera consultarse desde cualquier sitio en cualquier dispositivo<\/strong>.<\/p>\n\n\n\n

Qu\u00e9 es el dise\u00f1o responsive<\/h2>\n\n\n\n

El dise\u00f1o responsive es una estructuraci\u00f3n y modelado de la p\u00e1gina web pensado para adaptarse a los diferentes formatos y tama\u00f1os de pantallas<\/strong>. El objetivo es que una sola p\u00e1gina pueda abrirse tanto en un dispositivo peque\u00f1o (p.e. m\u00f3vil) como en uno grande (pantalla FullHD). Esto se complica, adem\u00e1s, 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).<\/p>\n\n\n\n

Esto se consigue mediante un archivo HTML con diferentes reglas CSS en funci\u00f3n del tama\u00f1o de la pantalla<\/strong>, las llamadas media queries<\/strong><\/em>. Se trata de reglas de estilo que se ejecutan s\u00f3lo en determinados tama\u00f1os de pantalla.<\/p>\n\n\n\n

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

width: 500px;\nwidth: 80%;<\/code><\/pre>\n\n\n\n
El dise\u00f1o responsive es el rey absoluto del contenido actual. Hoy en d\u00eda no te puedes permitir tener una p\u00e1gina web que no se lea bien en un m\u00f3vil, y, para ello, el sistema m\u00e1s usado y conocido es el responsive… pero existen otras alternativas.<\/p>\n\n\n\n
Qu\u00e9 es el dise\u00f1o adaptativo<\/h2>\n\n\n\n
El dise\u00f1o adaptativo sigue la misma filosof\u00eda que el dise\u00f1o responsive, solo que no dispone de las mismas herramientas. Si mencion\u00e1bamos antes que el pilar fundametnal del responsive eran las media queries, hay que recordar que no siempre han estado ah\u00ed para los desarrolladores web. Las media queries nacen con CSS3, antes de eso, par crear webs que se pudieran leer tanto en m\u00f3vil como en ordenador, hab\u00eda que buscarse las casta\u00f1as.<\/p>\n\n\n\n
Se establecieron tama\u00f1os de pantalla preestablecidos y, en funci\u00f3n del tama\u00f1o, se serv\u00edan diferentes versiones de la p\u00e1gina<\/strong>. No se usaba tanto CSS para el desarrollo de la web, pero el resto de c\u00f3digo era mucho m\u00e1s laborioso. Crear una p\u00e1gina de este modo exig\u00eda una labor de desarrollo costosa y dif\u00edcil de seguir.<\/p>\n\n\n\n
A\u00fan quedan p\u00e1ginas que se mantienen en el dise\u00f1o adaptativo, sin dar el salto a responsive. La m\u00e1s famosa, seguramente, es Wikipedia. Si accedes a su portada desde el ordenador podr\u00e1s observar que tiene una URL diferente que si accedes desde el m\u00f3vil.<\/p>\n\n\n\n
\"Wikipedia\"<\/figure><\/div>\n\n\n\n
\"Wikipedia
En efecto, desde el m\u00f3vil la ruta es diferente.<\/figcaption><\/figure><\/div>\n\n\n\n
Esa letra \u00abm\u00bb en la URL nos indica que se trata de otra ruta, donde nos sirven una versi\u00f3n diferente para m\u00f3vil.<\/p>\n\n\n\n
Mobile first<\/h2>\n\n\n\n
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\u00fan no lo ten\u00edas claro, hay un concepto m\u00e1s que debemos tener en cuenta: Mobile first. Es una filosof\u00eda de trabajo que plantea la versi\u00f3n m\u00f3vil como la principal<\/strong>, siendo el resto dependientes de esta. Es decir, debemos maquetar una web para m\u00f3vil y, despu\u00e9s, hacer las diferentes adaptaciones a dispositivos m\u00e1s grandes, como tablets, ordenadores y televisores.<\/p>\n\n\n\n
Google sigue esta filosof\u00eda y sus herramientas trabajan bajo esas premisas, por lo que, si vas a cuidar una versi\u00f3n de tu web, por regla general, ser\u00e1 mejor que cuides la versi\u00f3n m\u00f3vil.<\/p>\n\n\n\n
\"Web<\/figure><\/div>\n\n\n\n
Conclusi\u00f3n: Ventajas del dise\u00f1o responsive<\/h2>\n\n\n\n
Como conclusi\u00f3n, podr\u00edamos decir que el dise\u00f1o responsive es una versi\u00f3n mejorada del dise\u00f1o adaptativo. Nuestra recomendaci\u00f3n como desarrolladores web<\/a> y SEO<\/a> es, claramente, optar por un dise\u00f1o responsive. Si bien el dise\u00f1o adaptativo podr\u00eda ser una alternativa, las ventajas en favor del responsive son claras y m\u00faltiples. Repasamos las principales:<\/p>\n\n\n\n