Your HTML email’s layout should be anywhere from 600-800 pixels in width since many email clients provide a preview window that isn’t very wide. Simplicity is important, too. Don’t design an email as you would a website. Generally, the shorter your email is, the better it will perform. Email is increasingly read on-the-go, by busy people, on different types of devices. Write emails for a distracted audience, make it clear which content is most important, and make it easy to perform calls to action.
Single-Column Vs. Multi-Column
The type and amount of content you plan to send can dictate your email’s layout. Emails break down into two general layout types: single- and multi-column. Here are some pointers to help you decide which is best for your email.
- Best for focused, succinct messages
- Tend to be easier to read than multi-column emails
- Best for emails requiring a call to action
- Best for emails with wide variety of content
- Work well for product-based/e-commerce emails
- Best for emails which include non-crucial content best featured in a sidebar
These layouts can be used in a variety of ways to create interesting, effective email. There are plenty of great-looking examples in the Inspiration Gallery that you can use as a jumping-off point for your ideas.
Generally speaking, all HTML email newsletter fall into three broad categories: Read Me, Buy Me, and Join Me. Here are some tips for each type of purpose-built email.
- These emails depend on good copywriting.
- They tend to be lighter in code weight thanks to a low number of images.
- Copy should be concise, easy to read.
- Typography is important. Font size and font family make a big difference in readability. (12px Comic Sans = bad. 16px Georgia = good)
- It’s important to have your “hook” at the top of the email, since mobile email clients may not download the entire message.
- These emails are dependent on interesting visuals (think: e-commerce product photos, etc.).
- Clear, well-cropped images are a must.
- Email images should have descriptive summaries, since clients often block images.
- Make it easy for a reader to get to your product’s page. Each product you advertise in the email should include a link.
- Well-written preheaders are important. Aside from the subject line, it’s the first thing people see in their inboxes.
- These emails should be short and to-the-point
- Information hierarchy is very important. Event details should always be up top, prominent in size.
- If present, the call-to-action should be clearly-defined and easily discernible at a glance.
- Information secondary to the email’s main purpose (if it’s an invitation) should always come after event details and call-to-action.