One of our current projects is a redesign for the Orton Family Foundation’s Community Almanac site (I’ve mentioned it before). The Orton Family Foundation was started by the folks who run the Vermont Country Store, and is particularly interested in preserving the stories and traditions of small-town America – something rapidly disappearing in the crush of homogenized, retail-franchise colonization efforts. I wanted to share a couple of peeks into the process for our upcoming redesign.

Tired of having to add classes in your markup to work around lousy CSS selector support in legacy browsers? Try SuperSelectors – a jQuery plugin enabling great CSS selector support, even in IE6.

In the course of redesigning the new TOPP website, I ran into another odd renderbug which I wanted to document.

The design for the new site includes two drop-down menus (for “About Us” and “Our Work”), and we went with an approach based on the classic Suckerfish menus. Pretty easy to implement, and looked great in our initial design passes. When I went to do some regression testing, I found that Opera was was badly misrendering the menus.

Need to support alpha transparency in IE6? Try this CSS-only fix on for size.

An all-CSS solution for clearing floated elements without extraneous markup.

I enjoy squashing renderbugs.

I don’t always enjoy the midway point, when a misrendering issue stubbornly refuses to yield to my ministrations, but that “Eureka” moment where I manage to tease out what’s going on under the hood and come up with a solution – that’s gold.

As a result of the fact that Internet Explorer generally has the most rendering issues, I’ve gotten to be good pals with IE, in it’s various incarnations. When presented with a new renderbug, I sometimes feel like a sitcom parent catching a child with their hand in the cookie jar. “Oh IE you goofball, what mischief have you gotten into this time…”

Making forms as usable and compact as possible is a fairly common goal in web design. Screen real estate is often at a premium, and finding ways to orient and provide information to users which doesn’t require additional space can be a great asset.

I decided to write a jQuery plugin to help fill this need.

When we were getting ready to launch the LivableStreets website earlier this year, I ran into an odd renderbug which I’ve finally had time to write up. The issue I found was that Internet Explorer would cut off portions of an element when negative margins caused it to extend beyond its parent.

Our team uses Skitch a lot. It’s a pretty invaluable tool for communicating visual information – you can easily annotate screenshots or comps. There’s great communicative value in being able to point at something, and as a remote employee in my past two jobs, I can’t imagine ever collaborating on web work without it.

Skitch does a lot of things well, but one bit of polish which always pops out at new users is the “Click to Clipboard” functionality. Skitch provides lots of ways for you to share your images, and when you click in the appropriate field, the site copies all the data to your computer’s clipboard, and presents a nice confirmation that you’re ready to paste that elsewhere.

For the Streetsblog WordPress theme, we wanted to include a widget which would display a featured user comment. The comp had spiffy oversized quotes surrounding the featured text.

I’d seen http://24ways.org/2005/swooshy-curly-quotes-without-images a while back, and decided to improve upon it for the new Streetsblog site. In particular, the floated close quotes in Simon Willison’s approach will often leave a lot of whitespace.