I haven’t posted much in the past month, but rest-assured I have indeed been working on new items for this website.

• New Design - The new design is still being fleshed out. I’d like to add some Calvin & Hobbes-esque art to it, but we’ll have to see how that looks.
• Flickr-style Image Annotations - I’ll be releasing a really nice looking image annotation plugin I wrote. It’s based on the Flickr image annotation system, except I’ve thrown in some nice jQuery fade effects and the comments look a little better (IMHO anyways).
• Yahoo-style Slideshow Gallery - If you’ve ever viewed photos on Yahoo Autos, you’re familiar with this type of photo gallery. I’ve created my own version of their gallery and I think it came out very nice.
• Viget-style Lightbox - For some reason, I always thought that creating a lightbox wouldn’t be very easy to do….but, after attempting to recreate Viget’s lightbox I found it was super simple! So, I’ll make that available too. (For those that don’t know, a lightbox is when the screen fades to black and something else appears over the site…..e.g. my current recent work to the right does this)

The next version of this website is under way. I had come up with a new re-design earlier and although it looked professional, it felt very generic. So, what I’m working on now looks a bit more unique and is more inline with current design trends (that being the textured/hand-drawn/sketchbook look).

Here’s a small preview of how it currently looks, it will definitely be changing as I add in more elements:

Version 4.0 Preview

I’ve created hundred of emails and I’ve reviewed/analyzed probably ten times as many. In that process, I’ve come up with a few Do’s and Don’ts…or really just basic tips to improve your emails. Some of this stuff I wish I had known when getting into email development.

Can’t See The Images In This Email? Neither Can I!

Always, always put a link in your emails to view them within a browser. There are quite a few people out there that check their email from work that can’t view your images within their email clients. Unless it’s a really basic transactional email (e.g. mostly text), don’t leave this link out. Often times, the entire message of an email is stored within the images. If users can’t view them, then what’s the point?

Web2.0 is No Go

HTML email is invariably far behind the curve of the latest web technology. In creating your emails, leave out Javascript and Flash. Although there are some email clients with limited support for these technologies, it is more likely to cause your campaigns to be flagged as spam.

Place Primary Call to Action in Prime Location

The portion of your email that is immediately visible to a user varies from email client to email client. However, you’re almost guaranteed that the top left corner will be visible. So, take that into consideration when developing the creative for your emails. Place the main item that you believe will generate the highest CTR(clickthrough rate) in this position and save the rest for other offers.

Embedded Images vs. Linked Images

Never ever embed images within your email. Doing so sends up all kinds of red flags, impairing the deliverability of your email. Plus, it raises the filesize of your emails substantially. Nothing angers a consumer more than having all their other emails held up while they download yours.

Focus on the Subject…line

The subject line is one of the most important factors in getting your message across in email. It determines whether or not your email will even get the opportunity of a passing glance. So, spend some time testing different approaches and measuring results. The difference between a good subject line and a bad subject line are huge.

Attaching Files is Bad, Very Bad

Nobody likes to open up attached files unless they are from a friend or co-worker or if they are expecting to receive them. For good reason too, a lot of sensitive information goes through email and nobody wants to risk that by opening up some unknown file. Plus, nobody wants to download them.

Forms Don’t Work

There are very few email clients that support forms within email. So, just leave them out. If you have to have your recipients fill out a form, place a link in the email to a webpage with the form on it. Then they can decide whether or not they want to participate.

 Got some tips of your own that you’d like to share? Please add them to the comments.

I got a question recently of what to do after you create the HTML portion of an email.  If you aren’t going to be sending a text version, then the next step is to send it (otherwise, create the text version…and then send it ).  Which is probably where many people get lost. However, all you need is the right software to format it correctly and send it out. Here are four different approaches to sending HTML email.

