Se trata de una filosofía de diseño que consiste en adaptar la apariencia de los sitios web a diferentes dispositivos y pantallas. El diseño adaptativo tiene como objetivo hacer modificaciones según el tipo de dispositivo, el tamaño de la pantalla, la resolución, el sistema operativo y la capacidad de memoria.
¿Qué es el Diseño Adaptativo?
Se trata de una filosofía que fue mencionada por primera vez en una lista de artículos publicados en la revista A List Apart, publicación especializada en desarrollo web. Está lista de artículos fue escrita por Ethan Marcotte, un reconocido diseñador web norteamericano. Más adelante, cambiaría el término por responsive web design, lo que se traduciría como “diseño web responsivo”.
De esta forma, se busca definir a esos sitios web que cuentan con características adaptables a diferentes dispositivos, es decir, que tendrán una apariencia y una experiencia de navegación muy similar, sin importar si se accede a través de un ordenador, smartphone, portátil o tablet.
¿Para qué sirve el Diseño Adaptativo?
Los profesionales en la materia lo aplican, ya que al utilizar estas modificaciones en el lenguaje HTML y CSS están cubriendo la necesidad de los usuarios de acceder a los sitios web desde cualquier pantalla, siendo efectivo incluso para atraer una mayor cantidad de tráfico.
Al mismo tiempo, contar con estas modificaciones permite que el sitio acceda a un mejor posicionamiento web, ya que desde el 2010 Google tiene en cuenta a las plataformas con estas modificaciones para posicionarse en los primeros lugares.
Diseño adaptativo vs responsivo
Aunque estos términos suelen utilizarse en el mismo contexto, las prácticas difieren un poco entre sí, pero tienen la misma finalidad, adaptar el sitio web a diferentes dispositivos. En este sentido, el adaptativo consiste en desarrollar versiones diferentes del sitio web para cada dispositivo. Esta práctica suele ser la más recomendada porque la versiones se encuentran totalmente personalizadas, por lo que se reduce el mínimo de errores y se mejora la experiencia de navegación.
Por otro lado, el responsivo consiste en modificar el sitio web original para que tome diferentes formas dependiendo del dispositivo desde donde se accede. Aunque esta es una práctica muy popular, no es muy recomendada ya que no se adapta correctamente a diferentes pantallas según la marca del dispositivo y otras funcionalidades avanzadas.
Ejemplo de Diseño Adaptativo
Es difícil determinar cuándo sitio web cuenta con diseño adaptativo o responsivo, sin embargo, los usuarios pueden tener en cuenta diferente ejemplos, como el sitio web de YouTube. La ventana disponible para el vídeo se adapta según la pantalla, si se utiliza la aplicación móvil, se ajusta a la posición del dispositivo de forma vertical u horizontal.
Igualmente, esta vista no es la misma sí se accede al sitio web a través de un ordenador. Dependiendo del tamaño de la pantalla, el usuario puede visualizar los vídeos recomendados, los comentarios y otras secciones de la página sin hacer scroll. Asimismo, la aplicación de YouTube suele mostrarse de forma diferente dependiendo del tipo de móvil, por ejemplo, en los smartphones de Samsung no se puede seguir reproduciendo el vídeo al salir de la aplicación, pero en los móviles de Xiaomi si se puede acceder a esta opción.
Más información sobre Diseño Adaptativo
Tener una plataforma adaptable es más que una obligación ¿No lo crees? Mira cómo Google puede penalizarte si no estás adatado.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.