Best way to design an html newsletter e-mail template
Are you used to html-coding for web-pages? Then you probably know everything about javascript, headers, body-styling and responsive CSS3 designs with properly written style-sheets.
If you have no clue what those things are, don't worry. For e-mail you would simply have to forget all about good web-design anyway!
For e-mails, the way you have to think about the design is the same way you would have designed for the web 15 years ago.
Designing HTML-emails layout easy
Luckily, designing good looking HTML-emails is fairly easy even if you don't know HTML since Otto has a built-in e-mail newsletter designer editor, where you simply can apply text-styling, colors and images like in Windows Word.
For most e-mails that's all you need. The one thing you DO have to know about is only needed when you want to design fancy newsletter e-mails: You have to use the <table> element.
In modern web-design, it's only used for data-tables, but it used to be used also for designing web-layouts, and since many e-mail browsers (that the recipients of your e-mails are going to use to read the e-mail, like Outlook, Hotmail, Gmail, Thunderbird etc) can't show designs made in any other way. If you know about external CSS, you should forget that, too, only inline CSS will work.
Nested tables, or tables inside tables
Most of the times, if you want control of the design to make it relatively consistent across all screens and e-mail readers you need to have a <table> within a <table> (within a <table> within a <table> etc if needed). It's called nesting tables.
In Otto, you can use this tool to create tables:
If you prefer to look at the source code, it can look like this:
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" > <tr> <td align="center" valign="top"> <table border="0" cellpadding="20" cellspacing="0" width="650" > <tr> <td align="center" valign="top"> Write your newsletter here </td> </tr> </table> </td> </tr> </table>(The reason you must have at least two tables is that some email clients strip out the <body> element when they render the email.)
The perfect width of an html newsletter template?
Emails should be around 600px-800px in width. The second table in the example above is where you can set that width.
Responsive newsletter design?
Using tables to build an email may be old-style, but you can actually achieve fairly responsive e-mail designs (that is to fit all kinds of window size screens, both PCs, iPads and smart-phones).You do this by setting only one fixed width in the email, then the second table in the example above, with all other tables (first and if you have any after) using a width in percentage (e.g. 100%).
Try it for yourself!
In Otto®, you can design practically any newsletter HTML design and send it out from one or multiple senders to hundreds or thousands of e-mail recipients and then track the recipient's actions. Sign up for a demonstration to see if it fits your need or not!
Contact us to get your own copy of Otto today.
