Parte esencial de un sitio web es el estilo visual con que recibimos al usuario. Estos estilos deben ser elegidos y construidos cuidadosamente, puesto que hablan mucho acerca de nosotros.

Una hoja de estilos en cascada o CSS es parte esencial de nuestro sitio, por lo cual debemos tener en mente muchos factores para su correcta visualización:

  • Exploradores
  • Sistemas Operativos
  • Dispositivos Móviles
  • Resoluciones de pantalla

Dicha CSS debe estructurar de forma ordenada el diseño del contenido, no podemos sobrecargar al usuario de información. Cada explorador cuenta con estilos que por defecto aplica a todos los sitios (sin excepción alguna), sin olvidar también que, cada explorador interpretara nuestra CSS de forma diferente, aunque los cambios sean mínimos, debemos tener esto en cuenta.

Actualmente no importa si el cliente tiene un monitor con una gran resolución, y si esta es la misma en la que nosotros hemos estado desarrollando el sitio, siempre debemos tener en cuenta las demás resoluciones, dispositivos y plataformas.

A continuación se presentan algunas herramientas que te ayudaran a llevar tus sitios a cualquier: sistema operativo, navegador, resolución y dispositivo:

Web Developer Toolbar

Siempre que navegamos por la red encontramos sitios que llaman nuestra atención, en especial por sus estilos. Ya sea que utilices Google Chrome o Firefox, puedes utilizar esta toolbar que te brinda opciones muy interesantes (ya que a veces View Source Code no es suficiente).

La sección de CSS nos provee opciones muy interesantes, desde desactivar los estilos que por default aplica el navegador a nuestro sitio, desactivar los estilos de CSS externas y más.

Adobe BrowserLab

Esta herramienta de Adobe te permite visualizar tus sitios en diferentes versiones de navegadores y sistemas operativos. Con solo darle la url del sitio en cuestión, puedes ver capturas de pantalla de tu sitio ya sea en Windows XP, IE 6, Firefox 3.6 y mas.

Adobe Device Central

No importa si necesitas que el sitio que estas construyendo se visualice en varios dispositivos, incluso sino cuentas con ninguno; Adobe Device Central te brinda la posibilidad de probar tus sitios en los dispositivos que quieras, puesto que solo necesitas bajar dicho perfil del dispositivo e instalarlo para comenzar.

Algunos recursos que te serán muy útiles:

A List Apart

Es un gran recurso en cuanto a diseño de sitios web, puesto que cuenta con muchos artículos, tips, ejemplos, etc. Es un sitio muy interesante, que ademas es alimentado por muchas personas.

Podemos encontrar tips para solucionar el siguiente ejemplo:
Cuando trabajamos con columnas y dichas columnas tienen un color de fondo, y un tamaño especifico, suele pasar que cuando nuestro contenido es mayor al tamaño de dicha columna, esta crece, pero no esta completamente rellena por dicho color.

Esto podemos solucionarlo de una forma sencilla, poniendo una imagen de fondo que se vaya repitiendo, de modo que no importa cuan grande hagamos esta columna, el relleno se extenderá.

CSS Mastery: Advanced Web Standards Solutions

Es un libro de Friends of ED en el cual se recopilan tips, trucos y técnicas para el trabajo con CSS, con un gran contenido.

Esta Editorial en si, cuenta con muchos libros mas de diseño web y CSS, no dudo en que pronto veamos un libro suyo de CSS3.

Cuando trabajas con CSS necesitas una gran cantidad de recursos al respecto, y estos dos no pueden faltar en tu lista. recuerda que no solo el diseño es importante, la información también debe ser valiosa. Sin importar si tienes conocimientos avanzados o básicos, estas herramientas te ayudaran muchísimo a la hora de realizar tu trabajo.