1. Open-Source Email Library - This is the option that I took. I downloaded a copy of PHPmailer and wrote my own small PHP application for sending test emails. The PHPmailer library has built in functions for sending email. So, all I had to do was provide it the necessary information(html file, addresses, etc.). Since then, a nice alternative to PHPmailer has come out, Swift Mailer. Those who want to go this route would be better served to use Swift Mailer instead (as it has a large and growing userbase and still has an active developer community working to improve it). However unless you’re only going to use it for testing purposes, many features that you would want with a Mass-mailing app will *have* to be built in (e.g. unsubscribe, trimming of bounced emails, blacklist monitoring etc.).
2. Open-Source Mass Mailing Software -The only decent open-source software that I’ve been able to find with an active development community is Pommo.  I’ve tested it out and it’s fairly user-friendly. Although it still needs to be refined a bit more, it has a lot of the features that users are looking for and a growing community that you can ask questions of.
3. Email Service Providers - With this option, you’ll get pretty much every feature you’d like. However, you’ll also be paying a set amount per email. Usually, this ranges from $0.01-$0.05 per email. Some also have a set fee that is also included with each campaign you send out. Of all the providers out there, the one that is probably the most user-friendly for designers is Campaign Monitor. With them, you can setup email campaigns for clients, charge your own rate (above what CM sets), and more.
4. Email Server Appliances - In addition to the above options, some companys also offer email appliances that can be added to your server racks. You can expect this option to be significantly more expensive (probably prohibitively so for freelance designers), but it does have a vast array of features and support. One company known for this is Strongmail.

As with any of these solutions, it’s ultimately up to you to make sure you don’t violate the law (read the CAN-SPAM Act).

The tasks I take on at work range from developing emails and creating new webpages to animating online banner ads. Throughout all of this, there have been a couple of tools that have made these experiences so much easier.

• Aptana Studio - Although a bit slow to load, Aptana is an excellent tool to code anything from HTML to PHP or Javascript in. The built-in previews are nice, but what I really like are the snippets. Snippets allow you to create small, easy to insert, files that you can add to any project you’re working on. They can even be customized to prompt for variables (e.g. a swf’s filename). This is excellent for the web developers out there that have to do any type of regular website maintenance.
  Runner-up: Notepad++ - Up until I started using Aptana, Notepad++ was my favorite windows app to write any piece of code in. It’s extraordinarily fast to load and can color-code just about any file format you want to write code for.
• Web Developer Toolbar (Firefox Plugin)- This single plug-in for Firefox has so many useful features for web development that it’s probably why I took to liking Firefox so much (that and Firefox’s greater use of web standards). You can outline any element on a page, find broken images, display an on-page ruler, view css, and closely examine an elements css. And that’s just to start.
• 960 Grid System - Although I may switch to Blueprint eventually, 960 is the first CSS Framework I’ve worked with and it makes constructing websites extremely easy and fast. Using 960, you can quickly generate mock-ups or full-blown templates in a fraction of the time. No longer do you have to construct the css for every single structural component of your website’s design.
• Firebug (Firefox Plugin)- I admit, I didn’t originally think Firebug would be a plug-in that I’d use so often. But, it’s now an essential tool. It’s great for troubleshooting css problems with the inspection tool and the live-edit feature makes creating “what-ifs” for management super-easy.
• Screengrab (Firefox Plugin)- Before screengrab, I used to have to stitch together screenshots to get one of the full webpage. With this tool, you just right click to get a copy of the full page.
• ImageMajick & Ghostscript - In one of my old jobs, I had tasks that involved prepping multi-page PDFs for the web. Not having a quick computer, Photoshop wasn’t really an option for doing a batch job on these. Plus, I had to adhere to a certain file-naming convention which I’m not certain that PS can handle without me having to type it in. Anyways, in comes ImageMajick, an image editor that can manipulate graphics via the command line. Plus, with Ghostscript it can modify PDFs and convert them to jpegs or gifs. So, all you have to do is supply the PDF and a batch file, and it will do all the dirty work of resizing & thumbnailing(or whatever) for you.
• WinFF - Like many web developers out there, I was inevitably asked to take some video and convert it to another format. Thankfully, I found WinFF, which gets the job done (but it does have a tendency to quit unexpectedly after converting a video - although apparently there is a new version out now….so, you may have better luck with it).
• Terminal - Ok, so this one is probably a little out of place on this list. But, having access to a unix-based CLI is awesome. True story, I was once asked by a certain IT department to provide a list of *ALL* the files I had modified in the past day or two, so they could check each one. If I had had only a Windows machine, that task would have taken hours to complete (which I think was IT’s point-to get me to go away, since they do have access to linux machines). Fortunately though, using Terminal on my Apple I was able to give IT a list of all 300+ files to check on within a few minutes(their response? “f*ck! he’s not one of our usual ID-ten-T coworkers.”).

So, what are some of your favorites?