1. IE 6
2. IE 7
3. IE 8

* IE representa Internet Explorer.  En fin, esta tarde me toco retocar algunos formularios y tablas de datos de un sitio, resulta que al final cuando creí que todo estaba bien evalúe en IE6, IE7, Firefox, Chrome, Safari y Opera. A pesar que algunas cosas no eran 100% idénticas entre dichos navegadores, todo parecía ir bien.

Al llegar a la reunión con los clientes, empece a evaluar el sitio y zass cual va siendo mi sorpresa que las cosas no se miraban “tan bien”. Desconcertado vi el navegador y era el único que no se me ocurrió evaluar: IE8. Les digo que si han resuelto los problemas para IE6, el 7 no estén tranquilos, porque el 8 es igual de aterrador.

He pasado unas cuantas horas tratando de resolver estos problemas de alineación y  gracias a Dios que al fin pude encontrar la solución. Les enumero algunas cuantas a manera de:

Top 3 de soluciones a problemas con CSS e Internet Explorer 6, 7 y 8

a) Diseñar cumpliendo los estándares, es decir evaluando en Firefox. Comprobar los fallos que el diseño muestra en IE6. Identificar los selectores que presentan el problema y duplicarlos, anteponiendo a la copia el selector *html y aplicando los cambios requeridos, de la siguiente manera:

#MyDiv {margin: 10px 10px 10px 10px;}

/* IE6 Only */
* html #MyDiv {margin : 5px 5px 5px 5px;}

De ese modo, mientras Firefox leerá el primer #MyDiv, IE6 sólo leerá el segundo.

b) Hacer lo mismo con IE7. Volver a duplicar los selectores en conflicto y añadir *:first-child+html a los duplicados:

#MyDiv {margin : 10px 10px 10px 10px;}

/* IE6 Only */
* html #MyDiv {margin : 5px 5px 5px 5px;}

/* IE7 Only */
*:first-child+html #MyDiv {margin : 2px 2px 2px 2px;}

Así, IE7 sólo leerá el último selector.

c) Para IE8 primero tenemos que comprobar que todo ande bien en IE7 ya que la solución será emular este navegador. Para realizarlo simplemente añadimos la siguiente meta-tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Si nuestra página se ve bien en Explorer 7, es un buen método para que se nos vea bien en Explorer 8.

Tener todas las versiones de IE instaladas

Para poder comprobar si el diseño se mira bien o no tenemos que tener dicho navegador. Existe una utilidad muy simpática llamada “Internet Explorer Collection” que incluye desde la versión 1 hasta la 8. Esta aplicación también incluye una herramienta para desarrolladores del tipo “Firebug”.

Enlace para descargar: IE Collection

Lamentablemente testear en IE es un mal necesario (aún) ya que en países como Guatemala más del 60% de personas aún lo utilizan como navegador principal, aunque con los esfuerzos de Google por posicionar Chrome quizá ya no sea una Utopía pensar en un mundo donde se respeten los estándares web…  Saludos!!

Visto en | La brujula Verde y NotasWeb

Este será un ejercicio super sencillo pero que nos permitirá evaluar, cual es la mejor resolución bajo la cual debemos optimizar nuestro sitio y a que navegador web le debemos tener prioridad.

Optimizar el ancho de nuestro sitio web

Debemos de utilizar un ancho que permita la mejor accesibilidad, es decir evitar en la medida de lo posible los feos scrolls horizontales.  Regularmente la resolución más pequeña bajo la cual un sitio puede funcionar correctamente es la de 1024×764 pixeles.  Sin embargo en estos tiempos donde todo el mundo o casi todo el mundo ya posee pantallas amplias resulta interesante ver bajo que resoluciones recibimos más visitas y evaluar si podemos hacer un poco más ancho nuestro sitio.  Actualmente mucha gente recomienda utilizar un ancho de 960 pixeles.

Para determinar la resolución bajo la cual recibimos más visitas si utilizamos Google Analytics nos vamos al lado izquierdo y buscamos las opciones Usuarios -> Opciones del navegador -> Resoluciones de Pantalla.

