5 Tips for Designing Engaging HTML Emails
09 May 2024
5 Tips for Designing Engaging HTML Emails
Email marketing remains a powerful tool for reaching customers and building lasting relationships. While crafting compelling content is essential, it's equally important to ensure your emails are visually appealing and optimised for different email clients. Here are 5 tips to design successful HTML emails:
1. Embrace Tables, Not Divs
- Why it matters: Email clients can be finicky with modern CSS and web layout techniques. Tables offer a reliable way to structure your email's content for consistent rendering across different email providers.
- Best practice: Build your email's layout using HTML tables, even if it feels a bit old-school compared to cutting-edge web design. Nested tables can provide the flexibility to arrange more complex designs.
2. Keep It Compact
- Why it matters: Users tend to scan emails quickly. Overly wide emails risk being cut off on smaller screens or in preview panes.
- Best practices: Stick to a width of around 600-800 pixels to ensure your email displays comfortably across devices.
3. Inline Your CSS
- Why it matters: Many email clients strip out external stylesheets or <style> tags within the HTML's <head>. This can disrupt your email's intended look.
- Best practices: Place CSS rules directly within HTML elements using the "style" attribute. While not ideal for maintainability, this ensures your styles render reliably in email clients.
4. Prioritise Web-Safe Fonts
- Why it matters: Fancy fonts might look great on websites, but email clients often won't understand them. If a font isn't available, the client substitutes something generic, ruining your design.
- Best Practices: Stick to classic, widely supported fonts like Arial, Verdana, Helvetica, Georgia, and Times New Roman. Define a font stack as a fallback, so your email degrades gracefully if the web-safe font isn't available.
5. Test, Test, and Test Again
- Why it matters: Inconsistent rendering is a constant battle. What looks perfect in Gmail might break in Outlook.
- Best practices: Use tools like Litmus or Email on Acid to preview your email across multiple email clients (Gmail, Outlook, Yahoo, Apple Mail, etc.). Make adjustments as needed to ensure your design displays correctly everywhere.
Bonus Tip: Consider Accessibility
- Design with inclusivity in mind. Use a good contrast ratio between text and background, add descriptive alt-text to images, and structure your content semantically so screen readers can understand it easily.
Remember: Simplicity often works best in HTML email design. Don't let complexity undermine the core purpose of your email: to deliver your message effectively.
Knowledge Base / Online Design
Do You Have a Project?
Let's Talk About It
Do You Want To Find Out More?
Contact Us
Do You Want To Work With Us?
Become a Partner
Get In Touch
Phone
+44 (0) 203 960 7602
info@webosaurus.co.uk
The Broadgate Tower,
12th Floor, 20 Primrose Street,
London,
EC2A 2EW