Tips para maquetar un sitio con CSS

El intento de tener una web que se vea correctamente en todo navegador… es un reto, dia tras dia en la vida de un desarrollador o diseñador web, el uso de fix, hacks css, para lograr un correcto cross-browsing… nos solucionan la vida por un instante, pero luego, suelen salir mas errores y mas… todo por maquetar a ciegas, o confiados en que todo saldra bien…

Pero bueno, les menciono algunas de mis precauciones a la hora de maquetar un sitio… que ojala tomen en cuenta cuando recien comenzamos en esto del CSS y hacer una web todo terreno (cross-browser)…

1.- Empezar desde 0

Siempre es mejor… tener tu propio codigo, y que mejor manera de cumplir esto empezando desde 0… no se vale copiar CSS u HTML previos para acelerar el trabajo,
ok si nos ahorra mucho tiempo pero todo sitio es diferente talvez lo consigamos pero al querer validar nuestros codigos o revisar nuestro trabajo en otras resoluciones o navegadores puede colapsar y para encontrar el error tardaremos mas que si hubieramos empezado desde 0.

2.- Imaginando el trabajo terminado

Esto me agrada… por ser “Diseñador” pocas veces me toca maquetar sitios en CSS ya sea en el trabajo o como freelance, pero cuando toca hacerlo, me gusta mirar fijamente el diseño eh imaginarme o visualizar como lo quiero y como debe ser para ahorrar codigo CSS/XHTML, imagenes y sobre todo TIEMPO…

3.- Creando la estructura HTML

Despues de mirar el diseño por experiencia deducimos cierta estructura HTML para que sea mas rapido y facil aplicar el CSS y “darle piel al esqueleto”.

4.- Dando estilos CSS

Un Reset CSS ya no es un lujo o algo de “expertos” es una necesidad para tener nuestros sitios lo mas compatibles con otros navegadores… y si aun tenemos problemas con los divs este link puede ser interesante: Entendiendo un div, capa, o caja HTML en CSS.

5.- Prueba y error – Testeando el CSS

Firefox
Safari
Google Chrome
Opera
IE8 Ya viene con IE7
IE6
Estos son los navegadores que debemos tener siempre actualizados… y abiertos para ir testeando nuestro CSS para ver el comportamiento y evitar errores… empezar con calma y despacio nos ahorrara, futuros errores o diferencias entre navegadores…
Recomiendo Tener firefox (con el firebug una herramienta muy util) e IE8 (variar la compatibilidad con IE7) abiertos para hacelerar el proceso de maquetacion… y luego probarlo con el resto de navegadores… aun que nunca dudemos en probarlo antes cada movimiento que hacemos.

6.- Validando nuestros codigos CSS/XHTML

Ok… la hora de la verdad… yo soy muy cuidadoso… y vanidoso (en cuanto a CSS, no mas eh…) y me gusta tener codigos limpios y VALIDOS… y hasta las “advertencias CSS” las tomo por error… pero bueno… si… esto si nos ayuda a tener un mejor cross-browsing tener tanto codigo html valido y codigo css valido por la W3C.

7.- Comentarios condicionales IE || FUCK IE!!!!

Sip… aveces hay que tirar la toalla… nos comio el tiempo y el estress y pues toca usar
Comentarios Condicionales para IE… pero esto no termina aqui

8.- Hacks CSS || Que hice mal?…

Ok… errores y mas errores, la hemos cagao… y lo mas frustrante es que no solo con IE, ya que con las codiciones lo superamos, ahora el problema es con navegadores decentes… pero ¿donde falle? “la respuesta del millon” tranquilos… como dige antes es importante tener todo valido… y si esta la ultima alternativa “el uso de hacks CSS” es necesaria hay que usarla… y eh aqui
Hacks CSS para un determinado Navegador para poder arreglar dichos tropiesos…

Bueno… es todo… si quieren agregar mas son bienvenidos… perdonen por tanta letra me inspire… pero bueno… estas son mis precauciones… no necesariamente es “Correcto” pero no esta mal… saber como trabajan otros para aprender o saber que “No hacer” espero no sea este el caso jaja… chao y suerte en sus futuras creaciones…. Alex Aguiar.