In the business world, we call it customer centricity. Each customer expects it from your company. But how does it work? 

In this guide, we give you a breakdown of customer centricity, talk about its benefits and insights, and show you the best practices you can use to be more customer-centric.

What is customer centricity?

Customer centricity is a business approach that focuses on consumers’ needs and puts their interests and pain points at the center of every brand decision and action. This includes product development, marketing campaigns, sales, and communication with the support team.

For consumers, interacting with a customer-centric culture is about:

• Getting only relevant recommendations.
• Not having to repeat a problem twice to a support manager.
• Having access to a chatbot that offers 24/7 customer support.
• Getting in touch with the right customer representatives fast.

For business, to have a customer-centric culture is about: 

• Ensuring every team member deeply understands what the customer needs and wants. 
• Improving a product and customer service based on consumers’ feedback.
• Encouraging employees to think innovatively and develop solutions that fit customers’ needs.
• Gathering and analyzing customer data to strengthen brand positioning, personalizing the value proposition, and customer engagement/conversion strategies.
• Making the purchase process simple and easy.
• Increasing customer touchpoints. 
• Providing omnichannel customer communication.

Reasons why companies want to be customer-centric 

Here are four ways your business can grow by adopting a customer-driven approach. 

Increasing sales 

When businesses take customers’ feedback into account, clients feel heard, which builds loyalty. As a result, 68% of customers tend to spend more money, and turning from product to customer centricity can bring you 80% revenue growth. 

All in all, this approach helps to strengthen the sales funnel and turns interested people into paying customers.

Growing customer loyalty

It’s no secret that a personalized experience is vital to increasing customer loyalty. 78% of U.S. consumers agree on that and are more likely to be loyal to companies that understand them personally.

Better customer retention

And here’s another statistic for you: 60% of customers with personalized shopping experiences prefer to repeat a purchase rather than look for something new. Moreover, brands consistently demonstrating a deep understanding of consumers’ needs see lower churn.

Lower marketing expenses

The most cost-effective and powerful form of marketing is word-of-mouth. 72% of satisfied customers will tell six or more people about their experience. Thus, a business focused on customer satisfaction doesn’t need to spend extra money on marketing campaigns in this field. 

5 examples of customer-centric companies and their strategies

Here, we collected some of the best examples of customer centricity approaches shown by successful businesses.

Amazon: practices highly personalized marketing 

Amazon takes its customer-centric culture very seriously and lifts it to an obsession with a maniacal fervor. The company’s algorithms take customer data and turn it into knowledge about what you like so you get recommendations for only relevant products and services and search results. 

For example, here is a recommendation for an engineer who goes to a gym and loves coffee and reading:

Amazon takes customer centricity to the next level by ensuring you have as low a chance as possible of leaving their website without making a purchase. There are truly no barriers to customers for Amazon; this service follows them everywhere:

• Checking your inbox? Be prepared to find emails with price updates on an item you’ve saved to your cart. 
• Browsing the web? Meet ads for a desired sweatshirt. 
• Playing a game on your phone? Enjoy a notification about a bestseller back in stock.

Amazon tracks customers’ browsing history, search queries, past purchases, and items in their wish list. All these insights are stored in Amazon Web Services. Then AI and ML use it to transform the Amazon website content into your personal shopping heaven instantly.

Netflix: develops its service based on customer needs

Similar to Amazon, Netflix marketers are maestros of personalization. But this time, we’ll talk about its product team. It continuously monitors customer feedback and updates the platform by introducing new features and improving the existing ones. 

For example, many of us have a problem: if there is no internet, we can’t watch our favorite TV shows online. Netflix solved this by allowing users to download TV shows and movies for offline viewing.

L’Oréal Paris: provides personalized shopping assistance

You can see and test L’Oréal products in any cosmetics store. Unfortunately, online customers are still faced with common challenges – they can only define if the product matches them by guessing from the photos or reviews. 

To ease online shopping, L’Oréal adopted AI. Now, it assists L’Oréal Perso app users in choosing products. It went further than just analyzing customers’ behavior, recommending items according to their appearance and location.

All you have to do is set up a personalized profile, share your location, skincare concerns, and upload a photo of your face. 

Perso will assess what products fit you best by analyzing your: 

• Skin type, wrinkles, dark spots, enlarged pores, or acne, 
• Environmental factors like temperature, UV, and pollen levels.

This way, online shoppers have a closer shopping experience to offline customers. They don’t need to visit a physical store to find their foundation or lipstick shade anymore.

Starbucks communicates with customers where they are

Each customer is different. Some people prefer to communicate with brands on messengers, while others go with email or even Twitter. Customer-centric companies take into account the preferences of each customer group and provide multi-channel communication. 

One of the best examples of this is Starbucks, which communicates with its customers through a wide variety of channels:

• Mobile app, where you can receive personalized offers, make an order, pay for it, redeem loyalty rewards, find stores, etc.

• Facebook, Instagram, Twitter, and Pinterest, where people interact with the brand directly through posts, comments, and messages, and share their customer insights among themself.

