Antes sólo teníamos que preocuparnos por la resolución de pantalla del monitor de nuestros visitantes. Con tomar una resolución mínima a contemplar, estabamos hechos: 800×600 o 1024×768, pensar en el caso de pantallas widescreen y listo.
Teníamos además espacio suficiente como para que éste no fuera una limitante. Cómodamente se podían definir diseños a dos o tres columnas, usar grandes imágenes, etc.
Ahora que los dispositivos móviles son más capaces y sus navegadores están prácticamente al mismo nivel de los de las computadoras de escritorio o portátiles, el abanico de displays y tamaños de pantalla se abre considerablemente. Pasamos a tener que contemplar qué pasa cuando a nuestro sitio se lo ve desde una resolución de 320×480, o incluso resoluciones más pequeñas, pasando por el intermedio de los displays de las tablets, sumando las pequeñas variantes según el modelo y marca del dispositivo, densidad de pantalla, etc.
En muchos casos no es posible pensar en un unico diseño que pueda verse bien en todas estas resoluciones. Ahi es donde surge el concepto de diseñar sitios que ‘se adapten’. En la investigación sobre esta idea, nos cruzamos con este framework: Less Framework.
La idea detrás de Less es plantear el diseño en base a una grilla de columnas, que se pueden ir adaptando a los diferentes tamaños de display. Less contempla un diseño ‘Default’ para displays grandes, y luego de éste se van derivando otros diseños para los displays más pequeños.
Una idea que vamos afianzando a medida que ganamos experiencia en este tipo de diseños, es que es fundamental pensar el diseño en todas sus variantes desde un principio, y también que lo más fácil es comenzar por diseñar para los displays más pequeños y luego progresar desde ahí. Lo más difícil es cómo mostrar la información en tan poco espacio, y luego es más fácil poder ir ‘expandiendo’ ese diseño. Es además una práctica que nos hace pensar detenidamente en los niveles de importancia y la jerarquización de la información que debemos mostrar.
