www.arturosoria.com / eprofecias /

  Si tu página web no se ve, empezamos mal

por Fernando Plaza
publicado el 29 Marzo 2005

Existen un elevado número de webs que los visitantes simplemente no llegamos a poder ver (aun que lo intentemos): ya sea porque la página se queda en blanco, tiene un tiempo de carga interminable, no se ajusta a nuestra resolución de pantalla o contiene errores que provocan que nuestro navegador se vuelva loco.

¿Ha sido correctamente programada tu web?

Hacer una página web es sencillo, sin ir más lejos el Word nos permite guardar como página web cualquiera de nuestros documentos, independientemente de su complejidad. El código HTML resultante, aunque es muy fiel visualmente al original, es tremendamente sucio y no es apto para ser colgado en la red.

Lamentablemente, la mayor parte de los programas con aspiraciones WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes) consiguen su objetivo de alejarnos del código HTML, si bien: este alejamiento se traduce en código "sucio"; que debería ser revisado y “pulido” posteriormente por el diseñador de la web antes de su publicación. Con relativa frecuencia nos consta que este paso se ha obviado, probablemente por prisa y alguna que otra vez simplemente porque el diseñador de nuestro web realmente no sabe HTML.

En alguna que otra ocasión nuestro web se ha diseñado a partir de plantillas que desde su origen o durante su personalización se han ido deteriorando.

Existen páginas web que realizan análisis on-line de nuestro código HTML, advertimos que la mayoría son muy tremendistas, ya que aplican tan a raja tabla las normas HTML en sus diferentes versiones (HTML 1.0, 2.0, 3.0, 4.0… etc) que se pasan. El más comedido y útil de los que conocemos es Doctor HTML.

Si analizas un web que han creado para ti, no te alarmes si detectas muchos fallos. Prácticamente todos los webs tienen fallos o ciertas incompatibilidades, algunos no tienen importancia y ni siquiera merece la pena arreglarlos, pero a algunos otros si que es conveniente prestarles atención:

  • Tags que no se han abierto o cerrado correctamente.
  • Tablas incorrectamente diseñadas o con tags abiertos.
  • Uso de fuentes no soportadas por la mayoría de las plataformas.
  • Links rotos.

Diseñando un web “cross-platform”

Internet es “cross-platform”, es decir puede ser utilizado desde distintas plataformas, esa es una de las razones que lo hacen tan grande. Esta grandeza se convierte en un reto para los diseñadores y programadores de páginas web que aunque desearían controlar como se va a visualizarse su web en cualquier combinación de sistemas operativos, navegadores, paletas de colores y resoluciones de pantalla, pronto se darán cuenta de que eso es imposible. Las combinaciones son infinitas y constantemente salen al mercado nuevos dispositivos desde los que conectarse a la red. Por lo tanto, proponemos de nuevo una meta algo más modesta: nuestra web debería ser visualizada correctamente por nuestro visitante habitual.

Un web, distintos navegadores


Los navegadores con los que visitan www.arturosoria.comInternet Explorer (IE), juicios a parte, fue el vencedor absoluto en la guerra de los navegadores. Hoy en día más del 90% de los Internautas utilizan Internet Explorer, lo cual simplifica enormemente el trabajo de los webmaster. El otro 10% se lo reparten el resto de navegadores, si bien una gran parte son otros navegadores Mozilla y Mozilla compatible.

En nuestros ordenadores de testeo tenemos instalado Internet Explorer, Firefox, Netscape, Lynx y también tenemos un Mac con IE. Lo cual nos ha sido de gran utilidad, ya que a veces una página que aparece fabulosa en IE al ejecutarla en otro navegador… ¡no aparece! La última sorpresa que nos llevamos fue al modificar ArturoSoria.com, resultó que los anuncios de la derecha en Firefox se mostraban al final de todo del texto… vamos completamente desubicados.

Estas grandes incompatibilidades sí que hay que arreglarlas y la mejor manera de hacerlo es testeando nuestro web. Ahora: sin pasarse, porque hay cosas que siempre se van a ver diferentes (botones de formularios, desplegables, combo box, etc.) y otras que no merece la pena perder el tiempo en ellas... ejercitemos por tanto el sentido común.

Existen herramientas en Internet que nos facilitarán la tarea de detectar incompatibilidades en nuestro web; existen incluso servicios de pago que nos enviarán capturas de nuestra web desde distintas plataformas.

Un web, distintas resoluciones de pantalla

Resoluciones de pantalla de los visitantes de www.arturosoria.comLa resolución de la pantalla es muy importante. Una gran parte de los internautas siguen navegando a 800x600, cuando ningún webmaster o diseñador gráfico utiliza ya esa resolución en su pantalla. Como poco utilizarán 1024x768 ó 1280x1024, entre otras razones porque tienen unos buenos monitores de al menos 17 o 19 pulgadas.

Es un error diseñar un web que no se vea a 800x600 correctamente porque estaremos obligando a una gran parte de nuestra audiencia a tener que navegar horizontalmente por su contenido utilizando las barras de desplazamiento… lo cual es muy molesto. Lo ideal es que nuestro web se pueda ver bien en todas las resoluciones y como mínimo a 800x600. ¿Qué ocurre con los usuarios que navegan a 640x480? En el gráfico podemos ver que son una minoría que tendréis que decidir como queréis tratar.

Hacer pruebas es muy sencillo, sólo prueba a cambiar la resolución de tu pantalla y observa lo que ocurre con tu web. Existen pequeñas aplicaciones freeware que crearán marcos en la pantalla para indicarnos lo que no verían los usuarios a otras resoluciones, nosotros no las utilizamos, pero puede que a vosotros si que os sean de utilidad.