• Email newsletters bring personalized recommendations, birthday rewards, product updates, or special discounts.
• SMS with the best offerings and rewards.
• Offline posters, billboards, and print media advertising deliver news about special offers during holiday seasons, events, or new store openings.

Thus, Starbucks built relationships with its customers, making them feel valued and appreciated.

Chewy: delivers exceptional customer service

Chewy is an online pet food store with a customer-centric approach that is famous for its exceptional attention and empathy to customers. Here’s just a couple of stories about their service customer relationships:

• Each customer is welcomed with a handwritten card:

• Chewy treats customers like family and supports owners when their furry friends pass away. Company reps send them a miniature pet portrait or bouquet and a condolence note.

The secret? The right choice of people, a supportive work environment, and a sincere desire to talk with customers and understand them. 

5 best practices and insights to build a customer-centric company

Follow these tips to build a customer‑centric business that keeps customers happy and coming back.

Hire employees with a customer experience mindset

Excellent customer service starts with the right people (and strategy). During interviews, hiring managers should ask candidates questions to gauge their customer orientation, for example: 

• Do you have any experience developing customer-focused strategies in the workplace?
• What have you learned from situations where customers have been dissatisfied with a product or service?

Ensure smooth communication between departments 

The main problem with providing a consistent customer experience at each step of a customer journey is broken communication between departments. For instance, marketing doesn’t share context info on the leads they convert into buyers. 

To fix this, you should ensure consistency of customer data and insights between all the departments involved. One way to achieve this is by adopting a shared inbox platform that enables businesses to store all user chat history and data in one place, making it easily accessible to employees.

What’s more, don’t forget to provide your team members with an all-in-one security tool like MacKeeper to help them get rid of junk files, remove malware, block ads, and use VPNs to protect customer data.

Invest in customer support

Having a happy support team translates into having satisfied customers.

So, to make your customer service managers happy, you can: 

• Start with a salary and offer a competitive and fair reward for the work. 
• Provide a friendly work environment.
• Train them regularly, invite experts, and buy courses.

Ask for customer feedback 

80% of companies think they already have a customer-centric strategy. But only 8% of customers agree. To avoid such a misconception, collect real-time customer feedback. 

How? Evaluate their satisfaction with your product or team performance by sending a post-purchase or post-interaction survey in a live chat, pop-up, or email.

Be ready to scale your business

Customer needs are different all the time. They are changing, and your company should be able to adjust accordingly. Thus, it is essential to have a clear plan to tackle large-scale issues and scale your customer support. 

Even with an increasing number of tickets, your team should provide the same level of communication quality. 

To sum up

Do you want to be a customer-centric company? Enjoy increasing sales? Save marketing budget? Listen to consumers’ needs across all touchpoints and keep info from this article in mind when making a strategy. Now you know how to do it! 😉

Just keep in mind that the shift can be complex and long, but don’t let this stop you. The slightest change for the better in company culture, policy, or processes can significantly benefit your team and customers, especially in the long run.

In this guide, I’ll share everything I’ve learned about creating responsive email templates that look great and perform well on any device. I’ll show you:

1. How to build a responsive html email template, even if you’re not a coding expert. 
2. Some of the best sources to find free responsive HTML email templates. 

What is responsive email design?

Responsive email design is an approach to crafting HTML emails that automatically adjust their layout and content to fit different screen sizes. It’s about designing a single HTML email that adapts fluidly to different email clients and desktop and mobile devices. 

This approach significantly improves readability and usability, leading to higher open rates and better overall email marketing performance.

Different layout approaches for responsive email design

There are several different layout approaches, each with its own pros and cons. Here’s a breakdown:

Fixed (static) layout

Don’t use this method; it’s here only for educational purposes (to understand what not to do 😀) 

So, don’t set a fixed width (e.g., 600 pixels) for your email. It will stay that way, regardless of the screen size. This leads to a terrible mobile email experience, forcing users to pinch and zoom to read the content. 

.container {

  width: 600px; /* Fixed width */

  margin: 0 auto; /* Center the container */

  ...

}

Fluid (liquid) layout

This is a step up from the fixed layout method. Instead of using pixels, you use percentages for widths. This means the email content expands or contracts to fill the available space. 

The method could work for very simple, text-heavy email newsletters where precise layout control isn’t critical. The downside is that on very large screens, text lines can become too long for comfortable reading, and on smaller screens, things can get cramped.

.container {

  width: 90%;        /* Fluid width - takes up 90% of available space */

  max-width: 600px;   /* Limits maximum width */

  margin: 0 auto;     /* Centers the container */

}

Quick note on the code: The container will resize itself based on the width of its parent element (usually the email client’s viewing area).  It will occupy 90% of the available width, up to a maximum of 600px.

Hybrid (semi-fluid) layout

The method combines fixed and fluid elements. For example, you might have a fixed-width container with fluid columns inside. It’s useful when you need to keep certain elements (like a logo in the email header) at a specific size while allowing other parts of the email layout to be more flexible.

.container {

  width: 95%;        /* Fluid width - adapts to viewport */

  max-width: 960px;   /* But doesn't get too wide */

  margin: 0 auto;     /* Centers the container */

}

.sidebar {

  width: 200px; /* Fixed-width sidebar */

  float: left;  /* Place sidebar on the left */

}

