Desde hace meses he ido incorporando de manera bastante natural a mi rutina de maquetación pequeños detalles que ayudan a que el engranaje entre la maqueta y la implementación en un proyecto web sea un poquito más sencillo. La mayoría son obviedades, sentido común fácil de incorporar a nuestro día a día.

Muchos de estos "vicios" los heredé de Álvaro y María y otros los he ido incorporando a base de trabajo y de integrar html en desarrollo, pero sobre todo a base de equivocarme mucho, que también es necesario.

Esto es lo que a mi me funciona, es más que probable que no descubras nada nuevo:

Comentar y tabular:

Un código bien tabulado siempre es más legible independientemente del lenguaje que estemos escribiendo. Si la maquetación se hace en equipo siempre está bien llegar a un acuerdo sobre el tipo de tabulación que se va a usar. Yo me encuentro cómodo con 4 espacios, pero es cuestión de gustos.

Es muy útil marcar con un comentario el final de los divs principales para siempre tener localizado dónde se cierra.

 
     <div id="content">
 
         ...
 
     </div><!-- #content -->

Tampoco está de más marcar con un comentario el comienzo y fin de bloques específicos, por ejemplo: <!-- ultimos comentarios --> o <!-- listado de profesores -->

Es la manera más fácil de no volvernos locos al abrir nuestro trabajo cuando ya no lo tengamos fresco.

Primero el marcado, después el estilo:

No hablo de escribirte todo el html de la página que vayas a maquetar, pero es muy fácil identificar los bloques que van a funcionar como unidad.

Pon el esfuerzo en escribir un html limpio y semántico en lugar de ir saltando entre la hoja de estilo y el html desde el principio. A mi esto me da muy buen resultado, pero hay quien prefiere ver una evolución más gradual mientras trabaja.

Mantén limpio tu html y hereda:

Todos hemos pasado una fase de 'classitis' :) Un uso correcto de la herencia nos evita este problema. Al integrar el html la mayoría de los desarrolladores son cuidadosos, pero un código limpio les facilita bastante las cosas, reduce el margen de error y es más sostenible.

Un ejemplo podría ser este: 

 
 	<ul id="menu">
 	   <li><a href="#">01</a></li>
 	   <li class="active"><a href="#">02</a></li>
 	   <li><a href="#">03</a></li>
 	   <li><a href="#">04</a></li>
 	   <li><a href="#">05</a></li>
 	</ul>

Marcando la clase en el li en lugar de en el enlace podemos actuar sobre dos elementos para componer nuestro estilo 'active'.

Menos no siempre es más:

Se que mucha gente está a favor de poner únicamente el html necesario, ni más ni menos. Yo estoy totalmente de acuerdo siempre y cuando sepamos a ciencia cierta que un cambio en una estructura del html dentro de unos meses no va a generarnos más dolores de cabeza de los necesarios.

Con toda la cautela del mundo, a veces un div de más rodeando un bloque de contenido nos da el juego suficiente para cosas tan básicas como ajustar detalles entre distintos navegadores. Siempre es más fácil añadir un poquito más de CSS que destripar una aplicación en producción.

Aclaro que no hablo más que de un poquito, un elemento para ajustar padding, para dar un sobrefondo en un momento determinado, etc, no estoy justificando un chorro de sobre-html que se pega con la filosofía de mantener el código lo más limpio posible.

Establece algún criterio de calidad:

En todas las fases de un proyecto deberían de haber reglas de control que nos ayudasen a asegurar que nuestro trabajo sea lo suficientemente bueno. El criterio de calidad más usual en el caso de la maquetación es el de validar tanto html como CSS.

Que un código valide no significa que esté bien, pero sí que no se nos ha olvidado cerrar ninguna etiqueta.

Esto nos lleva a otro criterio más, que es probar nuestro trabajo en los navegadores que exija la ruta del proyecto, que por lo general suelen ser 4 - 5.

Yo además, siempre que es posible paso trozos complicados de código a compañeros de trabajo o de fatigas para tener siempre una segunda opinion, que normalmente no es objetiva, pero que nos aporta un punto crítico.

Usa convenciones:

Usar patrones en esquemas básicos que se repiten a lo largo de todo un site nos facilita el trabajo a nosotros y a los integradores.

El ejemplo más fácil de explicar sería el de marcar el elemento activo en un menú. Normalmente tenemos una navegación principal y una secundaria al menos. Pues podríamos convenir que los menús siempre son listas, y que el elemento activo se va a marcar en el li con una clase 'active'.

Minimiza el impacto de los cambios:

Quiérete a ti y a los que te rodean y utiliza todos los medios que tienes a tu alcance para no perder ni tu código ni tu tiempo.

Mete todo tu código en un control de versiones. Da igual el que sea, el que más fácil te resulte o el que menos infraestructura vaya a requerir. Los más famositos son subversion, csv y últimamente está muy e moda git. Dedicale un ratito a aprender los 4 comandos básicos y nunca vuelvas a perder un solo archivo.

Utiliza herramientas que te ayuden a hacer el trabajo mecánico. Todos hemos recibido un cambio en la cabecera en un proyecto en el que ya hay 50 maquetas ya hechas :) Si hacemos un reemplazo masivo corremos el riesgo de cambiar lo que no debemos. Si hacemos el cambio en una sola maqueta y avisamos de dónde está el cambio vía mail / viva voz / paloma mensajera corremos el riesgo totalmente innecesario de que el que finalmente va a trabajar con las maquetas no reciba el recado.

Cualquier método que nos permita trabajar con el concepto de 'include' nos puede valer, pero los más útiles son los que generan html estático. Una buena solución si no le tienes miedo a programar un poquito sería nanoc, que además está bastante documentado.

Intercambia conocimientos:

Habla con la gente que trabaja contigo, intercambia opiniones, trata de conocer sus problemas a la hora de afrontar lo que tú les vas a enviar porque es la mejor manera de que todo salga bien.

Discute con otra gente tus métodos. Hace unos días tuvimos una pequeña reunión varios compañeros para poner en común formas de trabajar y surgieron temas interesantísimos que no salen de ninguna otra manera.

Todos los puntos anteriores son matizables, incluso algunos totalmente prescindibles, pero son un buen comienzo :)