Un web, distintas calidades de color

Calidad de color de los visitantes de www.arturosoria.comDe nuevo la mayoría de los webmaster, programadores y diseñadores suelen disponer de buenas tarjetas gráficas y monitores… y pueden cometer el error de pensar que todo el mundo es tan afortunado como ellos. ¿Cómo se ve tu web a 16-bit? Tal vez te lleves una sorpresa, puede que algunos colores que hayas utilizado con mucha frecuencia en barras de menú, barras de separación o incluso como color de fondo… ¡se vean horribles! Tendrás que cambiarlos y elegir un color más compatible. Es por eso que siempre es recomendar el uso de una paleta de colores web.

Esta es un buen momento para que te plantees si utilizar tantos degradados y sombras en tus diseños es realmente “imprescindible”.

Por ultimo si diseñas tus web en un monitor LCD o TFT ten en cuenta que los colores no se ven exactamente igual que en los monitores convencionales. Un color amarillo cálido puede ser tremendamente chillón en un monitor de tubo: tenlo en cuenta.

¿Un web, distintas plataformas?

Como verás en ningún momento te hemos recomendado que diseñes varias versiones de tu misma web para salvar las diferencias que hemos mencionado; antes era frecuente hacerlo, era un signo de un trabajo de diseño web concienzudo y considerado. El problema de este acercamiento a las dificultades propias del “cross-platform” es que crear varias versiones de un web es un trabajo farragoso que convierten el mantenimiento y las posteriores actualizaciones en una tarea faraónica.

Por lo tanto, mi consejo es que te las arregles para que una única versión de tu web se vea bien independientemente del navegador, la resolución de pantalla y la calidad del color.

Lo que es más difícil es que consigas que te vean bien en WebTV, un PDA o un teléfono móvil, sin crear una nueva versión de tu web o sin tener que cambiar tu codificación para que dinámicamente se optimice para estos dispositivos. Llegados a este punto, no te dejes llevar por una euforia globalizante y piensa realmente hasta que punto te compensa ser tan accesible. Salvo que tu web este especialmente destinada a estas audiencias es esfuerzo no te merecerá la pena.

WebTV - MSN TV

En 1997 Microsoft compró WebTV, rebautizándolo en el 2001 con su actual nombre: MSN TV. Podemos hacer la prueba de cómo se vería nuestra web en esta plataforma descargando el “MSN TV Viewer” desde la web para desarrolladores; en ella se nos indica que si queremos diseñar webs que se visualicen correctamente en un televisor tendremos que diseñarlas para una resolución de 544×372... muy por debajo de los 800x600 que consideramos como mínimo aceptable anteriormente.

Nuestro web en un PDA (Personal Digital Assistants)

Hemos hablado en otras ocasiones sobre estos dispositivos en este consultorio, es raro que estos dispositivos se utilicen para navegar por Internet; la razón es simple, salvo que dispongas de una tarjeta wireless o una tarjeta del tipo 3G (o que estemos hablando de un teléfono móvil pda), es difícil que puedan conectarse a Internet sin estar conectadas a un ordenador y ya en esa situación todo usuario preferirá navegar en un monitor grande.

Si queremos que nuestro web sea visible desde un PDA tendremos que rediseñar nuestra navegación y reducir el contenido que mostramos en cada pantalla. Más información sobre esta materia puede ser encontrada en la web.

Webs para teléfono móviles: Pocket Internet Explorer

Utilizaremos el móvil para navegar por InternetLa materia es muy extensa como para tratarla en este apartado. Nos limitaremos a decir que nuestros móviles empiezan a ser auténticos pdas con funcionalidades de teléfono móvil, cámara digital, cámara de video, consola de videojuegos y reproductor de música digital.

Algunos móviles llevan ya incorporado el “Pocket Internet Explorer”, existiendo mucha documentación en la red sobre cómo diseñar webs para estos entornos. Habrá que estar pendientes sobre qué navegadores se terminan imponiendo y hasta que punto se hace popular la navegación en la red a través del móvil.

Accesibilidad: webs para discapacitados

Existen varias webs que comprobarán si nuestra web se ajusta a las directrices de accesibilidad, una de ellas es Bobby scan. Estas “guidelines” son tan férreas que será muy difícil que nuestro web consiga cumplirlas, a no ser que hagamos una versión en ex profeso para ello.

Podemos matar dos pájaros de un tiro si creamos una versión "sólo texto" de nuestro web: por una parte los buscadores adoran las versiones "sólo texto" (siempre y cuando estén correctamente realizadas) y por otra parte tendremos una versión accesible para personas discapacitadas, que con muy poco esfuerzo conseguirá cumplir todas las directrices de accesibilidad.

Aunque nuestro web cumpla todas las “Accesibility Guidlines” no quiere decir que sea accesible para discapacitados, tal y como denuncia Henrik Olsen, si realmente deseamos hacer un web usable por discapacitados, deberemos tener una conocimiento más profundo sobre la tecnología que estas personas utilizan para navegar por la red y si es posible realizar tests de usabilidad en los que intervengan personas discapacitadas.

Damos aquí por concluido este capítulo de nuestro Tutorial sobre Usabilidad. En el próximo artículo hablaremos de cómo optimizar nuestro web para que sea más rápido.

Fernando Plaza es el responsable de que en este web todo funcione corréctamente. De mayor le gustaría ser igualito que Grissom de la serie CSI Las Vegas.


Copyright 2000 - 2014 © Rent & Buy S.A.