.main-content {

  width: calc(100% - 200px); /* Remaining width, fluid */

  float: left;  /* Place content next to sidebar */

}

img {

    max-width: 100%;

    height: auto;

}

/* Media Query for smaller screens */

@media (max-width: 768px) {

  .sidebar, .main-content {

    width: 100%; /* Stack columns on small screens */

    float: none;  /* Remove floats */

  }

}

The overall layout is somewhat fluid, but you have strict control over the width of specific elements (like the sidebar). The layout adapts but in a more controlled and structured way than a purely liquid layout.

Adaptive layout

The approach uses CSS media queries to apply completely different style sheets based on device characteristics (like screen size or orientation). You’re essentially designing separate layouts for specific breakpoints. 

The upside is that you get more control over the layout on different device types (e.g., one layout for all phones, another for all tablets, and a third for all desktops). It’s more work but with a lot of control. 

.container {

  width: 95%;

  max-width: 1200px; /* Maximum width for the largest layout */

  margin: 0 auto;

}

.column {

  /* Default styles (for the largest screen size) */

  width: 33.33%; /* Three columns */

  float: left;

  padding: 10px;

  box-sizing: border-box; /* Include padding in the width */

}

img{

    max-width: 100%;

    height: auto;

}

/* Medium screen layout (e.g., tablets) */

@media (max-width: 1024px) {

  .column {

    width: 50%; /* Two columns */

  }

}

/* Small screen layout (e.g., phones) */

@media (max-width: 768px) {

  .column {

    width: 100%; /* One column */

    float: none;  /* Remove floats */

  }

}

Note: Media queries are widely supported, but there are still specific email client quirks. For instance, Gmail could ignore whole blocks if one curly bracket is missing, so be mindful of those. 

Responsive layout

This is the recommended method. It uses CSS media queries within a single stylesheet to adjust the layout and styling. It combines fluid elements (percentages) with breakpoints to reflow content. 

For example, a two-column layout on a desktop might become a single-column layout on a mobile device. This provides the best user experience across the widest range of devices.

.container {

  width: 90%;         /* Fluid container */

  max-width: 1200px;  /* But with a maximum width */

  margin: 0 auto;

}

.row {

  display: flex;      /* Use Flexbox for flexible row layout */

  flex-wrap: wrap;    /* Allow items to wrap to the next line */

}

.col {

  flex: 1;          /* Each column takes equal space by default */

  padding: 10px;

  box-sizing: border-box; /* Include padding in width calculation */

}

img {

  max-width: 100%;  /* Fluid images */

  height: auto;

}

/* Adjustments for different widths. */

@media (max-width: 1024px) {

  .col {

    flex: 0 0 50%;  /* Two columns on medium screens */

  }

}

@media (max-width: 768px) {

  .col {

    flex: 0 0 100%; /* One column on small screens */

  }

}

In a way, responsive design is a continuous adaptation, and elements resize fluidly and proportionally as the screen size changes.

How to choose the best layout for your design

Here are the design tips based on the type of email you’re sending:

• For text-heavy emails: Fluid or responsive layouts are your best bet. Prioritize readability. Use max-width in your CSS styles to prevent overly long lines on large screens. 
• For newsletters: A responsive layout is highly recommended. It allows for flexible column layouts and easy content rearrangement on different devices.
• For promotional emails with interactive content: A Responsive layout is essential. It ensures that interactive elements (buttons, carousels, forms) display and function correctly on all devices. 

How to build a responsive email template (no-code option)

Using email bulders is okay, regardless of your skill level. They’re fast, generally reliable, and give you control over design consistency. 

Check out my favorites:

Tabular

Tabular HTML email builder lets you easily create responsive emails for any platform using a drag-and-drop interface without coding.

Tabular provides control over mobile and language-specific designs and supports personalization. 

Here is why Tabular is a great choice:

• Tabular’s algorithm is designed to ensure email templates look good in over 50 email clients, including older versions of Outlook.
• It allows you to create different versions of your emails, specifically for mobile viewers or viewers from other countries, with different visuals, text, and more.
• Tabular offers advanced personalization with variables and conditional content that will allow you to showcase different products or further personalize your emails.

Mailtrap Email Builder

Mailtrap Email Delivery Platform is engineered for high deliverability with growth-focused features, and industry best analytics. Of course, it includes a drag-and-drop editor and an HTML email template builder for creating responsive emails.

You can also benefit from features like AI assistance to refine your copies, a free image library, and personalization options. The platform supports both desktop and mobile editing with device previews.

Here is why Mailtrap is a great choice:

• It has a drag-and-drop builder and an HTML editor, giving you more flexibility  
• It provides a library of free images and a simple photo editor to enhance your designs.
• It offers email personalization and campaign scheduling.
• It features an AI email copy assistant to refine your subject lines and email body.

How to develop a responsive email template

I’ll walk you through some common layout techniques and provide basic HTML code examples. Remember that email clients are notoriously finicky, so we’ll rely heavily on tables for layout (yes, tables!) and inline CSS.

One-column layout

