In today's e-commerce landscape, businesses need to do more than just offer quality products—they must also ensure a seamless customer experience at every stage, including email communication. Implementing JSON-LD structured data in email campaigns helps businesses stand out from competitors and makes it easier for customers to access key information.

## JSON-LD Structured Data

**JSON-LD** is a format for transmitting linked data. In the context of email campaigns, JSON-LD allows information to be transformed into interactive elements within email clients. This is done by embedding the required code into the ```<head>``` section of the email's HTML, enabling email services to display structured data.

JSON-LD is not exclusive to email; it is also widely used in website and page optimization. However, these use cases should not be confused, as JSON-LD in websites primarily serves SEO purposes.

In emails, JSON-LD utilizes the schema.org vocabulary. A basic structure looks like this:

```JSON-LD
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "..."
…
}
</script>
```
## Features in Gmail

Google was the first to use JSON-LD in its emails and continues to add more use cases for it. The functionality of the format can be divided into:

**1.** **Actions** are quick action buttons that appear in the inbox list and allow users to perform a specific action without opening the email. There are 2 types:

- **One Click Actions**. Suitable for confirming something without going to the website. This is ideal for confirming a subscription, for example.

- **Go to action**. Suitable for navigating to a link with one click.

<Img
img="/api/uploads/JSON_LD_example_1_4e9c63d874.png"
alt="JSON-LD in emails"
src="Example of using Go to Action"
/>

- **Orders**. Information about orders and everything related to them. This includes: main order information, shipping information, and payment details.

<Gallery>
<GalleryItem
original="/api/uploads/json_ld_1_d68dbb591b.png" 
thumbnail="/api/uploads/json_ld_1_d68dbb591b.png"
description="JSON-LD in emails. Orders"
/>
<GalleryItem
original="/api/uploads/json_ld_2_195b283d27.png"  
thumbnail="/api/uploads/json_ld_2_195b283d27.png"
description="JSON-LD in emails. Orders"
/>
<GalleryItem
original="/api/uploads/json_ld_3_2219d55634.png" 
thumbnail="/api/uploads/json_ld_3_2219d55634.png"
description="JSON-LD in emails. Order information"
/>
</Gallery>

- **Reservation** includes: bus tickets, train tickets, flight booking, event/activity, hotel booking, restaurant reservations, car rental.

<Gallery>
<GalleryItem
original="/api/uploads/json_ld_bus_73dc05db9c.png" 
thumbnail="/api/uploads/json_ld_bus_73dc05db9c.png"
description="JSON-LD in emails. Ticket reservation"
/>
<GalleryItem
original="/api/uploads/json_ld_car_rental_fdfa291631.png"  
thumbnail="/api/uploads/json_ld_car_rental_fdfa291631.png"
description="JSON-LD in emails"
/>
<GalleryItem
original="/api/uploads/json_ld_event_beaab2871b.png" 
thumbnail="/api/uploads/json_ld_event_beaab2871b.png"
description="JSON-LD in emails"
/>
<GalleryItem
original="/api/uploads/json_ld_flight_81f369d7a0.png"  
thumbnail="/api/uploads/json_ld_flight_81f369d7a0.png"
description="Using JSON-LD"
/>
<GalleryItem
original="/api/uploads/json_ld_hotel_107654e7b2.png" 
thumbnail="/api/uploads/json_ld_hotel_107654e7b2.png"
description="JSON-LD: usage examples"
/>
<GalleryItem
original="/api/uploads/json_ld_restaurant_afd2764215.png" 
thumbnail="/api/uploads/json_ld_restaurant_afd2764215.png"
description="JSON-LD"
/>
<GalleryItem
original="/api/uploads/json_ld_train_b657c56dfe.png"  
thumbnail="/api/uploads/json_ld_train_b657c56dfe.png"
description="JSON-LD in emails"
/>
</Gallery>

- **Annotations**. This is information that is displayed before opening the email if it ends up in the "Promotions" tab. It may include product cards, discount information, and promo codes. Bright cards in the "Promotions" list will surely attract the subscriber's attention, reduce the steps to click through to the website, and prevent automatically generated cards with poor images.

<Img
img="/api/uploads/json_mail_example_11zon_135e8dd4e1.jpg"
alt="JSON-LD in emails. Annotations"
src="JSON-LD in emails with annotations"
/>

