UsabilityVideoFlash
ActionScript
Essays
CSS provides incredible control over the look and feel of a website, but it also creates faster downloads, improved accessibility, a higher level of cross-browser/platform compatibility, and dynamic design that can change according to the user's preference. CSS is the way forward with web design and most new websites use this design method by default already.
I have been using CSS from the early days of CSS design, however it was only within the last year that I fully understood the real design potential of this tool and how to implement it. Prior to that I had used it, as many designers did, simply as a way to manage the text and background colour of a site. It was an easy way for me to implement a look across a large swathe of content without having to fiddle with individual Mark-up tags. I knew much more could be accomplished with CSS, but to be honest I didn't understand the language beyond anything but a basic level, and wasn't interested enough to learn how to accomplish something I could already do with tables and HTML tags.
Early in 2004 I ran across a site called The Zen of CSS Design created by David Shea. This site was specifically put together in the hopes of demonstrating the immense power of CSS specifically as a design tool. The concept was simple, use one HTML/XHTML page as structure and allow designers to submit their own open source CSS files to "redesign" the site. A quick look through the gallery had me immediately convinced I had wasted my time putting off learning how to use CSS design and began dabbling straight away.
It took a good while longer for me to become more or less familiar with the language, and even longer still to design a site completely with CSS, but now I realise the full impact this language has on the web I will never design without it.
As with the HTML pages I thought I would begin the exploration of my CSS design skills with the best and most recent example: this site. I have structured virtually every aspect of this evidentiar materials site to be controlled by a single CSS document, and as a result it is by far the most comprehensive CSS design I have done to date.
The CSS in this site is written with the intention of performing three functions:
To precisely control the layout of all design and text elements so as to provide a highly aesthetic experience across platforms.
To allow for all design elements, excluding thumbnail links which are considered content, to be dynamically updatable through CSS alone.
To comply as much as possible with Accessibility standards such as text readers, text size control, and image handling.
I have done my best to meet all three of these functions in order to demonstrate my experience with them, and I'm pretty happy with the result. You can view the site with CSS turned off by clicking here.
Garden Art represents a basic attempt at employing more complete CSS control over not just text but design elements as well. The layout of this site was particularly challenging to design, and the use of CSS was both necessary and incredibly helpful as an alternative to totally inline HTML controlled design.
It is however a dinosaur of sorts, as there are few areas that could not be improved with better CSS, but as I was working to a brief and my understanding of CSS wasn't complete (or at least as near to complete as it is today), I was reluctant to venture into uncharted territory while "on the clock", so to speak.
Notice that although the site is heavily designed graphically, there is no CSS control over anything other than the text and the main background. Images are placed within a nested tables ad are sliced with the background elements included.
There is proper use of Classes and IDs though, and the CSS document itself is broken down into semi-structured elements that improve design flow with a little less than a moderate level os redundancy.
And now we have a great example of a CSS design by "My Name Ogg!". Taken straight from the Stone Age of my design career, this site is admirable for even using CSS at all. There is no use of image placement, there is no use of correct element creation. This CSS file does little else than describe text styles throughout the document.
In my defence however, at the time there was also very little browser support for anything much more advanced. I could have included some design control, at the very least some redundancy elimination, but as there was little need to learn how it seemed to work fine as it was.