This is the simplest and often the most effective layout, especially for mobile users. It guarantees that your content is easy to read and scroll through on small screens.

• Full-width, vertically stacked content: All content elements (images, text, buttons) are arranged vertically, one after another, and typically span the full width of the email’s main container. A max-width (e.g., 600px) on the container prevents excessive width on large screens.
• Table-based structure: The layout is built using HTML tables (<table>, <tr>, <td>) to ensure maximum compatibility across various email clients, particularly older versions of Outlook that have limited CSS support.
• Mobile-first responsiveness: While inherently responsive due to its single-column nature, the design should consider smaller screens (e.g., max-width: 100% on images and potentially a media query to adjust padding/text sizes).

Two-columns layout

A two-column layout in email design arranges content into two side-by-side sections within the email body, similar to columns in a newspaper or magazine.

• Nested table structure: A two-column layout in email is typically achieved using nested HTML tables. The outer table provides the overall structure (and often a max-width), while an inner table with two table data cells (<td>) side-by-side within a single row (<tr>) creates the two columns. Further nesting within each <td> is common for content organization.

<table role="presentation" width="100%" ...>

  <tr>

    <td align="center">

      <table role="presentation" class="container" ...>

        <tr>

          <td class="column-1">

            </td>

          <td class="column-2">

            </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

• Defined column widths (fixed, percentage, or hybrid): Large images and even long text can cause layouts to break; defined widths prevent that and maintain the intended structure across different email clients and screen sizes. Each column (<td>) must have a defined width. There are three main approaches:
  • Fixed widths (pixels): Provides precise control but is not responsive.
  • Percentage widths: Creates fluid columns that adapt to the container’s width, but maintains equal proportions.
  • Hybrid (fixed and fluid): One column (often a sidebar) has a fixed width, while the other (main content) uses calc() or other techniques to fill the remaining space. This is the most common approach for balancing control and responsiveness.

A two-column layout must be made responsive using CSS media queries. Without this, the layout will not adapt to smaller screens (mobile devices), resulting in a poor user experience.

Responsive web design (RWD) elements for email templates

Here are the core elements that make responsive email work:

Inline CSS

Most email clients strip out <style> tags and external stylesheets. It means you must use inline CSS to style your email.

Instead of this:

<style>

  p {

    color: blue;

  }

</style>

<p>This is a paragraph.</p>

You need to do this:

<p style="color: blue;">This is a paragraph.</p>

You can use CSS inliners (online tools) to automate this process when working with complex responsive templates.

Media queries

As you can guess by now, media queries are the heart of responsive design. They allow you to apply different styles based on device characteristics. Here’s a basic example:

@media screen and (max-width: 480px) {

  /* Styles for screens 480px and smaller */

  body {

    font-size: 14px;

  }

  .header {

      font-size: 24px;

  }

  .cta-button {

    width: 100%; /* Make the button full-width */

  }

}

This media query targets screens with a max-width of 480 pixels. Inside, we’re adjusting the font size of the body text and making CTA buttons full-width. You should use media queries to do the following:

• Change the font-size
• Show/hide elements
• Switch layouts (e.g., stack a two-column layout into a single-column layout)
• Resize images

Table-based layouts

Sadly, tables are still the most reliable way to create consistent layouts in email. While they’re considered outdated for web design standards, email clients (especially older versions of Outlook) haven’t caught up.

Here’s a basic table structure for a two-column layout that stacks on mobile:

<!doctype html>

<html lang="en">

    <body>

        <table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td align="center">

      <table width="600" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px;">

        <tr>

          <td width="300" style="padding: 10px;" class="column">

            </td>

          <td width="300" style="padding: 10px;" class="column">

            </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

    </body>

</html>

Use cellpadding and cellspacing attributes on your <table> tags to control spacing.

<table width="600" border="0" cellspacing="0" cellpadding="10">

  ...

</table>

Viewport meta tag

This tag goes in the <head> of your HTML email and controls how the email scales on mobile devices. It’s absolutely essential for responsive design.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width=device-width tells the browser to set the width of the viewport to the width of the device’s screen. The initial-scale=1.0 sets the initial zoom level to 100%.

Images optimization in responsive email design

Images can cause problems if not optimized correctly. To add images to your emails, you’ll need to host them online (using a service like a CDN or image hosting platform) and reference their URL in your HTML code.

Image formats

Use JPEG for photographs, PNG for graphics with transparency, and GIF for animated images (use sparingly, as large GIFs can impact email deliverability).

Image sizing and compression

Large image files slow down loading times and can cause your email to end up in the spam folder. Always compress your images before adding them to your email.

Use inline styles such as max-width: 100%; height: auto; to make your image fluid.

<img src="my-image.jpg" alt="My Image" style="max-width: 100%; height: auto; display: block;">

The display: block; is important to prevent unwanted gaps below images in some email clients.

Alt text

Always use descriptive alt text for your images.

<img src="logo.png" alt="Company Logo">

Screen readers use alt text, and it also displays when images are blocked (which happens more often than you might think).

Responsive email design in Outlook

Outlook, particularly older desktop versions (2007-2019), is the bane of many email designers’ existence. It uses the Microsoft Word rendering engine, which has very limited support for modern CSS.

