Comments on: project overview http://cleverhack.com/2006/09/23/project-overview/ A Blog About Technology, Search Engine Optimization (SEO), Internet Marketing And More. Thu, 04 Dec 2008 03:44:06 +0000 http://wordpress.org/?v=2.0.2 by: colson http://cleverhack.com/2006/09/23/project-overview/#comment-24847 Sat, 30 Sep 2006 01:38:18 +0000 http://cleverhack.com/2006/09/23/project-overview/#comment-24847 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. 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.

]]> by: fluffy http://cleverhack.com/2006/09/23/project-overview/#comment-24803 Sat, 23 Sep 2006 19:26:09 +0000 http://cleverhack.com/2006/09/23/project-overview/#comment-24803 Wow, I love how your comment autoformatting gets confused by *s. Wow, I love how your comment autoformatting gets confused by *s.

]]> by: fluffy http://cleverhack.com/2006/09/23/project-overview/#comment-24802 Sat, 23 Sep 2006 19:25:41 +0000 http://cleverhack.com/2006/09/23/project-overview/#comment-24802 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 */ } 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 */ }

]]>