63 Recomendaciones que Debes Tener en Cuenta

Hace algunos días leí un interesante post en Daily Blogs Tips titulado 43 Errores en Diseño Web que Debes Evitar. Esta vez no traduciré el artículo completo. Sólo listaré las recomendaciones ya que son muy claras, y aún cuando se supone que son para blogs, aplican perfectamente para cualquier tipo de sitio Web. Todas ellas apuntan a que el usuario tenga una excelente experiencia de usuario y a que tu sitio sea realmente amigable, accesible, encontrable, etc.

Lo interesante es que ya no son 43, sino 63 las recomendaciones a tener en cuenta, gracias a los lectores de ese blog. Y aunque taché las que no considero adecuadas, las dejo por si opinas lo contrario.

1. El usuario debe saber de que se trata el sitio en segundos.
2. Haz el contenido fácilmente consultable ("escaneable").
3. No uses tipologías decorativas que sean ilegibles.
4. No uses tipologías diminutas.
5. No abras ventanas nuevas del navegador.
6. No cambies el tamaño del navegador.
7. No exijas a tu visitante registrarte a menos de que sea absolutamente necesario.
8. Nunca suscribas a tu visitante a algo sin su consentimiento.
9. No uses en exceso películas en Flash.
10. No pongas música de fondo.
11. Si debes poner un archivo de audio deja que el usuario sea quien lo inicie.
12. No desordenes tu sitio con insignias, emblemas o escudos de otras comunidades.
13. No uses una página inicial que sólo lance el sitio real.
14. Asegúrate de incluir los detalles de contacto.
15. No dañes la funcionalidad del botón “Back” (Atrás).
16. No uses texto parpadeante.
17. Evita URLs complejos y enredados.
18. Usa CSS en lugar de tablas en HTML.
19. Asegúrate de que los usuarios puedan hacer búsquedas en todo el sitio.
20. Evita los menús con “drop down”.
21. Para tu navegación usa texto.
22. Si vinculas archivos PDF infórmale al usuario.
23. No confundas a tu visitante con varias versiones de tu mismo sitio (que HTML, Flash, 56Kbps, 128Kbps…).
24. No mezcles la publicidad con tu contenido.
25. Usa una estructura de navegación sencilla.
26. Evita las “intros”.
27. No uses Microsoft FrontPage para crear tu sitio.
28. Asegúrate que el sitio sea compatible con varios navegadores.
29. Asegúrate que los vínculos incluyan un texto claro. Evita el “Clic aquí” Asegúrate que los vínculos incluyan un texto claro y descriptivo. Si utilizas la frase “Clic aquí” para mejorar tu tasa de clics no la incluyas en el vínculo.
30. No ocultes tus vínculos.
31. Haz tus vínculos visibles. El usuario debe diferenciar claramente qué es un vínculo y qué no.
32. No subrayes o colorees el texto normal.
33. Haz que los vínculos visitados cambien de color.
34. No uses GIFs animados.
35. Asegúrate de usar los atributos ALT y TITLE en tus imágenes.
36. No uses colores fuertes.
37. No uses pop ups.
38. Evita los vínculos en Javascript.
39. Incluye vínculos funcionales en tus pies de página.
40. Evita las páginas demasiado extensas.
41. No generes “scroll” horizontal.
42. No permitas errores de ortografía o gramática.
43. Si usas CAPTCHAs asegúrate de que sean realmente legibles.
44. No uses texto escondido.
45. No vincules sitios prohibidos o penalizados por los buscadores.
46. Coloca tu publicidad arriba.
47. Adiciónate a dmoz y yahoo.com. El mismo Google lo recomienda.
48. Ingresa a adwords.
49. Usa las herramientas de seomoz.org.
50. Usa un diseño o tema específico para tu sitio y se coherente con él.
51. Publica un blog.
52. Revisa tu ortografía y gramática. (Ya está en el punto 42.)
53. Evita los plugings para Wordpress innecesarios.
54. Diferencia entre tus comentarios y los de tus lectores.
55. En tu CSS haz lo posible por usar como medida los “em” en lugar de “px” o “%”.
56. Usa los estándares para la estructura del mapa del sitio.
57. Usa los estándares para la accesibilidad Web.
58. Usa técnicas de diseño centrado en el usuario.
59. Publica un glosario.
60. Usa palabras claves a través de todo el sitio.
61. No uses una página tradicional para tus FAQ.
62. Diseña teniendo en cuenta el acceso móvil.
63. Usa las tablas en HTML para tabular datos.

