BBVA API Market
Muchos profesionales piensan estar realizando diseños ‘responsive’ cuando en realidad están trabajando con una arquitectura ‘adaptive’. La realidad es que ambos diseños son muy similares, pero con unas diferencias clave a tener muy en cuenta.
El diseño ‘adaptive’ forma escalones dependiendo del tamaño de la pantalla. A medida que el tamaño de la pantalla del dispositivo cambia, se ofrecen diferentes archivos o un mismo archivo CSS aplica ciertas clases y estilos distintos. Tradicionalmente los diseñadores utilizan tres o cuatro escalones distintos: pequeño (centrado normalmente en un smartphone), mediano (tablets y monitores de escritorio pequeños), grande (tablets grandes o ventanas de navegador de escritorio a pantalla completa) y por último, en algunos casos, incluso extragrande (para monitores de escritorio con mucha más resolución de lo habitual).
Otro punto clave del diseño ‘adaptive’ es que intenta averiguar mediante elementos externos como JavaScript una estructura apropiada de forma predeterminada, sin tener en cuenta la pantalla en la que está siendo reproducido. Por ejemplo, cuando un navegador de escritorio muestra un diseño pensado para 1000 píxeles de ancho como mínimo, aunque la ventana haya sido desplazada a un lateral del monitor del usuario con 500 píxeles en total.
El diseño ‘responsive’, por el contrario, se deshace de estos escalones fijos y crea una estructura fluida y en cierto sentido agnóstica de la pantalla en la que se está reproduciendo. Utilizan porcentajes para especificar el ancho de los elementos de una estructura, y en ocasiones también el alto, en la pantalla. Para las unidades de tamaño de las tipografías, márgenes y otros atributos clave, en ‘responsive’ se utilizan unidades relativas como los porcentajes, los em y ex.
Al ser fluido, utiliza puntos de ruptura para que determinados elementos sean recolocados en la pantalla, e incluso ocultados, a partir de que su tamaño se convierta en una aberración. Por ejemplo: un menú que debería cubrir el 20% del ancho de una pantalla se vería reducido a 64 píxeles de ancho en una ventana de 320 píxeles. En ese caso, lo mejor será desplazarlo a la parte inferior, cambiar su contenido, u ocultarlo.
Si se está trabajando con un proyecto ya finalizado que mantener pero adaptar a las nuevas realidades, optar por elementos del diseño ‘adaptive’ puede ahorrar trabajo y recursos. Si la estructura no es muy compleja, muchos diseñadores no tendrán mayor problema en saber qué puntos clave de su diseño cambiar con media queries o sirviendo distintos ficheros de estilos dependiendo del navegador.
Sin embargo, si se está planteando la base de un nuevo proyecto desde cero, utilizar las claves del diseño ‘responsive’ acaba siendo una mejor opción no solo para empezar, sino también a largo plazo.
En realidad, lo más inteligente es siempre utilizar la mejor herramienta para cada trabajo. Esto se traduce en que a veces lo mejor, más rápido o más adecuado es utilizar elementos responsive y ‘adaptive’ a la vez. Combinando las eficiencias de ambos métodos un diseñador o equipo de diseño profesional podrá crear con menos esfuerzo un proyecto más robusto.
Con un catálogo de dispositivos cada día más variado desde las que los visitantes leen a los sitios web de todo el mundo, se hace imperativo poder dominar un diseño que escale, adapte y mute para satisfacer no solo la pantalla del mismo; también sus capacidades de conexión y de procesador.
Es importante no servir más activos de diseño de los necesarios al usuario, y tomar decisiones inteligentes desde que se ponen las primeras piezas de una nueva estructura web. Servir iconos que no se van a ver o cargar tipografías que no están soportadas son algunas de las más obvias, pero también se debe evitar la carga de texturas específicas de elementos que un dispositivo en concreto no vaya a poder mostrar.
Utilizar diseño ‘responsive’ o ‘adaptive’ es una de las decisiones más importantes de un proyecto web nuevo o establecido, y conocer las debilidades y puntos fuertes de ambos métodos permitirá al equipo de diseño trabajar de forma más eficiente.
¿Te interesan las APIs financieras? Descubre todas las que te ofrece BBVA
Una API es el mecanismo más útil para conectar dos softwares entre sí para el intercambio de mensajes o datos en formato estándar como XML o JSON. Así es como se convierte en un instrumento para buscar ingresos, abrirse al talento, innovar y automatizar procesos.
Las APIs pueden ser un gran apoyo a la hora de automatizar procesos empresariales Las empresas, a menudo con foco en las PYMES, dedican demasiadas horas-persona a procesos empresariales que consumen un tiempo precioso, incurriendo con ello en errores que una máquina jamás tendría. ¿Cómo puede la automatización de procesos empresariales (BPA) ayudar a estas […]
Se espera que durante los próximos años se regule el ‘open finance’, lo que dará lugar a un nuevo ecosistema de datos abiertos El open finance está abriéndose paso en el terreno legal mediante la consolidación de varias iniciativas que le darán blindaje jurídico. Una vez esto se haya completado, los clientes confiarán en un […]
