tags for layout; they break in Outlook.
◈ Set width to 100% for tables that need to stretch on mobile.
Adding Images and Text
Images should have explicit width and height attributes. This prevents layout shifts while images load. Use an image hosting service that supports HTTPS. Always include descriptive alt text.
For text, use
tags with inline font styles. Avoid proprietary fonts unless you provide fallbacks. Arial, Verdana, and Georgia are safe choices.
◈ Set images as display:block to remove unwanted whitespace.
◈ Keep text size at minimum 14px for body copy.
◈ Use line-height of 1.5 for readability.
Buttons That Click
A button is a table cell with a link inside. Style the cell with background color, border-radius, and padding. Use a display:inline-block approach or a VML fallback for Outlook.
◈ Button padding should be at least 12px vertical, 24px horizontal.
◈ Make sure the button text is large enough to tap.
◈ Test the button on both light and dark mode backgrounds.
Common Email Design Mistakes to Avoid
Many people jump into email design without understanding client quirks. The result is an email that looks broken. Here are the most frequent pitfalls and how to avoid them.
◈ Ignoring Outlook. Outlook uses Word’s rendering engine. It ignores margin and padding on certain elements. Use conditional comments to add VML for backgrounds and rounded corners.
◈ Relying solely on images. If images are blocked, your email becomes blank. Use background colors and text overlays as fallbacks.
◈ Not testing across clients. What works in Apple Mail may fail in Yahoo. Use email testing tools or send test emails to multiple accounts.
◈ Overloading with CSS classes. Inline styles are safer than classes. Classes are often stripped by webmail clients.
◈ Forgetting a plain text version. This hurts deliverability and accessibility. Always include a text-only alternative.
Responsive Design Techniques for Email
Responsive email design uses media queries to adapt layouts. The most common breakpoint is 600px. Below that width, your email should switch to a single column.
Inside your media query, you can change font sizes, hide or show elements, and adjust padding. For example, set td elements to display block, and stack content vertically.
◈ Use max-width:100% for images inside media queries.
◈ Set the main container table to full width on mobile.
◈ Increase button sizes for easier tapping on small screens.
Remember, some email clients do not support media queries. Your base design should already look decent on mobile. Media queries are enhancements, not necessities.
Tools and Frameworks That Simplify Email Coding
You do not have to build every email from scratch. There are frameworks and tools that speed up the process. I recommend starting with these.
◈ Foundation for Emails – a responsive email framework by Zurb. It provides pre-built components and a grid system.
◈ MJML – a markup language that compiles to HTML email. It handles complex layouts and compatibility issues.
◈ Litmus or Email on Acid – testing platforms that preview your email across 100+ clients.
For code validation, use the W3C markup validator. Clean code reduces rendering errors. And always run your email through a spam checker before sending.
How to Design HTML Email for Different Campaign Types
Promotional Emails
Promotional emails need a strong hero image and a single clear call-to-action. Use bold colors that match your brand. Keep the offer text short. A countdown timer can add urgency.
◈ Place the main offer above the fold.
◈ Use a contrasting button color to draw attention.
◈ Limit links to avoid distracting readers.
Newsletter Emails
Newsletters usually have multiple content blocks. Use clear headings for each section. Include a table of contents at the top. Make sure each article snippet has a “read more” link.
◈ Use a two-column layout for desktop, single column for mobile.
◈ Keep each section under 150 words.
◈ Include an unsubscribe link in the footer as required by law.
Transactional Emails
Transactional emails like order confirmations have high open rates. Design them to be clean and informative. Include order details, shipping info, and customer support links.
◈ Use a simple one-column layout.
◈ Display key information in bold or in a box.
◈ Add a personalized greeting at the top.
The Role of Branding in Email Design
Branding makes your emails instantly recognizable. Use the same logo, colors, and fonts that appear on your website. Keep your header consistent across all campaigns.
◈ Place your logo at the top of every email.
◈ Use brand colors for headings and buttons.
◈ Maintain a consistent tone of voice in copy.
When your email looks like part of your brand ecosystem, subscribers trust it more. Trust leads to higher click-through rates and long-term customer relationships.
“Your email is the handshake that welcomes subscribers into your world.”
Advanced HTML Email Techniques You Should Know
Conditional Comments for Outlook
Outlook requires special code for backgrounds, rounded corners, and buttons. Use Microsoft’s conditional comments to target Outlook versions. For example,
◈ Use MSO conditional comments to add background images.
◈ For buttons, use VML to create perfectly rounded shapes.
Dark Mode Optimization
Dark mode is now default on many devices. Your email should adapt. Use prefers-color-scheme: dark in your media queries. Swap white backgrounds for dark ones, and adjust font colors.
◈ Add a
◈ Override inline styles with dark-mode specific CSS.
◈ Use transparent PNG images to avoid white halos.
Preheader Text
The preheader text appears after the subject line in most inboxes. Use it to summarize your email or add a secondary hook. Make sure it is coded correctly using
◈ Keep preheader text under 100 characters.
◈ Avoid repeating the subject line.
◈ Place the preheader text in the first
of your email.
How to Test Your HTML Email Like a Pro
Testing is the most critical step in the design process. Do not skip it. Test your email in multiple clients, devices, and dark mode. Here is my testing checklist.
◈ Open the email in Gmail web, Gmail app, Outlook desktop, Outlook web, Apple Mail, and Yahoo.
◈ Check images load correctly.
◈ Test all links, including the unsubscribe link.
◈ Verify the plain text version is accurate.
◈ Run a spam score check using tools like Mail-Tester.
Fix any issues before sending to your list. A broken email damages your reputation and reduces deliverability.
Deliverability Considerations for Email Design
Design affects deliverability. Too many images, heavy HTML, or broken code can trigger spam filters. Keep your HTML file under 100KB. A clean codebase is easier for servers to process.
◈ Use a balanced text-to-image ratio (60% text is ideal).
◈ Avoid using words like “free” or “guaranteed” in excessive amounts.
◈ Use a reputable email service provider (ESP) for sending.
SPF, DKIM, and DMARC authentication are also essential. Your ESP will help you set these up. Without them, your emails may land in spam folders.
“A beautifully designed email is useless if it never reaches the inbox.”
Measuring Success: KPIs for Email Design
You cannot improve what you do not measure. Track these key performance indicators to evaluate your email design.
◈ Open rate – reflects subject line and sender reputation.
◈ Click-through rate – measures how well your design drives action.
◈ Conversion rate – the ultimate goal, often tied to landing page experience.
◈ Bounce rate – indicates list hygiene issues.
◈ Unsubscribe rate – signals content or frequency problems.
Use A/B testing to improve each metric. Test one variable at a time: subject line, button color, image placement, or copy length.
Common Questions About HTML Email Design
What is the best width for an HTML email?
600 pixels is the standard width for desktop emails. It fits most preview panes and reads comfortably. On mobile, the email scales to full width.
Do I need to know coding to design HTML emails?
Basic HTML and CSS knowledge is helpful. However, you can use visual builders or drag-and-drop editors from ESPs. Still, understanding code gives you more control.
How often should I redesign my email templates?
Review your templates every six months. Update them to match your current branding and incorporate new design trends. Keep core layouts stable for consistency.
Can I use JavaScript in HTML emails?
No. Most email clients block JavaScript for security reasons. Stick to HTML and inline CSS. Interactive elements like accordions require workarounds with checkboxes and CSS.
Why do my emails look different in Outlook?
Outlook uses Word’s rendering engine, not a web browser. It ignores padding, margins, and some CSS properties. Use conditional comments and table-based layouts to fix issues.
Putting It All Together: Your Action Plan
Now you have a solid foundation in how to design html email. Start with a simple template. Build it using tables and inline styles. Test it across clients. Optimize for mobile and dark mode.
Focus on one campaign type first. Master that before moving to complex layouts. Track your metrics and iterate. Every email you send is a chance to learn and improve.
To deepen your skills or get a professional email designed for your business, consider working with someone who has done this for nearly two decades. I have helped countless brands turn their email strategy into a growth engine. Visit eozturk.com to see how I can support your online growth journey.
Summary and Final Call to Action
Learning how to design html email is a skill that pays dividends. It increases engagement, builds trust, and drives revenue. You now have a complete roadmap from structure to testing. Apply these secrets to your next campaign and watch your results improve.
Remember, design is only part of the equation. Pair great design with valuable content and a clear strategy. Your subscribers will reward you with their attention and loyalty.
If you want a partner who brings 18 years of certified expertise, let’s connect. I am Emrah Ozturk, and I offer hands-on web design and digital marketing services. Whether you need a custom email template or a full marketing funnel, I am here to help. Visit eozturk.com today and let’s get started.
