logo
  • Diseño web para móvil: ¿adaptativo o responsivo?

  • Diferencias entre el diseño adaptativo y el responsivo y principales ventajas e inconvenientes de cada uno de ellos

  • Publicado el Viernes 30 de Octubre del 2015. Autor:María Antonia Lacasa Benavente

  • Diseño web para móvil: adaptativo o responsivo (adaptative/responsive), diferencias, ventajas e inconvenientes de cada uno
  • Según la Encuesta sobre Equipamiento y Uso de Tecnologías de Información y Comunicación en los Hogares del INE del 2014, los internautas españoles se conectan a la red mayoritariamente a través de smartphone, superando en ese año por primera vez al resto de conexiones (ADSL, fibra, moden...). Es una tendencia que se confirma en el resto del mundo. Por ejemplo, en Estados Unidos el 52% del tiempo que los internautas emplean en navegar por la red lo hacen a través de dispositivos móviles, mientras que a través de ordenador emplean un 41%. Está claro que, a la vista de estos datos, no se puede plantear un diseño web que no se adapte plenamente a estos dispositivos.

    La guía de desarrollo de Mozilla Developers Network (MDN), distingue entre dos aproximaciones distintas a la hora del plantear un diseño adaptable: la adaptativa y la responsiva, y explica que en los dos casos se pretende optimizar la experiencia de usuario en los distintos dispositivos, adaptándose a los diferentes tamaños de ventana, resoluciones, contextos de uso, mecanismos de control...

    El diseño responsivo (responsive) trabaja bajo el principio de la flexibilidad: una única página fluida que se ve bien en cualquier dispositivo. Las páginas responsivas utilizan media queries, grids flexibles e imágenes adaptables para crear una experiencia de usuario que cambie y se adapte en función de una multitud de factores.

    El diseño adaptativo se acerca más a la definición moderna de mejora progresiva. En vez de un único diseño flexible, el diseño adaptativo detecta el dispositivo y otros factores y proporciona la presentación y disposición de elementos apropiada en función del tamaño de la ventana y otras características.

    La principal diferencia entre ambas aproximaciones es que el diseño responsivo parte de una única presentación para adaptarla a cualquier dispositivo/pantalla/resolución, y el diseño adaptativo dispone de distintas presentaciones optimizadas para cada uno de los diferentes dispositivos/pantallas/resoluciones que se consideren.

    La principal ventaja de construir una web con un diseño responsivo es que al ser una única presentación, su coste es menor que el de del diseño adaptativo. Por otro lado, la principal ventaja del diseño adaptativo es que al estar dirigido y optimizado específicamente para cada uno de los dispositivos/pantallas/resoluciones, la experiencia de usuario y los tiempos de carga en smartphone tienden a ser mejores que en el caso de diseños responsivos.

    En cualquier caso, optar por una u otra estrategia de diseño depende de los requerimientos y presupuesto del cliente, de los dispositivos más utilizados por el público al que se dirige la web, y del objeto que persigue la misma.
  • Volver a la lista de posts

¿Hablamos?

Si crees que podemos ayudar a tu empresa, ponte en contacto con nosotros y hablemos sobre lo que podemos construir juntos.