Responsive Web Design o Diseño web sensible

Hay que reconocer que la traducción de Responsive Web Design como diseño web sensible no parece la mas apropiada pero es la que ya está mas extendida. El concepto, creado por Ethan Marcotte (@beep) y publicado por primera vez en su artículo de A List Apart, ya está en plena expansión y supone el pistoletazo de salida a una nueva etapa de nuestra evolución digital.

Hubiera preferido diseño web adaptativo, adaptable, escalable o incluso flexible pero, sea cual sea su denominación, anticipa una nueva y potente forma de crear, diseñar y desarrollar sitios web. Si seguimos por esta línea las cosas van a cambiar mucho y los diseñadores ya están ampliando su horizonte de posibilidades, perspectivas y oportunidades.

Responsive Web Design by Ethan Marcotte

Algunos comienzan a ofrecer diseño sensible y otros lo demandan con urgencia para no morir atrapados en una constante adaptación de sitios a dispositivos, plataformas, formatos… Veremos éxitos indiscutibles, desastres naturales y chapuzas solidarias.

Las empresas e instituciones lucharan nuevamente por renovar sus espacios pero la transición será lenta y dolorosa, especialmente si las decisiones las toma el directivo, jefe o mandamás de turno convertido en «experto-opinador en desarrollo web y redes sociales varias». Incluso presupuestos enormes y cuentas gestionadas por vendehúmos harán las delicias del futuro online de nuestros gobernantes, que no de los gobernados.

Pero hasta que todo esto llegue disfrutaremos con los buenos ejemplos que ya pueblan la red y seguiremos trabajando por optimizar y mejorar experiencias visuales. Es todo un reto y, en este caso, creo que volverá a merecer la pena porque el concepto como tal, sea cual sea su nombre, es bueno, muy bueno. Aumenta la utilidad y funcionalidad de los sitios que visitamos generando a su vez nuevas tendencias en diseño y nuevos  estándares que nos obligarán a ponernos las pilas para saber qué ofrecer y cómo ofrecerlo.

Si quieres saber mas tienes el libro Responsive Web Design, escrito por Marcotte y publicado hace unos meses. Pero también comienzan a publicarse interesantes entradas y artículos en diferentes lugares. En Fuse Interactive tenemos un buen ejemplo. Niall Morgan habla de Responsive Web Design y describe de forma resumida el funcionamiento:

The magic of responsive web design is the use of media queries. Media queries are something that has been around since CSS 2.1 in the form of media types but was limited to declaring things like stylesheets for print. When the W3C began working on CSS3 they created the @media query to take it to the next level. In CSS3 media queries allow you to get specific properties of the users browser and operating system such as screen width and screen orientation. With that information we can dynamically change the layout of the site for anything from a 24 inch monitor all the way down to a smart phone.

Actualización 02/01/2012

Dos interesantes referencias que nos hablan de los problemas e inconvenientes del Responsive Web Design:
Responsive Web es un técnica incompleta por César Soplín (via UXLearn)
-Desde el post de César…  Responsive Design is Irresponsible por Kevin John Gallagher.

Estoy de acuerdo con algunos de sus planteamientos y entiendo que no es posible considerar el Responsive Web Design como la solución definitiva, única y final de cualquier site. Valoro esta innovación y su posible evolución ya que ofrece nuevas oportunidades y deja atrás prácticas tremendamente complicadas, poco eficientes.

 

Nueva propuesta de iconos gestuales

P.J. Onori es diseñador en Adaptive Path y un activo bloguer que escribe en Some Random Dude (SRD). Hace unos días publicó una nueva propuesta de galería de iconos gestuales que se suma a otras propuestas (como la de Anthony Faconti o la de Ron George) de las que he hablado por aquí.

iconos_gestuales_onori

En cierto modo es una evolución de esas propuestas anteriores ya que Onori ha analizado y valorado la situación actual, ha tenido en cuenta esos trabajos y ha podido realizar así mejoras importantes que corrigen algunos inconvenientes manifiestos.

Nearing the completion of this icon system, I ran across the work of Ron George who had come to the same conclusion as I had in the belief that standardization would require abstraction. This gives me confidence that there is something to this idea. I do not think the icons are perfect, but I truly think there is something to this idea. I am planning on releasing it as a finished set when it is at a more refined state. I am hoping to get feedback from readers to get a sense if the sentiment is shared and how it can be improved for greater clarity and aesthetics. Once I feel confident that the system is at an appropriate level of completion, I will release it for free under the Creative Commons share-a-like license.

Hábitos y comportamientos convertidos en mapas de calor

En la evaluación de interfaces web los heatmaps o mapas de calor son representaciones que nos muestran patrones de exploración visual y nos ayudan a detallar donde han centrado su atención los usuarios. Su utilidad está muy asociada con el eye-tracking ya que constituye una de las posibles representaciones del conjunto de datos que esta tecnología es capaz de recoger.

Sin embargo su alcance como forma de representación y visualización de datos es mayor y así nos lo demuestra el programador alemán Martin Dittus. Su colección de heatmaps estructurados, construidos a partir de la actividad individual de usuarios de last.fm, nos descubre posibles patrones en los hábitos de escucha.

Heatmaps by Martin Dittus

Cada mapa se construye a partir de la periodicidad en la escucha de música. El año, mes, día de la semana, horas del día… Un año completo de datos se organiza a partir de una fila, agrupada en 12 bloques horizontales, una para cada mes. A su vez cada mes se organiza a partir de un mosaico de 7 columnas para los días de la semana y 24 filas para las horas del día.

El código de colores muestra la medida de la intensidad relativa. A partir de un número determinado (Gris – verde – amarillo – rojo) se resalta la actividad mantenida durante todo el día. Así, una tira de luz gris resalta las horas más activas del día durante todo el período.

Cualquier cambio o cese de la actividad queda registrado y si se suceden regularmente pueden interpretarse patrones en los hábitos y comportamientos de los usuarios.

Frequently people’s graphs are detailed enough to provide a fairly good summary of big life changes. New jobs, busy weekends, holidays, the month when they bought an iPod, or picked up running again, or moved to a different timezone, … I found that showing these graphs to the people portrayed often stimulated interesting conversation about their habits and their choices.

David Singleton, amigo de Dittus y participante en el experimento, publicó en su blog una explicación a los mapas que él mismo generó.

Mid-2005 to 2006 – Finished Uni, got a job and spent the first 6+ months comuting without an iPod after moving to London was still missing a laptop for a long time.
Late 2007 – An increase in evening listening, a sign of joining the Last.fm team and getting stuck in to startup culture of late nights.
Early 2008 – Evening listening, but with more separation from daytime listening. I suspect this was nights spent playing albums with my flatmate Ben Ward.
2009 – Less evening music, which I think stems from different flat mates, a different flat and starting (an unscrobbled) vinyl collection.
February 2010 – A quiet month for scrobbling, most of which on holiday in New York, little time for digital music.

underpangs

La diferencia entre el "quiero" y el "necesito"

Viendo las ilustraciones de la diseñadora y fotógrafa Erin Hanson sobre el quiero vs. necesito llego a una conclusión temendamente paternal: en época de crisis el objetivo no es intentar ganar más dinero. La clave está en optimizar y no gastar en aquello que no necesites.

Ilustraciones de Erin Hanson

En definitiva, saber gastar parece ser más lo oportuno en todo momento.

Ilustraciones de Erin Hanson

Ilustraciones de Erin Hanson

Ilustraciones de Erin Hanson

Ilustraciones de Erin Hanson

Fuente  | Designlov