Enigma Tres

Todos pensamos que nuestro blog se ve bien, que sabemos como se ve. Lo miramos todos los días, pero… ¿Que PC y que navegador estamos usando?¿Firefox o Internet Explorer? ¿PC o Mac? ¿Windows o Linux? ¿Escritorio, portátil, o dispositivo móvil? ¿iPhone or PS3?

Con la gran cantidad de opciones posibles, lo mejor para asegurarnos una maxima compatibilidad es seguir una serie de pasos, para verificar que todo esta bien.

Empezando por lo fácil: Navegadores estándar

Las paginas en Internet Explorer se ven muy diferentes a como se ven en Firefox(FF), y es mucho mas sencillo hacer un arreglo en IE que en FF así que aun si utilizas IE para navegar a diario, recomendamos que empieces por uno de estos navegadores:

1. Descarga Firefox (Recomendamos la extensión Web Developer, increíblemente útil)
2. Descarga Opera.
3. Descarga Safari (Existe una versión para Windows).

Cuando tu pagina se vea correctamente en uno de estos navegadores, se vera correctamente en los otros dos en el 99% de los casos. Tres de los cuatro navegadores mas importantes ya comprobados.

El dolor de cabeza: IE6 y 7

Por defecto no es posible instalar IE6 y 7 en el mismo ordenador con Windows, sin embargo, existen varios programas para poder simultanear las versiones:

1. Usuarios de Windows: MultipleIEs y IETester
2. Usuarios de Mac: IEs 4 OSX
3. Usuarios de Linux: IEs 4 Linux

Trabaja primero sobre IE7 y luego sobre IE6, ya que encontraras con menos problemas. Utiliza comentarios condicionales, para generar una hoja de estilos especifica para cada versión de Internet Explorer.

Haciéndonos móviles: Opera Mobile

Para saber como se vería tu pagina en un entorno móvil, lo mas sencillo es utilizar el propio navegador Opera, cargar la pagina a comprobar, y pulsar Shift+F11.

Puedes optimizar tu pagina web diseñando una hoja de estilos especifica para dispositivos móviles, por ejemplo para usuarios de WordPress y con una plantilla llamada “handheld.css”

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/handheld.css" type="text/css" media="handheld" />

El divertido: iPhone

Si eres un usuario de Mac puedes descargar un Software Development Kit que dispone de un completo simulador del iPhone. Si eres usuario de PC tienes algo menos de suerte, aun asi puedes comprobar como se vera tu pagina aproximadamente gracias a sitios como Test iPhone o iPhone Tester aunque esa aproximación pueda diferir bastante de la realidad.

La linea divisoria: El resto

Existen otros muchos navegadores, como Flock, Camino, o Konkeror, pero sus pocos usuarios hace casi que no valga la pena la depuración especifica para ellos, a no ser que tengas tiempo de sobra para ello.

Puedes usar Google Analytics para investigar cuales son los navegadores mas usados para visitar tu blog en “Usuarios/Opciones del navegador/navegadores”. Asegurate de que funciona correctamente para todos los que puedas de esa lista.

Este post es una traducción bastante libre de este post, si tienes alguna sugerencia, o matización nos encantaría que comentaras. Y con esta guia me dispongo a cambiar el aspecto de este blog, y corregir algunos problemas con el RSS. Es probable que para la semana que viene tengamos nueva imagen.

Leo en Webtaller un interesante artículo sobre los 10 errores más cometidos en el diseño de páginas web, en el enlace podéis ver el artículo al completo, pero pongo a continuación un resumen:
1.- Malas búsquedas: Se refiere a motores de búsqueda añadidos a nuestra página web, muchas veces tan solo salen los enlaces donde aparece un mayor número de veces el término buscado, también habría que tener en cuenta la importancia de los artículo, y mostrar los más importantes en los primero luegares de los resultados de búsqueda.
2.- Archivos PDF para la lectura online: Se abusa de este formato, y la mayoría de las veces resulta molesto para los usuarios, solo debe ponerse en pdf documentos para ser distribuidos o que sean muy largos, para el resto es mejor ponerlo directamente en la web.
3.- No cambiar el colo de los enlaces visitados: Es mucho más fácil explorar una página web cuando los enlaces que ya han sido visitados tienen un color diferente a los no visitados, se facilita mucho la navegación para los usuarios con algo tan simple.
4.- Texto no escalable: Un muro de texto es mortal para la experiencia interactiva. Intimidante. Aburrido. Doloroso de leer. Escriba para la lectura online, no para la impresión. El texto debe soportar escaneabilidad, use trucos bien documentados:

• - sub cabeceras
• - listas, como esta
• - destaque palabras claves
• - párrafos cortos
• - la pirámide invertida
• - un estilo de escritura simple

5.- Tamaño de fuente fija: El css permite bloquear “cambiar el tamaño de fuente” por parte de los usuarios, lo que obliga a los usuarios a leer un tamaño de fuente fijo, que generálmente es pequeño y costoso de leer para personas con problemas de visión.
6.- Títulos de las páginas con una visibilidad baja en el motor de búsqueda: Se deben poner los títulos (etiquetas <title>) de las páginas principales de forma clara y adecuada, y en las páginas secundarias debe ponerse un pequeño texto con lo más importante que aparece en dicha ubicación. Esto es así porque los títulos es los que generálmente se muestra como resultados para los motores de búsqueda.
7.- Cualquier cosa que parezca un anuncio: Los usuarios tenemos la costumbre de ignorar los anuncios en las páginas web, por tanto debe evitarse poner cualquier cosa que no sea un anuncio y que, sin embargo, lo parezca, ya que los más probable es que sea ignorado por los visitantes.
8.- Violando convenciones de diseño: Debe utilizarse el mismo diseño en todas las secciones de nuestro sitio web, así el usuario sabrá como viene lo siguiente y sentirá que tiene el control sobre lo que están viendo, de otra forma es más fácil que los visitantes sean espantados.
9.- Abriendo nuevas ventanas del navegador: A nadie nos gusta que cuando pulsamos un enlace se cons abra una nueva ventana del explorador, además al abrirse una nueva ventana se deshabilita la opción de volver atrás en dicha ventana, siendo esto muy molesto.
10.- No responder a preguntas de los usuarios: Los usuarios entran en un sitio porque quieren conseguir algo, puede que comprar su producto. Por tanto, dichos usuarios, quieren conocer información sobre lo que están mirando, generalmente esta información aparece accediendo al producto, el problema es que aparece toda junta, los usuarios no tienen tiempo para leer tanto. Por tanto hay que poner directamente, sin tener que acceder, los datos más importantes, principálmente el precio, todos nos guiamos por los precios principalmente.