Build HTML Email
Designing a simple HTML email and using it for your communications is the easiest way to look like a professional online. It’s paramount for first impressions, and all the chicks dig it. In this tutorial, we’ll create an html email shown in the image. We’ll create a responsive image header that contains navigation links that your audience will be able to use to navigate to your website. We’ll create an image and text for the main content of your html email and finally we’ll finish off with your signature/logo and social media links.
Start With Images
You should first create the images you want for your email. In this tutorial, we’ll be using 5 different types of images: White Logo (400px wide); Black Logo (400px wide); Header Image (1400px wide); Featured Image (650px wide); Social Media icons (35px wide).
It’s important to keep the width of your images relatively close to the sizes shown above in order to achieve the best results in image quality without requiring a large amount of data which could create slow loading times.
Upload your images to your website. Once uploaded, each image will have it’s own url. We’ll need to use these urls when adding the images to our email.
The Email Skeleton
This bit of code is the basis of your email’s structure. It contains the information that allows your email to be responsive to all sorts of email clients. One of the pickiest of all email clients is Google. So if you test on Gmail and you find success, there’s a high chance your email works on all other email clients.
You’ll need to pay attention to the guides marked with the left arrow followed by an exclamation point.
<!– important information –>
Structure for Header
The very first table we create will hold all of the guts of our header from top to bottom and will contain our background image. Our background image can be changed with a different URL. <table background=”http://www.insert-your-image.jpg”>This is where we’ll insert the url of our header image. To keep the image from being blurry, I recommend that your header image be at least 1400px wide.
Copy and Paste this code in underneath <!– All Header Code Below Here–>. This will create the navigation menu and it will set your logo to the left. You can re-arrange the <td></td> tags as long as you keep all of their code guts together.
Scroll to the right and change the ‘Membership’ ‘Website’ and other Navigation Text.
Change the color by adding a different Hex value other than #fff.
Change the href=”http://www.insert-link.com” to match it’s corresponding text: ‘Membership’ ‘Website’.
If you find that your text takes up too much space, you can do a few things to relieve the pressure.
#1 First you can make the text smaller by changing the font size.
#2 Your second option is to delete the one td tag line at a time until you have enough room.
#3 You could also change the style=”width:150px”on your logo to a smaller pixel size.
Create Greeting Text
Add the following code after <!– End Header Navigation –>. This will be your attempt to get your audience’s attention. Many automated email providers, like Mail Chimp, Constant Contact, and Emma have ways to insert code in substitute of the actual name. In turn it will automate the name with each subscriber.
MailChimp: *|FNAME|* would go in place of Ryan
Constant Contact: $SUBSCRIBER.FIRSTNAME would go in place of Ryan
Emma: [% member:name_first default=”friend” %] would go in place of Ryan
Check Your Progress
You should have something that resembles the structure in this image. Common mistakes would involve the alignment or closing tags. Alignment issues are caused by <tr> or <td> tags not having the attribute align=”center”. Sometimes you won’t see anything at all. This most likely means you didn’t close a tag. For every <table> there needs to be </table> at the end. For every <tr> there needs to be a closing tag </tr>.
Adding Email Content
Paste the following code below <!– end header with image –>. With this addition of code we’ve created the space that separates the Image Header from the main content of the email. It also creates a slight color to the background in order to set it apart from the rest of the email.
Paste the following code below <!– ALL EMAIL CONTENT BELOW HERE –>. This will create a featured image within the content of your email. It also has a matching red bottom border. Change the Hex color:#9c191d; to edit color. Change the image url and the link just the same as earlier in this tutorial.
Responsive Digital Design for our Mobile World.
Ox Media and Design
Headings and Paragraphs
Paste the following code below <!– END IMAGE –> from the previous step. Although it seems like there’s a lot here to swallow, it’s really just one heading and one paragraph replicated over and over. The idea that you can copy and paste to create a more dynamic email should be exciting for you. Imagine the possibilities.
Call to Action
Paste the following code below <!– End Heading and Paragraph text –> from the previous step. This is your call to action, when all else fails. Your article email should entice your subscribers to click. Within this code, you can place analytics code that can track which subscribers clicked through and determines its effectiveness.
Paste the following code below <!– end button –> from the previous step. We’re closing in on the end! Don’t give up, you’re almost there! These few lines of code contain your logo and a link to your site. I don’t think you can ever have too much linking back to your site.
Footer with Social Media
Paste the following code below <!– End Logo –> from the previous step. This is the final step to creating your very own HTML email. Once you switch out the SRC image urls and HREF links for your social media buttons, you’ll be able to recreate fantastic emails to promote your brand. It’s about time your brand got a boost.