Como comentábamos en artículos anteriores, apostamos por el uso de las CSS a la hora de maquetar nuestros diseños web. El uso de tablas para este propósito es algo que ha quedado desfasado totalmente y las ventajas de realizar la maquetación de nuestros diseños web mediante CSS son muchas más, además favoreciendo el código limpio y el posicionamiento de la pagina web.
El CSS es algo que va evolucionando y desde que apareció la versión 3 aportó nuevas características que nos hará más fácil el diseño web.
Con CSS3 ampliamos nuestro control sobre el diseño de las páginas web que maquetamos adquiriendo nuevas opciones que antes había que realizar mediante trucos que podían alterar el contenido de nuestro diseño y que luego podían presentar problemas según el navegador donde viéramos nuestro diseño web. Gracias a estos nuevos mecanismos que aporta CSS3 nos ahorraremos tener que realizar esos trucos que podían complicar nuestro diseño web.
También es importante destacar la velocidad que ganamos y productividad a la hora de maquetar las webs al tener estos elementos ya incluidos en la CSS.

Por citar algunas de las nuevas cualidades del CSS3, ahora disponemos de la posibilidad de usar en la maquetación de nuestros diseños web directamente elementos como esquinas redondeadas o gradientes, evitando tener que andar con estos trucos gráficos que antes comentábamos y que podían presentar problemas en el diseño de nuestras páginas web.
Por lo tanto las ventajas del CSS3 aparte del mayor control en el diseño, es que la creación de nuestras webs va a a ser más rápida, mejoraremos en el peso y en el tiempo de carga, factor que google valora para el posicionamiento de las paginas web.
Aquí van algunos ejemplos de los nuevos elementos que podemos utilizar al maquetar nuestros diseños web.

BORDES CON DEGRADADOS

Puedes obtener bordes con degradados usando: -moz-border-radius / -webkit-border property.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

ESQUINAS REDONDEADAS O BORDES REDONDEADOS

Ahora es muy fácil implantar esquinas redondeadas o bordes sin trucos gráficos en la maquetación.

background-color: #DAE8EC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #B8CB99;
padding: 10px;

BORDES CON IMAGEN

Ahora si quieres utilizar las imágenes para los bordes, CSS3 soporta imagen en los bordes a través de las propiedades border-image y border-corner-image.

border-image: url(border.png) 27 27 27 27 round round;

MÚLTIPLES COLUMNAS (MULTIPLE COLUMNS)

Tenemos la posibilidad también de poder colocar textos que sean muy largos en columnas pudiendo así distribuir mucho mejor el espacio .

CSS 3 Multiple Columns (Count)
#my_CSS3_id {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}

Esto son solo algunas de las novedades que trae la nueva versión de CSS3 por destacar algunas, ya que la lista completa de novedades que podemos utilizar en nuestros diseños web es bastante larga.

En resumen vemos que las novedades solo aportan mejoras en cuanto a diseño y posicionamiento en nuestras paginas web

Css son las siglas de lo que se conoce como hojas de estilo en cascada. Las hojas de estilo nos permiten controlar el diseño de nuestras páginas web de forma general. Con ellas podemos tener control sobre el texto, las imágenes y otros elementos que forman el diseño de las páginas web, como puede ser la estructura. En definitiva, nos permiten maquetar nuestras páginas de una manera eficaz dándole estilo a nuestro código HTML en un documento aparte.

Ventajas para usar CSS en lugar de tablas.

• Una de las principales ventajas de utilizar CSS para el diseño de nuestras páginas web es que puedes hacer modificaciones en varias páginas a la vez solo realizando un cambio en nuestra hoja de estilo. Por ejemplo si necesitamos cambiar el color del encabezado en las diferentes páginas que componen una web, no es lo mismo tener que cambiarlo en las 50 páginas internas que cambiarlo en un único documento que es la hoja de estilos y que automáticamente ese cambio se aplique en las 50 páginas internas.
• Además nos proporciona un código más limpio, eficaz y cómodo para trabajar al poder tenerlo todo en un solo archivo y al poder usar nombres para cada uno de los elementos de una página, por lo que el contenido real de una página web está solo en un único archivo y los diferentes estilos se adjuntan en otro documento de estilos.
• También conseguimos eliminar mucho código innecesario y obsoleto del HTML, permitiendo así mejorar tiempos de carga en los navegadores.
• Añadimos a esto que los CSS se quedan almacenados en la cache de los navegadores, permitiendo reducir el tiempo de carga de nuestros sitios.
• El buen uso de CSS mejora la accesibilidad y la lectura que tienen los motores de búsqueda sobre un sitio web, favoreciendo el posicionamiento de nuestras páginas web.

