Diseño  Adaptativo

Se ve bien – donde quiera que te vean

… como un trébol, solía decir mi viejo sacerdote. “Tres hojas, pero una hoja.”

Monjas a la carrera, 1990

Hace una década la única forma para ver páginas de internet era con el ordenador pero desde entonces tenemos smartphones, tabletas y ahora incluso smart tv.

Una página creada para que se vea bien en un ordenador con una pantalla grande no se ve tan bien en una tableta y peor aún en un smartphone. Con los avances en tecnología móvil, planes de datos más baratos y wi-fi gratis en prácticamente cada café y bar, nos conectamos ahora más a través de nuestros fieles compañeros móviles que por PC.

Las mismas fuerzas que han propulsado los nuevos estándares de HTML y ECMAScript que han resultado en los nuevos frameworks de programación cliente como Angular, han empujado nuevos estándares en diseño, específicamente CSS.

De forma similar a la evolución de JavaScript, las mejoras en las tecnologías base para diseño han generado nuevos frameworks que simplifican la aplicación de la nueva funcionalidad en diseño para los diseñadores. Entre los frameworks que existen, Jarmit Consulting ha optado para usar Bootstrap – uno de los frameworks más maduros y probados que existen.

Sitio web de la Federación de Cooperativas Agro-alimentarias de Euskadi creado por Jarmit Consulting

¿Pero qué es el diseño adaptativo?

En términos sencillos, el diseño adaptativo es el posicionamiento de contenido en la página según el ancho disponible.

Esto significa que la misma página tiene las instrucciones de diseño para varias anchuras, conocido como ‘breakpoints’, que corresponde con tipos de dispositivos distintos – tres diseños en uno. Una página única que funciona y se visualiza correctamente en todos los dispositivos es mucho más simple de mantener que múltiples páginas duplicando el mismo contenido.

El diseño adaptativo no está restringido únicamente a sitios web. En Jarmit Consulting usamos Bootstrap en nuestras aplicaciones creado con Angular para dar el usuario la mejor experiencia posible indistintamente de qué dispositivo usa para conectarse. En este ejemplo puedes ver como un formulario de una aplicación alojado en SharePoint Online se modifica automáticamente cuando la anchura disponible cambia.