En la parte inferior aparecen destacadas las próximas conferencias y eventos, mientras que en la barra vertical derecha aparecen las últimas entradas del blog, información sobre el W3C y accesos directos al software de validación de páginas. Todavía están migrando contenidos, por lo que algunas de las nuevas páginas están incompletas.

A pesar de no poder ver el mensaje completo, me entero de lo que me quieren decir. Ahora sólo tengo que pulsar “Continuar” para que me realice la búsqueda. Pero resulta que sólo soy capaz de ver el botón “Volver” y no veo ningún botón de “Aceptar” o “Continuar”. Este botón queda también oculto detrás del banner, por lo que no puedo pulsarlo. Lo primero que me viene a la cabeza es que la página web de Iberia no me permite realizar búsquedas para poder comprar sus servicios, ya que me encuentro con un muro insalvable.

Así que redimensiono la ventana del navegador (uso una resolución de 1680×1050) para hacerla más pequeña y el mensaje se desplaza hacia la izquierda, de forma que ya puedo acceder al botón de “Continuar”. Esta acción, aunque nos parezca trivial a los desarrolladores, seguro que no se le ocure a todos los usuarios que se encuentren con este problema.

El problema está en que en las CSS usan float:left y left:50%. Esto hace que el contenedor del mensaje se posicione en el centro de la ventana del navegador. Luego lo centran aplicando un margin-left:-28.4em, que es la mitad de la anchura del mensaje. Por esos valores seguro que la resolución que usa el equipo de desarrollo es de 1280×1024 Ahora un consejo: las pruebas de tu aplicación no hay que hacerlas con tu equipo, sino con los que puedan tener tus clientes.

Al usar left:50% hacen que la posición del contenedor dependa de la anchura que tenga el navegador desde el que estás visualizando la web. La solución es sencilla: poned un left:200px y eliminad el margin-left.

Una de las primeras premisas de los programadores y diseñadores de sitios de ecommerce es “No pongas trabas al cliente en su proceso de compra. Evita que encuentre obstáculos y déjale el camino limpio hasta el botón Comprar“. En el momento de que algún usuario que acceda a tu web y por cualquier motivo no pueda finalizar una compra, estás perdiendo dinero.

Y ya que nos ponemos…

Una vez superado el tema de no poder hacer la búsqueda, llego a la pantalla en que me dicen los precios del billete que me interesa. Como bien me habían avisado, la reserva se ha calculado en la moneda del país de salida del vuelo. En este caso, coronas danesas. Pero… ¿dónde está el conversor a euros o la cotización aproximada de la corona danesa?

No me puedo creer que ahora tenga que ir a buscar un conversor online y tener que calcularme yo mi propia factura. Me parece bien que me avisen de que me calcularán y cobrarán la factura en coronas, a pesar de que sean una compañía española y yo un cliente comprando desde España. ¿Pero ni siquiera me dicen el precio aproximado en euros? Es en este momento donde decidí dejar la web de Iberia y probar en buscadores generalistas de vuelos.

Cuando decidí volver a entrar en la web para hacer pruebas con otros navegadores y para escribir esta entrada, intenté llegar al final del proceso de compra sólo para ver si encontraba algún otro problema. Justo después de la pantalla en que decidí no comprar su billete, aparece otra prácticamente igual y con un práctico conversor de divisas.

Si ese conversor hubiese estado en la pantalla anterior, podría llegar a haberles comprado el billete a ellos (aunque me hubiese salido bastante más caro que con quien realmente compré el billete). Este es un claro ejemplo de por qué hay que cuidar la usabilidad de tus aplicaciones. Puedes tener una aplicación web que no presente dificultades técnicas a tus clientes para realizar su compra. Pero si no tienes en cuenta también la usabilidad del sitio, puedes seguir perdiendo ventas.

Así que si estás en una situación parecida y te pasas todo el día maldiciendo a los creadores de IE6, te aconsejo que eches un vistazo a la guía definitiva de buenas prácticas y hacks para internet explorer 6. Es una recopilación de los principales defectos que tiene IE6 y cómo solucionarlos.

Ante un cambio así deberías informar a tus usuarios de estas mejoras. Esto hace que tus clientes, aunque no perciban las mejoras porque has mantenido el mismo diseño, vean que tu web sigue siendo actualizada y que tu empresa se preocupa en el mantenimiento y actualización de la plataforma.

La manera de avisar de estos cambios es indiferente, pero lo importante es darles visibilidad. Puedes anunciarlo en el blog corporativo, poner un banner en la home que enlace a una página donde se expliquen esas mejoras o incluso hacer un banner que se muestre la primera vez que el usuario accede a la página y controlar su visualización mediante una cookie. O también puedes hacer un mail-bombing, opción que a mí personalmente no me gusta porque la considero muy intrusiva.

Los iframes bloquean el evento onload

El evento onload debería ejecutarse tan pronto como se pueda, ya que así el indicador de ocupado del navegador se parará, dando a entender que la página ya se ha cargado. Cuando se retrasa la ejecución del evento onload da la impresión de que la página es más lenta. El onload se lanza cuando todos los elementos de la página, y todos los elementos de los iframes se han cargado por completo. En Safari y Chrome podemos evitar este bloqueo si el valor del SRC del iframe lo generamos de forma dinámica con JavaScript.

Pool de conexiones compartido

Los navegadores tienen un límite máximo de conexiones por host. Mientras que IE6, IE7 y FX2 sólo admiten dos conexiones, Safari3, Opera 9 permiten 4 conexiones, y Chrome 2, IE 8 y Firefox 3 admiten hasta 6 conexiones. En la mayoría de los navegadores, el pool de conexiones está compartido entre la página en carga y los iframes que contiene, por lo que los propios iframes pueden bloquear la carga de la página principal.

Cinco de las 10 páginas más visitadas de Estados Unidos usan iframes, en la mayor parte de los casos, para anuncios publicitarios. En muchos casos es la forma más sencilla y útil de incluir contenidos en nuestras páginas. Pero hay que tener en cuenta el impacto en el rendimiento de nuestras páginas. Así que si puedes, evita los iframes. Sino, úsalos moderadamente.

Traducción del artículo Using Iframes Sparingly.