Last week I completed a email campaign that I was only brought into only to code. I felt that the process followed was generally flawed that the team took. I started with a finalized approved design which I was suppose to code into a mailer. From the beginning I started noticing flaws in the designs and how the design would be translated into many of the the popular web clients of today like Gmail for example.

Often I think people and small teams rush the designs of the mailers and don’t fully understand what it takes to develop and what will be rendered by each client. Most web based email applications won’t properly read divs, background images, or even external style sheets. With these short comings and designers unaware of these limitations or bad and unexpected things can happen.

When creating a mailer its important to first and foremost take your audience into consideration. Are they main using web based clients like gmail, yahoo, etc.? Are the checking there mail on the mobile devices? Or they simple just using a desktop client like Mail (OSX), ThunderBird, or Outlook? All of these and a combination should it most cases be assumed.

Rules of thumb to help achieve the audiences viewing of the mailer

At the of the top of the design provide a link for the subscribers to see a web version. Most mailers these days are filter and end up in junk mail boxes or the software is smart enough to hide the images. Leaving your pain stacking work looking like a blob of random text bits. Having this link at the top will give the user and easy way to view the mailer as it was ment to be presented.

Keep it simple. Since most clients ignore CSS  including background images your going to have to get old school with some tables. By keeping the design simple you will be able to get you message across to the widest audience. I good example of this is UrbanDaddy.com’s mailer(seen below).

Allow the users to easily forward and print the mailer.

Since reemerging in to freelancing I have noticed that not many people use wire frames that should be. I guess a lot of people think its an extra step that’s not needed or will add unnecessary time/cost to the project.  When this approach is taken things start to veer off the path as the project goes from one phase to the next. The designer, coder, and client are all expecting different things to happen at different parts of the site. By creating even simple wire frames you can show the flow of the site and how the content will be presented. Even if it is just a quick pass(though not recommended) it can prevent major headaches down the line.

Here are a few good resources I found for wire framing.

List of wire framing applications:

• OmniGraffle (OSX)
• Visio (Win)
• Balsamiq (Web)
• Gliffy (Web)

A few good reads on wireframes including examples:

• gdoss.com
• alistapart.com

When all is said and done wireframing things out helps better communicate the goals of the project and will give everyone a roadmap to follow.

The stop motion shorts done by PES are nothing short of totally twisted. More eating less writing go now www.eatpes.com

So… I guess my roommate was creating some homemade tattoo’s over the weekend. Since it was the first time I had ever seen this done in person I thought why not share the method he followed to create a homemade Tattoo.

Before we begin will need the following ingredients:

• Tecate 12 pack
  
• Limes
• Hot sauce
  
• Number 2 Pencil
  
• Sewing needle
• Black India Ink
• Lighter
• Rubbing alcohol 70% +
• Sewing string
• Tattoo Artist or drunk friend
• Felt tip pen
  

The process begins by mixing  and ingesting the following ingredients

1 Tecate with salt limed rims. (repeat 5x)

Once initial buzz is reached convince the closest person near you that “we should tattoo hearts on each other”.

Crack another Tecate and start creating the tattoo gun

1. Grab the number 2 pencil, sewing thread Sewing Needle.
2. Thread the needle and tightly wrap the thread around the pencil leaving 3cm’s of needle and tip exposed.
3. Tattoo gun is now complete.

Next step ready the recipient.

1. Wash skin area and needle with rubbing alcohol.
2. Draw tattoo on with felt tip pen.

We are now ready to begin the Tattoo Process

1. Taking the tattoo gun firmly trace the drawing.
2. Stop every 10-20 pokes and wipe away the felt ink to see how well you are following that desired sketch. At this point you want to re ink the gun as well.
3. Continue step 2 until tracing of sketch has been completed.
4. Drink another Tecate and go look in the mirror at your new homemade tattoo.
   

Late last night I ran into GMUNK’s 2009 demo reel. Gmunk, also know as Bradley Grosh is the most badass designer who’s willing take on things that seem impossibly complex and layers them into something mind boggling. His old portfolio site is currrently down, gmunk.com but you can find some of his other work with simple websearches.

Back in 2007 I was lucky to see him speak at the OFFF Festival where he covered some case studies of his more recent work and highlighted some older stuff too.

Look out for the monkeys in his work… they always be doin something crazy.

Here are the two sites I turn to for copy filling.

• html-ipsum.com – Great resource while coding.
• lipsum.com – The classic… great generator and the best for designing

If you have anymore you would recommend please comment below.

If you haven’t heard of Scott Hansen I highly recommend checking out his design blog, iso50.com. Its has a great collection of images he finds in print, design, and photography as well as many of his own talented designs.