Building responsive HTML email templates for high engagement
Summary
Improve customer engagement with mobile-first email design strategies.
Have you ever seen those oversized checks given to lottery winners? They make for a great photo op, sure, but can you imagine trying to deposit that check at an ATM? You’d struggle to insert the massive check into the tiny slot – it’d be a hugely disappointing experience, especially if that was the only way you could redeem your winnings.
Unfortunately, for many brands, this is the experience they provide their customers through poorly designed, unresponsive emails. An incredible 92% of consumers consider their smartphone to be their primary device. Designing for mobile isn’t an option; mobile-first must be the default for modern brands. Yet, we often see brands that eschew mobile-design or even use image-only emails to connect with customers.
The solution to this challenge is to address the root cause: are your HTML email templates responsive?
Email templates are used by brands in their marketing automation systems, such as Marketo or Pardot, to help marketers stay on-brand and provide users with consistent experiences. The template provides the structure, and marketing teams can then adjust various elements to customize the email. Templates dictate high level design decisions such as typography and layout without hindering creative freedom.
Unlike web development, which enjoys a uniform approach from browsers on handling modern features of HTML and CSS, email development has inconsistent support across clients. This can make creating responsive HTML email templates challenging, but it’s not insurmountable.
In this post, we're going to look at how to develop responsive HTML email templates using a modern approach. First, let's look at the decision to build emails from scratch or to use a no-code email template builder.
No-Code HTML Email Template Builders vs Hand-Coding Email Templates
Before you start your HTML email template building journey, it’s important to know you have a choice. You can use no-code HTML email template builders or you can hand-code emails. Whether you're a developer or a marketer, the no-code option is almost always the preferred solution. Here's our case:
- By utilizing drag-and-drop functionality and pre-built templates, no-code builders are faster and more efficient than hand-coding.
- No-code platforms offer robust customization features such as using custom fonts and advanced interactivity.
- Tools like Knak create email templates that are compatible across email clients by default and provide testing tools to ensure emails render perfectly, even for the most obscure clients.
- The learning curve for no-code tools is quite easy, and building emails can be fun for anyone, even marketers with no knowledge of HTML or CSS.
- Create perfectly responsive emails that are designed for and compatible with any mobile device
No-code email platforms like Knak have teams of developers whose job it is to ensure the platform stays up to date with the latest best practices. As you build the email template with a drag-and-drop interface, the tool compiles the HTML and CSS behind the scenes to make your email. The output of no-code and hand-coding is effectively the same – if anything, no-code tools have stronger quality checks.
In short, we recommend using a no-code email template builder. (Get a demo of Knak if you're not convinced)
That said, if a no-code tool isn't an option or you're just interested in what goes into making a responsive HTML email template, then the rest of this blog will be well worth your time.
Understanding Responsive HTML Email Templates
What is a responsive HTML email template? Responsive email templates are coded to automatically adjust layout and content based on screen size and device type. Responsive design uses fluid grids and images that can be dynamically resized to optimize your customer's experience across desktop and mobile devices.
Think of HTML email templates like library bookshelves. They are solid structures which you can use to stack, organize, and display books to potential borrowers. The actual books themselves can be easily swapped without altering the foundational structure or organization. Regardless of whether you are displaying cookbooks or science fiction novels, the size and shape of the shelves remain consistent.
The same holds true for HTML email templates. The structure you create in your template will be used to display content for different types of email content. You may have a webinar email template that works great for invitations – in a pinch, you could reuse the template for a customer event invitation while providing a consistent user experience across devices and screen sizes.The images, copy, and headlines you use in the email are easily swappable because the HTML email template handles the details of making the email responsive.
Key Characteristics of Responsive Email Templates
If you are coding email templates from scratch, then you'll need to consider three key characteristics of responsive email templates:
- Fluid Layouts
- Media Queries
- Mobile-First Design
Fluid Layouts
Fluid layouts refer to using percentage-based widths rather than fixed pixels for HTML elements. This is important because it allows elements like images, text blocks, and containers to scale relative to screen size. If you were to use fixed pixels for an image and set an image container to 600 pixels, the email client will follow that direction regardless of screen size. This can obviously lead to poor user experience on smaller devices.
By using percentage-based widths, you give the email client instructions to display elements according to the screen size. For instance, if you wanted your email banner to occupy the full page, you may set the banner image to a width of 100%.
While fluid layouts are integral to responsive design in your HTML templates, it can be more complex to code from scratch. You'll need to ensure you manage your widths and consider the overall design layout to ensure elements don't become disproportionate or warped. Not only that, but as is too common in email development, not all email clients support required CSS properties like ‘max-width’ to enable these features, requiring workarounds.
Media Queries
Media queries are a CSS technique used to apply different styles based on characteristics of a user's devices, such as screen width or resolution. This technique is a mainstay of responsive design across web and email development because of its ability to dynamically respond to the user's context.
Email designers can define custom "breakpoints" which will trigger the media query rules to be applied. For instance, if the user has a screen resolution less than 480px, this will trigger the CSS file to apply new styles to images to make them more suitable for a mobile device. Common CSS breakpoints based on device are:
- Mobile Devices: 320px to 480px.
- Tablets: 481px to 768px.
- Laptops: 769px to 1024px.
- Desktop Screens: 1025px to 1200px.
- TV and Extra Large Screens: 1201px and more
Applying media queries is a key component of responsive email template design. It also requires a lot of effort designing for various resolutions, devices, and other relevant user contexts. Once applied, media queries in your email templates should be rigorously tested to ensure they work correctly. It's also worth mentioning that media queries aren't universally supported by all email clients, though modern clients like Apple Mail and Gmail do.
Mobile-First Design
Mobile-first design is exactly as it sounds: designing for mobile devices and then progressively enhancing the layout for larger screens. This is a smart approach considering over 55% of emails are opened on a mobile device, Yet, only 56% of marketers leverage mobile-friendly emails in their email marketing strategy. This is a call to action for every marketer to adopt a mobile-first approach to email template development.
The benefit of mobile-first is that you spend time developing the most important features of your email first, resulting in a cleaner, more focused design. It simplifies your design process by putting the most challenging work at the beginning of your workflow. Mobile-first isn’t without its challenges, as developers have to work within the constraints of smaller screen sizes.
From a design perspective, this often means focusing design on simpler layout structures like using a single-column layout. It makes sense as it utilizes the common paradigm of vertical scrolling to view more content. For content development, mobile-first necessitates prioritizing which content is placed earlier in the content often resulting in more focused copy and better calls-to-action.
Mobile-first isn't without its challenges, as developers have to work within the constraints of smaller screens sizes. And while it seems logical that you can enhance smaller designs to larger screens, this isn't always as easy as it seems. Lastly, we'd be remiss not to mention the compatibility issues that plague email development – what works in one client doesn't always translate to other clients.
Different types of emails
When it comes to designing responsive HTML email templates, it's important to note that there are different approaches to email design. Each has its own strength and weaknesses; you have to decide which approach works best for your audience.
Email Type | Characteristics | Advantages | Challenges |
|---|---|---|---|
Responsive Emails | Fluid layouts using percentage-based widths, media queries for custom breakpoints, dynamic scaling across devices, optimal display on any screen size (mobile, tablet, desktop). | Seamless experience across devices, increased engagement due to optimized design for each screen, future-proof for new devices. | Complex to design and code, compatibility issues with some email clients that don't support media queries (e.g., older versions of Gmail). |
Mobile-Friendly Emails | Fixed-width layouts (typically 320-480px), simplified design with larger touch-friendly buttons, optimized primarily for smartphones, static layout. | Simple and fast to design and develop, good for quick implementation and short-term campaigns, guaranteed usability on mobile. | Limited adaptability to larger screens (e.g., tablets, desktops), less engaging visual experience on non-mobile devices. |
Hybrid Emails | Combination of flexible layouts (percentage-based) and fixed-width elements, avoids heavy reliance on media queries, adaptive design that adjusts to a variety of screen sizes. | Broader compatibility across email clients, including those with limited media query support (e.g., Outlook), balanced complexity. | Limited customization and dynamic scaling compared to fully responsive designs, harder to implement for complex layouts. |
Email Type | Responsive Emails |
Characteristics | Fluid layouts using percentage-based widths, media queries for custom breakpoints, dynamic scaling across devices, optimal display on any screen size (mobile, tablet, desktop). |
Advantages | Seamless experience across devices, increased engagement due to optimized design for each screen, future-proof for new devices. |
Challenges | Complex to design and code, compatibility issues with some email clients that don't support media queries (e.g., older versions of Gmail). |
Email Type | Mobile-Friendly Emails |
Characteristics | Fixed-width layouts (typically 320-480px), simplified design with larger touch-friendly buttons, optimized primarily for smartphones, static layout. |
Advantages | Simple and fast to design and develop, good for quick implementation and short-term campaigns, guaranteed usability on mobile. |
Challenges | Limited adaptability to larger screens (e.g., tablets, desktops), less engaging visual experience on non-mobile devices. |
Email Type | Hybrid Emails |
Characteristics | Combination of flexible layouts (percentage-based) and fixed-width elements, avoids heavy reliance on media queries, adaptive design that adjusts to a variety of screen sizes. |
Advantages | Broader compatibility across email clients, including those with limited media query support (e.g., Outlook), balanced complexity. |
Challenges | Limited customization and dynamic scaling compared to fully responsive designs, harder to implement for complex layouts. |
Basic HTML and CSS Structure for Email Templates
Email templates are written using HTML and CSS, which are interpreted and rendered by email clients to display content to recipients. The underlying structure of the HTML file and usage of elements are integral to setting up a strong foundation for responsive template design.
Think of HTML as setting up the overall structure and scaffolding for your email template. It provides a basic framework, but the design and appearance are controlled by CSS. Together, the HTML and CSS allow you to design emails and make those emails responsive. Email design, as we've seen, isn't as straightforward as modern web development. Modern HTML and CSS standards aren't always uniformly accepted by all email clients.
For example, modern CSS in web development makes use of flexbox and grid techniques to enable responsive, fluid layouts for web pages. In email, unfortunately, we're still using the HTML table element for layouts. This can be frustrating for developers coming from web development into the world of email design, but it’s the reality. Challenges like this make a compelling argument for no-code email builders like Knak.
Here are some common considerations and best practices for structuring HTML and CSS in your email templates.
HTML/CSS Consideration | Best Practices |
|---|---|
DOCTYPE Declaration | Use |
HTML Tag Usage | Wrap the entire email content within |
Viewport Meta Tag | Set the viewport for mobile devices using |
Using Tables for Layout | Use percentage-based widths for tables (e.g., |
Defining Inline Styles | Apply inline CSS for maximum compatibility across email clients that strip out external styles. |
Alt Text for Images | Always include descriptive alt text for images to improve accessibility and provide context when images are blocked. |
Responsive Image Widths | Set image widths using |
Spacing with Padding | Use padding within |
Avoiding Divs and Floats | Avoid using divs and floats as many email clients, especially older ones, may strip or ignore these elements. |
Conditional Comments for Outlook | Use conditional comments to apply styles specifically for Outlook clients (e.g., |
HTML/CSS Consideration | DOCTYPE Declaration |
Best Practices | Use |
HTML/CSS Consideration | HTML Tag Usage |
Best Practices | Wrap the entire email content within |
HTML/CSS Consideration | Viewport Meta Tag |
Best Practices | Set the viewport for mobile devices using |
HTML/CSS Consideration | Using Tables for Layout |
Best Practices | Use percentage-based widths for tables (e.g., |
HTML/CSS Consideration | Defining Inline Styles |
Best Practices | Apply inline CSS for maximum compatibility across email clients that strip out external styles. |
HTML/CSS Consideration | Alt Text for Images |
Best Practices | Always include descriptive alt text for images to improve accessibility and provide context when images are blocked. |
HTML/CSS Consideration | Responsive Image Widths |
Best Practices | Set image widths using |
HTML/CSS Consideration | Spacing with Padding |
Best Practices | Use padding within |
HTML/CSS Consideration | Avoiding Divs and Floats |
Best Practices | Avoid using divs and floats as many email clients, especially older ones, may strip or ignore these elements. |
HTML/CSS Consideration | Conditional Comments for Outlook |
Best Practices | Use conditional comments to apply styles specifically for Outlook clients (e.g., |
Testing HTML Email Templates
Are your HTML email templates responsive? You must test them to ensure they work on all email clients and devices to answer that question. Email testing is a key component of the email design lifecycle and is critical for catching errors and making last-minute optimizations to your template. Testing now will save you time and pain down the line – there’s nothing worse than discovering an error from your users instead of catching it during the design process.
Here are some of the most important things to check in your testing process:
- Are your emails cross-client compatible? Do they work with all major clients? Even Outlook?
- How do your emails render in light and dark mode? Many users are opting for dark mode as default, which necessitates different CSS styling to look good.
- How are email clients rendering your HTML and CSS?
- Are your emails accessible? Do they have good contrast ratios and utilize alt text for images?
The Case for No-Code Email Tools
There's nothing inherently wrong with coding emails from scratch; however, as we've seen, email development and, particularly, responsive template design are complex and nuanced processes. No-code tools like Knak take care of all the heavy lifting for you. Instead of wrestling with media queries and custom breakpoints to solve for different devices, you can focus on iterating creative designs using a drag-and-drop builder.
No-code tools are backed by teams of engineers (like our staff at Knak) whose primary job is to ensure that the HTML and CSS output by the tool is responsive by design. We obsess over cross-client compatibility and mobile responsiveness so you don’t have to. Modern marketing and development are hard enough without having to deal with archaic email clients and edge cases: leave the hard stuff to us!
Regardless of how you code your emails, one thing is clear: your email templates must be responsive. Your customers expect it – no, they deserve it. By adopting a mobile-first philosophy, you'll deliver better email experiences no matter the device your recipients use.
