¿Es robusto o frágil tu diseño adaptable?

Muy interesante el artículo Is Your Responsive Web Design Too Fragile?, en el que se explica que cuando se emplea una regla como min-width: XXXpx en CSS, XXX no significa lo mismo en todos los navegadores, porque algunos incluyen la anchura de las barras de desplazamiento (lo que marca el estándar) y otros no.

Pero en realidad, esto no es un problema importante si el diseño adaptable (responsive web design) es realmente robusto.

Pequeños detalles

Acabo de descubrir un sitio web que es una joya: Little Big Details, Pequeños grandes detalles.

Es un sitio web sencillo, pero con una idea genial: mostrar pequeños detalles de algunos sitios web que marcan una gran diferencia en su diseño o funcionamiento. Algunos “detalles” son realmente útiles, mientras que otros son tonterías graciosas.

Como muestra, dejo tres que me han gustado bastante, pero hay muchos más:

1. Facebook – When you type in the correct password with a slightly incorrect username, it will prompt you with the correct username and ask you to retype the password.

En realidad, esto no lo veo como algo positivo, sino como algo negativo, puede ser un problema de seguridad.

 

2. Asana – Offers an alternative text-only how-to instead of just the video.

Muy bueno, para mejorar la accesibilidad de los vídeos.

 

3. Amsterdam Museum shows today’s opening times at the top of each page.

Muy bueno, algo muy simple, pero que ayudará a muchos usuarios a no tener que buscar la información.

MIN: examina la base de un sitio web

MIN es un bookmarlet o favlet, es decir, un fragmento de script que se almacena en el navegador como favorito y que permite realizar una función. MIN elimina cualquier decoración de un sitio web, como el color, los bordes y los fondos, lo que permite identificar elementos clave que ayudan (o estropean) el diseño del sitio web, como la maquetación (layout) o la tipografía.

Por ejemplo, esta es una captura de pantalla de mi otro sitio web Accesibilidad web:

Y a continuación “minimizado”:

Y otro ejemplo con este mismo sitio web:

Y “minimizado”:

Cómo utilizar JavaScript en sitios web con diseño adaptable

En el artículo Managing JavaScript on Responsive Websites explican cómo trabajar con JavaScript cuando se emplea un diseño web adaptable o adaptativo.

Por ejemplo, ¿qué pasa si tenemos un diseño web adaptable de una página web y en una resolución tenemos un carrusel de imágenes que van cambiando, mientras que en otra resolución las imágenes se muestran en forma de rejilla? Al pasar de una resolución a otra, es decir, de un diseño al otro, habrá que activar o detener el código JavaScript que gestiona el carrusel de imágenes.

¿La solución? La librería jRespond.

Si no ayuda, no lo pongas

Before adding a design element to your site, ask yourself: Does it simplify the user’s task? Does it add value to the user? If the answer is “no”, eliminate it.

Traducción:

Antes de añadir un elemento de diseño a tu sitio, pregúntate: ¿Se simplificará la tarea del usuario? ¿Añade valor al usuario? Si la respuesta es “no”, eliminalo.

Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006.

Uno de los primeros artículos sobre diseño adaptable

El artículo Responsive Web Design, del 25 de mayo de 2010 y publicado en A List Apart es quizás uno de los primeros artículos que utilizó el termino responsive web design. Recordemos que en español se puede decir diseño adaptable o adaptativo, pero “diseño responsivo” queda fatal.

En este artículo podemos leer:

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.