Downsides of Outlook’s rendering process

Outlook often ignores max-width, adds extra padding, and has trouble with background image rendering.

Workarounds and fixes

• Conditional comments: Use these to target specific versions of Outlook:
  
• Ghost tables: These are Outlook-specific tables hidden from other email clients. They force Outlook to behave. I recommend using these – they’re somewhat trickier to code but more reliable.
  

There are many other specific Outlook hacks, like using mso-hide: all; to hide elements. The best resource I’ve found for dealing with Outlook is the “Fixing Email Bugs” series on Litmus’s blog.

Email client support table for responsive HTML elements

Here’s a simplified table summarizing support for key elements:

This is a simplified view. Support can vary depending on the specific version of the email client and the operating system. Always test!

Test responsive email templates

Never, ever send an email campaign without thoroughly testing it first. 

Methods for testing

Here are the testing methods and you can actually use a combination of them:

• Manual testing: This is the most basic test, and it only works for some isolated use cases – like learning template testing.  You basically send emails to yourself and check them on as many different devices and email clients as you can. And you have to pay close attention to:
  • Layout: Does everything reflow correctly on smaller screens? Are columns stacking as expected?
  • Images: Are images displaying correctly? Are they scaled appropriately? Is the alt text showing when images are blocked?
  • Links: Do all links work? Do they go to the correct destinations?
  • Interactive Elements: Do buttons, forms, and other interactive elements function properly?
  • Text Rendering: Is the text legible? Are there any weird line breaks or font issues? Check for appropriate text-decoration.
  • Check if email is cut short in Gmail.

• Email Testing Services are invaluable for professional email marketers. They allow you to preview your emails across a huge range of email clients and devices (far more than you could possibly own yourself). They provide screenshots, automated testing, and even spam filter checks. These services are not free, but they’re worth the investment if you send a lot of email campaigns. They help identify potential rendering issues before you hit send, saving you from embarrassing mistakes and ensuring your email newsletter looks perfect for everyone.

• Testing checklist: Create a testing checklist to make sure you don’t miss anything, here is an example:
  • Check that your email header renders properly.
  • Is the layout correct on all devices?
  • Do images display correctly?
  • Are alt tags present and descriptive?
  • Do all links work?
  • Do interactive elements function correctly?
  • Is the text legible?
  • Is the subject line compelling?
  • Is the preheader text effective?
  • Is there a clear call to action?
  • Is there an easy-to-find unsubscribe link?
  • Does the email pass spam filter checks?
  • Is doctype defined correctly?

Responsive email design best practices

Here’s a quick overview of everything we previously discussed:

• Mobile-first approach: Start by designing for the smallest screen first. This forces you to prioritize content and ensures the mobile email experience is excellent. Then, you can progressively enhance the design for larger screens using CSS media queries. This approach is much easier than trying to cram a desktop-optimized design into a mobile phone.
• Prioritize content: Your email content should be clear, concise, and easy to scan. Get to the point quickly. Use short paragraphs, headings, subheadings, and bullet points to break up large blocks of text.
• Use a single-column layout (when possible): A single-column layout is the simplest and most reliable way to create a mobile-friendly email. It works well across all email clients and avoids many layout headaches associated with multi-column designs. If you need to use multiple columns, make absolutely sure they stack correctly on small screens.
• Optimize font sizes: Use font sizes that are large enough to be easily readable on mobile devices. Typically, the body text should be 14px at the low end ,and it’s okay to go larger (16px or even 18px). 
• Use large, clickable buttons: Make your call-to-action button (CTA) large, prominent, and easy to tap on a touchscreen. Don’t use tiny text links for your primary call to action. Use a contrasting background-color for your CTA buttons to make them stand out.
• Avoid large blocks of text: As mentioned earlier, break up your text. No one wants to read a wall of text on their phone (or even on their desktop).
• Preheader text: Use preheader text (the short summary text that appears after the subject line in many email clients) to complement the subject line and lead recipients into the email body. 
• Keep it Simple: Avoid overly complex designs that might break in some email clients. Simple, clean designs tend to perform better and are less likely to cause rendering issues.
• Remember design size: Desktop: 600px – 800px width. Tablets: 640px – 768px width. Mobile: 320px – 480px width
• Accessibility: It’s not just about how your email looks, but also about how accessible it is to everyone, including people with disabilities.
• Automation: Explore features that allow for dynamic content. Use an email service that supports it.

Common pitfalls

Here are some common mistakes you should avoid

• Not testing thoroughly: This is the biggest one. Test, test, test!
• Using too many images: Images are great, but don’t overdo it. Large image files can slow down loading times and trigger spam filters.
• Using JavaScript: Most email clients block JavaScript for security reasons. Don’t use it at all.
• Ignoring alt text: Always provide descriptive alt text for your images.
• Not optimizing for Outlook: Outlook is a pain, but you can’t ignore it. Use the workarounds I mentioned earlier.
• Using absolute positioning: Avoid absolute positioning in HTML email. It can break layouts in unpredictable ways.
• Forgetting the viewport meta tag: This tag is essential for responsive design.
• Overcomplicating the code: Keep your HTML code as clean and simple as possible. This will make it easier to troubleshoot and maintain.
• Not testing the functionality of interactive elements.

Wrapping Up

Follow the best practices and techniques outlined in this guide. They’ll help you create email campaigns that look great, engage your subscribers, and drive results on any device. 

But remember that responsive template design is a continuous learning process. Email client rendering keeps evolving, so stay up-to-date with the latest design standards and testing tools. 

What are spam traps?

Spam traps are email addresses designed to catch spammers and senders who don’t follow proper email collection practices. They are often placed by email providers and anti-spam organizations to detect senders that use outdated, scraped, or purchased lists. 

When a sender emails a spam trap, mailbox providers flag them as untrustworthy. This damages their sender reputation, causing more of their emails to land in recipients’ spam folders or even get blocked entirely.

Spam traps vs disposable mailboxes

Disposable mailboxes are temporary email addresses created by real users — often to sign up for services without sharing their regular email address. These addresses work like normal emails but are short-lived and eventually expire. 

Imagine you want to download a PDF guide but don’t want to receive marketing emails afterward. In this case, you might use a disposable mailbox to get the download link without sharing your real contact information.

Among the most famous email services that offer disposable emails are Temp Mail, Guerrilla Mail, 10 Minute Mail, and Mailinator. 

Spam traps, on the other hand, aren’t used by real people and exist solely to catch irresponsible senders that send spam emails. 

While emails sent to disposable mailboxes may go unread, hitting a spam trap has far worse consequences. It can damage your sender reputation, reduce email deliverability and inbox placement, and lead to blacklisting.

Types of spam traps with examples

There are three types of spam traps: purposefully created traps, reused old addresses, and unintentional traps caused by typos. Let’s take a closer look at each.

Spam traps created on purpose (pristine)

Pristine traps are email addresses specifically designed to detect and block spammers and unsolicited senders. They are set up by email providers, anti-spam organizations, and security firms and have never been used for personal or business communication.

Since real users didn’t create these addresses and they never opted into any mailing lists, any emails sent to them indicate poor list hygiene on the sender’s part.

It’s impossible to distinguish a pristine spam trap from a regular email address. It can look like any personal or business email, such as:

• martha.steward@gmail.com
• barbra.streisand@yahoo.com
• mahatma_gandhi@outlook.com 

Repurposed addresses

Repurposed or recycled spam traps are old email addresses that once belonged to real users but were later taken over by email providers or anti-spam organizations. These addresses remain inactive for a long time — typically 6 months to a few years — before being reactivated. However, they are not reactivated for personal use; instead, they are used to monitor senders who fail to clean their contact lists.

Since legitimate senders should regularly remove inactive contacts, emailing repurposed spam trap email addresses shows that a sender isn’t properly updating their email list.

A repurposed spam trap is also difficult to detect. It may include an old organization name or domain but this is not always the case:

• james.miller@hotmail.com
• susan.work@att.net
• andrea.smith@altavista.com 

Email with typos

People can unintentionally create spam traps by making typos in email addresses. The most common mistakes happen in the domain name — for example, instead of entering “harry.potter@gmail.com,” they type “harry.potter@gmial.com” or “harry.potter@gnail.com.”

Email providers and anti-spam organizations track messages sent to these misspelled addresses to identify senders who don’t validate contacts or keep incorrect emails on their lists for too long.

How to identify and remove spam traps

As I mentioned earlier, you cannot detect spam traps just by looking at one. But what about typo spam traps, you might ask? Well, yes, if you’re working with a small list of 50 contacts, you could manually catch obvious mistakes. However, for larger lists, that’s not practical.

Here are some more reliable and efficient methods to identify spam traps.

1. Run your list through email validation services like ZeroBounce, NeverBounce, or Validity (formerly BriteVerify) to detect inactive, invalid, or suspicious addresses.
2. Analyze engagement metrics after each campaign. Spam traps don’t open, click, or reply. If an address has zero engagement over 3 to 5 consecutive campaigns (typically within 30-90 days), it could be a trap.
3. Check for frequent hard bounces. If certain addresses consistently bounce, they are very likely to be repurposed spam traps.
4. Take a close look at role-based addresses. Emails like info@microsoft.com or support@amazon.com are often risky because multiple people share them and may not engage with emails. While not all role-based emails are spam traps, some can be converted into traps if abandoned. If you have role-based addresses on your list, check their engagement, and verify them with an email checker before sending marketing messages.
5. Know your list acquisition sources. If some emails came from purchased lists, outdated databases, or scraping, they are very likely to contain email spam traps. If you’ve acquired your list this way (which I highly recommend you don’t), go back to step 1 in this section.

Once you’ve identified spam traps, remove them from your list without hesitation. These emails will not bring you any value but will only have a negative impact on future email campaign performance, including reduced engagement, higher bounce rates, and potential blocks by email providers.

How do spam traps get on your email addresses list?

Since spam traps look like regular email addresses, you may not realize you’ve collected one until your delivery rates start to decline. Here are the most common ways spam traps can sneak into your list:

