Ensuring email compatibility with different email clients is crucial for effective [**email campaigns**](https://altcraft.com/blog/how-to-reach-customers-via-email-campaign). Each email client—whether Gmail, Outlook, or Yahoo—uses its own rendering engine, which affects how emails are displayed. Incorrectly applied styles, CSS support limitations, or specific rendering bugs can result in emails looking different from what was intended.

This article covers tools for testing email templates, technical details of popular email clients, and best practices for email adaptability across desktop and mobile devices. We'll also discuss AMP email rendering and challenges related to dark mode.

## Tools

To minimize the risk of errors in email campaigns, it's essential to test your template across multiple email clients. One of the services for this purpose is **Email on Acid**, which provides comprehensive template testing, allowing you to see how an email appears in different email clients and on various devices.

<Img
img="/api/uploads/email_templates_compatibility_email_on_acid_f79305668f.jpg"
alt="Email testing: Email on Acid"
src="Email on Acid"
/>

An alternative option is **Email Testing** by **Litmus**, which also offers detailed rendering reports for email templates.

To prevent issues at the coding stage, **Caniemail.com** is a useful analytical tool that provides information on the support of different HTML and CSS properties in email clients. It helps quickly determine which features can be used in a template and which should be avoided.

<Img
img="/api/uploads/email_templates_compatibility_can_i_email_232ec10896.png"
alt="Can I email service"
src="Caniemail: email analytics tool"
/>

Using these services helps detect and fix errors before sending emails to subscribers.

## Types of Email Clients and Their Technical Features

Different email clients have unique characteristics that must be considered when designing templates. This article covers the key email clients, including Gmail and Outlook. 

### Gmail

Although Gmail is one of the most popular email clients, its rendering quirks often cause display issues for emails:

- In non-responsive layouts on iOS, you may encounter **block width collapsing**, where email elements shrink to their minimum possible size. This can cause logos and icons to get squeezed against the text, while side margins disappear. To fix this, include at least one image with a width matching the overall email width.

- Similar issues can occur with **block height in emails.** If left unaddressed, your email may become unreadable for iOS users. To prevent this, add a content-separating ````<div>```` with a specified minimum height.

- Gmail limits support for several modern CSS properties and media queries. As a result, **styles for background images, gradients, or specific margins may not apply correctly.**

<Img
img="/api/uploads/email_template_compatibility_email_display_0290c42c10.jpg"
alt="Email display"
src="Text block squeezed against the email border"
/>

### Outlook

Outlook is one of the most challenging email clients for coding email templates. However, since it is widely used in corporate environments, ensuring proper email display in Outlook is essential. Common issues include:

- **Unexpected horizontal or vertical lines** caused by the way Outlook processes font sizes and spacing. Adjusting font sizes and/or line height can help resolve this issue.

- A bug where **block borders disappear in some Outlook versions**, which can prevent proper email rendering. A workaround is to wrap problematic elements in an additional table with correctly defined styles.

- Outlook does not support the ````background-image```` property, so VML markup is often used to create backgrounds. However, VML fragments cannot be nested within each other. Layering background images requires alternative approaches.

<Img
img="/api/uploads/email_template_compatibility_display_46cc7d2b7b.jpg"
alt="Email display in Outlook"
src="Unwanted border line in the email"
/>

## Dark Mode

Many users have dark mode enabled at the system level, making proper email display in this mode essential. Dark mode behaves differently across various email clients.

One of the most well-known issues in Gmail is color inversion in dark mode on iOS. The email client inverts the "lightness" of colors regardless of their actual balance, meaning a dark email can unexpectedly turn light. Fixing these issues manually can be time-consuming for developers.

<Img
img="/api/uploads/email_temlate_compatibility_dark_mode_cb2d8f50d7.png"
alt="Dark mode display"
/>

It's important to remember that **background color inversion** and **border color inversion** work differently. For example, a dark-colored border that stands out in light mode may become barely visible in dark mode, and vice versa:

<Img
img="/api/uploads/email_template_compatibility_light_mode_dark_mode_66a6c4db95.jpg"
alt="How dark mode works"
/>

When designing a template in [**Pixcraft Editor**](https://pixcraft.io/builder), you can switch the color mode in preview mode with a single click to check if your email displays correctly:

<Img
img="/api/uploads/email_template_builder_f8f118d8e5.jpg"
alt="Email builder"
/>

For more details on how dark mode works, check out [**our article**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it).

## AMP Support

[**AMP emails**](https://altcraft.com/blog/amp-emails-what-they-are-their-types-why-required) make email campaigns more interactive and dynamic by embedding functional elements directly into the email body. However, this technology is not supported by all email clients. AMP content is displayed by **Gmail**, **Yahoo**, **Mail.ru**, and **AOL**.

There are cases where an AMP email may not be displayed for the recipient. Possible reasons include:

- AMP code validation errors.

- The sender is not whitelisted by the email provider. Instructions on how to get approval are available in [**this article**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy).

- AMP content is only available for one month after the email is received, so the interactive elements may not be visible upon later review.

- The recipient has disabled dynamic content in their email settings.

For situations where AMP elements are not displayed, it's essential to provide fallback HTML components in the email template.

## JSON-LD Support 

JSON-LD support varies significantly by email client and provider. 

For example, Gmail supports **[a wide range of data types**](https://developers.google.com/gmail/markup/highlights), including bus and train tickets, hotel reservations, car rentals, package deliveries, invoices, restaurant bookings, and event tickets:

<Img
img="/api/uploads/email_template_compatibility_gmail_c4ea50a273.png"
alt="Email display in Gmail"
/>

JSON-LD is also used in Gmail for quick actions (such as following a link or confirming an action without opening the email) and annotations (promo cards and discount information that appear before opening the email).

## Conclusion

The modern [**email marketing**](https://altcraft.com/glossary/email-marketing-how-to-set-up-and-use-it) landscape sets high standards for the quality and adaptability of email campaigns. As seen in the examples, even minor coding errors can lead to incorrect email rendering across different email clients and devices. However, by using advanced testing tools and considering the specifics of various email clients, most issues can be identified and resolved in advance.

By addressing technical nuances and conducting thorough testing, email templates can display flawlessly for subscribers, regardless of their email client or device settings. [**Pixcraft’s products**](https://pixcraft.io/) — including the framework, block editor, and Figma plugin — can help create responsive emails with interactive content.

Let's explore tools for testing email templates, the specifics of email clients, and how emails adapt to different devices.

small_email-template-compatibility.jpg

thumbnail_email-template-compatibility.jpg

email-template-compatibility.jpg

Email Template Compatibility Testing: How to Avoid Errors Across Devices and Email Clients

Picture this: you open an email, and instead of just text or images, you find a classic game of *Snake* that you can play right there in the message. That’s exactly the kind of experiment we decided to try—to breathe new life into our emails and surprise our subscribers.

In this article, we’ll walk you through how we created an interactive AMP email with a game for [**Altcraft’s**](https://altcraft.com/) New Year newsletter, the challenges we encountered along the way, and the results we achieved. If you’re curious about how to add interactivity to your email campaigns and captivate your audience, read on.

## The Idea

2025 is the Year of the Snake in the Eastern zodiac, so when we began brainstorming concepts for an interactive [**AMP email**](https://pixcraft.io/blog/what-amp-emails-are-and-how-they-are-changing-email-marketing), the idea of a *Snake* game felt like a natural fit.

We started with the classic gameplay mechanics: the snake moves forward continuously, and the player changes its direction to avoid crashing into the walls or its own tail. The goal is simple—collect the blinking dots to grow the snake longer, one square at a time.

<Img
img="/api/uploads/amp_email_snake_58366f1277.jpg"
alt="Snake’s mechanics"
/>

However, AMP emails come with certain limitations: the only way to automatically change the display is by using a carousel with autoplay. This would have added unnecessary scrolling animations, making the game less user-friendly.

As a result, we reimagined the concept and decided to tie the snake’s movement to user clicks. Now, the player’s goal is to guide the snake through a maze, find a key, and reach the exit.

<Img
img="/api/uploads/amp_email_design_24fe8960ca.jpg"
alt="Snake’s maze in the AMP email"
/>

You can try the game [**here**](https://cases.pixcraft.io/altcraft/2025_en/). 

## The Development Process

### Gameplay

When creating a game for an AMP email, it’s crucial to consider how users will play on different devices: on a computer, they’ll use a mouse, while on a smartphone, they’ll rely on touch controls. These two scenarios are quite different and come with their own constraints. For example, on mobile devices, buttons need to be large enough to tap easily with a finger, but they also shouldn’t take up too much space, so the game field can fit on the screen as well.

After several experiments, we settled on a 10x10 grid. It turned out to be ideal: compact enough to prevent the game from becoming tedious due to an overly large maze, yet spacious enough to keep everything clearly visible even on a small phone screen.

The next step was designing the game map. We added dead ends, loops, and decorative elements to make the map feel more dynamic and engaging.

<Img
img="/api/uploads/amp_email_maze_design_aa9e10177f.png"
alt="AMP email development"
/>

The character controlled by the user is the snake. It consists of several cells and changes its position based on the direction of movement. The head and tail don’t “bend” as the snake moves. Because of this, we decided that the snake’s minimum length should be 4 cells.

<Img
img="/api/uploads/amp_email_snake_mechanics_604ef2eb22.png"
alt="Interactive email development"
/>

The controls are implemented using buttons: each click moves the snake one cell in the chosen direction. We also added a hint for users: “Control the snake using these buttons.”

<Img
img="/api/uploads/amp_email_controls_b28ecd019e.png"
alt="The AMP email’s controls"
/>

### Technical Details

To enable the snake to move across the entire game area, we used relative coordinates — from the left and from the top. These coordinates are defined using CSS classes, which determine the snake's position on the grid. For rendering, we created ten classes for horizontal and vertical offsets. The snake's position is set as follows:  

```html
<div [class]=”'translate-left-' + playerState.left + ' translate-top-' + playerState.top + ' head_snake_' + playerState.direction_1”></div>
```  

When the player presses a control button, the snake's head turns in the chosen direction. Since the snake consists of four segments, each segment must shift to the position of the previous one. This is implemented through state updates:  

```html
<button class="button_up" on="tap:AMP.setState({
	playerState3: {direction_1:playerState2.direction_1, direction_2:playerState2.direction_2 ,left: playerState2.left, top: playerState2.top},
	playerState2: {direction_1:playerState1.direction_1, direction_2:playerState1.direction_2 ,left: playerState1.left, top: playerState1.top},
	playerState1: {direction_1:playerState.direction_1, direction_2:playerState.direction_2 ,left: playerState.left, top: playerState.top},
	playerState: { direction_2:playerState.direction_1, direction_1: 'up', left: playerState.left, top: playerState.top - 1 }
})"></button>
```  

Note that we have two directions — direction_1 and direction_2. These are necessary to correctly bend the snake's body during turns.  

Another important aspect is ensuring the snake stays within the game area. Since it only moves forward, it is sufficient to check the coordinates of its head (playerState). The left and top coordinates must not exceed 10 to keep the snake within the game boundaries.  

To validate the coordinates, we use an array that lists all permitted points on the map:  

```javascript
coordinates: [
	{ left: 0, top: 6 },
	{ left: 1, top: 0 },
	{ left: 1, top: 1 },
	{ left: 1, top: 2 },
	{ left: 1, top: 3 },
	{ left: 1, top: 5 },
	{ left: 1, top: 6 },
	{ left: 1, top: 8 },
	...
]
```  
To check if the snake is within the allowed area, we use the filter method:  

```javascript
coordinates.filter(c => c.left == playerState.left && c.top == playerState.top).length
```  
If the result is zero, it means the snake has moved outside the game area.

## Results

The experiment with an interactive AMP email that included a game yielded excellent results, confirming that this approach works effectively.

**Engagement and Metrics:** We observed that users actively interacted with the game. Nearly 30% of those who opened the email reached the end of the game—a great metric for interactive content. Users not only opened the email but also spent more time engaging with it than they typically would. 

**Mobile Audience:** The majority of users played the game on mobile devices, and the on-screen controls proved to be user-friendly and convenient.

**Technical Outcomes:** The email displayed correctly in AMP-compatible email clients, and for those without AMP support, a fallback HTML version was seamlessly provided.

## Conclusion

The experiment demonstrated that emails with interactive elements are a genuine way to captivate an audience. Users eagerly engaged with the game, especially when it offered something unique, like playing *Snake* directly within the email. The AMP format proved to be an ideal choice for implementing this idea.

People are willing to interact with content if it is interesting and user-friendly. However, for everything to run smoothly, every detail must be considered—from compatibility with email clients to providing fallback solutions for those without AMP support.

We decided to test how gamification affects engagement and embedded "Snake" directly into an email. The article covers the experiment details and results.

small_amp-email-main.jpg

thumbnail_amp-email-main.jpg

amp-email-main.jpg

“Snake” in an Email: How We Created a Game for an AMP Newsletter with Altcraft

In 2025, email marketing will continue to evolve, with brands seeking innovative ways to ensure emails don’t just sit unread in inboxes but genuinely engage their audience.

This article explores the key trends shaping email marketing in 2025, from gamification to leveraging artificial intelligence for more effective campaigns.

## Trend #1: Emails Will Be More Interactive

<Img
img="/api/uploads/email_marketing_trends_amp_9aeaa6db06.png"
alt="AMP email example"
src="When clicked, the envelope opens. Source. reallygoodemails.com"
/>

Interactive elements in emails are no longer new, but the adoption of AMP technology is steadily growing. Features like forms, surveys, product carousels, and other dynamic components embedded directly in emails make campaigns far more engaging.

Real-time tracking of user interactions enables brands to quickly adjust content and better segment their audience. This leads to improved personalization and, ultimately, higher conversion rates.

Previously, creating AMP-powered emails required significant effort and resources. Today, tools like [**Pixcraft**](https://pixcraft.io/) have streamlined the process, making it easier to launch campaigns faster while reducing development and testing costs, all without compromising on quality.

### Tips:

**1.** **Use a fallback version for AMP emails.** Not all email clients support AMP, so it’s essential to set up an HTML version to ensure your email displays correctly for all users.

**2.** **Test in popular platforms.** Check how your emails appear in Gmail, Yahoo, and other AMP-supported services to avoid unpleasant surprises.

**3.** **Focus attention.** Make sure your email has one primary CTA that stands out. Other elements should support the flow, not distract from it. Readers should intuitively know what to do next.

**4.** **Assist users.** Include helpful hints in the email if AMP functionality requires specific actions, like clicking on a certain area.

**5.** **Try Pixcraft.** Our email builder allows you to create responsive AMP emails without needing HTML coding skills.

## Trend #2: Gamification

<Img
img="/api/uploads/email_marketing_trends_game_968ebc0de0.jpg"
alt="An email with gamification"
src="This example uses a lottery ticket mechanic with a scratch-off area. Source: reallygoodemails.com"
/>

This trend builds on the previous one but focuses specifically on the gaming aspect. Adding such elements to your emails boosts user engagement and makes the content more exciting.

### Types of Gamification in Emails:

- **Mini-games.** Simple games embedded directly in the email, such as spin-the-wheel, scratch cards, or puzzles. These can be easily implemented using AMP technology.
- **Reward systems.** Points for clicks, opening emails, or completing other actions. Users can accumulate these points and exchange them for discounts or gifts.
- **Competition elements.** Leaderboards, rankings, or personalized achievements. For instance, a user can see their current stage in a loyalty program.
- **Seasonal campaigns.** Incorporating gaming mechanics into campaigns tied to holidays or special events.

### Tips:

**1.** **Keep it simple.** Gaming elements should be straightforward and easy to understand. Overly complex scenarios may discourage users.

**2.** **Show progress.** Let users see how many steps remain to earn a reward. This motivates further action.

**3.** **Consider compatibility.** If AMP isn’t supported, provide users with an option to participate in the game on your website.

**4.** **Test the functionality.** Gamified elements can render differently across email clients. Test their performance in Gmail, Yahoo, and other popular platforms. With [**Pixcraft**](https://pixcraft.io/builder), you can test emails directly within the email builder.

**5.** **Analyze results.** Track engagement and refine mechanics to improve campaign effectiveness.

## Trend #3: Increased Use of Artificial Intelligence 

<Img
img="/api/uploads/email_marketing_trends_ai_1375a44494.png"
alt="Figma plugin for emails"
src="Pixcraft's Figma plugin includes AI functionality "
/>

In 2025, AI will play a key role in automating complex tasks and saving resources. Here are the main areas of application:

- **Optimizing send times.** Algorithms predict when a user is most likely to open an email and automatically schedule the send accordingly. For example, [**Altcraft**](https://altcraft.com/blog/ml-best-send-time) offers such a feature.
**Dynamic segmentation.** AI replaces manual segmentation by analyzing data to create targeted groups. For instance, it can identify users likely to make repeat purchases or those who haven’t been active for a while.
- **Content creation.** Neural networks generate images, subject lines, headers, and even email copy. While it’s not advisable to rely solely on AI, as the content will require editing, licensing should also be considered. Not all AI tools permit commercial use of their outputs. For example, content from [**MidJourney**](https://docs.midjourney.com/docs/terms-of-service) and [**DALL-E**](https://openai.com/policies/terms-of-use/) is suitable for business applications.
- **Real-time analytics.** AI analyzes campaign metrics during execution, suggesting changes or new tactics to improve results.

### Tips: 

**1.** **Start small.** Test AI for one task, such as generating subject lines or optimizing send times. Assess the results before scaling further.

**2.** **Monitor results.** While AI is a powerful tool, it isn’t infallible. Review its output and adjust strategies as needed.

**3.** **Use AI for localization.** Algorithms can not only translate emails into the target language but also adapt the content to local nuances, including tone, date formats, and currency.

## Trend #4: Less Manual Work 

Technology is becoming increasingly accessible, enabling even small teams to implement sophisticated automated workflows that were once exclusive to large companies.

### What Can Be Automated?

- **Data collection.** Integrations with CDPs and analytics platforms automatically update user data, such as purchases, website activity, or email clicks—eliminating manual input and errors.
- **Email sequences.** Platforms like [**Altcraft**](https://altcraft.com/) allow you to create complex workflows, such as email chains triggered by user actions (e.g., email confirmation, form submission, or link clicks).
- **Segmentation.** Automated systems analyze your audience and divide it into groups based on interests, activity, or predictive models, ensuring emails are highly relevant.
- **A/B testing.** Modern platforms can run tests, collect data, and select the best-performing versions.
- **Dynamic data templates.** Configure emails with variables that automatically populate with relevant information, such as the user’s name or current discounts.

### Tips:

**1.** **Start with simple workflows.** For example, automate cart abandonment emails or order confirmations.

**2.** **Monitor your data.** Automation relies on accurate data, so regularly check that synchronization with other systems is working correctly.

**3.** **Don’t forget testing.** Even automated processes can fail. Test email workflows and verify the accuracy of dynamic data insertion.

## Trend #5: The Shorter, the Better

As the flow of information grows, the time available to read it shrinks. People skim through emails quickly and rarely engage with lengthy content. Today, it’s crucial to convey key ideas as concisely and clearly as possible.

Companies are shifting toward minimalism: short headlines, brief text, and impactful visuals. On average, people spend about ten seconds on an email, with attention to promotional elements fading after just a few seconds.

To capture interest, get straight to the point. Use compact phrases, infographics, or bite-sized instructions that require minimal effort to process. Effective content today is short content.

### Tips:

**1.** **Lead with the main point.** Users should grasp the core message at first glance. If the key idea is buried in the middle of the text, it’s likely to be overlooked.

**2.** **Use concise headlines.** Aim for up to 20 characters to quickly grab attention.

**3.** **Break text into sections.** Short paragraphs, bullet points, and dividers help readers absorb information faster.

**4.** **Add visuals, graphs, or icons.** These convey information without extra words and make the email more compact.

**5.** **Test length and format.** Experiment with different text lengths to see what works best for your audience.

## Conclusion

Email marketing in 2025 continues to evolve. Technologies make emails more interactive, personalized, and intelligent. Automation, AI, and gamification not only grab attention but help retain it amidst the noise of information overload.

However, one thing remains constant: the human connection. Audiences value simplicity, respect for their time, and honest communication. Use modern tools and approaches to speak your subscribers’ language, offer what truly matters, and create emails they’ll want to read.

Discover the trends shaping email marketing this year and how to leverage them — from gamification to artificial intelligence.

small_email-marketing-trends.jpg

thumbnail_email-marketing-trends.jpg

email-marketing-trends.jpg

Email Marketing in 2025: Staying Ahead of the Competition

When it comes to dark mode (in emails and beyond), everyone’s already talked about it: there are plenty of tips and guidelines for using images, text, and colors so they look good in both light and dark themes. But let’s take a slightly different perspective.

## A bit of theory

We’re used to working with the RGB color model where any color can be represented as a combination of three primary colors: R — red, G — green, and B — blue. In computer graphics, the intensity of each primary color typically ranges from 0 to 255. For example, with the minimum intensity of all three colors (R=0, G=0, B=0), you get black, while at maximum intensity (R=255, G=255, B=255), you get white. This principle forms the basis not only of the mathematical model but also of the displays we’re familiar with. Each pixel consists of three subpixels — red, green, and blue. Depending on their brightness, we perceive a certain color thanks to the effect of spatial mixing, while the absence of brightness appears as black.

<Img
img="/api/uploads/dark_theme_7186cd1340.png"
alt="Dark theme: model"
/>

When working with code or graphic editors, hexadecimal (Hex) representation of color is most commonly used, written together, for example, as #6812FC. The symbol # always precedes the code, indicating the method of assigning the value. In our example, this results in the color:

R = #68 = 104
G = #12 = 18
B = #FC = 252

In addition to RGB, there are other color models, such as CMYK, which is used for printing images. Here, C — stands for Cyan (Blue), M — stands for Magenta (Purple), Y — stands for Yellow, and K — stands for Black.

<Img
img="/api/uploads/dark_theme_model2_63c32e5b9b.png"
alt="Dark theme: CMYK model"
/>

This color model also suggests "mixing" several colors to achieve the desired result.

But today we’re interested in a slightly different approach to color representation. Let’s consider another color model — HSL, which includes three components:

- Hue.
- Saturation.
- Lightness.

The tone ranges from 0 to 360 degrees; saturation ranges from 0 to 1; lightness also ranges from 0 to 1.

## How dark mode works

Many email clients have an automatic feature that changes the color of the email when the user has dark mode enabled in the app (or system), so the bright email doesn't "hurt the eyes." It looks something like this:

<Img
img="/api/uploads/dark_theme_email_11zon_d2d7a14806.jpg"
alt="Dark mode email"
/>

A light background with dark text is transformed into a dark background with light text. In most cases, if the background was originally dark, it remains unchanged. And we don't just see a color inversion, but rather the tone and saturation are preserved: only the lightness is inverted. Sounds familiar, doesn’t it? =)

To solve this in the simplest case, we need to represent the color using the HSL color model and invert the last component — lightness. Lightness ranges from 0 to 1, meaning we subtract the lightness value of our color from 1. This is why black becomes white, and white becomes black. The closer the value is to 0.5, the less noticeable the change.

## Let's break it down with an example

We have a button with a background color of #6A66D3 and a text color of #FFFFFF.

<Img
img="/api/uploads/dark_theme_button_fee67de805.png"
alt="Button example"
/>

First, let's convert the color from hexadecimal to decimal.

```#6A66D3 = R 106, G 102, B 211```
```#FFFFFF = R 255, G 255, B 255```

Next, we need to convert the color from RGB to HSL, using the following algorithm:

```
Dif = Max([R,G,B])-Min([R,G,B]) = 0,4274
Lightness = (Max([R,G,B])+Min([R,G,B]))/2 = 0.6137

Saturation = Dif/(2-Max([R,G,B])-Min([R,G,B])), If Lightness > 0.5
Saturation = Dif/(Max([R,G,B])+Min([R,G,B])), If Lightness < 0.5

Saturation = 0.5527

Hue = 0, if Dif = 0
Hue = ((G - B)/Dif mod 6)/6*360, if Max = R
Hue = ((B - R)/Dif + 2)/6*360, if Max = G
Hue = ((R - G)/Dif + 4)/6*360, if Max = B

Hue = 242
```
In the end, we get:

```#6A66D3 = H 242, S 0.55, L 0.61```
```#FFFFFF = H 0, S 0, L 1```

To get the color for dark mode, we recalculate the lightness value by subtracting the color value from 1:

H 242, S 0.55, L (1-0.61) = 0,39
H 0, S 0, L (1-1) = 0

Converting the colors back to RGB, we get:

```#302C9A```
```#000000```

This is what it looks like: 

<Img
img="/api/uploads/dark_theme_button2_66307bea97.png"
alt="Dark mode button"
/>

This is roughly how dark mode transformation works in the Gmail app on iOS — by simply inverting the lightness of each color.

Instead of going through all these calculations, you can easily view the color values in RGB and HSL using professional graphic editors like Figma or Photoshop.

## What to recolor

To make it work correctly, it's important to figure out what should be transformed and what shouldn’t. In web design, it's easy to identify which color is the background and which is the text. By looking at the lightness value, you can determine if the color is dark or light. So, for example, if we see light text, it would be odd to change it to dark in dark mode — it should stay as it is. The same goes for the background — if it's already dark, leave it alone; if it's light, it should be darkened.

Each developer can choose the values they prefer or experiment with them. From experience, we've found that a lightness value of 0.6 works well. If the background is lighter than this value, it should be changed. Similarly, if the text is darker than 0.6, it should be recolored as well.

In email clients, the process is a bit more complex. A progressive brightness adjustment scale is used (instead of just subtracting from 1): the closer the value is to the threshold (in our case, 0.6), the less the color will change. There's also usually a slight adjustment to the saturation.

##Tools

We’ve covered the theory, but where can this actually be applied in practice, and which tools already support it?

###TJML Framework and Dark Mode Testing

When professionally coding emails, it's important not only to make sure they display correctly in different email clients but also to check how they look in dark mode.

That’s why the [**TJML Framework**](https://pixcraft.io/framework) has a tool for testing how emails look in dark mode, including the specific dark mode used by Gmail on iOS:

<Img
img="/api/uploads/dark_theme_testing_1664f23ca7.png"
alt="Dark mode testing"
/>

This tool uses the same algorithm we discussed earlier. What's great is that you can test not only emails created within the framework but also regular email layouts by adding them into the email body (m-body).

###Pixcraft Plugin for Figma

This [**Figma plugin**](https://pixcraft.io/figma) lets you create professional email templates without writing any code. It automatically converts your design into TJML code, which you can then export as a zip file or into an ESP.
Since the TJML framework is built into the tool, you get all the benefits of using it, including the ability to check how your email looks in dark mode:

<Img
img="/api/uploads/dark_theme_plugin_11zon_1c66f00083.jpg"
alt="Testing dark mode"
/>

##Dark Me Plugin for Figma

We mentioned HSL earlier when talking about working with colors — it's a super handy approach, and we've incorporated it into the [**Dark Me**](https://www.figma.com/community/plugin/1210863977149285175/dark-me) plugin.

<Img
img="/api/uploads/dark_theme_dark_me_cd5fa205f5.png"
alt="Dark mode plugin"
/>

Using the dark mode creation method we discussed, which adjusts lightness progressively, the plugin lets you apply dark mode to any interface with a single click. For more fine-tuned adjustments, you can manually tweak the hue, saturation, and lightness for the whole layout or specific sections.

We’ll show you how to properly prepare your emails for dark mode—from theory to tools.


small_dark-theme.jpg

thumbnail_dark-theme.jpg

dark-theme.jpg

Dark Mode: How It Works and How to Optimize for It

Emails are a crucial element of customer communication. They shape the impression your company leaves on recipients. In this article, we’ll explain how to quickly create an email template from scratch using Pixcraft tools and how to develop a master template for future email campaigns.  

## Planning Your Campaign  

At first glance, creating an email template may seem simple. However, a closer look reveals the challenges involved. An email is more than just text in an attractive package. The process includes the following steps:  

- **Developing the concept and content of the email.** It’s important to craft a clear, engaging message that resonates with your audience. This includes segmenting your email recipients. Avoid generic phrases and overly dramatic subject lines, as they can reduce the effectiveness of your message.  

- **Designing the email.** Keep the design clean and straightforward. Overloading the email with too many visual elements or using overly bright colors can distract from the main message.  

- **Coding the template.** Once the concept, text, and design are ready, the most technically demanding phase begins—coding. In this article, we’ll look at using the [Pixcraft plugin for Figma](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates), which allows you to generate high-quality email code directly from your design mockup.  

- **Testing the email.** To ensure the email renders correctly and to identify any technical issues, don’t just rely on the preview mode. Conduct a test send. Only after thorough testing should you send the email to your real audience.  

## Email Text

Regardless of the purpose of your email campaign, there are a few undeniable rules for crafting email content:  

- **Show respect to your client.** Personalize the email whenever possible—for instance, include the recipient's name in the message.  
- **Be concise.** The main idea of your email should be clear from the very first words.  
- **Avoid over-the-top language.** Some email services may lower your reputation for using clickbait-style phrases.  

If you have creative ideas for your email but struggle with precise wording, consider using **AI tools**. The [Pixcraft plugin](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates) includes an AI-powered section to assist not only with text but also with images:  

<Img
  img="/api/uploads/email_templates_1_7ac68fb86e.jpg"
  alt="AI-generated text and images"
/>  

We don’t recommend leaving the entire text creation process to AI. However, the AI can excel at generating key points, correcting errors, and expanding sentences to match your desired style.  

## Designing the Email  

The next step is **email design**. Like the text, the design should be concise. When the email is opened, it should immediately draw attention to the key information without distracting the recipient with unnecessary details. Avoid overly bright colors and stick to a consistent visual style aligned with your company's branding.  

For most companies, the primary tool for design is **Figma**. You can create a design mockup using auto layout with your unique design and structure. Alternatively, use the pre-made templates from the [Pixcraft Email Generator plugin](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates) to assemble your email from ready-made blocks:  

<Img  
  img="/api/uploads/email_templates_2_2e2c658b33.jpg"  
  alt="Pre-made blocks"  
/>  

You can also add links to elements directly within the tool. To do this, select the desired layer or text, open the "Properties" section, and specify the URL:  

<Img  
  img="/api/uploads/email_template_link_button_3_829b43b065.png"  
  alt="URL input field"  
/>  

A comprehensive guide for designers on using the Pixcraft plugin is available on our [blog](https://pixcraft.io/blog/no-code-email-creation-in-figma-plugin).  

If email campaigns are your primary method of communicating with clients, we recommend creating a **master template**—a template that includes all the possible block structures you plan to use. With a master template, creating a new email becomes as simple as selecting the required blocks and replacing the text and images. Having such a template **significantly speeds up** the process of creating new campaigns.

The Pixcraft Email Generator allows you to save all your blocks (assets) into a library, assigning names and tags for easy selection:

<Img  
  img="/api/uploads/email_templates_4_d1b5b79e9e.png"  
  alt="Block names and tags"  
/>

## Template Coding  

When using the Pixcraft Email Generator plugin, you don’t need to worry about coding the template—just select your email and open the preview. If everything displays correctly, proceed to the export section. For one-off promotional emails, you can export the result directly to your ESP. However, if you plan to reuse the template or its blocks—especially for scenarios where designers won’t be involved—it’s best to **save the template in Pixcraft**:  

<Img  
  img="/api/uploads/email_template_export_5_5686084d7a.png"  
  alt="Save template"  
/>  

Once saved, the template will be available in the [Pixcraft Builder](https://app.pixcraft.io) email editor. When you need to create a new email, simply open the saved master template and click **“Edit as copy”**:  

<Img  
  img="/api/uploads/email_templates_6_f333fccbe6.jpg"  
  alt="Editing a copy"  
/>

In the Pixcraft Builder, you can also save individual elements for reuse in other emails. To do this, highlight the block during editing, open the advanced settings, and click **“Save asset”**:  

<Img  
  img="/api/uploads/save_asset_d427f0a27a.png"  
  alt="Save asset"  
/>  

All saved elements are available in the corresponding section of the toolbar on the left:

<Img  
  img="/api/uploads/my_assets_f7f9465e73.png"  
  alt="Saved elements"  
/>

You can remove unnecessary blocks, add required assets from the saved list, and modify text and images. With a master template and saved elements, creating a finished email will take just a few minutes.

## Display Testing  

Different users may see the same email differently. This is influenced by factors such as:  

* **Email client** – Not all clients support AMP content or may require specific component settings.  
* **Mobile vs. desktop version** – Email elements must adapt depending on the recipient’s device.  
* **System interface theme** – Dark or light modes.

When working with Pixcraft products, you don’t have to worry about how the email will appear to the recipient. The template automatically adjusts **element adaptation** for different viewing modes. If necessary, you can manually configure display settings for individual components:  

<Img  
  img="/api/uploads/template_properties_a7a9116a52.jpg"  
  alt="Component-specific adjustments"  
/>

Emails created with Pixcraft render correctly and retain their original appearance across all email clients, from **popular platforms** like Gmail to **corporate clients** like Outlook.

## Conclusion  

Creating an email template from scratch is a complex process requiring various skills—from crafting compelling text to working with markup languages. This article briefly covered all the key stages of template development. At each stage, Pixcraft products can be your reliable assistants.

Pixcraft tools simplify the process, enabling the quick creation of unique templates with AMP elements and responsive designs, as well as preparing guidelines for future campaigns. With Pixcraft, you can focus on developing your ideas and marketing strategies, rather than coding templates.

We’ll show you how to quickly create email templates from scratch using Pixcraft tools. Plus, we’ll explore how to design a master template.  

small_kak-sozdat-email-shablony.jpg

thumbnail_kak-sozdat-email-shablony.jpg

kak-sozdat-email-shablony.jpg

How to Create Email Templates from Scratch with Pixcraft  

Email marketing is a crucial part of any business project. Today, there are countless tools available to quickly design the email template you need. For those who require greater flexibility in template development, **frameworks** come into play. They offer extensive functionality for clear and convenient customization of email templates, unlocking new possibilities for engaging with your audience.

In this article, we’ll explore **React Email**, a React-based framework for creating email templates. We’ll discuss its strengths and weaknesses and compare it to the [**TJML**](https://pixcraft.io/framework) framework.

<Note> TJML is built on **Vue**, bringing all its advantages to the table. Previously, we [**compared TJML with MJML**](https://pixcraft.io/blog/email-frameworks-mjml-vs-tjml). </Note>

## Installation and Setup

### React email

To install React Email, you can add it to your TypeScript or JavaScript project [**via npm**](https://react.email/docs/getting-started/automatic-setup), or set it up [**manually**](https://react.email/docs/getting-started/manual-setup) by adding the necessary dependencies yourself. Once the setup is complete, you’ll have access to a local demo server with a collection of basic email templates. These templates can be opened and viewed directly in your browser:

<Img
img="/api/uploads/react_time_c6bcc6452f.png"
alt="React email login"
/>

Any changes you make to the templates in the emails folder will immediately appear in the browser. You can also send a test email to yourself using the dedicated button.

However, one significant drawback is the lack of a simple and accessible **sandbox**. If you’re unable to set up a project or connect React Email to it, you won’t be able to preview the resulting email.

### TJML

To start working with TJML, you can visit the free [**sandbox**](https://app.pixcraft.io/playground/), insert the components you need, and test what the final email will look like. The availability of a playground page allows you to edit your email template at any time and immediately see the results of your changes:

<Img
  img="/api/uploads/react_time_2_497203ac39.jpg"
  alt="Editing an email template"
/>

TJML can be installed by integrating the **JS library**, allowing you to work with templates in your usual development environment. The full instructions are available [**here**](https://docs.pixcraft.io/en/framework/documentation).

For a better workflow with the framework, the following tools are available to users:

- **VS Code Plugin.** This extension offers autocomplete for TJML tags and provides hints for available attributes. The plugin can be downloaded [**here**](https://marketplace.visualstudio.com/items?itemName=Pixcraft.vscode-tjml).
- **Autocomplete for JetBrains products (WebStorm) using [**Web-Types**](https://github.com/JetBrains/web-types).** To enable hints for tags and available attributes, you can also connect the [**web-types.json**](https://github.com/pixcraft-io/TJML-framework/blob/main/web-types.json).

## Features

### React Email

When the framework is installed, a folder with example templates becomes available. You can preview how these templates will appear to recipients on the demo server. Additionally, the code for these emails can be displayed there as well.

<Img
img="/api/uploads/react_time_3_3dfba29c1c.png"
alt="Email code"
/>

The code can be exported immediately in either HTML or plain-text format.

The framework’s website features a collection of ready-made blocks organized into categories. From there, you can quickly copy the block you need and paste it into your email code:

<Img
img="/api/uploads/react_time_4_e69243d511.png"
alt="Blocks"
/>

On the component pages, you can see how they are displayed on both desktop and mobile devices.

In React Email, to work with a specific component, you first need to import it before using it in your code. Once added, you can customize the content of the blocks, including text and images. The appearance of components is defined by passing an object with style properties and values to the component’s `style` attribute:

```xml
<Section style={{ display: "inline-block", width: "100%", maxWidth: 270, verticalAlign: "middle", }}>
            <Text style={{fontSize:"36px", color: "#ffffff", lineHeight: '1.2'}}>
              The best<br/>choice
            </Text>
</Section>
```
One major drawback of the service is the lack of clear documentation for the attributes and properties of components. As a result, users are left to explore component properties on their own, often making changes to the code "blindly."

### TJML

As mentioned earlier, TJML features its own sandbox. This tool allows you to fully assemble a template from components and check how the email renders in different viewing modes:

<Img
  img="/api/uploads/react_time_5_a71489ef4b.png"
  alt="Various viewing modes"
/>

TJML also offers the following features:

- Multiple viewing modes: dark theme, mobile and desktop views, and color inversion simulation for Gmail on iOS
- A Pixel-Perfect tool for precise, pixel-level layout adjustments
- Automatic monitoring of code size with alerts when it exceeds recommended limits
- AMP support for features like image galleries, interactive elements, and forms embedded directly into the email
- Simultaneous rendering of both HTML and AMP versions of the email
- Error validation for various issues

Coding in TJML follows the same structure as standard XML. Each component comes with a [**documented set of attributes**](https://docs.pixcraft.io/en/framework/documentation). Inserted blocks can be customized to fit your needs, such as specifying button links, replacing images, and adding text.

After completing your email template, you can instantly preview the code and, if needed, **compress it**: 

<Img
img="/api/uploads/react_time_6_525af617a9.png"
alt="Code compression"
/>

## Email Display 

One of the most important factors is the **quality of the final layout**, as it determines how the email appears across various email clients and viewing modes.  

To compare the results of the frameworks, we’ll create two identical emails: one using TJML and the other with React Email. Let’s start with **Gmail**:  

<Img
img="/api/uploads/react_time_7_819ad8aa95.jpg"
alt="Gmail"
/>

Here, the email renders correctly. Now, let’s see how it appears to **iPhone** users:  

<Img
img="/api/uploads/react_time_8_1_e4ddbca724.jpg"
alt="iPhone"
/>

The framework performs well here. Finally, let’s check the rendering in a corporate client—**Microsoft Outlook**:  

<Img
img="/api/uploads/react_time_9_2_e04a8db1b5.jpg"
alt="Outlook"
/>

In Outlook, the email created with React Email appears highly unsatisfactory. This means the tool is not suitable for large-scale marketing campaigns targeting B2B audiences or professional use by agencies, as clients often check results in Outlook.  

Comparing the emails, it’s clear that TJML outperforms React Email.  

## Summary  

After thoroughly examining the React Email framework, we can conclude the following:  

**Pros:**  

- Offers **test email sending** directly from the demo server page.  
- Features an **attractive service design**, with a clean and visually appealing interface.  

**Cons:**  

- Emails created with React Email suffer from **display issues** across various email clients, especially in Outlook.  
- Lacks a sandbox environment.  
- **No AMP email support**—a significant drawback for a modern email framework.  
- No option to **test email rendering in dark mode**.  

## Conclusion  

Frameworks can be a great choice for those who value flexibility in email design. At first glance, React Email seems like an interesting tool for developers. However, poor rendering in some clients, lack of AMP support, and limited flexibility make it unsuitable for professional use.  
TJML, on the other hand, is a reliable tool that not only speeds up the template creation process but also ensures recipients see your emails exactly as intended. TJML stands out from its competitors with a set of unique features not found elsewhere. With TJML, you can be confident in the high quality of your emails.

Choosing the best framework for email templates: pros, cons, and key features of React Email and TJML. 


small_1564х834.jpg

thumbnail_1564х834.jpg

1564х834.jpg

React Email vs. TJML: A Framework Comparison

In today’s world, user attention is the most valuable resource. Static emails no longer excite, and lengthy redirects to links only frustrate. But what if your email could become interactive right in the inbox? It’s not magic — it’s [**AMP emails**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy), a technology that redefines how brands can engage with their audience through email.

In this article, we’ll explore how brands use AMP to captivate subscribers and boost engagement.

## An Example from [Findomestic](https://amp.dev/success-stories/findomestic)

<Img
img="/api/uploads/Findomestic_Sample_Email_6cfee92223.gif"
alt="AMP email example"
/>

Findomestic aimed to make their emails more user-friendly and drive higher conversion rates. By implementing AMP, they stood out from competitors and added interactivity to their emails.

The idea was simple: allow users to interact with the email directly in their inbox — for instance, selecting a banking product or instantly receiving a calculation — all while maintaining Findomestic’s familiar style and interface.

A/B testing of AMP and traditional emails during Black Friday revealed impressive results:

- Open rates increased by 128% (35.4% vs. 15.5%).
- Click-through rates rose by 133% (1.4% vs. 0.6%).

Creating such emails is easy with the [**Pixcraft**](https://pixcraft.io/builder) email builder. Now, crafting a ready-to-send message takes just a few minutes, no HTML knowledge required. Simply choose pre-designed blocks, customize their appearance, add text and links — all within a convenient visual editor.

## Example from Volkswagen (Design: [RRAP](https://www.rapp.com/))

<Img
img="/api/uploads/amp_example_volkswagen_12a015adca.png"
alt="Example of an AMP email from Volkswagen"
/>

In this email, readers can select a car color directly in their inbox using an interactive selector powered by AMP technology. A single click on a preferred shade instantly changes the car's color in the email. This is achieved through AMP components that handle dynamic image updates.

This approach not only grabs attention but also allows users to see their choice in action, adding an element of personalization and playfulness.

## Example from Huel

<Img
img="/api/uploads/amp_example_poll_c646dc5b02.png"
alt="Example of an AMP email from Huel"
/>

In this email, users can pick their favorite drink flavor through an interactive poll implemented with AMP technology. All it takes is a click on one of the options. User responses are sent to a server via the ```<amp-form>``` component.

Results are displayed in real time thanks to ```<amp-list>```, which dynamically updates the email’s content. The percentage breakdown for each flavor is shown in a bottle, represented by both a visual liquid level and numerical percentages.

This feature not only engages recipients but also gives them a sense of participation: users can see how their choice compares to the votes of others.

## Example from Disney 

<Img
img="/api/uploads/amp_examples_puzzle_04fc6b47e3.jpg"
alt="Example of an AMP email from Disney"
/>

This email for kids features an engaging game mechanic — a crossword puzzle that the child can solve directly in their inbox. The goal is to guess characters based on silhouettes and brief descriptions, then enter their names into a form within the email. The ```<amp-form>``` component allows users to submit answers without leaving the email.

All logic and content updates are handled with the ```<amp-bind>``` component, which links data to interactive elements and updates them in real time. Correct answers and changing character images are processed using AMP tags, enabling new content to appear seamlessly within the email.

This approach encourages active interaction with the content rather than passive reading, significantly increasing the likelihood of completing the desired action.

## Example from Toms 

<Img
img="/api/uploads/amp_examples_toms_c500f815a8.jpg"
alt="Example of an AMP email from Toms"
/>

This email showcases glow-in-the-dark shoes with an interactive toggle that lets users control the effect directly in their inbox.

The functionality is implemented using ```<amp-bind>```, which dynamically switches the images, as well as ```<amp-img>``` to display both glowing and regular versions of the shoes. This creates a captivating visual effect without requiring users to visit an external website.

## Example from Mail.ru

<Img
img="/api/uploads/mail_c8a0967b69.gif"
alt="Example of an AMP email from Mail.ru"
/>

An email created by Pixcraft for Mail Cloud makes learning about new features simple and fun through an interactive format. Instead of plain text, users are invited to play a game: answer questions and immediately receive detailed information about each feature.

This functionality is powered by AMP components. Users select their answers, and results with additional information appear instantly, thanks to ```<amp-bind>```. This approach delivers dynamic, modern, and visually engaging interaction directly within the inbox.

## Conclusion 

AMP for email is a powerful tool that enhances emails by making them brighter and more engaging. Interactive elements, instant updates, and the ability to interact directly within the inbox open up new opportunities for brands and marketers.
These emails not only boost open and click-through rates but also provide a unique user experience.

If you’re not yet using AMP in your email campaigns, now is the time to start. The Pixcraft email builder and our [**Figma plugin**](https://pixcraft.io/figma). 

With Pixcraft, you can easily design both standard HTML emails and interactive AMP emails, significantly improving conversion rates and engagement.

This article explores how brands use AMP to captivate subscribers and increase engagement.

small_amp-emails-examples.jpg

thumbnail_amp-emails-examples.jpg

amp-emails-examples.jpg

Revitalize Your Emails: Top AMP Email Examples

Most designers, regardless of their area of expertise, use Figma as their primary tool. However, when tasked with creating a ready-to-use email template, this can prove challenging and time-consuming.

Pixcraft offers a solution to this problem: a user-friendly plugin for Figma that enables you to create an email template and generate ready-to-use HTML code in just a few minutes. In this article, we’ll explore how the [**Pixcraft Email Generator**](https://pixcraft.io/figma) can help you quickly design your email template, customize its unique structure, and add multimedia content.

## Creating a Ready-to-Use Template in Minutes

To get started, open a new file in Figma and locate the Pixcraft Email Generator in the Actions menu on the toolbar. Launch the plugin:

<Img
img="/api/uploads/1_0a3d51aac7.png"
alt="Figma Pixcraft plugin"
src="Pixcraft Email Generator Plugin"
/>

<Note>
The plugin supports multiple languages. To switch to another language, click the globe icon in the bottom-right corner of the plugin.
</Note>

When the plugin opens, you’ll be offered a quick usage guide, which you can skip if desired. To create a new template, go to the **New** tab and select **Blank email**.

<Img
img="/api/uploads/2_b82f124d97.png"
alt="New Blank email"
src="Creating a new email"
/>

<Note>
You can also generate a basic email template with a header, image, button, and footer by clicking **Simple email**. In this case, all you need to do is replace the placeholder images and text with your own content.
</Note>

A blank email template will appear. Populate it with elements from the **Assets** tab, where elements are organized into the following categories:

**Blocks**: Content sections, such as news blocks, banners, and more.
**Headers**: The email header or "top section."
**Images**: Images used in the email.
**Texts**: Text blocks of any kind.
**Buttons**: [**Call-to-action**](https://altcraft.com/blog/what-is-cta) buttons encouraging user engagement. 
**Footers**: The bottom section of the email.
**AMP**: Interactive elements like feedback forms and image carousels, as well as their HTML versions.
**Dividers**: Separators for different sections of the email.

<Img
img="/api/uploads/3_694121e1e8.png"
alt="Using assets"
src="Assets"
/>

For a basic email, you’ll need a header, one content block, one text block, and a footer. To add any of these, simply click the desired element in the plugin menu, and it will automatically appear in the template body:

<Img
img="/api/uploads/4_f0516043ad.png"
alt="New block"
src="Adding a new element"
/>

In the generated template, all that’s left is to replace the placeholder text and images with your own.

<Note>
You can also use your own layout design for the email. To ensure the plugin renders it correctly, the Auto Layout feature must be applied to frames in Figma.
</Note>

Once your template is ready, switch to preview mode by selecting the main template frame and clicking Preview. A testing window will open, displaying how your email will look to recipients.

<Img
img="/api/uploads/five_750ea79887.png"
alt="Preview"
src="Preview mode"
/>

In the preview window, you can:

* Switch between **HTML** and **AMP** versions of the email.
* Toggle between **desktop** and **mobile** views.
* Test the email in **dark mode**, as most mobile email clients automatically adapt emails to dark themes. This includes a **full color inversion** simulation, commonly used in Gmail for iOS.
* Use the **Screenshot** button to capture the email content and share it, for example, with a client.
* View the email's code on the **Show Code** tab, check its size, and compress it if needed.

If you’re satisfied with the final result, proceed to **export the template** by clicking the corresponding button at the top of the window.

<Img
img="/api/uploads/6_9858c2479e.png"
alt="Template export"
src="Template export"
/>

You can optionally add a subject line and preheader to your template. The plugin offers multiple export options, including saving as a **zip archive with code and images**, saving to your **Pixcraft account**, or exporting directly to email marketing platforms, such as [**Altcraft Platform**](https://altcraft.com/):

<Img
img="/api/uploads/7_79decc7b96.png"
alt="External services export"
src="Exporting to other services"
/>

## Customizing Your Template

You’ve created an email template, but how can you make it even better? Pixcraft provides extensive functionality for fine-tuning your template components.

### Links for Buttons, Text, and Images

To add links to buttons or images, select the desired element and go to the **Properties** tab. In the **Link address** field, enter the URL of the target website:

<Img
img="/api/uploads/8_27fe582818.png"
alt="Adding URL to your button"
src="Adding URL"
/>

To add a hyperlink to text, highlight the text fragment and insert the link in the **Properties** menu. Alternatively, you can use the **Create link** feature in Figma:

<Img
img="/api/uploads/9_275103a5a3.png"
alt="Create link"
src="Creating a link"
/>

If you don’t want a specific template element (e.g., a promo code for copying) to be recognized as a button, you can toggle the corresponding switch in the same section:

<Img
img="/api/uploads/10_383937dc05.png"
alt="Using button mode"
src="Button mode"
/>

### Exporting Blocks as Images

The plugin allows you to export certain elements as images rather than code. To do this, select the object, go to the **Properties** tab, and click **Convert to image**. You can then add an image description and title to the converted block:

<Img
img="/api/uploads/11_8c1e16a4cd.png"
alt="Convert image"
src="Converting a block to an image"
/>

You can achieve the same result using Figma’s standard functionality by grouping the block.

<Img
img="/api/uploads/12_33bdda8094.png"
alt="Grouping"
src="Grouping block elements"
/>

### Managing Block Adaptation

Elements in the mobile version of an email don’t always display as intended. To prevent this, Pixcraft lets you customize the **block order** for the mobile version:

<Img
img="/api/uploads/13_04c976bd15.png"
alt="Columns display"
src="Configuring block order"
/>

You can see how these elements will appear using the plugin’s preview mode:

<Img
img="/api/uploads/vid1_39672b4a17.png"
alt="Reorder preview"
src="Block order in emails"
/>

You can also adjust the **side padding and overall width of the email**. To configure these parameters, select the main frame and choose the desired display mode:

<Img
img="/api/uploads/14_9071dca1a8.png"
alt="Paddings"
src="Adjusting padding and width"
/>

### HTML and AMP Display

Not all email clients support AMP content; users of such clients will only see the HTML version of your email. To account for this, you can customize elements separately for each version.

For example, create AMP and HTML elements, such as a form for submissions and a footer with a support link. In the Properties section for the footer, specify it to display only in the HTML version:

<Img
img="/api/uploads/15_82450b571b.png"
alt="HTML and AMP"
src="Customizing content display"
/> 

This ensures that if the AMP form does not appear for any reason, the user will still see a footer with contact details for support.

<Img
img="/api/uploads/plugin_amp_or_html_c467814175.png"
alt="HTML and AMP preview"
src="AMP and HTML content"
/> 

### AI Assistance

If you prefer not to write engaging text yourself or rely on standard stock photos, you can use **AI assistance**. To access this feature, you need to sign in to Pixcraft and log into your account in the plugin. The AI assistant is available for both images and text fields in the AI tab:

<Img
img="/api/uploads/16_47d0d6e7f0.png"
alt="AI Helper"
src="Using AI"
/> 

Simply pick the style and, if needed, add a description of the image. The AI can refine your suggestions, generate text based on your ideas, and check for errors:

<Img
img="/api/uploads/plugin_ai_073a53faf6.png"
alt="AI text styling"
src="Text generation"
/>

## Conclusion

The Pixcraft plugin is designed for users unfamiliar with HTML coding or email creation. It enables the creation of convenient emails that display correctly across most email clients. With Pixcraft, marketers can save significant time and effort typically spent on designing email templates.

Learn more about the plugin’s features, create a Pixcraft account, or contact support on the Pixcraft Email Generator page in the [**Figma Community**](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates).


This article explores how to quickly and easily create email templates for campaigns and customize their elements.


small_figma-plugin.jpg

thumbnail_figma-plugin.jpg

figma-plugin.jpg

No-Code Email Design: Effortless Template Creation in a Figma Plugin

Each year, more people are opening emails on mobile devices. If your email isn’t optimized for mobile, there’s a good chance it won’t get read. It’s crucial for your messages to look great and be easy to engage with, no matter what device your audience uses.

Let’s explore how to create emails that are easy to read and visually appealing on any device.

## Approaches to Mobile Email Optimization

There are three main strategies for adapting emails to different devices—let’s dive into each one in more detail.

### Scaling

This approach works best for emails with a simple structure. It involves using relative dimensions with minimum and maximum size constraints, making it easy to scale images and adjust text blocks. However, it’s not well-suited for more complex layouts.

It’s crucial to ensure in advance that text and buttons on images are large enough. Even if their size is reduced by half, they should remain easy to read.

 <Img
img="/api/uploads/responsive_emails_scaling_11zon_9485851074.jpg"
alt="Mobile adaptation"
/>

The scaling approach can also be applied to sections with background images. In this case, parts of the background on the right and/or left will be cropped—a technique known as "clipping." When used skillfully, this method can create an appealing effect by removing unnecessary elements from the mobile version of the email.

<Img
img="/api/uploads/responsive_emails_clipping_11zon_49f523fb11.jpg"
alt="Mobile adaptation example: clipping"
/>

### Media Query Adaptation

From a design perspective, this approach offers complete flexibility to adjust the structure and appearance of an email based on the device it’s viewed on.

With this method, you can create two separate layouts: one for desktop and another for mobile devices. For wide-format emails, you can even design a version specifically for tablets, if needed.

However, despite its clear advantages, this method has a significant drawback—media queries don’t work in some email clients.

### Block Adaptation

This method allows for the adjustment of any email elements placed in adjacent table cells. When the device screen isn’t wide enough to display all cells in a single row, the elements shift—one cell drops below the other.

If a row contains more than two cells, the restructuring happens step by step: first, the outermost cell moves, then the next one, and so on. You can control this by adding extra wrappers around blocks that need to adjust together. For example, in a four-column layout, it’s better to group the content into two blocks with two cards each.

In a three-column structure, it’s important to avoid large gaps between elements. Otherwise, on mobile devices, empty spaces may appear on the left and right sides of the blocks, which can look unappealing.

If the design includes a block combining text and an adjacent image, adjust the structure so that the text moves below the image. This makes the mobile layout more intuitive and user-friendly, resembling a standard article or product card format. For desktop layouts with a staggered (checkerboard) arrangement, this effect can be achieved through reverse block restructuring.

Align adjacent blocks by width so that they occupy equal portions of the space—for instance, half the width of the email. This way, after restructuring, the elements will stack neatly on top of each other, even without using media queries.

<Img
img="/api/uploads/responsive_emails_blocks_8c1cd8175b.jpg"
alt="Block optimization"
/>

If you don’t have time for mobile optimization, try the visual email builder [**Pixcraft**](https://pixcraft.io/builder). It offers responsive and adaptive design that displays correctly even without media queries.

### Which Approach to Choose

Each approach has its limitations and works best for specific email structures. Therefore, the optimal solution is to combine these methods to achieve the best possible display across most email clients.

For instance, a less-than-ideal three-column structure with block adaptation can be improved by using media queries to increase the width of the cards on mobile devices, making them span the full width of the screen. Similarly, block restructuring can be combined with the clipping technique to trim not just background images but also unnecessary elements, like an extra illustration block, so that the CTA fits within the first screen view.

## Key Considerations for Email Design 

When adapting emails for mobile devices, it’s important to ensure not only that the content fits well on smaller screens but also that it’s easy to interact with.

**Buttons.** The main difference between using mobile devices and computers lies in how users interact with the screen: mobile devices rely on touch, while computers use a mouse and cursor. Even if your [**call-to-action**](https://altcraft.com/blog/what-is-cta) button is visually appealing, a tap area that’s too small will reduce click-through rates.

The recommended minimum size for tappable areas is 44x44 pixels. In some cases, it’s worth making buttons even larger—such as spanning the full width of the screen—to make them easier to tap with a thumb.

**Dark mode.** When an email with a light background automatically switches to dark mode, the brightness is inverted: the background becomes dark, and the text turns light. For emails with dark backgrounds, inversion usually doesn’t occur—except in Gmail on iOS.
Graphic elements typically remain unchanged, which is important to consider when using a dark logo on a light background or including header text as an image.

<Img
img="/api/uploads/responsive_emails_dark_theme_0197b20d43.jpg"
alt="Dark mode mobile adaptation"
/>

**Retina Optimization.** The term "Retina display" originally referred to Apple products, but it is now often used for any high-pixel-density screens. To ensure images look sharp on these screens, they should be saved at a larger size—at least double their intended display dimensions.

<Img
img="/api/uploads/responsive_emails_retina_dfa3f42e57.png"
alt="Retina optimization"
/>

However, this increases file sizes, slowing down email loading times. Therefore, it’s best to use this technique for simple graphics with fewer colors, such as logos or icons. To optimize file sizes, you can use compression tools like TinyPNG or iloveimg.

## Conclusion

Responsive design isn’t just a trend—it’s essential for successful marketing in today’s tech-driven world.

Well-optimized emails that accommodate different devices and screen sizes enhance engagement and improve the overall experience for your subscribers.

In the article, we will find out how to make emails that are displayed correctly on any device. We will also talk about the approaches to mobile adaptation.

Blog