Create An HTML Newsletter

5/27/2018 Create an HTML newsletter | Creative Bloq

ART AND DESIGN INSPIRATION
TOPICS Graphic Design Illustration Art Web Design 3D Typography Essential Tips All Topics
Create an HTML newsletter

By Creative Bloq Sta August 01, 2013 net magazine
Daniel Bramhall explains how to better engage potential customers with your newsletters, and looks at why outdated
solutions are still so often used these days
    
Applying HTML and CSS to your emails can make a massive di erence to the impression you give potential customers – and in the past
couple of years, HTML support within email clients has progressed a long way.
However, owing to the sheer number of email clients out there, it’s hard to get things perfect for each one and, as a consequence of
this, outdated practices can get forced upon developers. You’re probably aware of the importance of ensuring website cross-browser
compatibility – but making sure your email looks right across all clients is a whole di erent ballgame!
Things to understand
There’s a shed-load of nuances involved with HTML newsletter design. It can be tiresome and, in some cases, very frustrating. Before
we begin implementing, coding or designing a template, it’s worth examining some basic principles that apply when creating HTML and
CSS emails.
On the technical side, most email clients don’t support CSS oats, so there’s a need to use tables for layout. Many clients also strip out
the HTML, head and body tags, including any CSS styles in them. This means that all of your CSS should be inlined.
https://www.creativebloq.com/create-html-newsletter-8133763 1/10
This is the basic structure of our email. It might look simple, but you’ll nd that this structure is used widely and considered to be good email design practice
One the design side, you should keep your email 600px wide or less, to t common widths of email clients’ preview panes. Many email
clients also block images by default, so if you rely on images for your content, your recipient may not see it. A good rule of thumb is
that the more important the content, the more likely it is you should use text to display it. Finally, your creation will break at some
point, even if you follow all the correct methods – if you have 20,000 email subscribers it’s guaranteed that the email won’t display
properly for every last one of them.
So, HTML emails can be inconsistent and somewhat ckle – but it’s still possible to use them to achieve e ective marketing for you and
your clients. With the above ideas ingrained in your mind, let’s begin. We’ll be creating an email from scratch, meaning we won’t use
any templates or third party services – just HTML and CSS, and Photoshop for the graphics.
The basic structure
To begin with, we’re going to set up a simple HTML le. Be sure to brace yourself because, as mentioned, emails made in HTML and
CSS seem to go against everything you consider good practice:
<html>
<head>
<title>Introducing Something New!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex,nofollow"></meta>
<style>
a {color: #bebbb8;}
img {display: block;}
</style>
</head>
<body>
<table bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-color:#e4e4e4;
fontfamily:' HelveticaNeue', 'Helvetica Neue', Helvetica, Arial; color:#bebbb8; padding-top:40px; padding-bottom:40px; padding-
right:0; padding-left:0; lineheight: 22px; -webkit-font-smoothing:antialiased; ">


</table>
</body>
</html>
So far, we have the very basic structure of our email: we have properly speci ed and populated all the appropriate meta tags, and
styled our content. Now we need to actually populate our email with the content.
This is the design of our header. This will be displayed at the top of our email, and will also be the most prominent part of the system
Adding content
Let’s add our content. We’ll be using HTML tables, starting with a simple line of text giving the user the ability to preview the email in
their browser. Insert the following in between the <body> tags:Here we’ve added the rst of our tables, styled it and used the <tr> tags
to populate it with rows of content (in this case text), and then closed the table. If you were to save your HTML le and open it in your
browser, you’d nd a simple line of text – something that could have been done without any tables – but you’ll see why they’re so vital
for an email in a moment.
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-top:8px;padding-bottom:8px;padding-

right:2px;padding-left:2px;" >
<tr align="center">
<td style="font-size:13px;" >Does this email look a bit obscure? <a href=”http://mysite.com/email/01.html" style="color:#979696;"
>View it in your browser.</a>
</td>
</tr>
</table>
Designing graphics
When designing graphics for an email, remember that width is a real constraint – so think thin. For our graphics, we’ll create a
Photoshop document 600x400px (call it header.jpg) and, within the canvas, simply include the top graphic you’d like to display. For this
article we’ll simply include an image with a shadowed border at the bottom and some text. Repeat the above process, but this time call
the graphic middle.jpg and populate it with the main body of your email.
Take a nal close look at the outcome of our header: from Photoshop to nished article, all it took to create it was a keen eye and a bit of imagination
Next we’ll create two graphics, each acting as one side of the footer; for example, we’ll make a left-hand side that will link to the
website and a righthand side that will link to a Twitter page. To do this, create two blank canvases, one at 300px width and 200px
height called footer-l.jpg and another the same size called footer-r.jpg.
With our graphics created, we now need to position and place them in the email. To implement this, we’re going to create a variety of
tables and then populate them accordingly, adding the following code just below the closed table tag (</table>):
<table id="Table1" width="600" height="auto" border="0" cellpadding="0" cellspacing="0" align="center">

<tr>
<td colspan="1" rowspan="1">
<img src="header.jpg" width="600" height="400" border="0" alt="" style="display:block;" >
</td>
</tr>
</table>
<table id="Table2" width="600" height="auto" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<h1 style="font-size:36; font-family:Helvetica; padding:20px; color:grey;">New in 2.0</h1>
<ul style="margin-top:-30px; padding-left:100px; fontfamily:Helvetica; line-height:24px; font-size:18px;">
<li>Vivamus sagittis lacus</li>
<li>Vel augue laoreet rutrum </li>
<li>Faucibus dolor auctor faucibus dolor aucto</li>
<li>Vivamus sagittis lacus sagittis lacus</li>
<li>Vel augue laoreet rutrum laoreet rutrum </li>
<li>Faucibus dolor auctor</li>

</ul>
</td>
</tr>
</table>
<table id="Table3" width="600" height="200" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<a href="http://mysite.com/">
<img src="footer-l.jpg" width="300" height="200" border="0" alt="" style="display:block;" >
</a>
</td>
<td colspan="7">
<a href="http://twitter.com/">
<img src="footer-r.jpg" width="300" height="200" border="0" alt="" style="display:block;" >
</a>
</td>
</tr>
</table>
Here we’ve positioned each of our images in their correct position using HTML tables, and then added links to the footer images. You
should notice one of the reasons we use tables for HTML emails: the fact that you’re able to position images where you want.
A look at our email from within Safari – although you must always be sure to send a test email and don’t rely on what you might see in your browser!
Whatever the position, a table makes it easier for you to lay out images. You can then link them to speci c locations, which is a
fundamental motivation for creating HTML emails.
Sending the email
When it comes down to sending your email, things boil down to which client you are using – here we’ll cover three popular desktop
options:
OS X Mail Sending an email using OS X is straightforward – open up your HTML le in Safari, go to File > Share > Email this Page (or
press Cmd+I). The Mail app should open with your HTML le nicely positioned in the body of the email.
Outlook To send an HTML le as an email body using Outlook, move it to C:\ Documents and Settings\*userid*\Application
Data\Microsoft\Stationery (Application Data is a hidden folder). Once you’ve done that, go to Action > New message using… > More
stationery and select the HTML le as the body.
Thunderbird Thunderbird also makes it easy to send HTML emails. Compose a new message, then select Insert > HTML… and copy
all the code from the HTML email to the dialog that opens. You should upload your images to an online directory to prevent them
getting lost, and change the paths within the HTML code to the new online locations. Now, simply send as usual.
Why so outdated?
The main reason HTML emails are so out of date, and use old technologies, is that there’s such a range of clients an email has to
comply with. In addition, the purpose of an email client isn’t to be a web browser, nor is it to render HTML documents: it’s to display
(mainly) text – so when a client is developed, HTML compatibility is typically not a top priority. When compatibility is included, it’s
usually limited and doesn’t take advantage of the language’s latest advances.
The bottom section of our email: this contains useful links, further reading and additional resources
Hopefully this article has given you a taste of where enhancements can be made. Regardless of whether you think HTML emails should
be used, they’re an often-overlooked Achilles heel of modern clients. It’s less that client developers don’t care, and more that HTML
itself is underestimated. This situation needs to improve, otherwise dated techniques will continue to be forced on developers –
leaving them less time to concentrate on what matters most: content.
TOPICS
NETMAG
You May Like Sponsored Links by Taboola
Urbanears Urbanears Plattan ADV Jam

Rp 899.000 - ilotte.com
A Woman Saves More Than 100 Dogs in Lombok, Alone

The Jakarta Post
Consider These Colorful Kampongs for Your Next Trip

The Jakarta Post
Rumah Ahok, Museum Kata, Island Hopping: What to Do in Belitung

The Jakarta Post
In Indonesia, A Hashtag is Running Against President Jokowi and Winning

The Jakarta Post
Play this Game for 1 Minute and see why everyone is addicted
Delta Wars
Advertisement
RECOMMENDED
7 must-read books for design

students
How to design for startups
Subscribe and get

13 issues per
year SPONSORED
GET WEEKLY TIPS AND

 INSPIRATION
Sign up below to get the latest from

Creative Bloq, plus exclusive special
o ers, direct to your inbox!
No spam, we promise. You can unsubscribe at any time and

we'll never share your details without your permission.
Advertisement
MOST READ MOST SHARED
1 18 of the best Android apps to download for creatives
2 Google reveals new Chrome OS tablet
3 68 best free fonts for designers
4 32 brilliant design portfolios to inspire you
5 13 incredible tools for creating infographics
Advertisement
EARN UP TO US$20
CASH REBATES EACH
MONTH FOR FREELANCING
Sign up for free
Creative Bloq is part of Future plc, an international media group and leading digital publisher. Visit our corporate site.
About us
Terms and conditions
Privacy policy
Cookies policy
Advertise with us
© Future Publishing Limited Quay House, The Ambury, Bath BA1 1UA. All rights reserved. England and Wales company registration number 2008885.
Powered by OptinMonster

Create An HTML Newsletter - Creative Bloq

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Create An HTML Newsletter - Creative Bloq

Diunggah oleh

Hak Cipta:

Format Tersedia

5/27/2018 Create an HTML newsletter | Creative Bloq

The basic structure

right:0; padding-left:0; lineheight: 22px; -webkit-font-smoothing:antialiased; ">

<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-top:8px;padding-bottom:8px;padding-

<table id="Table1" width="600" height="auto" border="0" cellpadding="0" cellspacing="0" align="center">

<li>Faucibus dolor auctor</li>

Sending the email

You May Like Sponsored Links by Taboola

Urbanears Urbanears Plattan ADV Jam

A Woman Saves More Than 100 Dogs in Lombok, Alone

Consider These Colorful Kampongs for Your Next Trip

Rumah Ahok, Museum Kata, Island Hopping: What to Do in Belitung

In Indonesia, A Hashtag is Running Against President Jokowi and Winning

7 must-read books for design

How to design for startups

Subscribe and get

GET WEEKLY TIPS AND

Sign up below to get the latest from

No spam, we promise. You can unsubscribe at any time and

MOST READ MOST SHARED

1 18 of the best Android apps to download for creatives

2 Google reveals new Chrome OS tablet

3 68 best free fonts for designers

4 32 brilliant design portfolios to inspire you

5 13 incredible tools for creating infographics

Terms and conditions

Anda mungkin juga menyukai