Categorías
Accesibilidad web Citas Desarrollo web Web móvil

Diseño web independiente del dispositivo (agnóstico)

Internet: faltan palabras para describir su magnitud, difusión e importancia. Hoy que oficialmente se cumplen 25 años del nacimiento de la World Wide Web. Lo que ha cambiado todo…

Diseño y desarrollo web: una interminable e inabarcable sucesión de estándares (recomendaciones), herramientas de desarrollo, gestores de contenido, librerías, plugins, actualizaciones, novedades tecnológicas, dispositivos, sistemas operativos, navegadores, tendencias, opiniones, técnicas, configuración, usuarios,…

Cambio, evolución transformación,… tal vez sean los términos que mejor definen el desarrollo web. Y sin embargo, el concepto que siempre me ha parecido más interesante es el de universalidad. Y por afinidad, el de accesibilidad.

Es bastante conocida la frase que titula el artículo de Eduardo Manchón en Alzado Diseñar para lo más probable y no para todo lo posible, que en el contexto original hace referencia al diseño de interfaz sirviéndose de los usuarios y las tareas. Siempre he pensado que desde el punto de vista de desarrollo web (del código, para entendernos) podría verse complementado con un anexo:

En el desarrollo web, diseña para lo probable, pero ten en cuenta lo posible.

Porque desde el punto de vista de negocio (perder posibles clientes) o de los usuarios (discrimarlos) es una irresponsabilidad que no se pueda acceder a los contenidos de una web o interactuar en ella.

Y llegamos al artículo Device-Agnostic que, partiendo de dos evidencias actuales —la web móvil y los dispositivos táctiles—, expone una forma de enfocar el diseño web con el que estoy bastante de acuerdo:

The more I build for the web, the more the term ‘device-agnostic’ endears itself to me.

I used to think it merely dealt with basing responsive breakpoints on content rather than particular devices, but there’s more to devices than the size of their screens. A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability, and connection speed.

With such a wide range of possibilities, the sensible thing to do is to zero in on the harshest conditions (or toughest things to deliver) and build from there. Like cars designed to perform in extreme heat or on icy roads, websites should be built to face the reality of the web’s inherent variability. In my mind this approach addresses the following from the beginning:

  • Hostile browsers
  • Tiny screens
  • Slow connection speeds
  • Touch inputs

[…]

Recomiendo su lectura y agradezco a mcdave que lo haya compartido en Device-Agnostic | Trent Walton.

Categorías
Citas CSS Web móvil

Web móvil adaptada o específica

CSS-based responsive web design is a great tool for adapting a layout to different screens, period. It is a tool, not an end. In some cases, where a site’s content should be the same from device to device (a blog, for example), responsive web design is enough for the job. More complex services, though, may need much more, including different content, tools, and services.

Yes, friends: it depends.

What’s it depend on? Certainly the needs of the audience. But as with so many things, it often depends a great deal on business considerations, too.

Josh ClarkResponsive Web Design or Separate Mobile Site? Eh. It Depends.

Cita extraída de un artículo que resume una animada discusión entre los partidarios del responsive web design (muy resumido, el uso de Media Query para adaptar la presentación de una web a los diferentes dispositivos) y los que van más allá de la mera presentación de contenidos: optimizar las experiencias según el contexto de uso y de usuarios.

Nada nuevo, en definitiva. Aunque técnicamente ahora es posible obtener mejores resultados que hace no muchos años: hay ejemplos más o menos elaborados en mediaqueri.

Ya puestos, otro artículo que nos puede ayudar a ampliar nuestra perspectiva histórica es New to Mobile? Welcome to the One Web Debate.

Categorías
Citas Diseño de interacción

Usuarios

Me gusta tumblr. Un gestor de contenidos sencillo y peligrosamente adictivo: la facilidad para crear una entrada, seguir otros blogs (¿se dice así todavía?, ¿existen los blogs?), añadir un artículo, cita, video o foto a tu lista de favoritos o publicarla en tu blog es sorprendente.

Más allá de sus virtudes, me gustaría mencionar Things Real People Don’t Say About Your App, una pequeña joya humorística sobre usuarios y sus comentarios. Porque como todo el mundo sabe, los usuarios siempre dicen la verdad en los test de usuarios, y no es necesario interpretar lo que dicen 🙂 La combinación de citas reales con fotografías de usuarios reales es dificilmente superable.

Algunos ejemplos:

Categorías
Citas Diseño

Un poco de tipografía

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Oliver ReichensteinWeb Design is 95% Typography

Echando un poco la vista atrás – basta un simple vínculo -, uno se encuentra con una frase como la anterior publicada en el 2006 (recordada, eso si, por twitter hoy mismo). Y yo soy uno de esos que no han intentado profundizar en algo tan importante, hasta hace no mucho tiempo. Y con la mala suerte de que el libro que me compré, no me ha servido para mis propósitos: un libro para introducirse en el arte y la ciencia de la tipografía (hablo de «¿Qué ocurre mientras lees? Tipografía y legibilidad.» de Gerard Unger). Tal vez con el próximo libro tenga más suerte (¿sugerencias?).

Pero bueno, hay algunos recursos que me parecen útiles y aquí los dejo, para que no se me olviden.

  • Thinking with Type, con cuatro apartados (letras, texto, rejilla y extras). Información relativamente breve y con posibilidad de descargar bastantes secciones en ficheros pdf para observar los detalles con mejor resolución.
  • The Elements of Typographic Style Applied to the Web . El título lo dice todo, tipografía práctica para la web.
  • typetester, una herramienta para comprobar a la vez tres fuentes diferentes, permitiéndose variar algunas características como el color, alineación, separación entre letras,…
  • Periodic Table of Typefaces, es una forma bastante curiosa y desde mi punto de vista lograda, de mostrar las fuentes tipográficas más populares con información extra, como el año de creación, el autor y familia. En forma de tabla periódica.
  • Typography Deconstruction Un fichaje de última hora a la lista de recursos, recomendado por un compañero de trabajo y que se encarga de analizar los elementos básicos en el diseño de fuentes de forma clara y muy visual. Me gusta mucho.
  • The Elements of Typographic Style Applied to the Web: The Elements of Typographic Style de Robert Bringhurst, aplicado a la web. Creo que es un recurso muy recomendable.
Categorías
Citas Diseño de interacción

Innovación y experiencia de usuario

Usability is often viewed as being inherently risk-averse, and even at odds with innovative ideas. The usability practitioner seeks to meet users’ expectations – or “mental models” – eliminate surprises rather than capitalize on them, and follow standards that provide consistency with outside interfaces. User experience designers employ design patterns that have been proven over time, and utilize prototyping tools that encourage the use of established pattern libraries. User testing also tends to focus on the first use, making it very difficult for seemingly innovative ideas to beat out the familiar and immediately recognizable user interfaces that employ well known design techniques.
[…]
Whether UX practitioners care to admit it, many of these claims are true. UX professionals don’t tend to be the greatest advocates of innovation, and our designs are often limited to what others are doing and the depth of our pattern libraries. These are the side-effects of lazy design, however, and not the nature of User Experience. User Experience designers have a unique opportunity to become the facilitators of holistic design and the advocates of innovation. By combining traditional user-centered activities with a greater emphasis on creating engaging designs we can bring usability into alignment with innovation in the design process. Here are some thoughts on how […]

Where Innovation Belongs in User-Centered Design by Jake Truemper

He llegado al artículo gracias a un twitt de César García Gascón y de forma primitiva, rondaba por mi cabeza desde hace tiempo…