Monday, April 29, 2013

always question the norm of email design - embedded or background images will render

let's face it we all as marketing professionals want to communicate about our products with slick professional emails, but we're hindered by lots of things - email clients, isp's, designers, and coders.

recently, i put together a great looking email for a send that we were executing with an outside third-party vendor - a list rental send (don't get me started on this, i don't like them either!) - but that said, being that these recipients hadn't ever interacted with us before it was a great prime opportunity to put our best foot forward, which meant to put a great piece together for them to get a great first impression.

the resulting email was a great looking piece - which actually got a few compliments from other staff members who hoped that i was moving all of the emails forward (design wise) with this type of communication. it was slick and sexy. but there in lies the challenge... slick and sexy best foot forward emails come at a price.

the first is design. they take a while to layout in photoshop and the mind numbing attention to detail of taking the print out, a ruler, multiple color pens, and devising where to slice up the graphics. i'm probably the only person who does this like this - it just helps me to figure out how big to make my tables in my html. but none-the-less it's a labor intensive process.

then there is actually making the slices and saving all of them and uploading them to server so that you can actually get to the coding process.

coding, wow... you can spend hours getting images to line up and so forth, not to mention thinking about how it's going to render once your send tool sends them out. so all of that said, i still wanted the email to be really slick. so i used background images - i'll wait until you pick yourself up off the floor....

you back yet? i heard you say from here, while you were falling off your chair, "kirk background images don't work..." that's what the vendor told me too - outlook won't render background images. well guess what, they will you just have to know how to hack them. it's not as difficult as you might think.

background images work in a lot of the email clients, but they fail to render in outlook - which restrains the slickness that we as marketers can do for those readers. that said this works in outlook.

let's start with what i call the wrapper - think of it as the <body> tag an webpage. it's the farthest background of the email. (replace the text in red with your file names, color codes, and sizes.)

include this bit of code directly below the <body> tag:
<div style="background-color:hex-dex_color_code_should_the_image_not_render;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="your_full-width_image_url" color="same_hex-dex_as_above"/>
      <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
                <td valign="top" align="left" background="your_full-width_image_url">
then directly above the </body> tag:
so that takes care of the wrapper, or the background. now the tricky part - using embedded images in the email itself - or rather using them as a cell background for a table - i do everything in tables, just to be safe.

build your table for the content area, something like this:
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center">
for the next part of the table, the <td> tag, set it to look like this:
          <td background="your_embedded_image_url" width="xx" height="yy" bgcolor="hex-dex_color_code_should_the_image_not_render" valign="top">

           <!--[if gte mso 9]>
           <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:yypx; width:xxpx; top:0; left:0; border:0; z-index:1;' src="your_embedded_image_url"/>
           <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:yypx; width:xxpx;top:0;left:0;border:0;z-index:2;'>
then, build out another table within that <td> tag, this will hold the content and messaging:
                <table width="xx" cellpadding="0" cellspacing="0" border="0">
                          <td width="xx" height="yy">your content here</td>
finally, under the closing table tag for the content table, include this:
                <!--[if gte mso 9]>
with that code in your snippet library, you'll be able to build out some pretty slick and sexy looking emails. let me know how it goes!

Wednesday, April 17, 2013

it's not very often that we live history like we are right now

this blog post has been sitting in my draft folder for a few weeks now, and i've been conflicted if i should post it. i'm going to go ahead and post it - because i think it's important enough to share.

if there are a lot of comments saying my readers hate it, and it's off topic, i'll remove it. thanks for reading....

For this blog post, I am putting my normal writing style and "branding" on the shelf - so that anyone who reads this won't "struggle" with the style I write in.

Additionally, I'm hoping this will be the only political statement that I make on this blog, but I feel it is important and to communicate my view of these historic days.

So here goes...

This week, so far we have seen the Supreme Court of the United States hear arguments for cases dealing with Prop 8 and DOMA. Both of these cases are deeply rooted in the gay civil right movement. As of today, March 27th, 2013; we basically know how the justices feel about DOMA, but the jury is out on Prop 8 - pun intended.

A few things, other than the media circus surrounding the coverage of the cases, bother me. Let me say this, as a democrat, and gay man, I was raised to believe that you respect the Office of the President, The President, and the Supreme Court - without question. Congress on the other hand is a bunch of freaking idiots and you can say what you want about them, but you don't speak poorly about a current president or a seated justice.

So Mom, if you read this blog, close it now...

