Tecnología y Coaching para Emprendedores

Buenas Prácticas en Diseño Web

ser-profesional-freelance

Me han llegado ya varios emails de lectores pidiéndome consejos para aprender a hacer una web como ésta. Les he recomendado los libros que yo he estudiado, pero, por encima de todo, les he recomendado mucha práctica. No se aprende php por leerse el libro gordo del php, se aprende a base de programar en php. Pero siempre es bueno tener unas directrices para saber cómo crear un diseño web profesional, por lo que en este artículo recojo una serie de consejos que aplico en mi trabajo de diseñadora web.

  • Crea el código a mano. No tengo nada en contra de editores WYSIWYG como Dreamweaver, pero soy de la opinión que para crear un código limpio y semántico es imprescindible redactarlo a mano, línea por línea. Yo trabajo con Notepad++ y recomiendo su uso a quienes quieran programar a nivel profesional.
  • Utiliza los atributos alt y title. Hemos de crear sitios web que sean navegables incluso con las imágenes desactivadas, tanto para crear código que valide por la W3C, como para facilitar su uso a personas con discapacidad que navegan con screen readers. En las imágenes podemos utilizar ambas etiquetas, siendo alt imprescindible, y en los enlaces la etiqueta title. No poner alt en los enlaces porque da error de validación.
  • Crea un código semántico. Si desactivas el CSS, el sitio web debería quedar bien estructurado y fácil de navegar. Para ello es imprescindible separar el HTML del CSS y utilizar las etiquetas adecuadas. Así, un título debe ir con etiquetas <h1>..>h6> y un párrafo entre etiquetas <p>..</p>.
  • Verifica que las páginas web se vean bien en todos los navegadores. No sé cuantas veces me he encontrado con sitios web que se descentran o muestran mal en un navegador alternativo. Tampoco se trata aquí de dar soporte a IE5, pero sí de tener en cuenta que hay gente que navega con IE7, Opera, Safari, Firefox, Chorme, etc.
  • Valida el código. En sitios web dinámicos no siempre es fácil conseguir que el código valide, ya que hay plugins como los de Facebook Like-Box que dan errores sistemáticamente. Pero corrige todos los errores de validación que estén a tu alcance, incluso desactiva aquellos plugins prescindibles que dan errores de validación. Yo he dejado de utilizar muchos plugins por este tema.
  • Incluye un favicon personalizado. Me he encontrado con muchos sitios web que bien no tienen favicon, bien tienen el favicon del CMS que utilizan, como Joomla. Ayuda a los usuarios a distinguir tu web con un favicon personalizado.
  • Crea una sección “sobre nosotros”. Si se trata del diseño de un cliente, aquí será éste el que tome la última palabra, pero es muy recomendable que haya una sección con información sobre quién hay detrás del sitio web, tanto por temas de transparencia como de confianza.
  • Comprueba la velocidad de carga de la página web. Hay un plugin para Firebug llamado Page Speed que permite comprobar la velocidad de carga. Si el sitio web es lento, perderá seguidores, porque a un sólo clic hay mil páginas más de la misma temática.
  • Crea un mapa de sitio XML. Esto permitirá a los buscadores rastrear todas las páginas indexables de tu sitio web.
  • Optimiza el tamaño de las imágenes. Con Yahoo Smush.it puedes optimizar el tamaño de las imágenes de tu sitio web, para mejorar la velocidad de carga y la experiencia de usuario. Asímismo, evita el uso de gifs animados, pues distraen y dificultan la lectura del contenido.
  • Utiliza un tamaño de fuente adecuado. No sé cuántos sitios web están diseñados pensando que tengo vista de lince o que navego con lupa. Este pequeño detalle puede llevar a alguien a abandonar inmediatamente el sitio web. No fuerces la vista de nadie.
  • Usa la misma estructura de diseño en todas las páginas del sitio web. Hay (todavía!) sitios web que cuando clicas en un enlace interno parece que te hayas ido a otra web por la falta de concordancia en el diseño. Crea una estructura de sitio con un diseño unificado.

Alvaro Arrarte, compañero de LinkedIn, me ha comentado dos puntos más que no anoté en la redacción inicial de este artículo:

  • Crea un menú de navegación visible en todas las páginas. Aunque parezca evidente, hay sitios web con páginas sin menú que te obligan a utilizar los botones de atrás y adelante del navegador. Crea un menú de fácil visualización y que se mantenga en la misma posición en todo el sitio web.
  • Evita la navegación con las barras de desplazamiento del navegador. Hace poco una amiga alemana me dijo que opinara sobre su web de fotografía. Las fotos eran muy buenas, pero la página principal obligaba a usar la barra de desplazamiento horizontal del navegador que se extendía por toda la colección fotográfica. Hay opciones mucho mejores para desplazarse por un álbum de imágenes, evita el uso de las barras de desplazamiento del navegador.


Comentarios

  • homero

    HOLA Sandra, muy bueno tu artículo bien detallado y demás cuestiones. Ahora porqué tu sitio no cumple con muchos de los criterios marcados?

    Saludos.

    • lgruz

      Tengo que dar la razón a Sandra, aunque quizás homero se refiera a esto: http://validator.w3.org/check?uri=http%3%2F%2Fwww.esandra.com

      Los estándares web, actualmente, se contradicen a sí mismo al necesitar utilizar elementos no estandarizados para hacer funcionar el código universalmente. Por ello mismo, que la web valide no significa que vaya a tener problemas de funcionamiento, sino todo lo contrario, significa que tiene capa de compatibilidad para determinados navegadores. Por lo menos, en la mayoría de los casos es así.

      También creo que debemos tener miras más amplias en estos aspectos. Es muy probable que no tengamos una sola visita de dispositivos sin javascript, sin CSS y mucho menos sin imágenes. Creo que no merece la pena las visitas que ganarás trabajando por esta compatibilidad, por las horas que se le debe echar encima.

      Mi recomendación es hacer las cosas lo mejor posible dentro de las posibilidades y del tiempo con el que contemos. Personalmente me olvidaría de versiones anteriores a IE7 (incluso de este) en favor de un mensaje de advertencia, que facilite enlace para actualizar el navegador. Yo lo aplicaría tanto a la falta de CSS como de Javascript.

  • curso de diseño web

    Muy buen aporte. Los diseñadores web cuentan con innumerables oportunidades de trabajo a partir de la gran necesidad de las empresas de contar con un sitio para publicitar sus productos o servicios. Por este motivo capacitarse en esta área puede ser muy conveniente.

    • Sandra

      Sí, estoy de acuerdo, y es necesario renovar los conocimientos a diario. Este blog intenta mantener la ilusión por aprender y aportar recursos que faciliten el día a día del diseñador web.

  • Rafael

    Podés crear el código a mano con dreamweaver también, es muy amigable para eso…

    • Sandra

      Gracias por comentar. Sí, tienes razón, pero no le encuentro mucho sentido utilizar Dreamweaver para crear el código a mano, quizás sea porque Dreamweaver y yo no somos muy amigos y prefiero trabajar con un editor como Notepad++