Postgrado en Marketing Online Comunicación y marketing digital

Universitat Autònoma de Barcelona

Diferencias entre el diseño responsive y adaptive

responsive vs adaptive

Con la explosión de los smartphones, tablets y demás dispositivos fuera de los tradicionales PCs, tanto diseñadores como desarrolladores se han encontrado con el problema de poder mostrar correctamente toda la información en cualquier tipo de pantalla. No es un problema nuevo, pero sí que ahora ha cobrado gran importancia ya que la cuota de mercado es realmente importante.

Originariamente esto se ha solucionado de manera natural mediante CSS usando medidas relativas, los famosos em o indicando los tamaños en porcentajes. Es lo que se conocía como diseño líquido o flexible, que además hace gran uso de las propiedades de posicionamiento del CSS (float, relative, etc.).

Poco a poco aparecen dos conceptos nuevos como son responsive y adaptive. Que muchas veces se postulan como antagonistas pero que en realidad son dos maneras de atacar el problema pero siempre pensando en la utilización de estándares y las nuevas posibilidades de HTML5 y, sobre todo, CSS3 y JavaScript.

Adaptive podemos decir que responde a las necesidades del dispositivo que lo está viendo en cada momento. Esto significa que puede variar la visualización e incluso el contenido. Para ello utiliza técnicas como Media Queries para aplicar reglas concretas (incluso hojas de estilo completas) que modifican la apariencia dependiendo del dispositivo. Pero no solamente esto, también se pueden aplicar técnicas desde el servidor, enviando un HTML o CSS diferente. Con estas acciones, podemos ocultar información que un Smartphone de 4” no nos interesa mostrar pero sí en una Tablet de 7”.

Este proceso implica un diseño específico para cada tipo de dispositivo al que queramos atacar. Es decir, en el proceso de diseño de nuestro sitio en realidad estaremos diseñando varios sitios: uno para cada tipo de visualización. Esto nos permite obtener visualizaciones muy personalizadas mejorando el impacto en el visitante a cambio de aumentar el tiempo invertido en la fase de diseño y desarrollo.

Por otro lado el responsive sigue el camino del antiguo líquido y del concepto de mejora progresiva. Esto significa que diseñamos nuestro sitio de menos capacidades a más y por lo tanto el navegador automáticamente sabrá qué hacer ya que si encuentra opciones que no puede manejar las evitará.

Por ejemplo, si tenemos un menú desplegable al pasar el ratón por encima, en un PC funcionará pero no en un dispositivo táctil. Para solucionarlo lo primero que se hace es hacer que funcione para sistemas táctiles (por ejemplo que se despliegue al hacer clic) y posteriormente se hace que funcione con el hover que haría el ratón. Utilizando Media Queries y JavaScript podemos llegar a hacer que se adapte toda la información y la visualización de manera natural.

Un ejemplo claro es cuando en un sitio vemos un menú a la izquierda y al verlo desde el teléfono este menú pasa a la parte inferior. Aquí el maquetador solamente ha hecho que el sistema sea flexible y el navegador lo ha colocado donde ha podido. Pero ¿cuál es mejor? No hay ganador en esta batalla, depende de lo que necesitemos. Pero por hacer una comparativa podríamos ver la siguiente tabla:

 

adaptative vs responsive

 

Para decidir qué estrategia seguir es necesario determinar qué experiencia queremos para el usuario, además de los costes en los que podemos incurrir. Pensad que muchas veces el tiempo de carga del que hablamos puede variar en centésimas de segundo o la tasa de transferencia en pocos kilobytes.

En cualquier caso, al diseñar un sitio, no hay que olvidar el concepto de mejora evolutiva ya que así aseguramos una correcta visualización en todos los dispositivos. Después, dar el salto a cualquiera de las dos opciones dependerá del sitio, el presupuesto y la experiencia que queramos dar al usuario.

 

* Más información del Postgrado en Comunicación y Marketing Digital

Alfredo Ruiz

Experto en estrategias de comunicación y contenidos para empresas y personas. Especializado en posicionamiento de marca, Content Marketing y mejora de Currículum. Autor de “Guapos y pobres” y otros libros inclasificables. Apasionado de la divulgación y la comunicación. Más sobre mí en www.madeinalf.com/home


Danos tu opinión!

Danos tu opinión!

mensaje

name *

email *