Justice Alito said in Monday's hearing that "Same-sex marriage is very want us to step in and render a decision based on an assessment of the effects of this institution which is newer than cell phones or the Internet?" Um, what? Same-sex marriage is newer than the internet and cellphones? Had he said the iphone, I might believe him.

Before we do the math to calculate the age of technology... Let's draw some correlations between this nation's civil rights movements.

  • 1950's Color TV was invented
  • 1955 was the year the Rosa Parks would not go to the back of the bus. One of the milestones that sparked the civil rights movement
  • Martin Luther King, Jr. gave one of this country's most powerful speeches on the steps of the Lincoln Memorial in 1963
  • Loving vs. Virginia, the Supreme Court case legalizing interracial marriage was heard in 1967 by the supreme court
The Justices didn't ask those individuals if they should render a decision on a topic younger than color TV... Of course though this is by no means the full extent of the civil rights movement, some would argue that it started in 1861, the beginning of the civil war - or even earlier; but for the sake of argument lets say the era of civil rights is from 1955 - 1967, 12 years; not that the struggle for equality is over at all.
  • The Stonewall Riots took place in 1969
  • Baker vs. Nelson, 1971. Gay marriage case heard in Minnesota
  • Harvey Milk was assassinated in 1978 (granted not because he was gay)
  • DOMA was passed in 1996
  • 2008 Prop-8, which revered Californian's same-sex couples to marry was voted on
  • 2013, Supreme Court entertains arguments on Prop 8 and DOMA
Given that timeline, the same-sex marriage and gay civil rights movement has been going on for 44 years - 1969 until 2013. Or to try to compare apples to apples, from DOMA until today is 17 years.

Now this part is going to seem unrelated, but stay with me. It will all make sense. The Internet's first use of email was in 1976. The Internet as we know it today was established in 1993. Prior to that there are internet like structures dating back to as early as the late 60's.

1G cellphone technology was available in America as early as 1978, 2G cellular networks came onto the scene in 1991. So depending what you define as the beginning, the Internet is as young as 20 years or as old as 37 and cellphones are similarly aged - 22 years young or 35 years old.

Now, getting back to Justice Alito's comments. Obviously, this man doesn't know Al Gore, "creator of the internet", or how to do math and use Google. DOMA was passed in 1996 - a federal law defining marriage as 1 man one 1 woman. The first case challenging traditional marriage was in 1971. Which makes it [the idea of same-sex marriage] older than first use of email, and 1G cellphone technology. The idea of same-sex marriage is not new, especially when Justice Ginsburg references 1971's Baker vs. Nelson.

Now, there is no question that this a polarizing topic. I don't envy the Justices at all in having to decide the merits of these cases and if they should proceed or not. But what bothers me the most about this, is that there seems to be grumbling that SCOTUS should not be hearing the Prop-8 case, because marriage is a state issue not a federal one. Sure I can see that, and I can almost agree with that, but unfortunately, the Supreme Court has something with this case that I would assume they try to avoid - and that's precedence.

SCOTUS heard and ruled on Loving vs. Virginia in 1967, the case making interracial marriage legal. Thereby, imposing its federal authority over marriage, a state issue, and altered the definition of marriage from 1 man and 1 woman of the same race to 1 man and 1 woman. If the Supreme Court decides that Prop 8 is a state issue, and that imposing its federal authority over a state issue is not within it's powers, sending it back to the state - the supreme court allows the  unconstitutional decision to stand. By doing so there is a possibility that the world is about to get hugely complicated and even uglier.

Why you ask?

I am not saying that the gay struggle for rights is more important than those of African-Americans. The two are related and similarities can be drawn between the two. Both classes are discriminated on biological factors  - but in most cases gay people have been able to blend in to society easier than African-Americans.

The Federal Government has been banning it for 17 years - five years longer than the 12 years of history spanning Rosa Park's refusal to ride in the back of the bus to Love vs. Virginia. Justice Alito needs a fact-checking assistant, or an iPad so that he can Google things.

Well I come from a backwards family - and when I say backwards I mean, I have family members who didn't vote for Obama -- not because they are dyed in the bible leather Republicans, but because they were told by their pastor that Michelle Obama would paint the White House the pattern of "kente cloth" -- clearly, separation doesn't apply in their church.  That said, I know backwards mentality, and bigotry. So I promise you this, there will be a subsection of the current population of people who are obsessed with outlawing same-sex marriage - but not concerned about the 50% divorce rate of opposite-sex marriage - that will look at Loving vs. Virginia and say to SCOTUS that you don't have the authority to impose federal authority over marriage now, you shouldn't have done it then and file for the reversal of Loving vs. Virginia.

