CSS-in-60, where you can watch the progress and evolution of a CSS design project. This project has me converting an existing table-based E-Learning system/website into a CSS-driven masterpeice that is future-ready, portable and seperates style from content. The animated GIF that follows, monitors the progress of converting just the homepage. The animation is not real-time, but rather compresses many days and hours into a short, sweet, 60 second clip.

Primary client goal:

To convert their existing E-Learning system to CSS based design that will be easier for them to replicate and customize. This is realized through css design, allieviating the need to edit multiple templates and pages when any design changes are introduced.

Design Tips:

As always, clean markup is imperitive. A strong, logical document heirarchy is the first step to converting a table-based layout. I found this E-Learning system ridden with css styles. Instead of hap-hazardly stripping exterraneous tags, copying existing styles and writing unique styles for every little element, a good document model will help you break down content into logical blocks. The needed styles will become apparent from there.

Tables are for tabular data! But sometimes its not practical to replicate a table in css. This project had alot of tables used not just for layout, but for organization of content. Sometimes tables that feature alot of data, may also include elements that aren’t allowed in a table (images for example). Do your best to move the images outside the table if possible and if not, use good judgement and identify whether or not it makes sense to kill yourself trying to reproduce a table in css.. A good rule of thumb – 3×3. If you are looking at data/content that spans 3 columns and 3 rows, it may make sense to leave it a table and simply clean up any invalid markup inside the existing table.

The Clip

Magazines are a continual source of inspiration for website design, yet many of the techniques used in magazine layouts are nary to be found on the web.

http://www.mandarindesign.com has a nice compilation of css tricks, magazine style pullquotes and even CSS based opacity/transparency.

Another installment of CSS in 60. Where you can see a website based on xhtml and css being built from scratch in about 60 seconds or less. A screenshot was taken anytime css changes were made that significantly alters the layout. A days worth of work compressed for your viewing pleasure. This is just another example of how CSS can be used to achieve a pixel-perfect rendition of what was mocked up in a graphics program. Click read more to view the animated GIF (412Kb).

Fonts have always been a major concern in webdesign, or rather, the lack of fonts. To remedy this, I have recently installed sIFR: Scalable Inman Flash Replacement for all headlines. sIFR replaces all H1′s, H2′s etc with a flash rendition of the text. Naturally you can select any font you have on your computer – giving designers complete typographic control over their headlines. Not to be used as a text replacement for websites, so designers still don’t have 100% control over type – but its very nice and degrades well for non-Flash or Javascript enabled browsers.

The installation process is relatively easy, the directions straightforward. Simply edit a js file, include it in your source and create the font. Font creation involves the use of the Macromedia Flash editor where you simply select the font you want your text to render in – then export the swf. Font creation can even be sped via automatic sIFR font creation through JSFL, Flash’s internal scripting engine. Overall, getting sIFR onto your site is easy – making it look good is slightly harder.

The trouble comes in the tuning of your new flashy headlines. Letter spacing, line height, padding, font size etc are all variables that need to be tweaked to get the best looking headlines you can with your font. I spent a good amount of time staring at headlines with cut off bottoms before I finally landed upon the values that worked. You are not styling the flash, but rather a dummy text only version of the headline that is created a split second before displaying the page to the viewer. This dummy version attempts to mimic the flash font’s letter spacing and size so the javascript can accurately determine the real estate to occupy with the flash replacement.

Conclusion

Overall I really like sIFR – its great for someone who wants total control of design. Perhaps less important to others but designers are a particular bunch. While easy to install – its not easy to tune. Probably the biggest drawback is extra time it adds to your page load. This of course depends on your usage and number of headlines it is replacing.

Resources used:

http://wiki.novemberborn.net/sifr/show/HomePage
wiki documentation

http://www.communitymx.com/blog/index.cfm?newsid=408
Not particularly informative but she does hit upon a good practice. It will make it easier on yourself if you first set the letter-spacing and font-size before before tweaking line-height. The line height can drastically alter the size of the box sIFR is trying to replace and skew your letter spacings and font sizes.

http://macromedia.breezecentral.com/p67619682/
Danilo Celic’s Breeze presentation

A Flash based Flickr image browser. What a great implementation of the wonderful Flickr API and Flash’s ability to access dynamic content quickly and present it in a way only Flash can.

Are you a designer? Find yourself forgetting certain css selectors? I love Jack Daniels has a great cheat sheet section and has recently added a CSS cheat sheet.