Estuve luchando varias veces con el tema de los layout de los sitios, y la verdad que es algo bastante sencillo y uno no debería de estar luchando siempre con esas cosas.

Lo bueno es que en Internet siempre tenemos gente que nos ayuda a solucionar nuestros problemas.

Esta nota tratara en una primera instancia de que tamaño deberíamos utilizar para generar nuestro layout, y luego nos adentraremos en como hacer el layout con CSS puro, para poder optimizar nuestro sitio, haciéndolo de la manera más sencilla posible.

¿Qué tamaño deberá tener el layout de nuestro sitio?

Bueno, esa es una decisión muy personal a la hora de crear un nuevo diseño. Pero basándonos en estadísticas, podríamos decir que podemos encontrar en este sitio, podríamos sacar bastantes conclusiones:

• Por empezar, podemos decir que la gente que usa 640×480 ya es prácticamente despreciable (sin ofender a nadie, claro).
• Otra conclusión que sale a primera vista es que el 80% de la gente podrá visualizar correctamente una pagina diseño preparado para 1024×768 (50% de 1024 + 27% de 1280 + 3% de 1152). Tengamos en cuenta, que cada vez es mayor la cantidad de gente que usa 1024, incluso 1280.
• Si hacemos un diseño pensado para 800×600 seguramente tendremos en cuenta al 99% de la gente.

Aquí le dejo un resumen de las estadísticas esas:

1024×768 (50%)
1280×1024 (27%)
800×600 (10%)
Unknown (8%)
1152×864 (3%)
1600×1200 (0%)
640×480 (0%)

Ahora bien, si decidimos usar 1024, o 800 o la que sea; eso no significa que debamos utilizar esa resolución en nuestro layout. Es muy importante tener en cuenta que el área visible de un explorador no es exactamente la misma que la de nuestra pantalla.

Según este excelente post (en ingles) titulado “size does matter”, que tiene muchas estadísticas y habla sobre cual es la mejor resolución para hablar; aparte de dejarnos estadísticas (aunque mas detalladas) similares a las que vimos arriba, nos dice cuales son las mejores resoluciones para trabajar:

Si usamos una resolución de 1024px de ancho, el tamaño que deberíamos considerar para utilizar es de 994px. En cambio si pensamos usar una resolución de 800px de ancho, deberíamos considerar en que nuestro layout deberá ser de 770px de ancho.

1024px de pantalla: 994px de navegación.
800px de pantalla: 770px de navegación.

Por otra parte, según podemos ver un interesante articulo que se ha posteado en xyberneticos, podemos decidir que si queremos hacer un diseño pensando en una resolución de 1024px, podríamos utilizar un ancho de layout de 960px.

El motivo de elegir 960px seria la posibilidad de dividir este numero por 2, 3, 4, 5 y 6; permitiendo así generar columnas de diferentes tamaños de muy fácil configuración y agradables a la vista, de 160px, 192px, 240px, 320px o 480px.

Con esto creo que ya se puede decidir cual es el ancho de la pantalla que voy a utilizar para mi sitio, ahora lo que se necesita es poner manos a la obra y generar el layout. Como dijimos en un artículo anterior, es bueno que utilicemos CSS y no tablas, entonces vamos a hacerlo con CSS.

¿Cómo hago mi layout con CSS?

Bueno, hacer esto es bastante sencillo con CSS. Lo mas seguro es que el layout de nuestro sitio necesite varias cosas; como un header, un footer, y 2 o 3 columnas en el medio (o quizás 1 sola).

Para no dar muchas vueltas al asunto, lo mas fácil para generar nuestro layout en CSS es obteniéndolo ya generado de alguna manera.

Una forma de hacer esto, es utilizando herramientas que encontraremos en Internet tales como: Layout-o-matic.

Otra opción es bajarte ya el código CSS de sitios como Iron Myers, que es un excelente sitio con un montón de opciones para hacer tus layouts; como también utilizar los layouts que proporciona Mollio.

Luego de que tengan el “layout base” de sus sitios, ahí deberán modificarlo un poco para obtener los mejores resultados que ustedes deseen.

La tarea es bastante sencilla una vez que hayan planificado como es que desean hacerlo. La planificación es muy importante en este tipo de cosas.