Saltar al contenido

5 tips para maquetar una web a prueba de navegadores

Todo maquetador web tarde o temprano tiene que enfrentarse a la frustrante tarea de probar la página en diferentes navegadores: lo que se ve bien en Firefox no se ve bien en Internet Explorer, eso que se muestra a la derecha en Chrome se sale de la pantalla en Safari, en miiPhone se ve bien pero en el iPhone del cliente sale todo movido… ¿Y si os digo que siguiendo estos consejos podéis hacer que todas esas frases pasen a formar parte del pasado?

Todos hemos escuchado alguna vez a un abogado decir aquello de “depende del juez que nos toque”, lo cual no deja de ser curioso porque se supone que la ley es la misma para todos. Algo parecido pasa con los navegadores: si bien el HTML está considerado un estándar, cada navegador lo interpreta a su manera, llegando en ocasiones a extremos del todo insospechados.

Te puede interesar:   DuckDuckGo vs Google

A lo lago de la historia se ha luchado contra esta torre de Babel utilizando hacks, estilos condicionales o archivos CSS distintos para cada navegador, pero dada la cantidad de variantes de navegadores y sistemas operativos existentes actualmente esas técnicas han quedado desfasadas.

La metodología que hemos venido usando estos últimos años ha sido la de maquetar enFirefox, creando un archivo css “maestro”, para después mediante programación detectar el navegador y añadir un archivo css con las particularidades de cada uno.

Sin embargo, con la llegada de HTML5 es posible crear una web con un estilo único que sirva para todos los navegadores, simplemente siguiendo estos 5 consejos:

1. Maquetar correctamente

No por obvio este punto deja de ser importante: una página debe tener una estructuradeterminada, definir correctamente el doctype, huir de iframes y tablas (por si algún despistado en la sala) y utilizar las etiquetas para lo que fueron concebidas (si vas a maquetar una lista ¡utiliza <ul> y <ol>!).

Te puede interesar:   5 Herramientas WebDev que te ahorraran tiempo

2. Utilizar estilos reset en CSS

Una buena práctica es cargar un archivo CSS de estilos reset, llamados así porque tienen el propósito de igualar los estilos por defecto de todos los navegadores. En general se centra en tamaños, márgenes y paddings, consiguiendo que al comienzo de nuestra labor los estilos estén equiparados.

3. Usar javascript para navegadores obsoletos

Dado que utilizaremos HTML5, los navegadores antiguos no serán capaces de interpretarlo. Por eso se hace necesario incluir unos scripts que darán a nuestro querido IE8 o inferior la capacidad de “entender” HMTL5.

4. Validación W3C

Casi con un 99% de seguridad, si tu página pasa el test de validación W3C se verá correctamente en la mayoría de navegadores. No somos máquinas y es posible que se nos vayamos dejando “detalles” conforme maquetamos, así que es recomendable que cada cierto tiempo pasemos el validador para que nos muestre lo que estamos haciendo mal.

Te puede interesar:   20 Tablas CSS Ajax con efectos increíbles

5. Solo por si acaso: ficheros CSS para cada navegador

Si has seguido los otros 4 consejos es muy probable que no necesites ningún retoque en tus estilos, pero si este fuera el caso siempre nos quedará la opción de identificar el navegador utilizando PHP y añadir un pequeño archivo CSS con las particularidades de cada uno de los navegadores. Al cargarlo después del archivo de estilos principal los estilos particulares sobrescribirán a los generales.

Te han parecido importante estos tips? Cuales mas deberíamos agregar para maquetar una web a prueba de navegadores

0/5 (0 Reviews)
Comparte