Es interesante ver que la quinta posición de las resoluciones de usuarios con más visitas a elWebmarketer es de 1680 x 1050 pixeles. Una muy alta resolución!!

Este reporte nos mostrará bajo que resolución se encuentra la mayoría de visitas que tenemos. En mi caso lamentablemente el más alto porcentaje es de 1024×768 por lo que el diseño de mi sitio debe ser de 960 pixeles de ancho como máximo.  Es una tristeza que no pueda aprovechar la humilde resolución de mis dos pantallas de apenas 2560×1024 pixeles…

Optimizar nuestro diseño en base a las preferencias del navegador web

Todo aquel que ha tenido la oportunidad de diseñar un sitio web sabrá de los dolores de cabeza que produce hacer compatible un diseño entre los distintos navegadores, especialmente uno que tiene como logo una letra vocal de color azul.

En fin, si queremos que la mayoría de nuestras visitas estén cómodas, optimicemos los detalles enfocados en las preferencias de ellos y no las de nosotros, porque lo más importante en un sitio web son sus visitas.

Utilizando el Google Analytics, para tener el reporte del navegador más utilizado, nos vamos a Usuarios -> Opciones del Navegador -> Navegadores.  Este reporte nos despliega con un gráfico de porcentajes en pastel cual es el navegador preferido. Es de ponerme contento que mis usuarios sean tan maravillosos y la mayoría utilicen Firefox.  Al menos ya se que no debo tener como preferencia al navegador del lado obscuro.

No me sorprende tanto que Firefox este en primer lugar, me sorprende más que Chrome este en tercer lugar de la lista. Puede ser que en un futuro debamos basar nuestro diseños solo en estos dos navegadores.

Ojo que para tomar estas tendencias debemos basarnos en periodos que sean lógicos, es decir, si queremos sacar datos que se acerquen a la realidad, al menos tomar los últimos 6 meses.

Es seguro que tus visitas agradecerán estos cambios y por supuesto quien recibirá mayores beneficios serás tu.  Ahora te dejo con la inquietud, este mismo análisis lo puedes realizar con los reportes de velocidad de conexión, sistemas operativos, determinar usuarios nuevos y recurrentes, etc., etc. ¿Aún dudas del potencial de la analítica web?

“Se refiere a la capacidad de acceso a la Web y a sus contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales). Esta cualidad está íntimamente relacionada con la usabilidad”.

Jordi Pérez (fundador de Opinablogs.com) opina que facilitar el acceso es la premisa básica para que un sitio web sea “usable”.

Sugerencias para mejorar la Accesibilidad

Estos son algunas sencillas sugerencias que pueden ayudar a mejorar la accesibilidad y usabilidad de tu sitio web:

• Evitar pantallas introductorias con el típico “saltar intro”, puesto que no suelen aportar valor al visitante, sobre todo cuando no es su primera visita.
• Procurar una tasa de carga eficiente. Más de 5 segundos de carga es sinónimo de un alto porcentaje de abandono por parte del usuario. Recuerda que las imágenes deben estar optimizadas para web y que un archivo Flash tarda en cargar.
• Diseñar la estructura del sitio siempre intentando minimizar el número de clicks necesarios para acceder a todas las secciones.
• Si el sitio es extenso, incorporar un mapa web en el pie de la página, a poder ser ya desplegado. Esta página facilitará el trabajo del visitante “persona” así como el de los robots de los motores de búsqueda. Sobre todo, en sitios muy extensos y con mucha información, añade un buscador en una parte visible del sitio (la esquina superior derecha es un sitio recurrente).
• Situar el contenido más importante, normalmente los eslóganes y los argumentos principales, en la parte superior de cada página. Que esté visible sin necesidad de hacer scroll hacia abajo.
• En el caso de que enlaces a archivos que se abran con otras aplicaciones (.pdf, doc, .xls, .zip, etc.), avisar al visitante incorporando un texto o un icono cerca del hipervínculo.

Siempre que planifiques la creación de un sitio web, piensa en los usuarios y ponte en su lugar. Lo más grato que puedas ofrecer a alguien estando en la web es ofrecer toda una “experiencia” de navegación. No olvides que tu sitio web, es la imagen de ti y de tus proyectos en el mundo online.