You are here

I'm Gonna Code Like it's 1999

Email seems like a simple concept. I write you a letter, press send, and moments later it magically appears in your inbox. Not so fast. There’s a vast network of interconnecting servers, hosts, and IPs that talk to each other, approve/accept content, and pass the email down the line. And sending an email is the easy part.

Actually designing your email is where problems can arise. It may look one way in your design program, another way in your test, and even a third, fourth or fifth way to recipients depending on the email client they use (Outlook, Gmail, Yahoo, etc). Designing and coding email HTML is vastly different than when creating websites. HTML stands for Hyper Text Markup Language and is a standardized system for tagging text files to customize fonts, colors, hyperlinks and graphics on websites.

HTML can also be implemented in emails, with a few modifications. When creating HTML for email, think back to web design from the 90s – a little finicky and a lot of testing.

Unlike website HTML, email HTML does not support Javascript (a scripting language that enables web authors to design interactive sites, interacting with HTML source code, it enables the use of dynamic content). Email clients ignore, and sometimes even flag, messages containing Javascript. Emails also can’t support hosted videos. So if you ever have a video you want to push out to customers via an email campaign, include a screenshot in your message and hyperlink that screenshot to a landing page of the video.

Email HTML Best Practices:

  • Sizing – Email width should equal 600 pixels (a minute area of illumination on a display screen, together composing an image) with a text to image ratio of 60:40.

- Expert Tip: No one can measure pixels with the naked eye. Download a pixel ruler and store it on your hard drive. This tool allows you to literally measure your email’s pixels and many are free!

  • Length – Each line in an email should include about 45 text characters.
  • Style Sheets – (A type of template file consisting of font and layout settings to give a standardized look to certain documents). Do not include style sheets in the header tag(HTML header tags are critical components of search engine marketing, both are usually graphical and thereby unreadable by search engine spiders), some email readers, Outlook and web-based emails are notorious, strip out everything in the header tag.

- In web HTML, this is where your style sheets traditionally sit.

  • Styling – Inline styling (a CSS style that is written directly on the element it affects. Ex) <a href=”" style=”text-decoration: none;”>) is the way to go to ensure your emails are rendering appropriately and consistently across different email platforms.
  • Div Tags – (In HTML, the span and div elements are used when part of a document cannot be semantically described by other HTML elements) Do not include div tags, this is just asking for trouble. Instead, create tables to ensure spacing, and consistency of spacing, across email clients.

- Implement colspan (extends cells horizontally) and rowspan (extends cells on a vertical row), merging cells vertically and horizontally, to help you get creative in your layouts.

  • Imaging – Images are important, as most email applications signify an email open by downloading the images, making them visually appealing and a valuable tracking tool.
  • Hyperlinks – Use links! Clicking through a link in an email will typically cookie the recipient – once cookied, we are able to track web activity, which feeds into lead scoring.

The future of website creation is in responsive web design, when a website adjusts to fit the window it’s viewed in. This advancement hasn’t made its way to email just yet, but it can be implemented with your page background.

Example – If you have a main email table that is 600 pixels wide and centered on your page, you can enter a table around that with a background color that is 100% wide (percentages indicate responsive design). As the size of the table changes, the main email table will stay centered on the screen, but the table’s width will adjust instead of adding a scroll bar to the bottom.