Consider following these practices if you are creating your email design and need some tips.
Use a catchy subject line
Keep your subject line short, catchy, personalized, and creative. Try using emojis to draw users' attention and encourage them to open your email. E.g., Hey Brenda, you will love these Dresses selected for you!
Keep it simple
Make your mailer design easy to read for every user. Aim for content that can be quickly read by the average eighth grader, but avoid talking down to your audience.
Use single-column design
A single-column design is sufficient for most emails and will help the design look good on mobile devices. It is also easier for your readers to scan a single column of material.
Every email client is different
When designing an email, keep in mind that it will be very difficult to achieve pixel-perfection on every client (Outlook, Gmail, etc.). Instead, create an email that maintains your branding while being easy to read (and click) on all clients.
Avoid sloppy HTML
Avoid coding sloppy HTML, usually from converting a Microsoft Word file to HTML. If you typically work in Microsoft Word to create your email copy and want to flow it right into your layouts, we recommend that you either create your email marketing text in Notepad or save your work in text-only format in Word or a no-frills word processing software.
Use tables when possible
While it may seem like you are coding in the dark ages of the internet, tables are the most reliable way to achieve a consistent layout. With tables, you can take advantage of the align attribute, the predecessor of modern CSS floats.
However, watch out for empty <td></td> tags, as some email clients do not handle these as you would expect.
Avoid sending image-only emails
Sending an image-only email may seem like a good idea. However, image-only emails tend to set off spam filters, regardless of where they link to or who sends them. The reason is that email service providers ultimately use text to determine what is inside the emails they receive.
For larger images, you can split them into multiple parts.
Also, avoid using too many images.
Image:text ratio
Strive for a 60:40 text-to-image ratio.
Avoid background images
Avoid layering background images behind text, as many email clients (such as Outlook) do not support them.
Use absolute addresses for images
You may use local image references for testing, but absolute image references are necessary for your final send!
Image size
Header graphics should be between 600-700 pixels wide with a proportional height (a general guideline is 100-200 pixels). For images within your mailer's content, we recommend 480x480 pixels or smaller. Your image file size (weight) must be under the maximum recommended email size of 100 KB.
Add alt text to images and buttons
Alt text is not just for images on your website. Adding them to your emails helps users understand what they are reading if the HTML does not render it correctly or if their email client blocks images by default.
Avoid scripts
Videos, Flash, Action Script, DHTML, JavaScript, animated GIFs, and all that other fancy stuff will not work. Most anti-virus software blocks them from working inside email apps.
Avoid adding comments
While designing a responsive email, many HTML developers add comments to the HTML code. Avoid adding such comments.
Use inline CSS
Webmail apps render differently from desktop apps. Mainly, webmail apps restrict CSS more to keep your code from interfering with their operation. Inline CSS is the only reliable way to stylize HTML emails.
Not more than one scroll
Most email apps use some form of preview pane. Generally, you have 700px as your email's width (and height). Avoid designing emails that are too long to fit on a single scroll.
Limit your CTA's
Where possible, limit your CTAs. Keep it to one primary CTA and place it above the fold. Avoid adding CTA’s directly to the email content. Use images, text, or buttons to add a CTA.
Encode special characters
Every email service provider (ESP) uses a different encoding method. So, if it is different from the kind you selected for your email, it may cause your special characters (like ©) to appear incorrectly, often as a black square or a diamond. To avoid this problem, use a character encoder.
Avoid spammy phrases
Avoid spammy phrases like “Click here!” or “Once in a lifetime opportunity!”
Avoid using block letters
AVOID USING ALL CAPS, WHICH IS LIKE SCREAMING AT THE TOP OF YOUR LUNGS VIA EMAIL (especially in the subject line).
Personalize your email
Personalize your email and use emotion to make it more appealing. This also helps build trust with the consumer. Emails with personalized subject lines are 26% more likely to be opened. Go beyond just using your subscriber’s name in the subject line and use other data to fuel super-relevant messages.
Preheader
Preheaders add valuable context to your subject line and can help your open rate. Keep it short (between 40 and 70 characters) and to the point. Use this space to help your customers understand why the email is helpful to them. Your subject line and preheader text should work together.
Do not forget to add an unsubscribe link
You do not want to email people who are not interested in reading your emails. It is also illegal to omit an unsubscribe link from a commercial email.
The unsubscribe link usually appears in or below the footer. If you want extra credit, you can set up a preference center that lets subscribers choose which types of emails they receive and how often. This can help reduce the number of unsubscribes.
Keep email file size under 100KB
There are a couple of good reasons to keep your email under 100KB. First, it will pass through more spam filters by staying light. Keeping your email under 102 KB will also prevent Gmail from “clipping” it.
To keep your email within the limit, consider removing redundant or unused styles, moving some content to a landing page, or removing unnecessary characters from your code.
Proof and then proof again
Pay close attention when you proof your final direct mail design before you send it off. Look at the overall effect of the layout, images, and typography. These elements can be very powerful when used effectively. The right choices will help you pull the consumer through your email to the very end and prime them to respond in the desired way.
Avoid irresponsive design issues in emails
Irresponsive designs can render differently across email clients. For example, if you add an image block to the same structure as text or button blocks and disable the Responsive Image setting, the text and buttons will inherit the image block’s irresponsive behavior, making them appear small on mobile.
To prevent this, place irresponsive images in a separate structure from text and button blocks.