Realizar una página web es tan sencillo o complicado como deseemos hacerla. En algunas consultaras que realizan trajes a medida sobre todo para empresas que no se adaptan a productos estándar o portales institucionales deben de realizar un diseño propio y único para poder desarrollar contenidos muy específicos que solo se vean de una determinada manera. Esto claro esta tiene un coste muy elevado de decenas o cientos de miles de euros. La maquetación y el diseño web van de la mano y deben por exigencias del guión acoplarse perfectamente.

Es muy importante recordar que hoy en días existen programas que de código abierto que cumplen la mayoría de las exigencias del mercado en un 80%. Para este otro 20%  existen estos métodos.

A continuación muestro un sistema, que no el único de como realizar un diseño personalizado y maquetarlo correctamente. Se llama Grid 960

¿Que es 960?

960 Es un sistema o más bien una buena práctica entre diseñadores y maquetadores. Muchas veces el diseñador no se replantea todas los problemas que le puede plantear al diseñador y en consecuencia al programador. 960 ha echo las paces entre ambos procurando por un lado una plantilla para el photoshop y otra plantilla en CSS, de tal manera que será más sencillo trabajar con una y otra.

Las especificaciones de la misma web de 960 son rejillas de 12 o 16 columnas que se dividen en porciones de 60 píxeles de ancho. La rejilla 16 columnas tiene 40 pixels cada una y 10 píxeles de margen en el lado izquierdo y derecho, que crean canales 20 píxeles de ancho entre las columnas.

Columnas 960
Columnas 960

Ejemplo de su propia web

Maquetación con la plantilla 960

Como se puede ver, las rejillas determina el ancho de una capa. así, se llamara a una rejilla 4 +4 + 4 para una rejilla de 12.

Esto se ve mejor en código.

960 codigo
Codigo de 960

En definitiva todo esto al principio puede parecer una complicación, pero nada más allá de la realidad, es una gran herramienta, que permite tener un trabajo bien realizado y visible en todos los navegadores, que como bien sabréis esta es otra guerra.

Deja un comentario