Reducir nuestra hoja de estilos CSS

Una hoja de estilos puede empezar a alcanzar un tamaño considerable cuando estamos trabajando en una interfaz muy completa. Hay algunos recursos que podemos utilizar para hacer nuestro css algo más resumido.

Resumir algunos atributos:

LARGO:
#menu {
background-color:#889900;
background-image:url(menu.jpg);
background-position:top;
background-repeat:repeat-x;
border-color:#000000
border-style:dashed;
font-family:Arial;
font-size:12px;
float:left;
}
RESUMIDO:
#menu {
background:#889900 url(menu.jpg) top repeat-x;
border:#000000 1px dashed;
font:12px Arial;
}

Visualizar en disitintos navegadores

Todo diseñador de web sabe cual es su cruz, comprobar que el diseño se ve bien en todos los navegadores. También sabe de quién es la culpa, de Internet Explorer. Pero hasta que las cosas cambien sigue siendo necesario echar un vistazo a las distintas versiones de IE que siguen sobreviviendo en los ordenadores de los patanes. Como no vamos a tener todas ellas instaladas en nuestro ordenador, podemos usar una de estas dos webs para hacer una simulación de como se verían:

Netrenderer



BrowserShots

Busca ideas en Pattern Tap

Siempre hay que tener bien nutrida la galería de ideas para cualquier proyecto. No soy muy partidario de los libros con fotos de webs, me parecen una contradicción, quieres ver diseño web, que mejor que la propia Red para ver la interacción o cómo han solucionado problemas de CSS.

Esta claro que la Red es infinita y no se puede empezar por cualquier parte, así que os recomiendo patterntap.com, una estupenda galería con categorías por elementos.

herramientas prácticas para diseño web

Cuando tengo que diseñar una web, además de las herramientas por excelencia como Photoshop, Dreamweaver o Flash, me apoyo en algunas que están disponibles en la red y ayudan mucho.

Dejo una lista de las que uso habitualmente:

Firebug. Complemento para Firefox que una vez instalado nos permite ojear el código HTML y CSS de una web y así prácticar sin riesgos soluciones de diseño css.

IE Developer Toolbar. Lo más parecido a Firebug para IE.

Favikon. A la hora de publicar una web no hay que olvidar ponerle ese pequeño icono que aparece en la url, el favicon.

Bgpatterns. Crear un fondo para nuestra web puede resultar un paso más engorroso de lo que pensabas, con esta herramienta puedes pasar un buen rato y salir del paso creando tu propio patrón de fondo.

Kuler. Otro ratillo se te va cuando te pones a combinar colores en el kuler de Adobe.

Designer Toolbox. Para hacer una presentación de como quedará la web puedes poner la guinda utilizando las plantillas de navegadores en PSD desccargables en esta web.

Pixel Perfect. lo podemos instalar gratuito desde Firefox y nos permitirá cargar las imágenes que queramos para superponerlas en nuestra interfaz. Así nos ahorramos tener que subirla al FTP para ver como queda.

10 consejos de Usabilidad

1. Debemos comunicar de forma inmediata el objetivo del sitio a nuestros clientes.

Los primeros momentos de estancia en un sitio son claves. La mayoría de las visitas no pasan de la página de acceso, y del pliego visible en pantalla (lo que se ve en la ventana del navegador sin hacer scroll), por lo que es decisivo comunicar con mucha claridad cuál es el objetivo del web.

Algunos consejos:

- Logo de la empresa visible y acompañado de un copy que nos informe de a que se dedica la empresa y situado en la parte superior de la página.

- Exponer en la home de forma clara los contenidos y objetivos principales del sitio web.

- Es recomendable incluir destacados con imágenes con textos descriptivos de los productos o servicios destacados.

2. El cliente debe estar informado constantemente acerca de su ubicación.

Es esencial crear una sensación de escalas que permita al cliente olvidarse de la navegación y centrarse en la información ofrecida.

Existen diversas formas de lograr esa sensación de escalas:

-Logotipo de la empresa siempre presente.

-Títulos de página claros.

-Informar al usuario de donde se encuentra con “rastros de migas” (breadcrumbs).

-Crear un mapa de sitio accesible desde todo el sitio.