Designing with CSS3

Designing in an image editor

Designing compelling web pages can be a daunting task. Traditionally the method would start in an image editing application (although quite a lot of people have a pen & paper phase before that). The problem with this approach is the general lack of a proper tool for designing websites. Most designers today use Photoshop; either because they are used to it before they started with web design or because of it’s status as a industry standard. However the problem with Photoshop is that it was never designed as a tool for this kind of job. The tool that was designed for this type of job - Fireworks - seems somehow out of Adobe’s focus while feature creep slowly comes in to choke the program to a slow death (meaning that it’s been unusable since CS3 and frankly what we expect UI-wise has evolved since). There are many other tools out there, but few seem specifically designed for this type of job (with the notable exception of Opacity).

The reason this is important is that the web defines it’s own visual language by which designers either must or at least very often should abide to - things like links being different from other text or headers being of a larger type. However we also have to deal with flexibility - we typically need our design to be usable in various conditions like varying screen sizes, resolutions, quirks of CMSs etc. Another important aspect is the interactive part of web pages - unlike an image the web page changes when the user interacts with it (if only setting hover states for links). Some designers (typically beginners in web design) believe that the job is done at the moment they send the coder the finished PSD file. However that’s when the real design challenge begins.

Designing in the browser

So if not design in an image editor then where? How about the web browser? It supports a simple visual language out of the box, it can simulate perfectly effects such as flexible window sizes and it can be extremely interactive. Now a few years ago this proposition would seem quite insane. The browser didn’t support many of the visual elements and effects that form essential parts of almost any UI design out there - elements such as subtle shadows and lightning effects to give UI elements the appearance of real objects, gradients to blend colors smoothly and naturally and powerful transparency settings for objects to make the site appear appealing.

Browsers however evolve incredibly fast and with good ones (to make this clear: I’m speaking of Webkit browsers here) you can do this stuff a lot simpler then you can in Photoshop. Of course there is still a myriad of things you still can’t do with a web browser (my favorite being applying a simple Noise filter for a textured background), but it does cover the most needed visual elements uses in todays designs.

Plus of course the added benefit of having a reasonable stylesheet prepared that should require much less time to repare for production (the main job being preparing to work in not so good browsers).

I hope you consider this argument and maybe try this approach out at your next project (also check out this article for more info and an example).

A few tips

What I want to touch on however is that it might not be the best idea just to jump into TextEdit and hack away at your CSS. Since you are now going to spend much more time working with the language you might as well make it a bit easier. One of the things that has been around for some time are CSS abstraction languages which aim to provide a higher level language that then compiles into CSS (the best known is probably SASS). You may have heard about them or even tried one. However for me none of them really sticked when I was working the traditional way. However their better structuring and more extensive commenting facilities come in very handy when the CSS is not only an implementation of a design, but the design itself. The one I would generally recommend is named LESS and it’s main benefits include pretty much the same syntax as normal CSS. That means you don’t need to learn almost anything new. With that comes the very handy TextMate bundle that compiles LESS files on save. This works very nicely. I also would recommend using the LESS3 toolset (by yours truly) which abstracts a lot of the cutting edge quirks and makes your stylesheet automagically a lot more old browser friendly.

Next you should definitely make friends with the Webkit’s Web inspector. Just right-click anywhere on your page and select “Inspect element”. This is how to enable it in your browser. Explore and hack away.

I hope that this was inspiring to you and please if you indeed use some of these techniques, let me know about your experience.