Y aunque no me considero un experto en el tema, tengo unos cuantos consejos, técnicas y trucos CSS que he ido guardando a lo largo del tiempo, mismas que comparto a continuación:

Trabaja por secciones

Ejemplo aplicado al style.css de un theme WordPress, divide tu hoja en secciones: Estilos Globales o Generales, del Contenedor principal, Sidebar…

/* Global */
body { font: 14px/1.6 Arial, Helvetica, Verdana, sans-serif; }
/*Area de Contenido */
#wrap-post { width: 600 px;  float: left; }

CSS Shorthand, el mejor amigo de tu hoja estilos.

El principio básico del asunto según la W3C es que CSS esta compuesto por 2 cosas: un selector y una declaración y en cada declaración hay una propiedad y un valor, basandonos en esto los shorthands serían propiedades con valores condensados o comprimidos, ejemplo práctico:

/* Propiedad margin sin shorthand */

.elemento {
        margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 5px;
}

/* Propiedad margin usando shorthand */
.elemento { margin: 10px 5px 20px 10px; } 

Para entender mejor esto, les recomiendo leer la Guía del CSS Shorthand.

Agrupa selectores

Tienes 2 o más selectores y las mismas reglas, no escribas lo mismo 2 veces.

.bloque { background: #FFF; padding: 15px; margin-top: 10px; }
.articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Agrupalos de esta forma:

.bloque, .articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Menos espacio es igual a más rápido.

La optimización del CSS apunta a la compresion de éste, entre menos espacio hay entre tus selectores, más rápido cargará el navegador tu página. Por ende es mejor escribir las declaraciones como lo hice en el anterior ejemplo, sin espacios en blanco.

Espero que esta serie de tips te ayude a escribir hojas de estilo más optimizadas.

Y aunque hay muchas formas de insertar estos (mediante plugins o escribiendo el código manualmente), sin duda una solución al alcance de cualquiera es Wufoo.

Un servicio en el que podrás crear multitud de formularios para tu sitio web o blog, con la ventaja que te brinda el hecho de que el código generado cumple con los estándares web y es altamente personalizable para integrarlo con la apariencia de tu theme o diseño, sumado a que el host y todo lo necesario para almacenar y leer los mensajes lo ponen los chicos de Wufoo.

En definitiva uno de esos servicios web 2.0 a tener en cuenta por las grandes prestaciones que nos ofrece: facilidad, rapidez, customización e integración transparente de formularios en nuestra web.

Incluso para los que no somos profesionales en este campo pero tenemos algún emprendimiento en internet es bastante correcto que nos esforzemos por crear un sitio con accesibilidad y usabilidad total, ¿cómo lograrlo?, a continuación algunos recursos y consejos.

1.  Sigue las reglas y los estandares

Lograr que un blog o sitio sea cross browser no es fácil, pero el seguir los estandares de la W3C ayuda bastante a cumplir el objetivo.

Usable y Accesible

2.  No uses hacks, mejor usa Fixes

Lo puedes hacer manualmente o usando IE6 CSS Fixer.

3.  Optimiza tus imágenes

No es secreto que el tiempo de carga influye mucho para los usuarios; y es que son las imágenes las que más demoran en mostrarse, por ello es bueno siempre bajarles unos bytes con algún software para optimizar imágenes o herramientas web como Smush.it.

4. No te olvides del iPhone

Furor que causo el 3G y el iPhone es ya uno de los medios de entrada a internet que más adeptos gana dia a dia, por eso no es bueno olvidarse de él, checa como se ve tu sitio en el iPhone y si tienes un blog corriendo con WordPress optimizalo para el juguete favorito de Apple.

5. No uses tanto Flash y JavaScript

Dado que son lenguajes que para su interpretación y lectura son necesarios algunos reproductores y habilitación de opciones es recomendado usarlos sólo cuando es necesario, así se evita la falta de elementos en tu sitio web si el usuario no cuenta con tales cosas y se aligera un poco más el peso final de la página.

Kernel Web en el iPhone

6. Describe tus elementos

Imágenes con el atributo ALT, enlaces con title y buen anchor text, descripciones de videos y multimedia.

7. Genera contenido legible, usable y escaneable

El contenido lo es todo, más alla de si el diseño es bueno, el contenido es el rey, hacer contenido usable y de calidad es una directriz no escrita, pero que es bueno seguir para hacer de la web una herramienta optima y completa.

8. Prueba y Comprueba

Nada más sabio que el arreglar y romper, tanto para aprender, como para mantener una website en optimo estado, usa los recursos que la web de brinda para asegurarte de que tu trabajo esta bien hecho:

• Hera, completa y muy buena herramienta que rescate de las entrañas de Webmaster Libre una suerte haberla visto.
• CrossBrowserTesting, visualiza tu website en tiempo real en todo navegador.
• IE Collection, todos los enemigos de los estandares (IE6,7 y 8 ) en uno sólo , para comprobar si se ve bien tu sitio y nada más.

Y aunque en el pasado recomendé una gran herramienta llamada Browsershots, desde que descubrí esta no la cambio por nada; dado que a diferencia de la primera que sólo te regresa un screenshot, CrossBrowserTesting te permite visualizar tu sitio web en cualquier navegador sin instalarlo en tu PC y hasta interactuar en vivo con él.

Eligiendo la configuración que desees, tienes la oportunidad de testear tu blog o sitio web sobre cualquier browser y hasta elegir sobre que sistema operativo estará  instalado, logrando así visualizar Firefox en Macintosh o hasta el arcaico Internet Explorer 6 en Windows XP.

Sin duda la mejor forma de checar el diseño y la programación de tu sitio sin limitaciones de hardware o software, asegurando que el usuario tenga una experiencia agradable y sin complicaciones.

Enlace | CrossBrowserTesting

Tu web en todos los browsers

Por lo que puedes recurrir a 2 cosas, ir chequeando tu diseño manualmente o usar Browsershots, el cual se encargará de hacerlo por ti, pues el servicio se encarga de enviar consultas a diferentes computadoras que tienen instalados determinados navegadores y estos a su vez devuelven una captura de pantalla de la apariencia del blog en ese navegador.

El proceso es sencillo, escribes la URL de tu página, eliges los browsers en los que quieras visualizar tu sitio y esperas un corto periodo de tiempo en lo que te Browsershots te devuelve las capturas de pantalla.

Themesbase, repositorio de themes

Si estas buscando una plantilla para tu blog, web o foro, Themesbase te puede ayudar a encontrarla.

Ya que se trata de un repositorio de themes gratis para todos los gustos y CMS, en el sitio se pueden encontrar desde themes para WordPress hasta plantillas para Vbulletin o phpBB, que son sistemas de creación de foros, Joomla o PHP-Fusion; y plataformas y CMS no tan conocidos como: Website Baker o Tiny Portal.

El sitio esta muy bien diseñado y organizado, puedes buscar tus templates explorando las categorías o utilizar el buscador que tiene integrado la web, además de que hay un foro de soporte, en el cual puedes hablar con los distintos creadores y diseñadores de estos para que te brinden ayuda o sepas si pronto habra una actualización de alguna.

Así que ya lo sabes, si quieres darle un lavado de cara a tu sitio web o foro, Themesbase es para ti, un sitio en el que podrás encontrar los mejores themes gratis para cualquier CMS o plataforma de foros.

Si eres dueño de alguna empresa los nombres activeCollab y Basecamp seguramente te resultaran familiares, puesto que se tratan de algunas de las herramientas más populares para gestionar y colaborar en proyectos empresariales o de organizaciones muy grandes, con muchas prestaciones, pero con la desventaja que son de pago.

Es allí donde ProjectPier entra en juego, puesto que se muestra como una aplicación gratuita y de código abierto, a la cual se le pueden sacar muchas ventajas, debido a su gran parecido con las herramientas ya mencionadas, entre las funciones más destacables de ProjectPier se encuentran:

• Potenciado por la Web, escrito en PHP y con una gran facilidad de instalación, basta con crear una base de datos MySQL y subirlo a tu servidor para empezar a usarlo y configurarlo.
• Control de rangos y limites de acceso y uso para cada usuario del sistema.
• Organización, asignación y administración de los diferentes roles del proyecto, tareas, milestones o puntos claves, etc.
• Soporte para mensajes entre miembros y usuarios, dinámica parecida a la de un blog o foro, así mismo ofrece la posibilidad de marcarlos como públicos o privados.
• Sistema de etiquetado y más.

Si se busca una alternativa gratuita y libre a Basecamp o activeCollab, ProjectPier es sin duda la opción a escoger.

Para ello basta con introducir tu hoja de estilos y CSS Fixer se encargará de sugerirte algunas propiedades, comentarios o hacks a insertar en tu archivo CSS para que tu blog o página se miré bien en la aberración exploradora 6 una cosa que siempre es difícil de lograr.

Aunque según leo en Código Geek, tal parece que los chicos de Redmond ya se hartaron de esta versión del Explorer y planean mandarlo al olvido con una actualización dentro de poco, esperemos que los usurios también se pongan las pilas y hagan que por fin este browser desaparezca.

Pero mientras eso pasa, esta herramienta es una gran opción para los que tenemos que lidiar con este navegador.

Enlace | IE6 CSS Fixer

Si eres un programador medio olvidadizo, Snipt te puede ayudar y mucho; ya que se trata de un servicio que almacena fragmentos de código (snippets), ya sean los que mas uses o alguno de especial importancia para ti, soporta muchos lenguajes, es de uso gratuito y cuenta con una interfaz muy sobria y fácil de manejar.

Snipt Logo

Así que si programas y no tienes memoria para el PHP, Java o Phyton o tienes muchas cosas que pensar y recordar, cuenta con este servicio como asistente personal y almacena tus snippets para compartirlos o utilizarlos luego.

Inclusive el servicio cuenta con una galería pública de snippets que te pueden ayudar para iniciarte en la programación de algún lenguaje o realizar aún más rápido tus proyectos.

Enlace: Snipt

Asi tambien cuenta con tutos para aprender a manejar Unix que no es nada fácil, o si quieres aprender todo sobre Windows, Tutorials Garden también te echa una mano, igualmente los hay para aprender a manejar 3D Studio Max, Maya, Rhino3D y Freehand, todos software de modelación y hasta te instruye en Photoshop y Fireworks.

La verdad es una página que vale la pena visitar y tener en los marcadores, ya que los diversos tutos con los que cuenta seguro te sacan de algún apuro un dia de estos.

Enlace | Tutorials Garden.