An Introduction to Email Building
Regardless of what Email Service Provider (ESP) you go with, you will need to know what it takes to build an effective email. There are a few good guides out there and I highly recommend the ones from Mailchimp for the basics ( link ) and the CSS guide from Campaign Monitor ( link ) for reference. So let’s dive in to some of the basics.
First, I highly recommend a background in HTML and CSS because it will help with your understanding of why certain things don’t work and how to work around them. But, with that said, email code will primarily consist of table-based layouts so don’t get caught up over thinking email coding.
The first step is to break apart your design. Let’s use the following email graphic as an example.

This is an email from Staples. A very common email that many of you have probably seen and a good example for things that are done right in an email.
The UnWritten Rules – From Top to Bottom
First, there is the width of the email. The width of this email is 650px which is a good width for both mobile and desktop email clients. Because you never know how your email will be viewed, it is best to stick to this width for all your emails. It’s also a good idea because even if someone has a high resolution monitor think of Microsoft Outlook or Mozilla Thunderbird with email panes. The user will never get the full resolution of their monitor to see your email but only a space as large as they set the preview pane to be.
Staying in line from top to bottom, they have a link to view the page in a browser. This is as important as ever as most email clients from Apple Mail to Microsoft Outlook will not display images by default unless the user says this is a safe source. Knowing this brings us to another point, the alt tag. The alt tag is an HTML tag that is used for accessibility, in this case, someone doesn’t see the pictures, the computer has the ability to tell them what the picture is. In fact, if you test it out on your computer, you will be read back what the alt tag says as best as your computer can talk.
Next we look at two important sets of links. First is the Staples logo which in this case is the brand logo. There are many brands that try to send generic emails without logos near the top, don’t be one of them. Place your logo proud at the top if only to inform your customers who you are to instill a sense of trust. Then there are the social links. In this case they are using Facebook, Twitter, YouTube, and Pinterest. You do not always need to have this many. In fact, I have come across many successful brands that can get by with a single Facebook account. Regardless of what your company creates its strategy around, being able to get your brand into your customers mind and making them want to interact with it on a regular basis is an invaluable asset.
The Body – The Guts of an Email
Let’s jump back for a moment to the subject of the email “2 coupons inside! Plus, thousands of new products.” Very simple in nature and the email delivers just what it says. The first thing the user sees is two coupons, in this case for $30 off a $200 toner purchase valid in store or $30 off a $200 toner purchase valid over the phone. Now while I don’t think they deliver on two unique coupons, nor do they deliver a true value for the offer, they deliver on what the subject says and that’s enough to get most users to be intrigued and click to open the email and care what’s inside.
Then we see the large “1000s of new items” text and a “shop now” call-to-action button in a very distinct purple color that the email starts with and it continues to draw your eyes to it. Most users will see such graphics and want to click it anyway just out of curiosity. This is the best you can hope for. As you will also notice this is part of a larger image of the surrounding “the unexpected”, “the most wanted styles”, and “the best new technology”. The good about this is that the user does not have to make the distinction and can click anywhere and be taken to your landing page. The bad about this is that you have no idea whether the user made a distinction and clicked on a certain page. Also to go back to my previous comment about alt text, having this as one image gives you the ability to only include one piece of alt text. If you separate this into 4 images, you could get 4 sets of alt text.
After the primary offer, they include some secondary offers in case you were scrolling and weren’t convinced. This offers are free shipping on certain products and a $100 gift card for students with the purchase of a laptop. These offers are not meant to entice you, but to see if they can spark certain interests. This email was sent in September when most students were back in school, but those who didn’t jump at earlier offers or have had a laptop recently crash can jump at this offer. Then the other “1000s” of products start to look more appealing, like a new mouse, laptop case, etc. You get the picture.
The Footer – Closing Strong
The footer is one of the most important parts of an email because most likely if someone made it here they didn’t find what they need or they wish to leave and stop receiving your emails. Either way this is your last chance to give them what they want and change their mind.
Contact Details
Contact details are a required part of any email for SPAM regulations, but most importantly if someone didn’t find what they need or have a question, then it is your responsibility to give it to them. In this case, Staples gives both phone numbers and a store locator since they have brick-and-mortar locations. They also provide email and chat links to get users talking as soon as possible.
One Last Chance to Buy
Another thing Staples does with this email is provide links to categories of products. Some of these may have been mentioned in the email, but some may not have been. This is done deliberately to spark interest and give you one last shot and getting a sale. After this there is nothing else for the customer to click on that will result in a purchase.
Legal and SPAM
Like any business material you need to cover yourself in all cases so the last thing on any good email has to be a disclosure about what qualifies for the offer you are presenting if necessary. Or any other requirements of the email or promotion. Then for SPAM laws you must include an opt out link. As Staples shows us, there is no reason you cannot be creative with your link. In this case they say “Unsubscribe. You can always come back.” Let customers know they have the option, even though you hope they do not take that route.
There is one element which Staples does not use here but is a common tactic to retain customers. A line stating “You are receiving this email as a valued customer” or something along those lines to remind someone why they signed up for your email campaigns in the first place. In many instances this can prevent an opt-out request because this will remind the end user why they registered and wanted to sign up in the first place. There are many reasons why someone will opt out and we will go into that in later posts, but for now it’s important to keep them on the email and to get them to take action.
Next Steps – Building Your Email
In the next post we will look more into the HTML code of building an email of this nature to teach about using good HTML email building habits.