1. How to Improve Newsletter Design

    April 27, 2009 by J.P.

    zz-main_full

    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.

    urbandaddy


  2. Don’t Forget Wire Frame Everything

    April 23, 2009 by J.P.

    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:

    A few good reads on wireframes including examples:

    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.


  3. Twisted Films of PES

    April 3, 2009 by J.P.

    flyattackinghp

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



Older Posts »