Remember the days when you would log on to your AOL account and hear the lovely sounds of a 56k dial-up modem as you waited to connect to the world wide web? Those days are still here…sort of. The days of directories are long gone, but tactics for coding websites 20 years ago are still relevant in HTML email design. Although there are slight advancements, such as responsive design, HTML5, and CSS3, email code still relies on the basics. My goal today is to teach you some basics of email development and break down some of the common misunderstandings that comes with utilizing email code in the modern world.
HTML and CSS sound intimidating, but they are pretty basic when it comes to coding. When you receive an email in your inbox, you are not seeing a text document, what you are actually seeing is a bunch of commands that are telling the computer to display what’s in front of you. A good way to think about HTML and CSS is using the analogy of skyscraper. What you see on the outside could be considered the styling of a building. This is how CSS works, it takes the HTML and makes it look a certain way that is pleasing to the eye. The HTML can be looked at as a the steel beams that hold up the building. It is the entire structure of the email. What separates email development from web development is the way that the structure or HTML works.
HTML in email development uses tables, table rows, and table dividers
Table <table> – A table is what surrounds all data included within. Try to think of it as a lunch container.
Table Row <tr> – A table row is like pushing enter on keyboard, when you use a table a row within a table, you’re essentially going to the next line.
Table Data <td> – Let’s go back to the analogy of the lunch container. A piece of food inside that container is much like how table data works. It tells us that you are about to input some content into it that can be displayed within the table.
While it may seem daunting, those key terms are the bread and butter of email structure, now let’s talk about CSS!
CSS or Cascading Style Sheets, help our emails look the way we want them to. With CSS, we can manipulate the font, letter-spacing, line-height, background colors, and much, much more. Normally a website uses what is called and External Style Sheet, but email is very special and mainly utilizes an Inline Style Sheet, which is actually the most direct form of styling. Let’s see an example of this:
<td style=”font-family: arial; font-size: 14px; color: #000000;”>
Let’s break down what happened to this table data cell. In the bold, we called our style by using the word “style” and setting it equal to an empty group of parentheses. Inside the parentheses is where our email gets all of it’s pizzaz. In this example I told the computer to style whatever goes inside of that cell to have a font of Arial, size 14px, and with a color of black.
Maybe at this point you’re thinking, “Why is any of this important? Can’t you just insert an image that has already been created as an email and call it a day?” The answer to that actually has to do a lot with spam. A long time ago, this method was acceptable. In fact, you used to be able to really input any code you wanted into an email. The popular program Adobe Dreamweaver made this easy to do, just create a table, table row, and table data cell with an image inside of it and PRESTO! Email complete. This changed for security reasons. Users who clicked around on the image were surprised with trojan horses and malware that corrupted their data and stole information. Almost all email clients (There are close to 50) will allow there to be just one image, but with a high risk of being put in junk. Best practice is to code the entire email out with HTML and CSS.
Gmail, Apple Mail, Outlook…
So, what is an email client? An email client is the service a person uses to open their email for them. Unlike a web page which has a domain and is put onto a server, an email client is a piece of software that reads you email code and delivers it to you.
“Why Gmail, Apple Mail, and Outlook?”
The answer is simple, they are the most used email clients in the world and therefore have the largest market share.
Gmail has an estimated 500 million or so users as of June 2014. As of 2015, Apple Mail is the most popular email client in the entire world and it’s partly to do with the iPhone. According to Litmus, a company that specializes in email testing and analytics, out of 1.1 billion people that opened emails most people were opening them from their iPhone which is 28% of the market share. So where does Outlook come into play, after all on the enterprise level this might as well be crowned the king of email clients.
Outlook controls 8% of email opens out 1.1 billion surveyed. That is quite a bit when you really think about it, but it is not the most. Regardless these three reign supreme in the email world, but why is it important to know about email clients?
The Case of the Shapeshifting Email
Unfortunately, there are no set standards of how an email should be viewed. Web pages all follow a set of browser rules and there are three main browsers that people use: Internet Explorer, Firefox, and Google Chrome. With emails, there are so many pieces of software that exist, that an email, even when coded correctly to HTML standards can still look different in one client than another. They all have their own way of taking your code and manipulating it into something they can read. Here’s an example of some of the goofy things some of the email clients we use do.
Gmail – Removes the internal (not inline) stylesheet from the document, splices all images, and ignores fonts that are not email safe.
Outlook – Since every version of Outlook reads emails differently, there is a high chance that there will be a padding or spacing issues. This is unavoidable and there have been many attempts in the development world to fix this.
Wrapping It Up
I hope that today you walk away with some new knowledge. While emails are tricky, and vary from platform to platform, they are a crucial part of anyone’s marketing campaign. Emails have been proven to generate leads and until the inbox gets the axe, we will keep developing ads that will ensure you get the sale.