Frankly, as a Washingtonian, living downtown during the annual Roe v. Wade march, these people don't understand the METRO mantra of "Walk left, Stand Right"... I can't even begin to imagine the crazy that will come out to overturn Loving vs. Virginia...

I hope I didn't offend you too much. We'll all know something in the coming months as decisions are rendered.

oz the great and powerful and why i bought a 3d tv

disney's oz the great and powerful
a few weeks back, i posted an email from disney that included an animated gif for "oz the great and powerful". i alluded to how much i was looking forward to seeing this movie.

it didn't disappoint!

having never read any of oz books, i wasn't in the know of what to really expect. but having seen wicked three times now - in nyc, chicago, and san francisco - i was intrigued at how disney would respect that popular story line.

as i said the movie didn't disappoint! and with all the media blitz, and the months and months of media hype, i am surprised how well they kept the secrets!

i'm not going to give them away, but i am going to tell you now, that if you have considered getting a 3d television, this movie will make you go to amazon and purchase one!

the opening scenes are filmed in a square letterbox, and in sepia-tones like the original wizard of oz from 1938. as our hero is swept up in a balloon in a twister, the viewer experiences multiple sight gags that are part of the 3d experience.

being a theme park junkie, well disney world junkie, i am not without my experiences of seeing 3d attractions and playing along with the rest of the audience to reach out for bugs, or dodge a spear, or whatever else the imagineers bake into those productions. i know those things aren't there, but it's part of the fun to play along with the kids...  i saw the movie in imax 3d, and shortly before the letterboxing slides away, our hero oz experiences snow, and so does the audience! the snow actually extends past the letter boxes and the effect is so realistic that the person i was with and myself both turned to each other and said, "this is freaky". it was this sight gag that has convinced me to purchase a 3d tv because i can't wait to own "oz the great and powerful"!

that said, the 55inch samsung 3d smart tv was delivered today - unfortunately, unlike spaceballs the movie, oz the great and powerful isn't available on dvd/blue-ray yet.

if you haven't seen oz yet, i highly recommend you going to see it - and go see it in imax 3d. the adventure is beyond colorful!

once the tv is fully set up and configured, i'll report back on the latest piece of technology to hit the house!

your email sucks - another bad subject line and the anatomy of an email

today while at work, i got a forwarded email, and the comments for the email were "best subject line ever - i love this". i got excited, i thought how can i rework it to be something my readers will open. then i opened the email, and the subject line was "need subject". oh no, another email marketing fail and oh yes - an entry for my blog!

so in the common "your email sucks" fashion, here's the email that i was forwarded.

in the interest of full disclosure, the email didn't include the red lines and the caution tape overlay. i'll address that in a little while.

but like i've said in the past, this is one of those palm-forehead mistakes that we have all made. it's a rookie mistake, one that with proper testing and having a few editors check your communications won't happen ever again. so before you hit the send button, check everything - twice.

now that said, you'll notice that the title of this blog also brings up the anatomy of an email. this has been the buzz word in my cubicle for the past two weeks. i was fortunate enough to be looked at as an expert in my field (long enough time coming) by my employer and asked to present to our internal stakeholders about quality communications and how we as an organization can improve on the ones that we are producing.

as part of this process, we are going through a complete audit of all the emails that we send out to subscriber population (life-cycle, transactional, winback...) and as part of the training, we're working on changing the mindset of the individuals who send emails. my portion of the 60+ slides in the first training (i had the majority of those slides), was to talk about the anatomy of an email and deliverability (another topic for another post).

so the make up of an email has been on my mind a lot the past couple of weeks. and i couldn't help but to look at this one, and what went wrong. let me preface this with i hate templates, honestly hate them because when you build a template with some of the sending tools, they junk them up with what they think they should look like and how the footers should be built - which to me just looks unprofessional and not pleasing, and that is probably what has happened with this email. so there's my grain of salt for this posting - it was probably out of the control of the sender because it was built using a template.

if you look at the email, you'll notice the red lines and the caution tape design. these show the "below the fold", that mythical line that we as email marketing professionals need to remember. for this one i set the bottom line to be 600 pixels from the top of the email. with this example you'll notice that the call action is pushed well below the fold - so if the actual subject line was a good one, and caused me to open it, the call to action is well below my preview pane.

what's contributing to this problem?
1. the height of the preheader text, i try to actually have that information sit on top of my header/hero image (for those exact target users out there).
2. the header and the graphic could be integrated to reduce the height of the two combined images - this by itself would probably move the call to action up into the preview pane, problem solved.
3. white space below the header text, is also pushing the call to action text down.

as more and more readers abandon desktop computers for tablets and smartphones, we need to be even more concerned about the height of our graphics and look at the opportunity costs of reducing white space without sacrificing readability or branding.

the moral of the marketing story here, proof your work, test your work, test your work again, and keep the anatomy of an email in mind as you build your campaigns. there is a saying in the world of carpentry - measure twice cut once... i think we should adopt this and change it to proof twice, test (twice) and send once.

Sunday, April 7, 2013

your email sucks - the table of contents - good idea, poor execution

this week i got two emails that included a table of contents. one of them is from an email industry reporter, the other is a design website. both of the emails are ones that i actually like to read every week when i get them. but....

i find myself reading my email more and more on my mobile devices instead of on my computer. seriously, my iphone, ipad-mini, or my nexus 7 are rarely out of arm's reach. my macbook air is usually on a shelf or in my backpack so that i can take it to work to share the internet connection with my other apple devices. i'm really only using the macbook to blog, simply because blogging from the other devices is still hard to do.

but i digress, the point is, that i'm not in the minority anymore for using my mobile device as my primary communication method. i use returnpath's campaign insight at the office, and i know that my users are using mobile devices more and more each day, and that the industry says that as much as 85% of email is opened on mobile devices. so that brings me back to my point...

...the table of contents in emails... in the mobile environment, taking the time to build these out actually makes sense. i say this because of the reduced real estate and the reduced attention span of mobile readers. so why do i hate the table of contents if I think they are good ideas for the mobile user, i'll get to that, but here are the emails i'm speaking of today:

excerpt of smashing magazine's
weekly e-newsletter
the first email excerpt is from smashing magazine. most likely, the reason that they include the table of contents is because their emails are long - they include a lengthy blurb from the landing page in their newsletter.

why it's good in this situation: it's a good tactic given scrolling concern and real estate matters when it comes to mobile emails. some people just won't scroll. so by providing an email table of contents isn't a bad idea at all.

why it's poorly executed: the table of contents links to anchors in the email content. in a mobile environment, this doesn't work. so while they have built this table of contents to get me to engage with their email, i'm still stuck scrolling. not to mention the you could possibly alienating readers by providing them with what looks like a broken link. i know with me, that if is get emails with broken or non-functioning links that i am more likely to quickly unsubscribe.

excerpt of the magill report
the second email is from ken magill's magill report. a possible reason that the table of contents is included on this email is that ken sells advertising in his emails, which are probably sold on "impressions" instead of clicks and the goal of the table of contents is move the reader through the email to "fire the ad display".

why it's good in this situation: like smashing magazine it's a good tactic to get people to move through the email, and to get the advertisements to display.

why it's poorly executed: like the smashing magazine one, this one also links to anchors in the email, not to the landing page. and in the mobile environment, they simply don't work.

so, how should we as email marketing professionals, be using the table of contents so that we don't alienate readers and get it to do what we want it actually do - drive engagement.

  1. use the table of contents to link to your landing pages, not to the anchors in the email. use article headlines that will entice the readers to click and read the content. also use a table of contents on those landing pages that showcases the additional newsletter content - once you have them on your site reading, do you really want to risk them closing the browser and then going back to your email? they might not do that, it may have only been one article that got them to your site in the first place from the newsletter, but once they read through that content, they might be "willing" to read a second article - make it easy for them to do that.
  2. in the case of using advertising in the email, you walk a fine line because you're motivated by your contract with the advertiser, but you can work around it. use the table of contents to link back to your content, like above. but then display the same ad unit (and their tracking pixel) on the landing page.
back before i came to my current employer, i worked for a major website, and we had a newsletter that included a table of contents. we linked the headlines back to individual landing pages for each article, think of it as an interruptor, that displayed the blurb about the article, paid advertising, a copy of the table of contents and then a "read more" statement to take readers to the full article. this tactic worked well because it drove impressions for advertising and also drove readers to our content.

the biggest take-a-ways from this blog entry are:
  • the table of contents with links to article anchors within the mobile environment don't function
  • providing the table of contents with "broken links" could possibly alienate readers
  • there are ways use the table of contents that will drive engagement and ad-impressions if you need too, you just need to be creative with your email strategy and execution - test what works best for your needs and readers!