Validar páginas por W3C.
W3C es una organización que rige los estándares y recomendaciones de una web bien hecha. Gracias a esta organización, podemos comprobar que el diseño de nuestra página web es correcto y sigue los estándares actuales.
Tener el código limpio y claro es algo que siempre nos va a ayudar a posicionar mejor, ya que a google le encantan las paginas así , y  una manera de poder hacer esto es cumplir los estándares de W3C en todos nuestros diseños web.
Realizar una validación en W3C , nos proporcionará la calidad de un trabajo bien hecho, aunque en determinados trabajos pueden existir alguna incoherencia con esta organización por requerimientos del proyecto, es recomendable siempre que sea posible realizar la validación.

Ventajas de maquetar css con respecto al SEO
Las ventajas de maquetar páginas web con CSS para nuestro posicionamiento web, conocido también como SEO son muchísimas. Al tener un código tan limpio lleno de contenido, ayuda a que nuestro de diseño web sea semánticamente más correcto y aparezca mejor posicionada en los buscadores, entro los principales motivos destacan dos:

• Separación del código html del css, el código que se usa es el que realmente necesita el buscador para posicionar, los estilos de toda la página van en otro documento anexo.
• Velocidad de carga, desarrollar página web con css tiene la ventajas que los elementos cargan mediante caché, por lo que la velovidad de carga de la página web , es muy superior a otra página que tiene los estilos en el mismo documento html, está demostrado que Google tiene en cuenta la carga de las páginas web.

Recomendación antes de empezar.
Los que nos dedicamos a el diseño de páginas web y la maquetación de estas mismas sabemos lo difícil que es encontrar la compatibilidad entre todos los navegadores que existen, Internet Explorer, Firefox, Chrome, Safari,etc…, o por lo menos los más importantes. Esto viene porque los navegadores no interpretan el código de la misma manera y entre ellos hay pequeñas variaciones. Aquí entra en juego el reset de Eric Meyer, que es un código de los más conocidos de los que disponemos para poder resetear el CSS de nuestro diseño web. Al resetear digamos que ponemos a cero esos valores que pueden crear discrepancias entre navegadores y así poder empezar a dar el formato y a maquetar nuestras páginas web que nosotros queramos sin que el navegador haga su propia interpretación.

Otro proyecto interesante es Css Zen Garden, donde la comunidad con un único archivo html, crea páginas totalmente diferentes, mostrando el verdadero potencial que tiene maquetar páginas web mediante CSS.

¿Que es CSS SPRITE? Css Sprite es una técnica de maquetación de páginas web en la que se reduce la carga de imágenes en la web, no es lo mismo cargar 10 imágenes de 10kb que 1 imagen de 100kb, aunque el peso en Kb es similar, el número de peticiones es de solo una, aquí radica el potencial de la técnica css sprite.

La principales ventajas de usar esta técnica son las siguientes:

• Reducción de transferencia y recursos del servidor.
• Mayor velocidad de la página web al realizar menos peticiones Http

Esta técnica aparece en los años 80 cuando se diseñaban los juegos en 2 dimensiones, en la actualidad se usan para realizar juegos para móviles debido a que necesitan ser muy livianos. Y desde hace unos años a irrumpido en el desarrollo web.

En los videojuegos la técnica consiste en crear en una secuencia con todas las imágenes necesarias para realizar una animación, en el caso de la web consistiría en incluir el mayor número de imágenes en un solo archivo, mediante cambios css en el background conseguiremos desplazar la posición de la misma para que se muestre unicamente la parte de imagen que necesitamos.

Un ejemplo muy gráfico sería Google, si realizamos una búsqueda y nos deplazamos al pie de página , en donde figuran los resultados y está la páginación si guardamos la imagen de fondo (botón derecho del raton sobre la G de Google), podremos ver que todas las imágenes que usa Google en su web , realmente es solo una.

El código básico para comprender la forma de diseñar una página web sería la siguiente. En una lista por ejemplo primero asignaremos la imagen y le daremos el tamaño que necesitamos.
#contenedor{
background-image: url(‘imagenes/imagensprite.png’) no-repeat;
height: 16px;width:16px;
display:block;
padding-left:5px;
}
Y a cada elemento individual le aplicariamos un desplazamiento del fondo para conseguir que se muestre exactamente el trozo que necesitamos:

