Conceptos sobre diseño web responsive

what-is-responsive-web-design-700x466[1]El diseño adaptable o responsive web design es una manera posible de enfrentar los diversos problemas que nos trae la web actual. Algunas de estas características que nos hace elegirlo por sobre otras opciones son:

Ubicuidad: Una sola web

La web está en todas partes y es una sola web. Es lo que la hace poderosa. Continuamente se agregan dispositivos desde donde podemos acceder y las personas acceden por donde quieren y pueden. La ropa, los electrodomésticos, las paredes, el aire.

Como diseñadores esto nos propone un desafío gigante.

Tenemos que ofrecer paridad de contenidos, facilitar el acceso, dar la mejor opción de legibilidad posible, pero el contenido debe estar disponible para cualquier dispositivo.

No hay que penalizar al usuario por el dispositivo o el navegador por el que accede, sino tratar de darle lo mejor que podamos en cada caso.

Flexibilidad: device agnostic

Un televisor, una heladera, una campera, unos anteojos, un reloj, un auto… navegación subcutánea.  Todo puede ser un dispositivo con acceso a internet. Cada uno además tendrá un sistema operativo distinto y  -quizás- opciones múltiples de navegadores.

¿Podemos inferir según el dispositivo que detectamos qué tipo de uso le dará o qué velocidad de acceso tiene? Además de que es muy común fallar en la detección, es casi imposible sacar conclusiones según si usa una tablet, un televisor, una notebook o un teléfono. ¿Y si usa los anteojos Google Glass? Por la disponibilidad y los crecientes cambios tecnológicos, es hacer diseño ficción. Puedo dar más opciones si detecto por ejemplo el GPS, pero por que no tenga GPS no debo concluir que poner un mapa es inútil.

La respuesta es ser flexibles. Utilizar breakpoints -puntos de quiebre- en lugar de diseñar por tipo de dispositivo.

Intentar adivinar qué dispositivo utiliza para así controlar es seguir dentro del paradigma anterior.

Rendimiento

Al principio para sostener el control puede que multipliquemos el contenido, ocultando los elementos según qué visualización aplique.

Para mejorar el rendimiento lo mejor es utilizar cargas condicionales. Por ejemplo, cargar una imagen pequeña o grande según el breackpoint, va a permitir una mejor performance y evitar carga de datos innecesarios.

Los CMS pueden ayudarnos en esta tarea, creando diferentes instancias en el momento de la carga.

Tatoo interfaceMejora progresiva

Una de las características de la web con la que debemos trabajar, es la variedad de navegadores y los constantes cambios y la superposición de versiones.

Las versiones anteriores y los navegadore más viejos todavía siguen en uso. Usando detectores de capacidad podemos entregar contenido discriminando las posibilidades de los navegadores.

Y siempre apegarse a los estándares.

Soporte vs. optimización: podemos dar mejores capacidades si es más moderno el navegador, pero no por ello imposibilitar el acceso a las funciones básicas a las versiones anteriores.

Future friendly

Recién mencionaba la navegación web subcutánea, lo cual hoy parece un delirio. ¿Realmente lo es? En tecnología, el futuro -incluso el cercano- es impredecible.

Lo mejor que podemos hacer es pensar en el presente de manera flexible y así llegaremos, con cierta elegancia al menos, al futuro.

 

Algunos divertidos contraejemplos en los que no aplicaron estos criterios wtfmobileweb.com.

Vía | bradfrost

2 comentarios

  • Súper interesante visión de lo que debe ser el diseño “responsive” o adaptable de sitios web. Es un aspecto crítico para el correcto diseño, en un mundo en el que hay dispositivos como nichos de mercado puedan existir. El riesgo de perder prospectos, es bastante grande, por lo que a la hora de contratar un diseñador, una empresa debe saber muy bien las diferentes posibilidades, y no siempre es el caso.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *