cssvault - inspiring creativity

I personally have always found tag clouds to be a mess. In fact, the seemingly random variation in font sizes to denote weight has made me avoid the tag cloud if possible. That is, until I stumbled upon a recent article by Anthony Zinni of Positive Space regarding a new technique which he dubs the “tag grid”.

You can view a live demo by visiting the Positive Space Blog and clicking on the link that says “Tag Grid” on the right menu under Visualize.

Unlike the tag cloud, the tag grid uses color-coded boxes, arranged by weight from highest to lowest. By using some basic concepts used in pattern recognition and applying it to the tag cloud, Anthony has pushed the tag cloud forward into something even more easily recognizable. I am sure this is just one among many other future attempts at pushing the borders of visualization even further. Have you made any such attempts yourself? If so, feel free to point the way!

Share

When designers with no HTML knowledge come up with unorthodox layouts, the one slicing the design gets burdened with the task of keeping the HTML version faithful to the original design without breaking the layout, often at the cost of one’s sanity. The task is sometimes complicated by other factors such as maintaining ease of updating the content (whether it be via manual entry or CMS), accessibility requirements, usability, JavaScript / AJAX, browser rendering quirks, idiotic clients, hard to please bosses, etc etc.

Many of us has shared this experience in one form or another. The beauty of the experience is that lightbulb moment where you suddenly figure it out and after 4 hours you now have a working, hand-coded, tableless CSS you can be proud of. Turns out it wasn’t so impossible, after all!

There are many ways to fix impossible CSS layouts:

1. Background image trick - background images coupled with positioning tricks can be utilized to give the illusion that an element is where it’s supposed to be.
2. Positioning - relative and absolute positioning when used correctly with the proper nesting can place an element almost anywhere you need it to.
3. Transparent images - transparent GIF’s and PNG’s can be used to simulate layers just like in Photoshop. There is still a lot of stigma against PNG due to the lack of alpha transparency support in IE6, but this is easily fixed using IE PNG Fix, which requires very little effort and almost no modification to the HTML code.
4. Z-index - the CSS z-index is a tiny gem that helps tame multi-layered CSS, ordering them the way it should be.
5. Image editing - when all else fails, there is nothing easier than editing the image to make it CSS friendly. A common issue that benefits from editing are designs with non-repeatable background patterns. Usually, fading the pattern to the background color would solve this issue.

Personally, I have yet to encounter a design that cannot be encoded into HTML. I invite you all to share your experience. Got an impossible CSS design to layout? Let us take a look at it. It might not be as hard as you think.

Share

Zebra striping—also known as candy striping or half-shadow—is the application of faint shading to alternate lines or rows in data tables or forms. Examples of websites that use zebra striping include the currency site XE, the CIA World Factbook, and Monster.com. Zebra striping on the web is actually a carryover from print days: one of the first mentions of the technique appeared in 1961 [1]. Unfortunately according to this article on A List Apart, there really is no proof which demonstrates zebra striping as having a large, significant benefit over the other.

Share

I have always been a huge fan of the minimalistic sign-up form. You know, the ones where all it takes to create an account is to provide 3 items: username, e-mail address, and password. Including the password confirmation box and that makes four. So, I was ecstatic when Luke Wroblewski’s article came out. Here he was telling us that there is actually a better approach which allows its visitors to plunge into the service without being stopped by a sign up and a login screen.

I tested one of the featured sites myself, Geni and behold, I never even saw a registration screen. I was converted from visitor to user in a snap.

Other featured sites included Jumpcut, TripIt, and Fidelity’s myPlan.

Now that is what you call thinking out of the box!

Share

YUI 2.4.0 has finally been released and boy do they have a huge list of new features, which include the following:

• Selector Utility
• Charts Control
• Get Utility
• Profiler
• JSON Utility

As well as the following new widgets:

• Button
• Calendar
• Drag & Drop
• Rich Text Editor

Head over to the download page.

Share

A few days ago I wrote about the new CNN.com design. Head over to Design View for a good take on why the new design “just works” ™.

Design View / Andy Rutledge - quiet structure

Share