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.

Ahora bien, ¿cómo sé efectuar el diseño de las aplicaciones web 2.0?

Bueno, yo creo que los diseños deberían hacerse siempre con CSS por varios motivos. ¿Cuáles? Bueno, lean el post a continuación que creo que va a darnos una idea de cuales son las ventajas de utilizar CSS en nuestros diseños. Obviamente, empezaremos por una introducción al tema.

¿Qué son los CSS?

Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar formato a los documentos escritos en HTML (y en otros lenguajes estructurados, como XML) separando el contenido de las páginas de su apariencia. Para el diseñador, esto significa que la información estará contenida en la página HTML, pero este archivo no debe definir cómo será visualizada esa información. Las indicaciones acerca de la composición visual del documento estarán especificadas en el archivo de la CSS.

¿Cómo Funcionan los CSS?

Las Hoja de Estilo no utilizan el archivo de la página Web para especificar el formato de la página (en realidad, a veces pueden hacerlo, pero no es recomendable hacerlo de esa manera). En su lugar, usan un archivo de texto puro con extensión “.CSS” que luego se vincula a la página.

Este archivo contiene reglas que constan de un selector (en este ejemplo, H1) y una o más declaraciones (en el ejemplo tenemos cuatro declaraciones). Cada declaración tiene dos partes: una propiedad (por ejemplo, FONT SIZE) y un valor (en este caso, 19pt). Estas reglas son las que determinan cómo deberá mostrarse la página.

Nuevamente, si quisiéramos componer los encabezados H1 con tipografía Arial, de 19 puntos, en color azul y alineación central, el archivo CSS debería contener el siguiente texto:

H1 {

   font-family: Arial, Sans-serif;

   font-size: 19pt;

   color: #0000FF;

   text-align: center;

}

Luego, en cada página de nuestro sitio agregamos un link a la Hoja de Estilo:

<LINK REL="stylesheet" href="hoja_de_estilo.css" TYPE="text/css">

El elemento LINK especifica:

• el tipo de vínculo: a una hoja de estilo (”stylesheet”)
• la ubicación de la hoja de estilo a través del atributo “href”
• el tipo de hoja de estilo que se vincula: “text/css”

Ahora, todos los encabezado H1 de las páginas que contienen la referencia al archivo de la CSS tendrán el aspecto que hemos definido.

10 razones (o ventajas) para utilizar CSS

1.- Separación del contenido y presentación.

Las hojas de estilo generalmente se encuentran en archivos separados del código principal (html, por ejemplo). Esto nos va a permitir que en un equipo de trabajo, programador y diseñador puedan realizar sus tareas de forma independiente aunque paralela, sin correr el riesgo de que haya interferencias entre ambos, y ello no alterará el resultado final.

2.- Flexibilidad.

Podríamos comparar las hojas de estilo con la ropa que guardamos en nuestros cajones. Nosotros somos los mismos, pero dependiendo de la temporada variamos nuestra apariencia.

En el caso de las hojas de estilo sucede lo mismo: podemos cambiar en cualquier momento alguna parte o la totalidad del diseño de nuestras páginas con sólo modificar nuestra hoja de estilo, sin que ello suponga modificar el contenido.

3.- Unificación del diseño de las páginas del sitio.

Un sitio web, ya sea dinámico o estático, suele estar formado por unas cuantas páginas. Mantener una misma apariencia se puede volver una tarea pesada y tediosa si tenemos que copiar y pegar código cada vez que creemos una página nueva, o que deseemos modificar una misma cosa en todas.

Enlazando a cada una de nuestras páginas nuestras hojas de estilo, agilizamos este proceso y minimizamos el trabajo.

4.- Optimización de los tiempos de carga y de tráfico en el servidor.

Al haber dividido contenido y apariencia obtenemos archivos más ligeros, y esto nos reporta dos beneficios: por un lado, reducimos notablemente los tiempos de carga del sitio en el navegador. A esto debemos unir la capacidad de éste para mantener nuestra hoja de estilo en caché.

Por otro lado, reducimos el volumen de tráfico de nuestro servidor, que siempre es de agradecer, tanto si disfrutamos de servicios gratuitos en que solemos tener cuotas muy reducidas, como si pagamos por tener alojamiento propio.

5.- Precisión o elasticidad.

Desde el momento en que usemos CSS, el tamaño y posicionamiento de los elementos que formen nuestras páginas podrá ser exacto. Podremos indicarle al navegador en qué píxel debe colocar ésta o aquélla imagen, o qué alto y ancho deberá mostrar.

Pero al mismo tiempo, podremos emplear medidas variables o relativas que nos permitan expandir el contenido hasta ocupar la totalidad de la ventana de navegación a nuestro antojo, o contraerla a sólo una parte de la misma, con independencia de la resolución de pantalla del usuario.

6.- Accesibilidad y estructuración.

La combinación de CSS y marcadores descriptivos va a posibilitar que nuestra página se vea correctamente con o sin hoja de estilos, puesto que en cualquier caso, la información se mantendrá estructurada y ordenada.

Esto supone que podrá ser accesible sin ningún tipo de problemas tanto por navegadores antiguos o sin soporte para CSS, como para personas con algún tipo discapacidad.

7.- Limpieza del código fuente.

Si escribimos una hoja de estilo independiente, el código fuente de nuestra web va a resultar menos farragoso y agilizaremos las tareas de localización de las líneas que busquemos.

8.- Compatibilidad y continuidad.

Las reglas establecidas por la especificación CSS-1 fijaron los estándares del diseño, y se mantienen y respetan en la CSS-2. Es de prever que en el nivel 3 sucederá lo mismo con respecto a su predecesor.

Pero lo realmente interesante es que los navegadores que no soporten CSS-3 no tendrán problemas a la hora de asimilar el contenido CSS puesto que siempre les quedará la compatibilidad de CSS-2, o la CSS-1 en su caso. La compatibilidad de las especificaciones CSS anteriores estará siempre garantizada.

9.- Estandarización frente a especificaciones propietarias.

La adopción de estándares por la W3C ofrece la ventaja de la compatibilidad del código entre los diferentes navegadores web. El uso de “soluciones propietarias”, como es el caso de muchas etiquetas o patrones usadas por Microsoft.

En su interpretación de lo que es y no es CSS, dificulta la creación de páginas web, porque supone tener que escribir dos códigos distintos para obtener un mismo resultado, en función del tipo de navegador que use el visitante.

El uso del estándar CSS de la W3C evitará visualizaciones incorrectas de nuestras páginas en distintos navegadores.

10.- Permite la diferenciación de estilos para imprimir / visualizar en pantalla.

El uso de CSS nos va a permitir también maquetar separadamente el contenido de nuestra web para ser mostrado en pantalla o para ser impreso.

Tengamos en cuenta que las necesidades y propiedades de un folio de papel y de un monitor nunca van a ser las mismas, y gracias a CSS podremos determinar cómo queremos que se imprima lo que mostramos en la pantalla, manteniendo siempre una apariencia limpia, ordenada y agradable visualmente.

Espero que estas pequeñas reflexiones hayan servido para animarte a dar el gran salto y vestir a tu web con un bonito traje CSS hecho a medida. Y si aún no te animas a usar CSS en tu sitio, te invitamos a conocer CSS Reinicia, una iniciativa que busca que sitios web en nuestro idioma se reinventen gracias a esta tecnología.