diseño

10 errores comunes de diseñadores web novatos

Hoy me he encontrado en SitePoint un curioso artículo titulado “10 Common Mistakes Made by Novice Web Designers“. Me ha parecido muy interesante, pues aunque no soy diseñador propiamente dicho, pero sí he cometido muchos de esos errores.

Y esta es la lista:

  1. No tener en cuenta la forma de visualizar del navegador. Cada navegador funciona a una resolución, y ésta normalmente no es la misma que los bocetos hechos en Photoshop. ¿Cómo se comporta la página al cambiar de tamaño?
  2. Forzar a altos y anchos fijos. ¿Qué ocurre si el texto que hay dentro es anormalmente extenso o anormalmente corto?
  3. Presuponer sobre la experiencia del usuario. Hay muchas resoluciones y muchos dispositivos a tener en cuenta.
  4. Sub-pixels en bocetos. Un boceto a 300 ppp no se verá igual en un monitor a 72 ppp.
  5. Desconocimiento de las pilas de fuentes. No todas las fuentes funcionan en todos los sistemas, ni siempre se ven igual.
  6. No tener en cuenta el desarrollo. Nos ponen el ejemplo de títulos ricos en diseño que sólo se pueden conseguir con imágenes. Es algo asumible cuando hay 5 o 50 páginas, ¿pero y si hay 500? ¿O 5000?
  7. Olvidar en los enlaces. Los links son el hilo conductor de la web, y hay que diferenciarlos bien del resto del contenido.
  8. No tener en cuenta animaciones o efectos. Esto no se puede reflejar en un diseño en photoshop.
  9. Controles de formularios extraños o inaccesibles. Nos explican que los formularios son sosos, pero que sin embargo los navegadores saben renderizarlos y los usuarios los entienden.
  10. Poca apreciación por las tecnologías. HTML y Flash no son lo mismo :)

En mi opinión, las más importantes a tener en cuenta (O al menos las que más problemas me han dado) son la 2, 4, 6, 8 y 10 (Curioso, justo los pares).

Mejora progresiva

De un tiempo a ahora, cada vez leo con más frecuencia el término progressive enhancement, o en catellano, mejora progresiva. ¿Qué es exactamente? Como desarrolladores web, debemos lidiar con numerosos navegadores, cada uno con una serie de prestaciones y recursos. Como veremos a continuación, normalmente hay 4 formas de abordar esta situación:

  1. Impedir el acceso a determinados navegadores. Creedme, existen páginas a las que no se puede acceder con según qué navegadores. No me refiero a que se muestren defectuosas, es que directamente te muestran un mensaje de error. Tratad de acceder a una página de El Plural cambiando el user-agent de vuestro navegador y sabréis a qué me refiero. Ésta es una pésima solución.
  2. Quedarnos en el mínimo común denominador. Esto es, diseñar la página de modo que sólo contenga recursos disponibles por todos los navegadores. No es una solución muy escalable, puesto que se está limitando a las funcionalidades mínimas (Funcionalidades que, por otro lado, normalmente se corresponden con las de nuestro querido IE6). Visto con un enfoque más visual, esto significa que la manada debe ir a la velocidad del más lento. Por ejemplo, querémos posicionar un <div> de forma ‘fixed’. IE6 no lo permite, de modo que, o no lo hacemos, o dedicamos esfuerzos en buscar retorcidos hacks para lograrlo en este navegador. Mmmm no me gusta. ¿Qué más hay?
  3. Graceful degradation. Durante mucho tiempo ésta ha sido la tendencia reinante, y seguramente seguirá siéndolo. Consiste en partir del máximo de prestaciones de forma que, a medida que se usen navegadores menos avanzados, la página se mantenga usable con pequeños defectos. Un ejemplo perfecto es el uso de imágenes PNG con semitransparencias: Mientras que los usuarios de Firefox o Safari las verán sin problemas, los de IE6 se encontrarán con imágenes corruptas. En estos casos es frecuente dividir la página en dos niveles: El nivel 1 corresponde a una buena experiencia para el usuario, el nivel 2 con una versión degradada de la página. Encontramos un ejemplo en el servicio de correo de Google Gmail, con su versión avanzada (Por defecto) y una versión básica.
  4. Mejora progresiva. Y al fin llegamos a la mejora progresiva. ¿En qué consiste? Es exactamente igual que graceful degradation pero al revés. En lugar de partir de una versión avanzada, se parte de la versión mínima, de forma que, a medida que un navegador ofrece mejores recursos, la página también se ve mejorada. En este caso, se parte de un mínimo razonable, por ejemplo, que sea compatible con HTML 4. Podría, por ejemplo, usarse transparencias en GIF, y sin embargo, en aquéllos navegadores que sí lo soporten, semitransparencias en PNG.

Lógicamente las dos mejores soluciones son las dos últimas. ¿Cuál es mejor? Realmente depende del caso. Pero como método general yo prefiero la mejora progresiva, pues a diferencia de graceful degradation parte de una experiencia de usuario razonablemente buena. Además, con esto siempre ganaremos en accesibilidad.

Si bien cada día existen más navegadores con sus respectivas versiones, también es cierto que disponemos cada vez más de recursos que nos permiten abstraernos de ellos, como los numerosos frameworks javascript como jquery o mootools, además de brillantes soluciones como Google Chrome Frame.

Más información: