Responsividad en los sitios web

Este artículo está inspirado en A Dao of Web Design de Joh Alsopp,un gran artículo escrito hace mas de diez años que aún sigue vigente y a su vez está inspirado en el Tao Te King  que ilustra elegantemente la importancia del diseño flexible de sitios web. Debo advertir que mi versión os mucho mas árida, aunque igual puede serles de utilidad.

EL PROBLEMA

Antes de  Internet, el mundo estaba acostumbrado a ver texto  imágenes solo en libros y anuncios, en formatos firmemente establecidos para cada industria. Así que el trabajo del diseñador  quedaba limitado por el tipo de medio al que iba dirigido el mensaje.

Con el surgimiento de la madre de las redes, http, html, el navegador y demás tecnologías que hoy en día son ubicuas los diseñadores se encontraron con una gran diversidad de dispositivos con diferentes tamaños y resoluciones de pantallas. Sin embargo, a veces la tradición puede mas que el buen juicio y la mayoría de esos profesionales no pudieron ver en el hipertexto mas que  una extensión del texto tradicional y tomaron prestadas muchas cosas del viejo estilo .

Irónicamente, lo que fue una gran liberación (el mensaje ya no estaba encadenado a los bordes de una hoja) se ha convertido en la pesadilla de muchos “artistas” de la vieja escuela, que necesitan tener el control de su obra. Esta no es la mejor forma de ver el diseño web.

En lugar de tratar de limitar al usuario se debe abrazar la flexibilidad que permiten los navegadores y aprovechar la oportunidad de mejorar la experiencia de los usuarios.  ¿Hay usuarios con limitaciones de visión? Se puede dar  la opción de usar una fuente mas legible ¿ Algunos de los usuarios accederán al sitio a través de redes de datos? Optimiza las imágenes y, si es necesario elimínalas de la vista de este tipo de usuario.

Al principio puede parecer abrumadora la variedad de equipos y tamaños de pantalladisponibles, lo que puede hacernos desistir de  adoptar esta metodología. Pero hay unas cuantas cosas que  se pueden hacer para simplificar mucho la tarea:

-Lo esencial es tener en mente que en un sitio web se está presentando un contenido, dirigido a un segmento definido de la población. Al separar el contenido de la apariencia y se puede separar lo superficial de lo esencial y mantener un diseño minimalista para todas las plataformas, o se puede partir de la pantalla mas simple o pequeña e ir aumentando características al ir aumentando el tamaño y la capacidad de los dispositivos.

-También debe conocerse al usuario esperado, pensar en sus hábitos y necesidades. Eso también apoyará la tarea de seleccionar el contenido indispensable para nuestro sitio.

-En lugar de tratar de definir un layout para cada pantalla se les puede dividir en categorías y sugerir uno para cada una. Recuerda, el diseño responsivo no se trata de tener el control total ni de limitar al usuario, se trata de mejorar su experiencia.

Algunas herramientas útiles para un diseño responsivo:

Si deseas aprender mas de esta filosofía o poner en práctica esta metodología pero no sabes donde comenzar yo te recomendaría explorar estos temas

-Media queries

-Uso de porcentajes

-Diversas fuentes

-Grid layout

-Unidades relativas en css (porcentaje, em’s, vw, vh)

Advertisements
Responsividad en los sitios web