The broad capabilities of the format in Gmail allow creating user-friendly email campaigns. To use all JSON-LD features in Gmail, you need to go through a registration procedure, similar to sending AMP emails. First, your domain must meet [**Google's requirements**](https://developers.google.com/workspace/gmail/markup/registering-with-google#registration_guidelines). Second, you must send a sample email with JSON-LD to a special email address (schema.whitelisting+sample@gmail.com). Third, you need to fill out a special [**form**](https://docs.google.com/forms/d/e/1FAIpQLSfT5F1VJXtBjGw2mLxY2aX557ctPTsCrJpURiKJjYeVrugHBQ/viewform?pli=1&hl). Only after these steps can you expect approval from the email provider.

You can read more about the approval conditions for your emails in the [**official documentation**](https://developers.google.com/workspace/gmail/markup/registering-with-google), and full information on using JSON-LD in Gmail is available [**on this page**](https://developers.google.com/workspace/gmail/markup/reference).

For testing, you can send yourself an email from the same Gmail account. The most convenient way to do this is by using the [**Google Scripts**](https://script.google.com) service. The main script would look something like this:

```JavaScript
function testSchemas() {
  var htmlBody = HtmlService.createHtmlOutputFromFile('Email.html').getContent();

  MailApp.sendEmail({
	to: Session.getActiveUser().getEmail(),
	subject: 'JSON LD',
	htmlBody: htmlBody,
  });
}
```
And next, you need to add a file with the test template, in our case, Email.html.

## Testing Templates with JSON-LD

It’s always recommended to test your email templates with JSON-LD (as well as any other interactive elements). There are several ways to do this:

- Using dedicated validators like [**Schema Validator**](https://validator.schema.org/). Some email providers also offer their own tools, such as [**Google's Markup Tester**](https://www.google.com/webmasters/markup-tester/u/0/?hl).

- Using validators originally designed for website structured data. However, keep in mind that email code has unique characteristics that differentiate it from website code.

- Launching a test campaign. The most reliable method that helps quickly check how JSON-LD is displayed across multiple email clients.

<Note>We have already discussed checking rendering and testing campaigns in one of our [**blog articles.**](https://pixcraft.io/blog/email-template-compatibility-testing-how-to-avoid-errors-across-devices-and-email-clients#jsonld-support) JSON-LD was also mentioned there separately.</Note>

## Conclusion

All the email clients described in the article essentially display order information, although it is presented in different formats. The presence of such cards makes emails stand out from regular newsletters and creates a positive impression of the brand among customers. It is important to remember that when using JSON-LD, you should carefully check the correctness of email rendering in popular email clients using specialized tools.

Customer focus, along with [**other email marketing trends**](https://pixcraft.io/blog/email-marketing-in-2025-staying-ahead-of-the-competition), is one of the key factors for successful communication with customers. By incorporating JSON-LD into your emails, you’re not just improving the user experience, but creating a whole new level of engagement that significantly boosts loyalty to your company.


JSON-LD in email campaigns helps emails stand out from competitors and makes it easier to access important information. Let's explore how to use structured data.


small_JSON-LD.png

thumbnail_JSON-LD.png

JSON-LD.png

Smart Cards and Order Status: Using JSON-LD in Email Campaigns

**Guideline (or Design Guide)** is a document that helps maintain consistency and uniformity in design. It defines how repeating elements should look, which styles to apply, and how to correctly use ready-made components. Figma is the most suitable tool for creating email template guidelines for newsletters. With its features (components, variants, instances, variables, etc.), Figma simplifies working on email templates and speeds up making edits.

This article explores components, variants, and variables in Figma and how they can help create a cohesive guideline.

## What is a Component?

A **component** is a template for an element whose copies **(instances)** can be used in different parts of a project. Any changes made to the component will automatically update all its instances. You can create a component from the context menu when selecting an object, group, or frame, or by using the shortcut **Ctrl + Alt + K**.

<Img
img="/api/uploads/Create_Component_figma_guideline_1765657900.png"
alt="Creating a component"
/>

Components make it quick and easy to add elements to a layout while maintaining a consistent style and design approach. They are also a fundamental part of any guideline. First, new elements created from a component will preserve the project's design consistency. Second, if you need to update the structure of an element in your guideline, you only need to edit the component, and all its instances will automatically reflect the changes.

Component libraries, as well as project-specific components, are available in the **Assets** panel. You can use both local components created within your project and components from linked libraries.

<Img
img="/api/uploads/Assets_pixcraft_8005847922.png"
alt="Assets"
/>

Components are usually stored in a separate project file. This allows all team members to quickly access these elements with predefined size, positioning, and style settings.

You can always navigate from an instance to its main component by right-clicking any copy and selecting **Main component – Go to main component**. In the same menu, you can also push instance changes to the main component.


<Img
img="/api/uploads/Push_Changes_guideline_for_figma_06e068cd5d.png"
alt="Main component"
/>

## Component Instance

An **instance** is a copy of a main component that inherits its properties but can be partially modified. Instances allow you to override content such as text, images, and colors while maintaining a connection to the original component.

### How Instances Work

- If you **edit the main component**, all instances will update automatically.
- If you **modify an instance**, the changes apply only to that instance and do not affect the main component.
- If you **detach an instance**, it becomes a regular object and loses its link to the component.

<Img
img="/api/uploads/pixcraft_master_component_gif_4c32f89be5.gif"
alt="Creating a component"
/>

## Component Variants

When designing a guideline, you often need to display multiple states of the same interface element. For example, a button may have a default, disabled, pressed, or hovered state. While you could create a separate component for each state, this approach leads to structural redundancy, complicates maintenance, and makes the design process less efficient.

To address this, Figma provides variants, allowing you to group multiple states within a single component.

**Variants** enable you to combine multiple components with different states or properties into a single component with toggleable parameters. Instead of creating multiple separate components (e.g., a button in different states), you can use a **variant component** with switchable properties. Variants also improve navigation in the **Assets** panel.

It's important to note that a component variant is not a full-fledged instance, meaning changes between variants **are not synchronized**.
To add a new variant, right-click the main component and select **Main component – Add variant**. In the future, you can add new variants directly in the project workspace:

<Img
img="/api/uploads/figma_guideline_gif1_d6d4e6c02a.gif"
alt="Component variant"
/>

## Nested Components

Components can also be used **inside other components**, allowing you to modify specific elements directly within an instance.

<Img
img="/api/uploads/figma_guideline_gif2_a1914362e8.gif"
alt="Nested components"
/>

The easiest way to manage nested components is by using **Properties**.

## Component Properties

When your project contains only a few different elements, working with component variants is convenient. However, if you need to configure multiple elements—such as numerous input fields with different states—it’s more efficient to use **component properties**. 

**Component properties** allow you to adjust component instances without changing their structure. They offer more flexibility than variants and make components more versatile.

Managing a single component with multiple properties is the most complex approach, but it’s also the most universal, efficient, and space-saving. By eliminating the need to handle each variant separately, designers can significantly streamline their workflow.

<Img
img="/api/uploads/figma_guideline_gif3_0045c490a1.gif"
alt="Add object"
/>

Figma offers **four** main types of properties:

- Text Properties.
- Boolean Properties.
- Instance Swap Properties.
- Variant Properties.

Let's go over each in detail.

### Text Properties

These allow you to edit text within a component directly in the **Design** panel without breaking its connection to the main component. This type of property makes it easy to customize text fields in any instance.

**How to create:**

**1.** Select a text layer inside the main component.

**2.** In the right-hand panel, find **Content** and click **Create Property**.

**3.** Name the property (e.g., label).

After this, you’ll be able to edit the text content of that field in any instance directly from the toolbar.

### Boolean Properties

These enable toggling elements within a component on or off. The values can be either **true** or **false**. Boolean properties are useful for showing or hiding icons in buttons or adding temporary elements (such as a discount badge on a product card).

**How to create:**

**1.** Select the required element inside the component.

**2.** In the **Layer** panel, click **Create Property – Boolean**.

**3.** Name the property (e.g.,```show_icon```).

### Instance Swap Properties

These allow you to **swap one nested component for another** without breaking the connection to the main component. This is useful for replacing an icon within a button (e.g., icon = arrow – icon = check).

**How to create:**

**1.** Select the nested component inside the main component.

**2.** In the **Design** panel, find **Instance Swap** and create a new property.

**3.** Name the property (e.g., ```icon_variant```).

### Variant Properties

These let you switch **existing component variants** via settings instead of manually selecting them from the Variants panel. For users familiar with component properties, this method provides a more intuitive way to interact with variants.

**How to create:**

**1.** Create multiple variants of a component.

**2.** In the Variants panel, group them and assign properties (e.g., type, state).

Component properties can also be defined directly in the component’s name using the format `key=value, key=value`. Properties are one of the more advanced aspects of working with components, but mastering them allows designers to create highly flexible and adaptable elements for their templates.

## Variables

In addition to components, one of the key tools for building a design guideline is **variables**. **Variables** in Figma are values that can be set and reused across different design elements. They make designs more flexible, scalable, and easier to manage, especially in large projects and design systems.

Variables work **similarly to CSS variables** (`--primary-color, --spacing-lg`), making it easy to transfer them into code for development. You can configure them in the **Design** panel by clicking on an empty area of the workspace.

<Img
img="/api/uploads/figma_guideline_gif4_00e490f952.gif"
alt="Variables"
/>

To export variables and styles from Figma as CSS variables, you can use the  [Pixcraft plugin](https://www.figma.com/community/plugin/1332412206147274506/export-styles-and-variables-to-css).

 Figma supports four types of variables:

- Color Variables.
- Number Variables.
- String Variables.
- Boolean Variables.

### Color Variables

Used to store color and gradient values. They help define:

- Primary and secondary colors
- Text colors (Text-Primary, Text-Secondary).
- Background colors (Background, Surface).
- State colors (Hover, Disabled).

In Figma, these colors can be applied to fills, strokes, shadows, and gradients.

### Number Variables

Used to store numeric values such as sizes, spacing, and border radii. Examples include:

- Font sizes (FontSize-Small, FontSize-Large).
- Border radii (Border-Radius, Card-Radius).
- Spacing values (Spacing-XS, Spacing-L).

### String Variables

Used to store text values such as button labels or headings. They can be applied to:

- Button labels (Button-Label-Primary).
- Dynamic content (UserName, Product-Title).
- Localization (Locale-EN, Locale-ES).

### Boolean Variables

Used to toggle visibility (on/off). Examples include:

- Showing or hiding elements (Show-Icon, Show-Badge)
- Switching between light and dark mode (DarkMode-Enabled).

In Figma, boolean variables control layer visibility.

Также созданные переменные можно группировать в коллекции, например:

- Theme – Light / Dark.
- Spacing – XS / S / M / L.
- Typography – Heading / Body / Caption.

## Creating an Email Guideline

### Analysis and Planning

At this stage, it's important to thoroughly review existing email templates, identify their strengths and weaknesses, and outline common usage scenarios. Determine which elements need standardization, such as headers, buttons, images, text blocks, and links. Collaborate with marketers, designers, and developers to ensure no crucial detail is overlooked.

<Img
img="/api/uploads/Templates_developing_a_guideline_466285639e.png"
alt="Templates"
/>

### Creating a Design System

A **design system** establishes a consistent style for all future email templates. It includes colors, fonts, sizes, spacing, and link styles. At this stage, **variables and styles** will be particularly useful. Styles allow you to centrally manage colors, fonts, and effects for project elements, while variables ensure quick adaptation of designs to new requirements and conditions.

A **design system** establishes a consistent style for all future email templates. It includes colors, fonts, sizes, spacing, and link styles. At this stage, **variables and styles** will be particularly useful. Styles allow you to centrally manage colors, fonts, and effects for project elements, while variables ensure quick adaptation of designs to new requirements and conditions.

<Img
img="/api/uploads/Vars_design_guide_998312603a.png"
alt="Creating a Design System"
/>

### Building Components

Creating components ensures consistency and simplifies the use of individual elements in templates. Start by defining the key components—typically, these include the header, footer, buttons, images, and text blocks. Develop a separate component for each element with customizable parameters and states.

<Img
img="/api/uploads/Components_guideline_figma_7612fc18ed.png"
alt="Building Components"
/>

### Auto Layout and Responsiveness

For email campaigns, it’s crucial that the design displays correctly on different devices and screen sizes. Using **Auto Layout** in Figma makes components and templates flexible, automatically adjusting to content. Set up auto-alignment so templates easily adapt when content or screen sizes change.

### Documentation

Documenting all created components and usage guidelines is a key stage in developing the guideline. Create a dedicated page in Figma with detailed instructions and recommendations for each component, along with specifics on setting up variables and auto-layout.

### Testing and Optimization

Conduct internal testing with designers and developers to evaluate the usability of components and the accuracy of descriptions. Gather feedback, identify challenges, and refine the guideline for maximum practicality and efficiency. Keep in mind that the guideline should be updated regularly to align with changes in your marketing strategy.

<Img
img="/api/uploads/Versions_developing_a_guideline_cf57ba3abb.jpg"
alt="Testing"
/>

## Conclusion

Creating an email template guideline in Figma is an investment in long-term efficiency and design consistency. Well-structured components and variants make the email-building process similar to assembling with "building blocks"—you quickly create an email from a set of pre-approved elements, modifying only what’s necessary.

This approach saves time, ensures a unified style, and simplifies future updates. By following these steps and continuously updating the guideline, you can maintain a high-quality, modern, and scalable email design. For even faster interactive email creation, you can use the [**Pixcraft Email plugin**](https://www.figma.com/community/plugin/1403763341617358835) for Figma.

In this article, we’ll explore components, variants, and variables in Figma and how they simplify guideline creation.

small_figma.png

thumbnail_figma.png

figma.png

Developing a Guideline in Figma: Components, Variants, and Variables

A CTA in an email is the button that leads subscribers to take action. If it’s hard to find, the text doesn’t stand out, or the button isn’t mobile-friendly, your email may go unnoticed.

It’s not just about choosing the right words—you also need to consider placement, design, and size. Even animation and white space around the button can impact results.

In this article, we’ll break down which [**CTAs**](https://altcraft.com/blog/what-is-cta) attract more clicks, why bulletproof buttons are essential, and how to test different versions to find the most effective one.

## How Many Buttons You Need and Where to Place Them

Email buttons should be clear and noticeable. If the design is confusing, users might not know where to click. A CTA should have an obvious look so that people immediately recognize it as a clickable element.

<Img
img="/api/uploads/cta_buttons_pixcraft_no_buttons_2aa79f452c.png"
alt="Email Without a Button from Sporcle"
src="There’s no button here, but the text is clickable. Users may not realize where to click to reach the website."
/>

If an email has multiple buttons, they should be prioritized. Use one style for primary actions and another for secondary ones. Typically, two variations are enough to keep the structure clear without overloading the email with unnecessary elements.

<Img
img="/api/uploads/effective_buttons_two_types_of_buttons_pixcraft_bfdc652623.png"
alt="Two Button Styles from Academia.edu"
src="This email uses two types of buttons."
/>

Too many buttons in a single email can confuse the reader. It's better to keep only the most important CTAs and arrange them in a way that makes the path to the desired action clear.

<Img
img="/api/uploads/cta_buttons_pixcraft_too_many_buttons_668204a936.png"
alt="Too Many Buttons in an Email from Taste of Home"
src="This email is overloaded with buttons."
/>

## Which Wording Works Best?

The text on a button directly impacts click-through rates. A good CTA should be clear, attention-grabbing, and action-oriented. But should it be short or detailed, creative or straightforward?

**Short vs. Long CTAs.** Short CTAs (“Buy,” “View,” “Try”) are familiar and easy to read. They work well when the action is obvious, and the context is clear without extra words—especially when there's already an explanation before the button.

Longer CTAs (“Get Free Access,” “Choose a Plan and Subscribe”) can be more effective when users need extra reassurance. They work well for complex topics where additional motivation is required.

Short CTAs are more suitable for mobile emails since they are compact and easy to tap. Longer ones help convey the value of the action when necessary.

**Clarity vs. Creativity.** A unique CTA can grab attention, but if its meaning isn't clear, fewer people will click. For example, “Open the Door to the Future” sounds intriguing, but it’s not immediately obvious what happens when you click. Meanwhile, “Sign Up for a Course” is straightforward and easy to understand.

Creative CTAs work well when they align with the brand’s tone and are instantly clear. For an online store, for example:

- “Add to Cart” – clear and familiar
- “Save for Later” – a bit more creative but still understandable.
- “Stash Away” – fun, but might be confusing.

<Img
img="/api/uploads/cta_buttons_pixcraft_strange_f34a51c0f1.png"
alt="CTA Example from Headspace"
src="The button is creative, but not everyone may understand what happens when they click."
/>

**What to Test?**

- If a standard CTA isn’t delivering good results, test different variations: concise, detailed, or emotional.
- Use action-oriented verbs like “Get,” “Sign Up,” “Download.”
- Add urgency or a benefit: “Book with a Discount,” “Download for Free.”
- Avoid vague wording: “Okay,” “Next,” or “Done” without context can be confusing.

## What CTA Buttons Should Look Like

### Size

Buttons in mobile interfaces should be large enough to tap easily. A recommended minimum size is 44×44 px.

Buttons that are too small make users adjust their finger position, forcing them to tap with the tip instead of the pad. This slows them down and requires more effort. If buttons are too close together, accidental clicks become more likely—especially with larger thumbs.
The average width of an adult’s index finger is 1.6–2 cm (45–57 px), while a thumb is about 2.5 cm (72 px). Buttons of this size are easier to tap accurately, improving interaction speed.

<Img
img="/api/uploads/cta_buttons_pixcraft_big_button_c0a9f4730b.png"
alt="CTA for Mobile Devices"
src="This button is large, making it easy to tap accurately."
/>

Tablets allow for larger buttons, but mobile screens have limited space. If everything is oversized, you’ll run out of room. Finding the right balance—keeping only essential buttons—is key.

### Button Shape

Experimenting with design is great, but if a button doesn’t look like a button, users might not notice it. It’s best to use familiar shapes:

- Rounded. 
- Rectangular.
- Capsule-shaped.
- Transparent.
- Buttons with shadows.

<Img
img="/api/uploads/Button_Shapes_b99cf61272.png"
alt="Button Shapes"
/>

### Space Around the Button

A button should stand out, not get lost among other elements. To achieve this, it needs enough surrounding space. This is especially important on mobile devices—if buttons and links are too close together, users might tap the wrong one by mistake. 

### Visual Feedback

Simple animations make buttons more noticeable and enjoyable to use. [**Studies show**](https://www.sixthcitymarketing.com/2023/03/24/statistics-to-know-about-ctas-in-2023/) that visual effects like these can increase click-through rates by 26%.

The easiest option is to add a response to hovering or clicking—such as changing color, slightly enlarging the button, or adding a glow. These small details draw attention and make interactions feel more natural.

Such enhancements engage users and improve email click-through rates. The key is not to overdo it—animations should enhance usability, not distract from it.

## How to Choose the Best Button Design

Even small changes in button design or wording can impact click-through rates. But how do you know what works best? Testing is the only way to validate assumptions and find the most effective option.

**What to Test?**

When testing buttons, consider the following:

- **Text** — short vs. long CTA.
- **Color** — bright and high-contrast vs. neutral and design-friendly.
- **Shape** — classic rectangular, rounded, or capsule.
- **Size** — small vs. large and attention-grabbing
- **Placement** — at the beginning, middle, or end of the email.

**How to Test?**

You can use platforms that automate the process. For example, [**Altcraft Platform**](https://altcraft.com/features/mvt) offers different testing formats:

- **A/B Testing**. Compares two button variations to determine the best performer based on clicks or opens. The system can automatically distribute the audience and select the winner.
- **Multivariate Testing**. Suitable for more complex experiments, such as testing multiple elements in an email at once. The platform allows up to 8 template versions.
- **Analytics**. If automatic selection isn’t enough, you can manually analyze reports to choose the best option.

## What Are Bulletproof Buttons?

Bulletproof buttons are created using HTML and CSS instead of images (PNG, GIF, JPEG). Their key advantage is consistent display across all email clients, even if images are disabled.

Using image-based buttons comes with risks—if they don’t load, the CTA becomes invisible, reducing click-through rates. Additionally, editing image-based buttons requires redesigning, re-uploading, and updating the code. With bulletproof buttons, you can easily adjust text and styling directly in the HTML template.

Pixcraft automatically generates bulletproof buttons that display correctly across all email clients, including Outlook, and remain visible even when images are turned off. The block editor allows you to quickly create emails without extra hassle and prepare them for sending. [**Try the email builder for free.**](https://pixcraft.io) 

If you don’t have time for manual email coding, the [**Pixcraft Figma plugin**](https://pixcraft.io/figma) can help. Simply design your layout, and the plugin will convert it into clean HTML code—saving time and eliminating the need for manual adjustments.

## Conclusion

For a CTA to be effective in emails, you need to consider the text, design, and placement. A clear message and a well-designed button in the right spot can significantly impact click-through rates. Instead of guessing, test different variations and analyze the data—this way, your email campaigns will deliver real results.

Let’s explore which buttons drive more clicks, why bulletproof versions matter, and how to test different options to find the best one.


small_cta-pixcraft-knopki-dlya-emeilov.jpg

thumbnail_cta-pixcraft-knopki-dlya-emeilov.jpg

cta-pixcraft-knopki-dlya-emeilov.jpg

How to Increase Email Click-Through Rates with the Right CTAs

When opening an email, the recipient should instantly recognize who it's from. A familiar style—consistent colors, fonts, layout, and tone—makes the email feel recognizable and trustworthy. If each email looks different, the brand gets lost among other messages.

To prevent this, email templates should reflect the brand’s identity by defining colors, visual elements, and structure. This article covers how to make email campaigns recognizable and what to consider when designing templates.

## Why Branding Matters in Email Campaigns and Key Elements to Use

Branding in email campaigns serves several purposes:

- **Builds trust** — A consistent style makes emails feel familiar and less like spam.
- **Improves readability** — A clear and structured design helps users process information faster.
- **Makes emails memorable** — A cohesive design helps users recognize the brand, even without a logo.

### Essential Branding Elements for Emails

To make emails look professional and recognizable, templates should include key branding elements:

**1. Logo.** The logo is the primary visual identifier of the brand. It should be:

- Placed in the header or another prominent spot.
- Large enough to be noticeable but not overwhelming.
- High-quality and with a transparent background to display correctly, including in dark mode.

<Img
img="/api/uploads/branding_in_emails_logo_1_11zon_9bd69f3e75.jpg"
alt="Example email from Taste of home"
src="The Taste of Home email features a prominent yet unobtrusive logo."
/>

**2. Brand Colors.** Consistent colors visually connect emails to the website and other brand channels. Key recommendations:

- Use 2–3 primary brand colors and stick to them.
- Make CTA buttons stand out with contrasting colors.
- Test how colors appear on different screens and in dark mode (some shades may become less visible).

<Img
img="/api/uploads/email_branding_mcdonalds_colors_10fdb19a10.png"
alt="Example email from McDonald's"
src="McDonald's sticks to its brand colors, making the sender immediately recognizable."
/>

**3. Fonts.** Email text should not only be readable but also align with the brand’s style. Key considerations:

- Use fonts from the [**brand book**](https://altcraft.com/blog/brand-book-for-your-company) (if they are suitable for emails).
- Choose "safe" fonts that display correctly across different email clients.
- Highlight headlines and buttons with accent fonts or styles, but avoid overloading the layout.

<Img
img="/api/uploads/branding_in_emails_font_ebb7d4c12c.png"
alt="Example email from Graza"
src="Graza uses familiar fonts here."
/>

**4. Visual Style.** Images, illustrations, and icons all influence how the brand is perceived in emails. Tips:

- Maintain a consistent image style (e.g., only illustrations or only photos).
- Avoid clutter—visuals should complement the content, not distract from it.
- Optimize image sizes to prevent slow email loading.

<Img
img="/api/uploads/branding_in_emails_illustrations_a910e5534b.png"
alt="Example email from Headspace"
src="Headspace, for example, uses illustrations."
/>

## How to Maintain a Consistent Style with Components and Variables

Manually designing each email increases the risk of small but important inconsistencies—colors might slightly vary, fonts may change, and buttons could look different. This disrupts brand consistency.

To prevent this, define key template elements in advance: 

- Set brand colors as variables to avoid manually entering color codes.
- Standardize fonts and sizes for headings, body text, and buttons.
- Keep buttons uniform in color, corner rounding, and text style.

Another important detail is the template structure. It's essential to define which blocks are consistently used in emails—header, footer, product cards, promo sections. Turning these into components allows for easy copying without unnecessary edits.

### Email Guidelines in Figma: Why You Need Them

Even with well-defined elements, different team members might use them inconsistently. To prevent this, an email guideline in Figma can be helpful.

It should document the key styles: which fonts, colors, and elements are considered part of the brand and should remain unchanged. It should also include ready-made components for quick use in new emails and example templates with notes on how to adapt them for different campaigns.

With this approach, marketers can quickly assemble new emails without breaking the style, while designers can make centralized updates without manually adjusting each template.

## How to Keep Emails Recognizable Without Becoming Repetitive

If emails always look the same, they may stop catching attention over time. But if each email has a drastically different design, brand recognition suffers. The key is finding a balance—sticking to the brand style while keeping the content fresh.

### Adding Variety Without Losing Consistency

Brand colors can be used flexibly. For example, the background color might change slightly for holidays—darker shades for Halloween, for instance. The important thing is to stay within the brand’s main color palette.

<Img
img="/api/uploads/brending_glossybox_c796c1a4b1.png"
alt="Example email from Glossybox"
src="Glossybox used a darker color palette than usual, but the brand remains recognizable."
/>

The arrangement of email sections can also vary. Some emails might start with a large banner, while others jump straight into an offer. This keeps emails engaging without disrupting their structure.

A great way to refresh the design is by adding seasonal details. For example, a Christmas email could feature a background pattern of ornaments or holiday-themed illustrations.

<Img
img="/api/uploads/branding_in_emails_background_3731faf185.png"
alt="Example email from Olipop"
/>

### Playing with the Logo and Other Brand Elements

The logo is also an area for creative tweaks. For holidays, a small accent—like a snowflake for New Year’s, a pumpkin for Halloween, or a themed gradient—can add a festive touch without breaking brand consistency.

<Img
img="/api/uploads/branding_in_emails_apple_logo_mothers_day_b93a00a01b.png"
alt="Example email from Apple"
src="Apple added a festive touch to their logo."
/>

Icons, illustrations, and button shapes can also be subtly adapted to match a specific theme. The key is to keep changes cosmetic rather than drastic. This keeps emails fresh and engaging while maintaining brand recognition.

## How to Maintain Brand Consistency in Dark Mode

Many users read emails in [**dark mode**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it), and if an email isn’t optimized for it, it might look off—bright brand colors can become overly neon, while pastel shades may appear too faded.

### What to Do:

**1.** To ensure emails look as intended, set alternative colors for dark mode using CSS or choose shades that work well on a dark background. Planning for both light and dark themes from the start helps maintain brand consistency.

**2.** In dark mode, bright white text on a black background can strain the eyes. A softer shade, like light gray, works better. Also, check button visibility—dark text on a dark button might disappear completely.

**3.** Dark logos and icons may blend into dark backgrounds. To prevent this, place the logo on a white background instead of a transparent one.

<Img
img="/api/uploads/brending_dark_logo_e46d2e6bdf.jpg"
alt="Logo blending into background"
src="A dark blue logo disappears against a dark background in dark mode."
/>

**4.** Different email clients handle dark mode differently, so testing in Gmail, Apple Mail, Outlook, and other services is essential. If the email looks good across all platforms, the brand style remains intact regardless of screen settings.

For quick dark mode previews, try the Pixcraft email generator. [**Try it for free**](https://pixcraft.io/builder).

## Conclusion

Branding in email templates makes a campaign not just visually appealing but also recognizable. When colors, fonts, images, and email structure follow a consistent style, subscribers instantly identify the sender and trust the content. The key is balancing consistency with variety—sticking to brand guidelines while making small tweaks to keep the design fresh. This way, emails remain stylish, recognizable, and engaging.

We'll explain how to incorporate brand identity into templates so emails are instantly associated with your brand and don't get lost in the clutter.

small_email-branding.jpg

thumbnail_email-branding.jpg

email-branding.jpg

How to Use Branding in Email Templates to Create a Recognizable Style

Modern [**email marketing**](https://altcraft.com/glossary/email-marketing-how-to-set-up-and-use-it) has long gone beyond static newsletters. Users expect relevant, personalized, and interactive content that adapts to their needs in real time.

In this field, AMP for email has been a real breakthrough. The technology makes it possible to add dynamic elements and interactive forms to emails. We wrote more about implementing AMP in email templates in [**our article**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy).

One of the key tools of AMP for email is the **AMP-list component.** It allows loading data from external sources in real time and dynamically updating email content. This opens up a wide range of possibilities, from personalized recommendations to up-to-date store hours or refreshed promotions.

Let’s explore how AMP-list works and how to use it effectively in email marketing with [**Pixcraft**](https://pixcraft.io/).

## What is AMP-list

**AMP-list** is a component for dynamically retrieving data within an email with the ability to update it. It replaced Agile images, which were unstable and did not fully meet user needs.

<Img
img="/api/uploads/pixcraft_component_use_c30ec34efc.gif"
alt="Email campaign with AMP-list"
src="Example of a promo email using AMP-list"
/>

### General Syntax

AMP-list loads JSON data from a specified URL and displays it in the layout using a template.

```
<amp-list 
  width="auto" 
  height="100" 
  layout="fixed-height" 
  src="https://example.com/data.json">
  <template type="amp-mustache">
    <div>{{title}}</div>
  </template>
</amp-list>
```
Among the **key attributes** of amp-list:


- `src` — URL of the data source (JSON API)
- `width / height / layout` — display parameters
- `template type="amp-mustache"` — data output template

AMP-list expects a JSON response with an object containing an items property that holds an array of data. Example:

```
{
  "items": [
    { "title": "Interactive AMP content" },
    { "title": "Personalized materials" }
  ]
}
```
In our example, the HTML output will look something like this:

```
<div>Interactive AMP content</div>
<div>Personalized materials</div>
```
Content updates occur when the user opens the email, or the email can be refreshed manually. If, for some reason, the server does not return a response, you can display a special fallback block with alternative content:

```
<amp-list width="auto" height="200" layout="fixed-height" src="https://example.com/products.json">
  <template type="amp-mustache">
    <div>{{name}}</div>
  </template>
  <div fallback>Fallback content in case something goes wrong</div>
</amp-list>
```

**AMP-mustache**
The display of received data is handled by **AMP-mustache**:
```
<template type="amp-mustache">
    <div>
      <amp-img src="{{image}}" width="100" height="100"></amp-img>
      <p>{{name}}</p>
      <a href="{{url}}">More details</a>
    </div>
  </template>

```
Mustache does not pass the value itself but defines a template for displaying the received data. Content substitution is done using the following syntax:

- {{variable}}:  A variable. Outputs the HTML-escaped value of the variable.
- {{#section}} {{/section}}:  Checks if the variable exists and allows iterating over elements if it’s an array.
- {{^section}} {{/section}}: Checks if the variable is missing. Used to create fallback elements.
- {{{unescaped}}}: Unescaped HTML allows displaying styled text with links, for example. There are restrictions on the allowed tags.

## Usage Examples

Using AMP-list in emails unlocks a wide range of opportunities for marketers. The main advantage is personalizing your emails and displaying up-to-date content. Additionally, this component allows you to:

- display a live comment feed within an email;
- apply styling based on time of day or date;
- show real-time product and promotion information in your store;
- and much more!

### Styling by Time of Day or Date

With AMP-list, you can set up dynamic content display based on when the recipient reads the email:

<Img
img="/api/uploads/pixcraft_email_time_e3faf9854e.jpg"
alt="Styling by time of day or date"
/>

### Promotions and Special Offers

One of the biggest drivers for purchasing a product is the time-limited nature of an offer. An exclusive price, the arrival of a rare item, or real-time stock availability can be the deciding factor for a purchase:

<Img
img="/api/uploads/pixcraft_email_add_to_cart_951f6d045d.png"
alt="Promotions and special offers"
/>

### Weather Forecast

Customers will be pleasantly surprised to find a small weather update inside their email, informing them about the upcoming forecast. The AMP-list component can help set up such a feature:

<Img
img="/api/uploads/pixcraft_email_weather_2bb353c0de.png"
alt="Weather forecast using AMP-list"
/>

## Implementation in Pixcraft

AMP-list can be easily integrated into your email using [**Pixcraft**](https://pixcraft.io/builder). To do this, create a new component in the corresponding menu section:

<Img
img="/api/uploads/New_Pixcraft_component_218b4309f5.png"
alt="New Pixcraft component"
/>
Enter a name and description, then select the **AMP-List** type:

<Img
img="/api/uploads/pixcraft_component_name_8e9787b0e4.png"
alt="AMP-list.png"
/>

In the next step, configure the **element structure**. You can add a **text field**, **headline**, **image**, or **link**:

<Img
img="/api/uploads/pixcraft_component_structure_404957a018.png"
alt="Element structure"
/>

On the **Content** tab, you can configure the content of the generated "cards" and add the required number of them:

<Img
img="/api/uploads/pixcraft_component_content_2f004f938e.png"
alt="Content"
/>

You can also set **display conditions** for the block. Specify conditions such as **time**, **day of the week**, or **a specific date**:

<Img
img="/api/uploads/pixcraft_component_display_conditions_ac457b96d3.png"
alt="Display"
/>

After saving the element, you will see **detailed instructions** on how to connect AMP-list to your email. Pixcraft will generate ready-to-use code in both HTML and [**TJML**](https://pixcraft.io/framework). 

<Img
img="/api/uploads/pixrcaft_component_connection_b98f489002.png"
alt="Connection"
/>

Your interactive element is now ready! Be sure to test the email before sending it to a large audience, and keep in mind that not all email providers support [**AMP content**](https://pixcraft.io/blog/what-amp-emails-are-and-how-they-are-changing-email-marketing).

## Conclusion

Using AMP-list in email marketing unlocks new possibilities for personalization, dynamic content updates, and increased user engagement. With this component, emails go beyond static newsletters, transforming into interactive tools that adapt to the recipient's context and behavior.

However, it's important to remember that not all email clients support AMP, so you should also prepare a standard HTML version of the email without dynamic content.

If you haven't tried AMP in email yet, now is the perfect time to test it with [**Pixcraft**](https://pixcraft.io/) and take your campaigns to the next level!

How AMP-list makes email campaigns dynamic: data loading, personalization, and interactive content.

small_Using_the_AMP-list_component.jpg

thumbnail_Using_the_AMP-list_component.jpg

Using_the_AMP-list_component.jpg

Using the Amp-List Component in Email Campaigns

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.


Blog