Seminario Internacional de Usabilidad y Accesibilidad para la Web

En México ya hay dos jugadores fuertes en nuestros temas favoritos: La Usabilidad y la Accesibilidad. Se tratan del Gobierno del Estado de Nuevo León y la Universidad de Monterrey y los menciono porque ambos están organizando el Seminario Internacional de Usabilidad y Accesibilidad para la Web.

El seminario se llevará a cabo los días 26 y 27 de julio del 2007 y dentro de los conferencistas está nada menos que Louis Rosenfeld, autor de uno de los libros referencia del área: Information Architecture. Además habrán otros conferencistas de Estados Unidos, Chile, Brasil y obviamente México.

¿Tienes la posibilidad de viajar? No dudes en ojear este Seminario que está muy interesante.

Escoge tu CSS Inicial: Eric Meyer vs. Faruk Ateş

Desde hace algún tiempo he recomendado el uso del CSS inicial de Faruk Ateş. Básicamente lo que hace esta hoja de estilos inicial es amortiguar las diferencias que hay entre todos los navegadores para mostrar el HTML.

¿No has visto que si colocas un H1 sin ningún estilo los navegadores lo muestran en texto negro con una letra grande en Times New Roman? Además de las fuentes, todos los navegadores tienen definidos sus estilos por defecto para todos los elementos de HTML.

El problema es que Internet Explorer, Firefox, Safari, Opera, etc. tienen diferencias en sus estilos predefinidos. Hasta de una versión a otra de un mismo navegador podrían cambiar los valores. De IE5 a IE6, por ejemplo, los textos de una misma página podían verse diferentes.

Ahora, si eres uno de los que procura que todos los navegadores muestren de igual manera el diseño, es difícil lograrlo debido a estas diferencias. A menos que utilices una hoja de estilos inicial como esta.

Hace algunos días (el 14 de abril del 2007 para ser exactos) Eric Meyer sacó su propia hoja de estilos inicial (“Reset Styles”) basada en la hoja de estilos inicial de Yahoo… Ya sumamos tres hojas de estilos iniciales, sino es que hay más. ¿Cuál escoger?

• Inicial CSS de Faruk Ateş.
• YUI Reset CSS de Yahoo.
• Reset Styles de Eric Meyer.
• Resetting Again de Eric Meyer (Actualizada el 15 de enero de 2008).

Como no soy el más experto en el tema acudiré a quienes lo son para compararlas.

Traduzco inicialmente las palabras de Eric Meyer:

…Yo recomiendo usar un grupo de estilos de “reseteo” o “de base”, pero no uno basado en el selector universal. Más bien que los estilos deberían listar todos los elementos a ser reseteados y exactamente cómo deberían serlo. …Alguien me preguntó si yo podía crear esta hoja de estilos para compartirla con el mundo, a lo cual accedí.

…Alguien más me recordó que el grupo Yahoo! UI ya lo había hecho así que no me tocaría hacerlo. Maravilloso!… Excepto que encontré que su CSS va más lejos de lo que debería en algunas áreas y se queda corto en otras. Así que presenté mi propia versión de Reset CSS, basada en los estilos de Yahoo…

El mismo Eric ya desfavorece a Yahoo, y bueno, Eric Meyer tiene el conocimiento, experiencia y fama como para creerle, ¿no?

Adicionalmente Eric complementa mi introducción:

…¿Por qué?!? ¿Por qué todo esto?

La razón principal es que todos los navegadores tienen presentaciones preestablecidas y todas ellas diferentes. (Ok, esto no aplica para las familias de navegadores—la mayoría de los navegadores basados en Gecko tienen los mismos valores por defecto). Por ejemplo, algunos navegadores sangran las listas con un margen izquierdo, mientras otros usan el padding…