• Purchasing email lists. Bought contact lists often contain outdated or fabricated addresses, including spam traps placed by anti-spam organizations.
• Scraping emails from websites. Anti-spam organizations intentionally place spam traps on public websites, knowing that some senders will collect emails through scraping. If your list includes addresses gathered this way, there’s a high chance you’ve picked up a spam trap.
• Keeping old, inactive subscribers on your list. If you keep sending to long-abandoned email addresses, some may have been repurposed into spam traps over time. Since these addresses don’t bounce, they can stay on your list unnoticed.
• Not validating email addresses during sign-up. If you don’t validate user emails when people fill in signup forms, mistyped addresses can slip into your list. These typos are monitored and can be turned into spam traps.
• Adding role-based addresses to your list. Over time, abandoned role-based addresses can be repurposed as spam traps, so keep an eye on them.

Consequences of hitting spam traps

The impact of hitting a spam trap varies based on the type of trap you’ve triggered. Some traps result in minor issues, while others can lead to severe problems, potentially preventing you from sending emails altogether. Here’s what happens with each type:

• Pristine spam traps. These are the most critical spam traps. Since a real person never owned them, emailing them signals poor list acquisition practices. Hitting these fake email addresses can lead to immediate IP address blacklisting or domain blacklisting, severe email deliverability drop, and permanent damage to your sender reputation. If you want to know how to get your email out of a blocklist, read our dedicated guide. 
• Recycled traps. These traps are less severe but still harmful. They indicate poor list hygiene, as you’re emailing inactive contacts. Sending to repurposed traps repeatedly will harm your sender reputation, meaning that subscribers with legitimate emails who anticipate your messages may not get them or get them in the spam folder.
• Typo-based spam traps. While not as damaging, typo traps suggest you’re not validating emails properly. If you often send to common typos, email providers will start filtering your messages as spam. As a result, your future campaigns will have lower inbox placement and engagement rates.

Hitting spam traps will waste resources, damage your reputation, and hurt campaign results. It can even lead to legal consequences, like fines for non-compliance with email marketing regulations.

How to avoid spam traps

It’s always better to prevent an issue than to fix it later. Moreover, the practices I’m about to share are part of email best practices. By following them, you’ll not only avoid spam traps but also improve the effectiveness of your marketing efforts.

• Build your contact list organically. Focus on organic list building through valuable content, engaging events, great deals, and lead magnets. You don’t need a large list to succeed—keeping it small but engaged is better. Subscribers who are genuinely interested in your messages are much more likely to convert.
• Validate emails at sign-up. Use a real-time email validation tool at the sign-up stage to catch typos and invalid addresses before they make it onto your list. These tools’ functionality ensures you collect only legitimate email addresses.
• Use double opt-in. Double opt-in helps you ensure that new subscribers genuinely want to receive your emails when they confirm their subscription via a follow-up email. This is the easiest email verification process to ensure email addresses you’re collecting are legitimate and not spam traps.
• Clean email lists often. Responsible list management includes removing inactive subscribers, bounced emails, invalid email addresses, and anyone who hasn’t engaged with your emails in the past 3-6 months (or after 3-5 email marketing campaigns). For inactive subscribers, you can run re-engagement campaigns before removing them. However, the longer you keep inactive outdated emails, the higher the chance they’ll turn into spam traps.
• Monitor your engagement metrics. Low open, click-through, and conversion rates signal that something is wrong. If certain email addresses consistently show no interaction, they could be spam traps. And even if they aren’t, these addresses waste your budget and negatively impact your campaign results. 
• Avoid role-based emails. Only keep them on your list if you’ve confirmed they are actively monitored.

Unfortunately, there are some other reasons why your emails can land in a junk folder. For example your email content, subject line, or its design can trigger a spam filter. You can use Mailtrap’s Spam Checker to quickly assess your emails before email sending and improve their chances of landing in the inbox.

Also, you can learn about Gmail’s spam filter and Outlook’s spam filter peculiarities to understand how your emails are handled on those platforms.

Wrapping up

By implementing the practices outlined above, you can effectively steer clear of spam traps and the negative consequences they bring. For additional tips on optimizing your email campaigns, don’t miss our next blog post:

• How to Avoid Emails Going to Spam? 
• SpamAssassin Score Explained
• How to Check and Improve Email Sender Reputation
• Email Domain Reputation: All You Need to Know
• Email Deliverability [Comprehensive Guide] 
• What Is Email Feedback Loop and Why Is It Important? 

With around 50 new gems released daily, it is common to use trending libraries for managing everyday tasks. You probably use Devise for authentication, Cancan for authorization, Kaminari for pagination, or run tests with Rspec. 

From time to time, it is efficient to research new solutions. For this purpose, we have selected 12 gems in several important categories that you should try in 2021. All of them have been released within the last year or two, are regularly updated, and have already gained the trust of Ruby on Rails developers. 

We’ve specified the release date and a number of downloads (within a given period of time) according to the Ruby Toolbox. 

Active Record plugins

Pagy

Pagy is an agnostic library for pagination. It is written in plain Ruby and is compatible with any framework and collection type. 

It is a modern solution that significantly outperforms popular packages. It is 40 times faster and 36 times lighter than Kaminari!