#contenedor lista1{background-position:0px 0px; }
#contenedor lista2{background-position:-26px 0px;}
#contenedor lista3{background-position: -43px 0px ;}
#contenedor lista4 { background-position : -68px 0px ;}
#contenedor lista5 { background-position : -94px 0px ;}

Recursos automáticos de CSS Sprites:

• Css Sprittes

Hasta hoy no era importante el tiempo de carga en una página web, pero ultimamente se habla mucho en la red de uno de los nuevos factores que ha incluido Google a la hora de posicionar una página web ,el tiempo de carga, si esto es cierto (que realmente pienso que sí o en breve lo será), tendremos que optimizar todas nuestras imágenes y archivos de texto, incluidos las Css.

Está claro que serán una factor importante en nuestros diseños de páginas web , aunque no decisivo, pero puede hacernos avanzar alguna posición, por lo que si estamos en la posición 11 decidirá si aparecemos en la primera página o en la segunda, como siempre estar o no estar.

Si comprimimos un archivo con GZIP conseguiremos una ahorro de carga del 80%, un archivo que pesa 80kb puede llegar a pesar 10kb, con lo que conseguiremos que nuestro servidor tenga menor carga, mayor velocidad de descarga y si nuestro servidor tiene límite de transferencia mensual también conseguiremos un buen ahorro en este concepto. Deberiamos comprimir los archivos CSS, HTML, PHP,JS…

Para poder realizar las compresiones con GZIP es imprescindible que nuestro servidor posea el módulo mod_gzip (APACHE 1.3), sino no podremos realizarlas y deberemos usar alguna herramienta gratuita como puede ser cleancss.

Una vez comprobado que tenemos GZIP activado, tan sólo tendremos que incluir en nuestro archivo .htacces el siguiente código:

 
 
      mod_gzip_on Yes
 
      mod_gzip_item_include file \.html$
 
      mod_gzip_item_include file \.php$
 
      mod_gzip_item_include file \.css$
 
      mod_gzip_item_include file \.js$
 
      mod_gzip_item_include mime ^application/javascript$
 
      mod_gzip_item_include mime ^application/x-javascript$
 
      mod_gzip_item_include mime ^text/.*
 
      mod_gzip_item_include handler ^application/x-httpd-php
 
      mod_gzip_item_exclude mime ^image/.*

Con apache 2.X el proceso se realizaría con el siguiente código:

# BEGIN GZIP
 
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
 
# END GZIP

Para comprobar en cuanto quedaría nuestra web comprimida podéis usar la siguiente herrmaienta: compresión

Y esta para comprobar si está funcionando, otra.

1.-Se recomienda mantener siempre las declaraciones CSS en una sola línea, para mantener tu archivo CSS limpio y más pequeño.

Correcto

h2 {font-size:18px; color:#333333; background:#cccccc; }

Incorrecto

h2 
{
 font-size:18px;
 color: #333333;
 background: #cccccc; 
}

2.-Combinar elementos

Una de la mejor manera de ahorrar líneas de código es mediante la agrupación de selectores.

Correcto

h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }

Incorrecto

h1 {
font-family: Arial, Helvetica, sans-serif; color:#333; 
}
h2 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }
h3 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }

3.-Usar “Margin” para centrar el layout

#Container { margin:0 auto; /* top, bottom - and left, right*/ width:xxxpx;  }

4.-Comentar tu CSS
Es muy importante comentar tu CSS, posiblemente al cabo de un año o meses, un cliente te puede pedir modificaciones en la página web, sino lo tenemos comentado, nos será bastante dificil encotrar las clases que estabamos usando.

/******** CODE START HERE ********/

5.-Prueba a usar herramientas de optimización de código css

Css Tidy
Clean Css
Css Optimiser
Flumpcakes Css optimizer
cssdrive Css Comperasor
W3C Css Validator

Os dejo una colección de 25 herramientas imprescindibles que cualquier diseñador deberia conocer, son todas online y nos facilitan la vida, desde el famoso lorem lipsum con el cual rellenamos nuestros páginas antes de entregarlas, hasta generadores de stripes, o herramientas para tratar imagenes, o códigos css para realizar bordes.

Podéis visualizar el contenido aquí