Pero hay todo tipo de inconsistencias, unas más sutiles que otras. Los títulos tienen márgenes superiores e inferiores ligeramente diferentes, las distancias de sangría son diferentes, y así sucesivamente. Aún algo tan básico como la altura de las líneas varía de un navegador a otro—lo cual puede tener efectos en la altura de los elementos, las alineaciones verticales y en general todo el aspecto.

Esto no es algo que consideremos muy a menudo. Pensamos en nuestro CSS para modificar el aspecto por defecto de un documento —pero con una hoja de estilos “reset”, podemos hacer este aspecto más consistente entre los diferentes navegadores, y así disponer menos tiempo peleando con estas diferencias…

Hay otra razón por la que quiero resetear muchos estilos en muchos elementos. No sólo reiniciar las márgenes y el padding. También quiero que todos los elementos tengan un tamaño de fuente, un peso, un estilo y una familia consistentes. Si, quiero remover la negrilla de los títulos y los elementos strong; quiero quitarle la itálica a los elementos em y cite.

Quiero todo esto porque no quiero dar por hecho los efectos de los estilos… Lo cual me hará pensar un poco más a cerca de la semántica de mi documento. Con el reseteo montado, no podré escoger el elemento strong si el diseño necesita una negrilla. En lugar de ello, me tocará escoger el elemento adecuado—ya sea si es un strong o un em o un b o un h3 o lo que sea—y luego le doy el estilo que necesito…”

Creo que muy claro nos queda. ¿Qué podemos decir acerca de los estilos de Faruk Ateş, los cuales siempre he utilizado? Les traduzco sus palabras, las cuales me escribió para aclarar las dudas:

Revisando la hoja de estilos reset de Eric, siento que ambas (la de él y la mía) son soluciones viables al mismo problema general. La diferencia real es que su reseteo apunta realmente a anular cada bit de estilo, mientras que mi solución sólo apunta a neutralizar los estilos comunes entre los navegadores.

Con la mía, muchos estilos por defecto permanecen intactos (como los estilos de los elementos sup y sub, etc.) y en la mayoría de los casos, eso es lo adecuado porque todos los navegadores ya tratan estos elementos adecuadamente. Obviamente, tu opinión puede variar.

El reseteo de Eric simplemente aborda cada elemento de la especificación y le remueve toda su base de estilos. Su regla font-* inheritence parece una adición inteligente que puedo considerar adicionar a la mía, pero aparte de eso siento que está un poco del lado de lo excesivamente innecesario.

Creo que la mejor solución entre la de Eric y la mía depende de la complejidad de los sitios que crees. Para un sitio gigante donde no tienes idea qué tipo de contenido se publicará, la de Eric es una apuesta segura pero requerirá que re escribas un montón de estilos nuevamente. Para proyectos pequeños y medianos, creo que mi CSS inicial será más que suficiente, y te salvará de re-aplicar muchos estilos. :-)

Con esto nos queda todo claro, ¿no?

Recuerda entonces tomar una de estas hojas de estilos iniciales de acuerdo a tus necesidades, copiarla dentro de tus archivos y utilizarla en cada HTML que generes. Algo como esto te caería muy bien:

‹link rel="stylesheet" type="text/css" href="/css/inicial.css"›
‹link rel="stylesheet" type="text/css" href="/css/misestilos1.css"›
‹link rel="stylesheet" type="text/css" href="/css/misestilos2.css"›

Actualización:
Gracias a 70 Expert Ideas for Better CSS Coding encuentro otras hojas de estilo iniciales que sería bueno revisar:

• Global white space reset.
• Initial CSS de Christian Montoya.
• Initial CSS de Mike Rundle.
• Initial CSS de Ping Mag.
• Initial CSS de Rudeworks (Este gracias a WebIntenta).
• Reset CSS de aNieto2K (Este gracias a él mismo).
• Tripoli Generic CSS de David Hellsing (Gracias a aNieto2K).
• CSS Reseter de CSS Lab.
• Base.css de Alberto Forbes (In love with CSS).

Actualización 2:
He encontrado una buena colección de Reseteadores: A Killer Collection of Global CSS Reset Styles. Me gustó porque, aunque menciona varios conocidos, explica cada uno (desde el más básico). ¡Puede resultarte interesante!