project overview

Posted by joy


Not that I was ever really gone, it’s just that my energies were directed elsewhere. Nice to say that the project went well, at least on my end.

Five observations for you.

1)My CSS skills are getting stronger. I still prefer a mixed environment of tables for quick and dirty horizontal positioning when I just have to get something done. Also, I hope that the CSS3 spec will be implemented and supported sometime in my lifeftime. That would be helpful.

2)One CSS method I used for this project was the hover psuedo-class. My goal was to make buttons that would change color if a user hovered their mouse cursor over them. Easy enough, you would think. As it turns out, it is easy to implement such an idea in Mozilla based browsers as you can set an element hover declaration (i.e. ul li:hover). Of course homie don’t play that in IE 6 - although according to this MSDN document, element hover will be supported in IE 7. IE 6 only supports anchor (the a in an a href) hover. So to make the effect work in IE 6, I did what any other right thinking person would do, I employed spacing to make the anchor cover most of the button.

Yes, I do know that there is javascript which would help with the IE 6 hover issue but the least amount of javascript I have to deploy, the better.

3)Also on this project, I have the opportunity to work with Flash (or, well SWF files to be specific). While I’m not usually patient with editing multimedia, in these SWF files it seems that all you do is edit the appearance, effects and timeline for each individual object. Which is very similar to any other multimedia software including, say, Garageband or iMovie or Audacity.

4)I have made my peace with PhotoShop. Over the past few years, I’ve never really enjoyed using various versions of that program - just too many options to choose and buttons to push, but now I’m at the point where I can say I need X effect and I can execute it in an efficient manner.

5)Last but not least, the upper left hand corner of your page is the most active part of your design. Remember that.

[tags]Web design, CSS, HTML, usability, multimedia, Web browsers [/tags]


3 Responses to “project overview”

  1. fluffy Says:

    It’s actually better for usability to make the anchor cover the entire button anyway. The changing color provides an affordance that indicates that if you click now, it’ll do something. So if you mouseover something and it changes color and then you click and nothing happens, it causes confusion and, eventually, annoyance when they finally figure out that they need to actually click on the little bit of underlined text in the middle.

    On that note it’s best to carry as much of the style as possible in the anchor itself. When I do list-item link buttons I usually do something like:

    ul { list-style-type: none; margin: 0px; padding: 0px; width: 10em; /* other declarations for the list itself */ }
    li { margin: 0px; padding: 0px; border: solid black 3px; /* other declarations for the relationship between list items */ }
    li >a { display: block; width: 100%; text-align: center; /* styling for the individual buttons */ }
    li >a:hover { background: yellow; /* additional styling for the buttons in the active state */ }

  2. fluffy Says:

    Wow, I love how your comment autoformatting gets confused by *s.

  3. colson Says:

    If you get the chance, I strongly recommend trying out Inkscape for doing some design work. I am now a huge fan of svg and Inkscape in general! But I agree with you about Photoshop - almost overkill at times.

Leave a Reply