In addition, Pagy is well explained with plenty of guides. 

Date of first release: February 12, 2018. It has gained 1 million+ downloads within two years. 

Code quality 

Undercover

Its creators state that Undercover is “Like RuboCop but for code coverage.” It detects recently changed code blocks that have to be covered with tests. Undercover can be used both locally and in an automated build. 

Undercover is not super popular, though it is quite a helpful library, especially for big projects with legacy code. 

Date of first release: May 10, 2018. For the first two years, it had just 68k+ downloads.

Developer tools

Rexe

The command line executor is designed to simplify your Ruby command line by removing low-level configuration parsing and formatting.

Rexe helps efficiently merge shell scripting and Ruby on the same command line. 

It is a small script with a number of applications, some of which are pretty funny. For example, you can use it as a simple calculator or a currency converter 🙂 

Date of first release: February 3, 2019. For the first 1.5 years, Rexe was downloaded 8k times. 

Optimist

Optimist is a command-line option parser that does the parsing and then provides you with a hash table of options. It helps you to save time and write less code. It also automatically generates help pages. On their wiki, you will find a few examples of the commands use and short options generation. 

In the end, we like the name! And we are not alone here – the gem is very popular. 

Date of first release: August 24, 2018. For the first 1.5 years, Optimist gained 8 milion+ downloads.

Quarantine

Quarantine manages flaky tests by detecting and disabling them. It also helps automate testing workflows. Quarantine is compatible with the Rspec framework and Buildkite CI pipeline. 

You can also set up a Jira workflow to get automatically created tickets in Jira for flaky tests. Once the ticket is closed, the test is removed from quarantine. 

Date of first release: April 22, 2019. Within a year, Quarantine was downloaded 175k+ times. 

Graphics

Apexcharts

Apexcharts is a library for creating amazing web charts in your Ruby app. It’s just beautiful: you will find numerous examples of completely different types of charts. 

To build the data for a chart, it is recommended to use groupdate gem. 

Date of first release: June 13, 2019. In a year, this gem got 14k downloads. 

Encryption

Lockbox

The Lockbox gem is a modern and user-friendly way to encrypt your data. 

It is secure, simple, and compatible with other libraries. Another argument for trying it is that it is easy to migrate to Lockbox from another library. 

Lockbox works perfectly with Devise, which is the most popular authentication framework for Rails. 

We have recently posted the experience of our friends from Planet Argon with setting up emails to reset a password with Devise (and Mailtrap, of course!)  – check this blog post for more info.

Test Your Emails Now

Date of first release: January 2, 2019. Within 1.5 years, Lockbox was downloaded 127k times. 

Machine learning

TensorStream

Do you use machine learning algorithms? Then consider the TensorFlow implementation for Ruby. It is not new, but we found it worth sharing here.

TensorStream is an open-source framework with no TensorFlow dependencies. With its programming style close to TensorFlow and Ruby syntax, you can build and run machine learning models in GPUs and CPUs. It comes with a pure Ruby and OpenCL opcode evaluator. An OpenCL backend is provided in a separate gem.

Date of first release: May 11, 2018, and 12k+ downloads over 2 years. 

Monitoring

Yabeda

This Ruby gem is a framework for setting up monitoring in your Ruby app. Yabeda collects statistics on your app performance and allows you to export metrics to several monitoring systems.

In addition, there are many plugins for Yabeda to configure monitoring with ease.

Date of first release: October 17, 2018. Over roughly 1.5 years it was downloaded 128k+ times.

Deployment

Tomo

Tomo is an SSH-based CLI tool for deploying Ruby apps. Its distinguishing feature is its independence from Rake, unlike the majority of Ruby-based deployment tools. Tomo is presented as an alternative to Capistrano, Shipit, and Mina. 

It has no required gems dependencies, but batteries are included, as well as opinionated defaults and simple DSL.

Date of first release: June 17, 2019. For less than a year, Tomo was downloaded 11k+ times. 

Testing

FakerMaker

FakerMaker is a simple factory builder that creates disposable objects for testing. It is created to supplement the Thoughtbot library for cases when you test an API, don’t use Rails, or don’t have model classes. 

It is recommended to use FakerMaker with a Faker gem (no dependency, though).

Date of first release: March 5, 2019. In slightly more than a year, this gem got 19k+ downloads. 

Web apps, services, and interaction

Cache Crispies

Cache Crispies is a gem for JSON serialization that has a built-in caching. It doesn’t limit you with the format of JSON responses. It’s fast and flexible and has a simple DSL. 

Date of  first release: July 12, 2019. 50k+ downloads were reached in less than a year. 

Wrapping up

We have gathered 12 Ruby gems that you probably haven’t discovered yet. Hopefully, they will make your Ruby coding smoother and more efficient. Let us know what you think about this list by share it and your experience on social media!

And Mailtrap is always here for safe and efficient testing of any kind of email you need to send from your Ruby app. In fact, Mailtrap is technology agnostic – that’s why there is no Ruby gem for it. You can easily configure Mailtrap as a regular SMTP server or integrate it with your app via API and enjoy email testing, previewing, and debugging in a development or staging environment.