Tales from a poor confused artist who thought school was finally over

I’ve been working at Delivra since last summer. I started with a basic e-mail marketing I.Q. of about 12, and considering how lost I get during conversations within the company or with other big-wigs of this particular market, that number does not seem to have changed much.  Fortunately, as a designer, my job is relatively straightforward and simple, but it does come with some memory-testing challenges.

The whole process seems to be like a never-ending finals week. You spend a few days studying (building the email), turning in homework (sending the client your drafts), you take the pre-quiz (send the test email), then panic your way through the final exam (send the email).  It’s stressful, nerve-wracking, and worth everything when it results in a perfect A+ (a happy client). And while it probably isn’t as nail-bitingly terrifying as that Psychology exam you just found out about, it is enough to give you nightmares about being eaten alive by HTML.

Fortunately, cliff-notes and study-guides are available in the form of blogs. Those come in really handy when an HTML-monster project comes along, and your usual weapons of choice aren’t cutting it. There aren’t many challenges out there that another designer hasn’t overcome, and they’re more than willing to help a clueless fellow out.

Before your next test (email), here are some things to memorize that’ll help you out:

1. Paragraph and Header tags are evil. They sound like a brilliant idea, but really, they are not to be trusted. If you’re wondering why you have so much space between text, images or just space that doesn’t need to be there, chances are there is a <p></p> or <h1,h2,h3,h4,h5,h6></h> somewhere in your HTML code. P-tags will just show up uninvited if you hit enter after a sentence. Instead of enter use shift + enter; this will enter a break tag or <br />, which will move the cursor to the next line without inserting space that has no business being there. Also, instead of using header tags, just resize the text to match the size of your choice. Painless and a lot less hassle.
2. Keep your tables simple. You would be amazed how much havoc a complicated table can wreak. I got a lot of hate from an email I was working on, and could not figure out why until fellow designer Celeste looked at my code and pointed out how ridiculous my table was. I had all kinds of merged cells and spacing issues that looked ok in Dreamweaver, but neither email client or web browser were feeling it.
3. CSS: Embedded and External = Bad, Inline=Good. Styles in e-mail are becoming more and more common, but knowing which ones can or can’t be used is a little tricky. Not all email clients are created equal, and most clients treat CSS like a weird cousin who wasn’t invited to the family reunion but came anyway.
4. Convert Word Document or Copy to Plain Text before pasting into HTML editor. Doing this helps to prevent weird symbols popping up randomly throughout your email. No more question mark apostrophes for you!  Not sure how to do this?  One way that I often do this is to drop the text into Notepad, which is an application listed under your Accessories of your computer (Start | Programs | Accessories).  You can then select Edit/Paste from Notepad and take it right into the HTML editor without any pre-defined formatting that might not otherwise work in an HTML version.

Hope this helps you as much as it helped me!

Peace out!

Abby Alexander | Design Services

Let’s say you’re just about done putting together your email content. It’s approved to send out and you’re proud of how great it looks. You send yourself a test email for one final check… and it’s completely blown apart! What do you do? Before you light your computer on fire and throw it at the nearest intern, check to see if it’s one of these top 4 issues.

• Are you using only inline CSS and HTML tables? If your text is displaying without all your fancy colors, sizes and fonts, you’ve probably formatted them using an embedded or linked style sheet. Make sure all your content is formatted with only inline CSS or HTML. Stay away from using CSS for positioning – use old-school tables instead.
• Were your images saved at the correct size before you placed them in your HTML? An image saved at a size too big for your email template may break it apart… even after you’ve set the correct sizes in your HTML. A few email clients will ignore your HTML image attributes, so even though you’ve sized down your beautiful 1200px by 1700px banner, it may display at its original size – stretching out the rest of your email. Save your images at their final sizes before you place them in your email content (or Delivra’s Media Library).
• Does your HTML contain lots of nested tables or tables with merged cells? Excessive use of nested tables (tables set inside tables) or complicated tables with merged cells can cause problems. Plan ahead and lay out your content before you take it into HTML. The more you tinker with your HTML as you put it together, the more likely it is that problem-causing invisible elements will be left in it.
• Are you using background images or colors? Code placed in or above the <body> tag can be stripped out – so any background colors or images here may be lost. It’s safe to use background colors in your tables and table cells, but some clients won’t display background images regardless of whether it’s set in HTML or CSS. Place a background color along with your background image just in case (especially if you have white text over it).

For more tips on coding your email content, check out Delivra’s HTML Coding Guide or our HTML Editor Help Guide.

Celeste Odell | Graphic Design