Grids: A Lesson From iTunes

I was importing CDs into iTunes and noticed a few usability points about the song grid...

First I saw that all text columns and headers are aligned left.  The header text being directly in line with the column text.  The exception to this rule is fields where there are divisions such as ":" (colon) or in other grids maybe a "." (period).  In iTunes the song length field has a colon ":" to separate minutes and seconds.  This is the only field that is aligned right.  I assume the reason to be because the seconds portion is always fixed at 2 characters, where as, the minutes varies from one to two.  Aligning right, assures a nice straight line along the aligned edge.

Another thing I noticed is how sorting is indicated.  The sorted field has an arrow indicating the sort direction.  If you change fields, the arrow moves to the new field.  This seems to keep the interface from getting too cluttered with little icons and arrows... keeps it clean!

 

Tags:

 

jQuery and the IE ClearText bug

So, I am all excited about the simple animations available in jQuery (i.e - show("fast") ), and when I go to use it, the text inside the element being shown is all ugly, or garbled, or whatever you want to call it... it's not the text I wanted...

Before applying the animation my page looks like this (in Internet Explorer 7):

After hiding and showing the wrapper div my text is not as smooth as it was before...

In Firefox, everything looks fine.  What's up?  It appears to be related to an issue with ClearType in Internet Explorer.

This is something to do with how jQuery sets the styles on elements that are being animated.  I think the culprits are "filter" and/or "opacity" styles that are set.

One, easy solution for me has been to use the jQuery .slideDown() and .slideUp() animations instead of .show("fast") and .hide("fast").  Apparently slideUp() and slideDown() apply different styles.. I don't think they animate the opacity or filters.

Some resources I found online...

IE7, ClearType, DXImageTransforms and Fade Animation Fuzziness - Matt Berseth

ClearType with DXTransforms in IE7 - the IE Blog

 

 

Tags:

 

The Craftsman Programmer

When I think of a craftsman I often think of a wood-worker in a dusty shop working a single piece of wood to perfection.  He's cutting, shaving, sanding.  Moving from one tool to another with a goal of perfection and the focus to make sure each stroke of the blade and each swipe of the sand paper is just enough, but not to much.

The master craftsman knows exactly what needs to be done, and he has spent years learning how to use his tools in just the right way, and as a result he is able to face the various challenges that come his way.  Every piece may be different, but his knowledge of the wood (the grain, the density, the strength) allows him to make the right decisions along the way.  And the various joinery and tool techniques he has mastered will help him create a fine piece of work.

Nobody sits down and just builds an outstanding piece of furniture.  There are some things that every fine craftsman must be aware of before he becomes a Sam Maloof.  To say they have skill is not enough.  Creating a beautiful piece of furniture means paying attention to convention, rules, guides, measurements.  These things are very mechanical, but are still very much a part of creating a fine piece of work.

I am not a master wood-worker, but I do seek to be a master craftsman web developer.  This means never forgetting the basics, paying attention to convention, and going beyond function to aesthetic beauty.  

But, you can't have the aesthetic beauty without everything else! A finely crafted web site meets the functional needs of the visitors while being aesthetically pleasing in the same breath.

Tags:

 

Web Design Mockup Tool

This is a nice tool for doing mockups called Balsamiq...

http://www.balsamiq.com/

 

Tags: