The Email Dude

Thursday, May 9, 2013

Responsive what!?!?

Going to share some responsive email code that has worked for me. This isn't "truly" responsive but rather code to display a second table based on some media queries. Disadvantage is that it's basically building two completely different emails hence doubling the amount of production time.

The designers that I work w/ are completely anal, and refuse to accept that some things just aren't possible, so for me, having them comp up both a "mobile" and "non mobile" is the only way that we can come to an agreement.

One thing to note is that for Outlook, ALL of your tables in your mobile div need to have a display:none; property inline. Lack of not including this will have outlook render your mobile version in addition to your non mobile. So the code is as follows, and I would suggest putting it after your <body>:

.ReadMsgBody {

width: 100%;

}

.ExternalClass {

width: 100%;

}

@media screen and (max-width: 540px), screen and (max-device-width: 540px) {

body { -webkit-text-size-adjust: none;}

div[id=desktop] {

display:none !important;

width:0px !important;

overflow:hidden !important;

}

div[id=mobile] {

display:block !important;

width:100% !important;

height:auto !important;

max-height:inherit !important;

overflow:visible !important;

}

table[id=body]{

width:100% !important; display:block !important;

}

</style>

<tr>

</td>

</tr>

</table>

</div>

<tr>

</td>

</tr>

</table>

</div>

Tuesday, December 13, 2011

Mobile Text Resize

As I'm sure you're aware, the number of emails opened up on a mobile device have drastically increased, and will only continue to do so as more people get smart phones. I was having an issue with my text re-sizing and breaking pretty much the entire design.

Simple fix, that I've yet to see not work.

In the main table, add an inline style of -webkit-text-size-adjust:none;.

Something like:
<table border="0" cellpadding="0" cellspacing="0" width="650" align="center" style="-webkit-text-size-adjust:none;">.

This basically prevents the device from re-sizing the text, keeping it within your set design.

Hope this helps someone!

Thursday, June 2, 2011

Superscript and Line Heights!

A lot of the designers that I've worked with fail to understand that it's pretty much impossible to make an email render like a print piece in all of the different clients. There is a way around this, just slice it all out as an image and boom, exact in all browsers. However I think emails that are just images are lame, and know that there are chances of it not making the inbox if it's too image heavy. PLUS, you can't really read the content (excluding use of alt tags). In my opinion it's just sloppy.

Today I'm going to share a line-height / superscript fix that I found that works pretty well in all client's.

<td style="font-family:Verdana, Geneva, sans-serif; font-size:10px; line-height:12px; color:#000000;">
Copy, Copy, Copy<sup style="font-size: 8px; line-height: 0; vertical-align: 3px">®</sup></td>

I recommend making the line height 2px larger than the font size, and then for sup's making them 2 pixels less than surrounding font. Defining the line-height for the sup as 0 prevents the uneven space between each line of copy, and the vAlign moves the superscript up just enough in all of the diff clients (including Outlook 2007).

Here's an example:

Copy, Copy, Copy^® Copy, Copy, Copy Copy, Copy, Copy
Copy, Copy Copy, Copy, CopyCopy, Copy Copy, Copy, CopyCopy, Copy Copy, Copy, Copy^®

W/out the fix:

Copy, Copy, Copy^® Copy, Copy, Copy Copy, Copy, Copy
Copy, Copy Copy, Copy, CopyCopy, Copy Copy, Copy, CopyCopy, Copy Copy, Copy, Copy^®

One last suggestion is to take advantage of the mso-line-height-rule:exactly; within each of your TD's this will be ignored by all clients except outlook, but forces outlook to keep the line height you defined.

Here's an example of how to use it:

Copy, Copy, Copy<sup style="font-size: 8px; line-height: 0; vertical-align: 3px">®</sup></td>

Hope this helps someone!

Wednesday, March 2, 2011

style="display:block;"

I get so annoyed when I receive newsletters to my gmail account and the images have weird spacing, most of the time completely breaking the layout of the email. It's super easy to solve, but just makes me think that these people aren't testing their newsletters.

The way that I do it, I build out the html, then do a find and replace. I find img src, and replace with
img style="display:block" src, it's really a good idea to just train yourself to do this for every email you build. The two clients that experience issues are hotmail, and gmail.

Message not centered in Hotmail?

I recently had an issue with my emails not centering in hotmail but centering everywhere else (gmail, yahoo, aol etc.). Even though I was defining w/in the main table align="center", it wouldn't work in hotmail. After a bit of google searching I found this fix:

<style type="text/css">
body { width: 100% !important; }
</style>

So far so good! I place this code now in all of my newsletters, directly under the <body> tag, and have yet to find any instances where it does not work.

Tuesday, February 22, 2011

The Beginning

I've been building html email's for about 6 month's now and finally decided to share some of the things that I've learned so far. As I find new challenges, I'll post their solutions here as both a personal reference, and as a way to share the knowledge.