The new Jetta mini site

The new Jetta A5 mini site is up. Designed by Arnold Worldwide and put together (Flash development) by us.

Of special note is the fact that this is the first large scale (high traffic) site that is using my FlashObject embed method. The site has been up for a few weeks so far without a hitch. Unfortunately they seem to have changed the HTML around from what we gave them (it was valid XHTML 1.0 Transitional). Oh well, can’t have everything.

Anyway, the site turned out pretty nice, so go check it out.

Bad type

I’d like to take a minute to share a little Photoshop trick I picked up a while back. One of the main duties of my job is to take designs done in Illustrator or Photoshop and turn them in to functional websites. This means that I’m often the person responsible for taking graphical elements out of the comps our designers hand me and making those fit in the XHTML.

So when I see something like this on a website, it makes me cringe (screenshot from eBay’s homepage today):

Bad letter spacing on eBay

This is a classic example of what happens when you let your intern make graphics. I added the circles to point out the particularly bad areas in case you aren’t typographically inclined. Photoshop does a terrible job of kerning your small type, and when it’s not anti-aliased, the problem areas stand out much more.

How do you fix it? You could make them go back and manually adjust the spacing between each letter pair until it looks perfect, which could take hours… Or, you could select your type, and in the Character palette in Photoshop turn off the “Fractional widths” option (screenshot below).

Character palette

This will give you nicely spaced type at small sizes. It’s perfect for making those buttons with the non anti-aliased Verdana type that we have all had to make 20 times in our careers.

Yes, it’s that simple. Now go fix your type.

iVillage Redesign

For some reason nobody told me that the iVillage redesign that we did was partially launched last month.

This was one of the first projects I worked on when I moved to New York. We decided on a CSS layout using XHTML 1.0 transitional (sent as text/html), with some Flash peppered around. Right now only the entertainment section is using the new design, with the other sections to follow as their internal team takes our template and adapts the content in the other sections. Unfortunately the site doesn’t validate because of one little error(!) that I’ll be passing along to their internal team along with a few small visual errors to fix.

It uses a similar method to the suckerfish dropdowns for the flyout menus on the left navigation, and some basic CSS rollovers for the main navigaion tabs at the top.

I would have liked to use my FlashObject embed for the Flash content, but this was handed over to their internal team way before I had even thought it up, so it uses generic Javascript to detect and embed the Flash movies.

UPDATE (12-22-2004): Looks like the one validation error was in some content that has now rotated off of the homepage, so now it validates!

UPDATE (01-31-2005): The whole site went live this week.

WordPress author comment highlighting

I’ve noticed a few people doing ‘author comment highlighting’ on other blogs, and thought it was kinda neat. How often are you reading through comments on a blog and not realizing that the person commenting is the owner of the blog?

Well, why not highlight your own comments on your own blog so your visitors know it’s you?

Here’s how I added it to this blog:

1) I decided to highlight the comments based on my e-mail address. This means that every comment post that uses my e-mail will be marked as ‘special.’

To do this I used a small snippet of PHP code (new code is bold):

<li id="comment-<?php comment_ID() ?>"<?php if ($comment->comment_author_email == "geoff@deconcept.com") { ?> class="mycomment"<?php } ?>>

2) Edit your stylesheet so your posts are different. Since I added the class mycomment to the comments I make, I added this to my stylesheet:

ol#commentlist li.mycomment {
   background-color: #fbfbfb;
   border: solid 1px #457AA5;
}

3) Make sure nobody can post comments by pretending to be you:

I think everyone should do this on their blog anyway, but here it comes in extra handy. I went into ‘options ->discussion’ in wordpress and added my e-mail address to the list under ‘Comment Moderation.’ This assures that if a comment containing my e-mail address anywhere in the post, the comment will be held for approval by me. So every time I post a comment I’ll have to approve it before it shows up, but this isn’t really a big deal and takes almost no time at all to do.

I’m sure there are ways to improve this and make it better, like checking all of the author e-mail addresses, and possibly giving each author their own unique css class so they can each have their own look, and then packaging all of this up into a WordPress plugin… But I’m much too lazy for that, and since this works fine for my single user blog, I’ll probably just leave it like this.

UPDATE (4-28-05): Just saw this post on the WordPress support blog that updates this for use with WordPress 1.5 and also supports alternate post highlighting as well.

The Chopping Block is hiring

We are looking for some web nerds.

DESIGN TECHNOLOGIST
We’re looking for a crack developer with unmatched flash abilities. Successful candidate should end the match in one round based upon his/her XHTML, CSS, Javascript, Actionscript, dynamic Flash experience skills.

DESIGNER
We’re loooking for a designer with fancy foot work and the strong graphic design muscles. Must be able to command the fight from round one right through to the knockout (no tko’s).

PROJECT MANAGER
We’re looking for a manager who is not afraid of stepping into the ring and landing a few solid punches. Must be able to inspire other fighters to go the extra round and not afraid to sometimes help put in that plastic mouthpiece.

WEB PROGRAMMER
We’re looking for the kind of person that it is impossible to make boxing analogies for… Bust out the nerd glasses, we’re looking for programmers. Database architecture, Back end scripting capabilities (PHP, ASP, Java, XML, XSLT), experience with website CMS systems and dynamic Flash integration a plus.

So if you are in New York City, send your info here: jobs@choppingblock.com