More than [**390 billion emails**](https://www.emailtooltester.com/en/blog/how-many-emails-are-sent-per-day/) are sent worldwide every day. For businesses, this can mean dozens or even hundreds of email campaigns that need to be created and sent regularly.

However, building every email from scratch is time-consuming and requires significant resources. On top of that, when several different people work on campaigns without clear guidelines, this poses a risk of losing consistency and uniformity.

A master template addresses these issues systematically: it serves as a shared foundation for creating emails faster while maintaining a consistent style. In this article, we take a look at what master templates are, what makes them useful, and which master template creation features are available in the Pixcraft email builder.

## What Is a Master Template

A master template can be described as a full-fledged foundation for creating email campaigns. Unlike a regular email template, it serves not as a single message but as a library of prepared blocks that can be used to assemble emails for various scenarios.

What are the benefits of a master template?

- **Faster email production.** When a master template is used, the team only needs to select the appropriate structure, add content, and adapt the blocks to a specific campaign instead of creating every element from scratch. 
- **Consistent style and brand recognition.** A master template establishes the design logic for the main email components. Visual rules for fonts, colors, headings, spacing, and element placement make campaigns more consistent. 
- **Lower risk of errors.** Although a master template does not eliminate the need to test emails before sending them, it can reduce the likelihood of errors because the template elements have already been checked beforehand.

## Which Components Does a Master Template Include

A typical master template contains several block variations divided into categories according to their purpose. Its composition depends on the company’s area of business, the types of emails it sends, and the frequency of its campaigns.

A master template may include the following elements:

- **System blocks.** These include a preheader, header, footer, contact details, social media icons, and other basic elements of email campaigns.

<Img
img="/api/uploads/01_headerfootersocial_f41b92adf4.png"
alt="System blocks"
/>

- **Hero blocks.** Large email elements that are the first to attract the reader’s attention. They usually contain a heading, a brief description, an image, a primary button, and sometimes additional links.

<Img
img="/api/uploads/02_herobloki_847d2adca5.png"
alt="Hero blocks"
/>

- **Content blocks.** These may include text sections, article cards, tips, quotations, lists, link collections, FAQs, or sections with additional materials.

<Img
img="/api/uploads/03_kontentbloki_cd71fbf51e.png"
alt="Content blocks"
/>

- **E-commerce and promotional blocks.** Online stores and services that regularly run promotions may require product cards, product grids, category blocks, coupons, promo codes, recommendation collections, abandoned cart sections, and blocks describing delivery terms.

<Img
img="/api/uploads/04_kartochkitov_37de133e61.png"
alt="E-commerce and promotional blocks"
/>

- **Trust / social proof.** Reviews, ratings, customer quotations, expert comments, case studies, certificates, “how it works” blocks, and answers to common objections strengthen an email when used appropriately.

<Img
img="/api/uploads/05_socproofblocks_9646fe10c6.png"
alt="Social proof blocks"
/>

- **Interactive AMP blocks.** Image carousels, [**NPS surveys**](https://pixcraft.io/blog/nps-surveys-whats-their-purpose-and-how-to-implement-them-in-pixcraft), dynamic product collections, or interactive feedback forms may also be included for certain scenarios.

<Img
img="/api/uploads/06_ampinteractblocks_3e0f4ace36.png"
alt="Interactive AMP blocks"
/>

- **Bento blocks.** A bento grid is a card-based composition in which content is arranged across rectangular or square cells of different sizes. A single section may combine a large block containing the main message, smaller benefit cards, a product image, a review, and a [**CTA**](https://pixcraft.io/blog/how-to-increase-email-click-through-rates-with-the-right-ctas).

Each block is usually designed in several versions: for example, with one or several columns, with or without images, in different color schemes (if that falls in line with the [**design system**](https://pixcraft.io/blog/developing-a-guideline-in-figma-components-variants-and-variables)), and so on.

As for bento blocks, they should not replace every other block in a master template. Bento is just one of the options, suitable for content-rich emails that need to present several ideas while preserving order and visual hierarchy.

In web design, bento layouts are often based on flexible grids. However, email clients handle modern CSS properties differently. For this reason, bento in email templates should be treated primarily as a visual principle: cards, hierarchy, balanced spacing, a clear structure, and [**adaptation for mobile devices**](https://pixcraft.io/blog/mobile-email-adaptation-how-to-ensure-proper-rendering-across-different-devices-and-email-clients).

## What to Consider When Creating a Master Template

### Identify Email Types and Repeated Elements

Start by reviewing which emails the brand already sends and which ones it plans to launch in the future. For each email type, determine its purpose, basic structure, and sending frequency. Priority should first be given to the main elements, such as the header, footer, buttons, cards, promotional blocks, product grids, dividers, and so on.

### Divide Blocks Into Categories

To prevent the master template from becoming disorganized, blocks should be arranged into groups (for example, system, hero, content, product, and transactional blocks). When a team uses internal names such as `promo_card_v2`, everyone involved in the process should agree on clear and understandable naming conventions.

### Prepare Variations for Different Scenarios

As noted above, a single block does not always fit every task. Variations are therefore often required. To avoid confusion, start with a set that covers the needs of current campaigns and expand it when necessary.

### Test Responsiveness and Dark Mode Display

Each block should be tested as part of an email: check how it behaves on mobile devices, what happens when a heading is long, whether the grid retains its structure, whether the text remains readable, and whether the logo is still visible in [**dark mode**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it).

When bento is used, particular attention should be paid to the mobile version. On a narrow screen, cards will usually need to form a clear vertical sequence while preserving their meaning: for example, the main message first, followed by supporting arguments and the call to action.

### Establish Usage Guidelines

Finally, describe the basic rules for working with the blocks: which limits apply (such as character number limits), which elements can be changed and how, which campaigns should use particular blocks, and so on. It’s not always necessary to create an extensive guide. In some cases, a short instruction covering the block types is sufficient.

## How to Tie a Master Template With the Website Style

A good practice is to base the master template on the visual language the brand already uses on its website, in its mobile app, in advertising materials, and on social media. Shared stylistic elements, including image and button design, element structure, and [**typography**](https://pixcraft.io/blog/typography-in-email-how-to-make-text-more-effective), emphasize consistency across communication channels.

In this case, the website serves as a source of patterns whose design principles can be transferred to email components. For example:

- a large hero section on the home page can be adapted into the first content block; 
- product cards can be converted into a product grid; 
- feature cards can be adapted into a benefits block; 
- a bento section can become a card-based composition for an announcement; 
- the website footer can be converted into an email footer containing contact details, legal information, and an unsubscribe link.

However, this doesn’t mean that you need to make a literal copy of a website. Email clients do not process HTML and CSS in the same way as browsers. This needs to be considered when adapting elements to the email format.

## How to Create Master Templates Using Pixcraft

The Pixcraft email builder offers features for both convenient email creation and working with master templates. In particular, master templates can be created in several ways.

### Saving Custom Blocks

Pixcraft users can save their own blocks for use in future emails. To do this, select the required block and click the star icon. The block will then be added to “Saved blocks.”

<Img
img="/api/uploads/07_savecustomblocks_515785dad4.png"
alt="Saving custom blocks"
/>

The saved block will be available in any other campaign created within the current project: simply select it, add it to the canvas, and edit the block as required. This is especially convenient for components that are used in numerous emails without significant changes.

### Creating a Master Template in the Builder

A master template can be assembled in Pixcraft as a base email containing prepared block categories for future campaigns. When working on a new email template, you can:

- create a copy of the master template, keep only the required blocks, and delete the ones that are not needed for the current email; 
- use the block-saving feature described above by saving only the currently required components and adding them to the new template.

### Using Ready-Made Templates

Pixcraft features a [**template gallery**](https://pixcraft.io/templates) that contains a variety of templates for different campaign types, occasions, and industries. Their components can serve as the foundation for your master template: select the required email elements and use their structure and design as the basis for your own blocks.

### Creating a Master Template in Figma

If your team uses Figma to design email campaigns, give our [**dedicated plugin**](https://pixcraft.io/figma) a try: it can turn an email layout into a complete master template. Save your own assets in the library and organize them into categories for quick and convenient access in the future.

**To save time on creating a master template, order one from the Pixcraft specialists! [Contact us](mailto:team@pixcraft.io), and we'll create a convenient, customized master template that fully meets your needs and wishes.**

## Which Mistakes Should Be Avoided When Working With a Master Template

- **Master template gets overloaded.** The more blocks it contains, the harder it becomes to navigate, especially when the elements are not grouped. Therefore, the best option is to start with a compact set that covers the main scenarios and add new blocks as needed. 
- **Emails are not tested after assembly.** Even a well-designed master template does not guarantee that an email will display without errors. Replacing content may result in broken links, large image files, nonfunctional buttons, and other issues. This means that email testing remains an essential part of the process. 
- **The website design is copied without adaptation.** As noted above, adapting a website style means preserving brand recognition rather than creating an exact copy of every section. Complex grids, hover effects, custom fonts, and multi-level cards may look good on a website but perform poorly in an email client. 
- **Master template is not updated.** A brand’s style may change over time, including its colors, tone of communication, and approach to visual design. Without timely updates, the master template becomes outdated.

## Conclusion

A proper master template addresses the team’s current needs. It does not contain unnecessary blocks simply for the sake of quantity, but instead includes everything required for regular campaigns. It reflects the brand’s style and creates a consistent foundation for a wide variety of emails.

Pixcraft serves as your assistant for working with both emails and master templates. Create them in accordance with your brand guidelines, save your own blocks, configure styles, and test how email elements appear on mobile screens and in dark mode.

To make an informed decision, [**sign up today**](https://app.pixcraft.io/user/register) and try Pixcraft for free for 14 days. And if you have any questions, simply [**contact our team**](mailto:experts@pixcraft.io).

_Facebook is owned by Meta Platforms Inc., recognized as an extremist organization and banned in the Russian Federation._

_Access to the social network X (formerly Twitter) is restricted in the Russian Federation._

In this article, we'll discuss the benefits of master email templates and how to work with them in the Pixcraft visual email builder.

small_Обложка Pixcraft (2) (1).png

thumbnail_Обложка Pixcraft (2) (1).png

Обложка Pixcraft (2) (1).png

Email Master Templates: What’s Their Purpose and How to Work With Them

We have released a major Pixcraft update, one of the largest in the history of our service. The changes affect the interface and the functionality of both the email builder and the Figma plugin.

In this article, we’ll take a look at what has changed, which new features have been added, and which existing features have been improved.

## Working With Email Templates

### Updated Workspace Screen

Perhaps the most noticeable change is the redesigned workspace screen, which contains the list of your templates. The interface is now more concise yet informative, while navigation has become significantly more convenient.

<Img
img="/api/uploads/01_interface_40fc19f00e.png"
alt="Updated workspace"
/>

### Template Preview

In earlier versions of Pixcraft, email previews were available only inside the builder itself. To evaluate how the template looks, you first had to open it in the editor and then switch to the “Preview” mode.

The latest update introduces the option to preview email templates directly from the list in the main workspace. This feature is particularly useful when you need to quickly review or compare several emails.

Here is how it works: hover the cursor over a template, and the email will become slightly larger on the screen and scroll up and down as you move the cursor vertically. As soon as you move the cursor away, the email will return to its original size.

<Img
img="/api/uploads/02_prevwanimation_87ddcf7fd8.gif"
alt="Email preview in the list"
/>

### Tag System

You can now add custom tags to templates and AMP components, making navigation and search easier.

The tag names are defined by the user. For example, you may specify the template type (such as a triggered email, promotional email, or regular newsletter), its association with a particular campaign, the name of the employee who worked on the email, or any other relevant information.

Adding a tag is easy. Click the three vertical dots below a template or next to an AMP component to open the context menu. After that, simply select "Edit tags" and create a new tag or assign an existing one from the list.

<Img
img="/api/uploads/03_tagsnew_4878cf1159.png"
alt="Tags in the templates list"
/>

### Sending Test Emails

One of the most important updates in the Pixcraft email builder is the “Send test” feature, which allows you to check how a template appears in the required email clients [**before launching the campaign**](https://pixcraft.io/blog/checklist-what-to-test-before-sending-an-email).

The "Send test" icon is located in the upper-left panel next to the “Preview”, “Export”, and “Save” buttons. Click it to open a window where you can select a test address from the list or enter a new one. Then send the email to the selected inbox and make sure the received version of the template matches the intended design.

<Img
img="/api/uploads/04_testemailsend_0283b348f2.png"
alt="Testing the emails"
/>

### Updated Export and Integrations Panel

The template export section has been substantially redesigned: we updated the export panel to make it much more visually comfortable to use. On top of that, we added an option to compress the code when exporting an email. You can enable or disable it using the corresponding toggle.

<Img
img="/api/uploads/05_emailexportnew_a97f92a5fa.png"
alt="Template export"
/>

The ESP integration interface has also been redesigned, becoming more intuitive. You can configure a connection to the required platform either through the "Export" function in the builder or in the "Integrations" section on the main screen.

<Img
img="/api/uploads/06_espintegrationcreate_fb9829821c.png"
alt="ESP integrations"
/>

### Assets Separated by Project

The next update affects custom assets that can be saved while working on a template. They are now stored separately within each project and are no longer mixed with custom blocks from other projects.

This separation is particularly relevant for teams that work with several brands, products, or business areas at the same time. Elements are no longer mixed in a shared library, and each project contains only the set of user blocks associated with its current list of emails.

The number of available projects depends on your pricing plan: 1 project on Personal, up to 3 projects on Starter, and up to 10 projects on Pro.

## Flexible Access Permission Settings

Pixcraft users can invite participants to projects and assign them the required roles, such as moderator or viewer. The update introduces detailed permission management for invited participants: now you can grant only the permissions required in each individual case.

Access permissions can be configured for:

- templates; 
- components; 
- assets; 
- integrations; 
- file storages; 
- statistics; 
- test emails.

<Img
img="/api/uploads/07_categoriespermissions_aabe3feda8.png"
alt="Access permissions"
/>

You decide which permissions to grant. For example, one employee can receive permission to edit templates while being restricted from editing and moderating components. At the same time, another employee can be given access only to view statistics, without permission to edit materials.

## Monitoring Pricing Plan Limits

The pricing plan menu is located in the "Your plan" section in the lower-left corner. It displays the plan’s validity period, as well as the number of available users, created projects, templates, exports, and AMP events.

<Img
img="/api/uploads/08_planandbilling_d745be68d9.png"
alt="Plan limits"
/>

Keep in mind that the selected pricing plan conditions apply to the entire workspace and are not calculated separately for each project or user. For example, the Starter plan includes up to 3 projects and 300 templates, as well as 300 template exports per month. In this case:

- If you create 200 templates within one project, only 100 templates in total will remain available for the other two projects. 
- Exports are counted according to the same principle: 300 monthly exports are shared among all project participants rather than being allocated separately to each participant.

## Analytics

Previously, Pixcraft already included analytics for AMP emails. Yet the latest update has expanded the service’s capabilities and made its analytics independent of third-party solutions:

- First, you can now add analytics both to templates created in Pixcraft and to templates built manually. 
- Second, analytics now operates entirely within the Pixcraft environment. Integration with Google Analytics or Yandex Metrica is no longer required.

Statistics tracking for emails created in the builder is enabled during export. You can choose to collect statistics on opens and time spent in the email. The "Analytics" section displays all emails exported with event collection enabled. You can also create a new campaign directly in this section.

<Img
img="/api/uploads/09_analyticslist_941284ce80.png"
alt="Analytics"
/>

Custom events are created and operate in Pixcraft in a way similar to Google Analytics. As mentioned above, no third-party services need to be connected. You can create and edit events and track the associated actions directly in the interface.

<Img
img="/api/uploads/10_customevents_6417437689.png"
alt="Custom events"
/>

Report charts are updated automatically for all current events. Opens are tracked for both HTML and AMP emails. Separate charts are available for average time spent in an email, along with cohort retention analysis for AMP emails.

<Img
img="/api/uploads/11_graphsanalytics_fe7eecb147.png"
alt="Report charts"
/>

## AMP Components

AMP component settings have become even more flexible and detailed. In particular, you can now change the set of fields they contain, creating the required component variations depending on the email campaign.

<Img
img="/api/uploads/12_ampfieldsselect_01fbd7e087.png"
alt="AMP component settings"
/>

You can also define validation rules for fields. For example, validation can be configured for an email address or phone number.

<Img
img="/api/uploads/13_ampvalidation_6a632a5983.png"
alt="AMP fields validation"
/>

### Telegram Integration

Previously, webhooks were the only option available for quickly processing messages from AMP forms and the [**Interactive stream**](https://pixcraft.io/blog/interactive-stream-in-amp-emails-next-level-of-engagement). With the latest update, you can now also use direct integration with Telegram.

The integration is configured through a [**dedicated bot**](https://t.me/pixcraft_forms_bot). For example, you can add it to your own group and configure it to send notifications directly there.

No need to worry if you already use webhooks: they remain available and continue to work as before.

## Figma Plugin

The changes also affect the [**Pixcraft plugin for Figma**](https://pixcraft.io/figma). Here, project support has been added: by default, the plugin uses the project you previously worked in, while another project can be selected from the user menu.

<Img
img="/api/uploads/14_figmaprojects_95b1f0966f.png"
alt="Pixcraft plugin for Figma"
/>

The export and integrations panel has also been updated. Its appearance now matches the corresponding panel in the Pixcraft builder and includes the same visual improvements and code compression option.

<Img
img="/api/uploads/15_figmaexport_33664fec0f.png"
alt="Export screen in Figma plugin"
/>

When you export a layout through the Figma plugin, it automatically appears in the template list of the current project and is marked with the corresponding icon.

<Img
img="/api/uploads/16_figmaicontemplate_1b54726509.png"
alt="Template in a list"
/>

## Other Changes

The list of new features does not end there. In addition to the major updates, the following technical improvements have been introduced in Pixcraft:

- Email templates are now saved several times faster. You no longer need to wait for a lengthy loading process after making substantial changes. 
- Automatic lossless PNG image compression has been added. Compression is performed when an image is uploaded. The same mechanism is applied to templates created in Figma using the plugin. 
- The service’s stability, fault tolerance, security, and overall performance have also been improved.

## Conclusion

The major Pixcraft update makes working on emails easier at every stage, from preparing a layout to testing, exporting, and analyzing the results. Try the new features yourself: [**create an account**](https://app.pixcraft.io/user/register) and receive free access to Pixcraft for 14 days.

Learn more about the new functionality of the Pixcraft email builder and the Pixcraft plugin for Figma: what's changed with the latest update, what new features have been added, and how existing ones have been upgraded.

small_updates_cover (1).png

thumbnail_updates_cover (1).png

updates_cover (1).png

Pixcraft Update: What New Features and Improvements Have Been Introduced

In 2026, [**over 55%**](https://genesysgrowth.com/blog/mobile-email-engagement-stats-for-marketing-leaders) of emails are read on smartphones and tablets. This means that email campaigns must remain visually solid and structurally sound on both desktop and mobile devices.

But how do you craft email templates that adapt correctly to different screen sizes and devices? And what factors should be considered to ensure that these templates render equally well across various email clients? Read this article to find out.

## What Specifics Should Be Considered When Adapting Emails

Unlike browsers, whose rendering engines have largely evolved according to mostly unified standards, email clients represent an extremely diverse environment. The rules and limitations here may vary drastically, and classic adaptation methods won't always work as expected.

### Media Queries

In web development, media queries are the cornerstone of adaptability. They allow you to change how content is displayed depending on screen width, orientation (portrait or landscape), [**pixel density**](https://pixcraft.io/blog/email-adaptation-for-retina-displays-how-it-works-and-what-to-consider), and color scheme (light or dark). For example, it’s possible to switch from a two-column layout to a single-column layout at a certain window width.

However, when it comes to email clients, the situation is quite different. [**Not all clients**](https://www.caniemail.com/features/css-at-media/) work properly with media queries: some support media queries only partially while others do not support them at all. Therefore, media queries should not be considered the primary adaptation mechanism in professional email coding.

Two of the most prominent examples are Yandex Mail and the mobile web version of Gmail. Media queries do not work here, so an email that relies strictly on those might lose adaptability (and sometimes readability).

### Mobile First Approach in Emails

The Mobile First approach deserves a special mention. Its core idea is that the email or a webpage is initially coded with smaller screens in mind and then adapted for desktops and laptops using media queries. In email design, for instance, the [**MJML**](https://pixcraft.io/blog/email-frameworks-mjml-vs-tjml) framework uses this approach.

But if media queries aren’t supported, the desktop view will display the mobile version of the email. For example, you may encounter this problem when opening a campaign in Yandex Mail. Therefore, relying on the Mobile First approach (especially for email campaigns in Russia) is not the best option.

## How Does Reliable Mobile Adaptation Work

For proper mobile adaptation, a suitable option would be the “table-block” approach combined with careful, targeted use of media queries. In short, this approach works as follows: 

- table structures form the backbone of the email; 
- adaptive blocks inside tables are implemented using CSS properties that most email clients understand; 
- media queries are used only for cosmetic improvements; 
- conditional comments provide a fallback structure for Outlook.

Let's break down each layer of this approach.

### Tables as the Foundation

A table structure (`<table>`) behaves predictably in email and is supported by the majority of email clients. Tables define the external grid of the email: width, placement of main sections, background colors. 

By default, the table structure describes a desktop layout that should display if adaptation does not occur. Thus, in environments lacking media query or modern CSS property support, the recipient is guaranteed to see a correct desktop layout.

### Blocks for Adaptation Without Media Queries

The main ingredient enabling mobile rearrangement even in the absence of media queries is a simple `div` with the attribute:

`style="display: inline-block"`

Elements with `inline-block` align horizontally as long as there is enough width in the parent container. If space is insufficient, the last element wraps to the next line. This approach works reliably in Yandex Mail, the mobile web version of Gmail, and other email clients.

In practice, basic mobile adaptation looks like this.

Suppose the desktop version of an email has two columns of 300px each with no margins. They fit inside a 600px wide container. But in a mobile client, the available width might be, say, 430px. Here, the columns no longer fit side by side and instead automatically stack vertically.

<Img
img="/api/uploads/01_mobileadapt_e950bd44fd.png"
alt="Email mobile adaptation"
/>

### Media Queries as a Fine-Tuning Layer

Sometimes after rearrangement, blocks retain empty space on the left or right. This happens because the blocks do not stretch on their own; instead, they retain the width originally set for the desktop.

In this situation, media queries can help. They allow you to:

- change block widths to 100% so they fill the screen evenly;

<Img
img="/api/uploads/02_variousadapt_ad5519f7ea.png"
alt="Adaptation with and without media queries"
/>

- adjust alignment (for example, switch from left to center alignment); 
- hide or swap elements (e.g., show a horizontal banner in the desktop version and a square one on mobile when the media query triggers);

<Img
img="/api/uploads/03_differentbanners_588cae0ea2.png"
alt="Banners in desktop and mobile versions of an email"
/>

- transform margins and paddings: collapse unnecessary gaps, turn horizontal dividers into vertical ones.

<Img
img="/api/uploads/04_reshapecolumns_9b100f8f09.png"
alt="Rearrangement in a mobile version of an email"
/>

It is also crucial that in case media queries are not supported, the recipient will see the "basic" adaptation of an email: slightly less polished, but still fully functional.

### Conditional Comments for Outlook

Although desktop Outlook is not directly related to mobile email coding, it may become an important factor for splitting the desktop display logic and the mobile adaptation logic into two parallel tracks.

The reason is as follows: 

- Outlook renders emails using the Word engine, which ignores most CSS properties necessary for adaptive behavior. 
- Consequently, classic content rearrangement methods (such as `inline-block`, `float`, `flex`, and `grid`) either work unpredictably or do not work at all. 

For the B2B segment, where Outlook is one of the most widely used email clients, a loss of quality can be critical for the entire communication flow.

This requires an approach where desktop Outlook receives a separate structure, while other email clients work with adaptive blocks. To correctly render complex elements here, special code fragments — conditional comments — are used: 

``

Inside them, part of the structure is usually built using tables: for example, a multi-column block that relies on `inline-block` in other clients is broken down into a separate table row with cells.

Simply put, desktop Outlook receives a simplified, fully table-based layout and renders it reliably and predictably. The other clients ignore the conditional comments and work with the block-based model.

## How Margins and Paddings May Behave On Mobile (and What to Do About It)

The problem with margins and paddings arises because the same layout is implemented in three versions: a block-based version with `inline-block` (basic adaptation), an enhanced block version with media queries, and a table-based version for Outlook.

Suppose the desktop email has two columns. The left column has a right padding (`padding-right`).

- In the table-based layout for Outlook, the padding works correctly. 
- On mobile, columns stack vertically. The right padding of the left column persists, which leads to extra empty space to its right.

<Img
img="/api/uploads/05_indentright_b1c81e4cfc.png"
alt="Padding to the right"
/>

There are three solutions here: 

- Make the paddings symmetrical: add equal left and right paddings to each element (e.g., product cards) and set center alignment on the parent element. In this case, blocks will be centered when they wrap.

<Img
img="/api/uploads/06_indentsboth_bb413b2235.png"
alt="Symmetrical paddings"
/>

The downside here is that the cards won’t take the full screen width and will not touch the left and right edges: margins will always remain on the sides. Therefore, this solution works only in cases where the design permits it. 
- Keep the asymmetrical right padding and set left alignment. In this case, the rearranged blocks will align to the left edge, and the "extra" padding will simply remain to the right, preserving a uniform content width.

<Img
img="/api/uploads/07_indentadapt_104174060b.png"
alt="Left alignment in an email"
/>

- Remove the padding in the mobile version using media queries. However, this is not the most reliable method because if the email client does not support media queries, the padding will remain. 

## How Mobile Adaptation Works for AMP Emails

The AMP for Email technology is supported only in modern email clients, such as [**Gmail and Mail.ru**](https://pixcraft.io/blog/amp-emails-how-their-rendering-differs-between-email-clients). AMP emails do not require special workarounds: almost all CSS features are available here, including `flex`, `grid`, and media queries.

The use of tables in AMP essentially serves no purpose: they bloat the markup and make maintenance harder. At the same time, semantic block-based layouts offer both flexibility and performance.

It should be noted that AMP does not eliminate the need for a classic HTML fallback. Including an HTML version within an AMP email is a mandatory requirement.

## How Mobile Adaptation of Email Templates Works in Pixcraft

Automatic email adaptation is implemented in the Pixcraft email builder. We combine approaches depending on the selected adaptation mode. As a result, blocks rearrange neatly without losing visual structure even when media queries are not supported.

For email clients that support media queries, the editor provides various adaptation scenarios. For example, you can:

- set columns to stretch to full screen width or keep them unstretched after rearrangement; 
- choose more complex rearrangement schemes (e.g., place one column with stretching into a separate row, and two other columns below it without stretching).

## Conclusion

In email coding, adaptability is built using several layers. First, you lay the most reliable foundation that works for the majority of email clients, and then add enhancements for clients with broader capabilities. This strategy ensures predictable results across different devices and email clients.

The Pixcraft email builder follows these principles in its operational logic. [**Try it**](https://app.pixcraft.io/user/register) for free for 14 days and see for yourself. And if you'd like to learn more about Pixcraft, feel free to [**contact us**](mailto:experts@pixcraft.io).

In this article, we discuss the mobile adaptation of emails: what techniques to use, what nuances to consider, and how it works in Pixcraft.

small_adapt_cover.png

thumbnail_adapt_cover.png

adapt_cover.png

Mobile Email Adaptation: How to Ensure Proper Rendering Across Different Devices and Email Clients

We continue our series of articles comparing **Pixcraft** with other solutions on the market. Previously, we already compared our email builder with [**Beefree**](https://pixcraft.io/blog/beefree-vs-pixcraft-which-tool-to-choose-for-your-email-campaigns), [**Letteros**](https://pixcraft.io/blog/pixcraft-vs-letteros-testing-the-capabilities-of-email-builders), and [**TOPOL**](https://pixcraft.io/blog/pixcraft-vs-topol-how-the-approach-to-email-design-differs-between-email-builders). Now, it is time to take a look at **Stripo**, one of the most popular email builders.

What are the differences between **Pixcraft** and **Stripo**? And how do they manifest in practice? Read this article to find out.

## Availability in the Russian Market

Before we move on to the capabilities of email builders, it is necessary to mention the regional restrictions of **Stripo**. Officially, the service does not work with Russian businesses and individual users:

- payments from Russian bank cards, as well as through payment systems if the billing address is in Russia, are not accepted; 
- invoices are not issued through financial institutions and payment systems that are residents of Russia or operate within its territory; 
- claims and complaints from Russian users are not processed.

For these reasons, full use of **Stripo** in Russia becomes impossible.

In turn, **Pixcraft** is a product developed in Russia and included in the country’s [**Register of Domestic Software**](https://reestr.digital.gov.ru/reestr/2993128/?sphrase_id=18372541). It is created for both Russian and international users:

- the email template builder is suitable for businesses, agencies, and freelancers; 
- for corporate clients, **Pixcraft** offers pricing plans with advanced features, as well as On-Premises deployment.

## Basic Template Editing Capabilities

At their core, both **Pixcraft** and **Stripo** are flexible builders for creating email campaigns with different levels of complexity:

- both email builders operate according to the drag-and-drop principle: components can be moved freely inside the template and adapted for a specific campaign; 
- properties can be configured for individual components and their groups (for example, blocks, stripes, or columns); 
- email templates can be created from scratch, with the help of ready-made templates from the gallery, or by using predesigned components: **Pixcraft** provides Assets, while **Stripo** offers Structures and Modules.

<Gallery>
<GalleryItem
original="/api/uploads/001_px_assetsmenu_63002f0b3d.png" 
thumbnail="/api/uploads/001_px_assetsmenu_63002f0b3d.png" 
/>
<GalleryItem
original="/api/uploads/002_strpstruct_and_mod_cdd151d389.png" 
thumbnail="/api/uploads/002_strpstruct_and_mod_cdd151d389.png" 
/>
</Gallery>

Preview mode in both **Pixcraft** and **Stripo** allows users to evaluate desktop and mobile versions of the email in both light and dark themes. At the same time:

- In addition to the standard dark mode, **Pixcraft** allows you to view emails in Gmail's dark theme on iOS, which has its own color inversion rules. The mobile version can also be checked more precisely by adjusting the screen width.

<Img
img="/api/uploads/003_px_prvwmenu_b539412b20.png"
alt="Template preview in Pixcraft"
/>

- **Stripo** includes the option to edit the mobile version of the template directly (although these changes also affect the desktop version). Additionally, you can send a test email to your own email address.

<Img
img="/api/uploads/004_strpprvw_e38f5545ab.png"
alt="Template preview in Stripo"
/>

## AMP Capabilities

Interactive AMP components are a full-fledged part of the **Pixcraft** builder. In particular, these components are available directly in the builder interface:

- **Carousel** for creating image galleries with the ability to scroll through images and loop the scrolling.

<Img
img="/api/uploads/005_px_ampcarousel_c4e1ca8a26.png"
alt="AMP Carousel in Pixcraft"
/>

- **Forms** for surveying the recipients and collecting feedback. There is no need to configure data collection and storage separately: responses are automatically gathered and stored in **Pixcraft**. When necessary, webhooks can also be connected to transfer form data to external services such as a Telegram bot or a CRM system.

<Img
img="/api/uploads/006_px_ampform_0ae922da32.png"
alt="AMP Form in Pixcraft"
/>

But **Pixcraft’s** AMP capabilities are not limited to these two components alone. The email builder includes additional components that can be configured separately and then connected to emails:

- **Amp-Form** to create advanced survey forms; 
- the interactive **AMP-Link** for sign-up or subscription confirmation without closing the email; 
- **Interactive Stream** to turn the email into a mini forum by adding a comment section; 
- the **Amp-List** component for updating the email content in real time.

<Img
img="/api/uploads/007_px_components_08736a7d17.png"
alt="Additional AMP components in Pixcraft"
/>

**Stripo** also supports AMP functionality. While working on a template, you can add **Carousel**, **Form**, or **Accordion** (blocks with text, images, or buttons that can be expanded by clicking) to your email.

<Gallery>
<GalleryItem
original="/api/uploads/008_strpcarousl_37f76ab3c6.png" 
thumbnail="/api/uploads/008_strpcarousl_37f76ab3c6.png" 
/>
<GalleryItem
original="/api/uploads/0109_strpform_585432f5ad.png" 
thumbnail="/api/uploads/0109_strpform_585432f5ad.png" 
/>
<GalleryItem
original="/api/uploads/010_strpaccord_f73919d353.png" 
thumbnail="/api/uploads/010_strpaccord_f73919d353.png" 
/>
</Gallery>

However, the creation of additional components is not supported by the built-in functionality: these need to be created manually using code.

## Bulk Editing of Elements

Imagine a situation: you are working on an email template that contains numerous links. These need to be checked and, if necessary, replaced. But manual checking takes a lot of time and is inconvenient since it is easy to miss something.

For such cases, **Pixcraft** includes the **Link Map**: here, you can find all email components that contain links (buttons, text fragments, or images), conveniently check and edit them. And if you need to find the component inside the email, this can be done using the target icon.

<Img
img="/api/uploads/011_px_linkmap_88950d806e.png"
alt="Link Map in Pixcraft"
/>

But what if you need to change, for example, the formatting of headings or buttons? This is where the **Styles** tool becomes useful. It allows you to configure the style of the required text or buttons in bulk (including color, border radius, and other parameters). And, of course, all changes are immediately displayed in the email template.

<Img
img="/api/uploads/012_px_styles_12cb8cc6c9.png"
alt="Styles in Pixcraft"
/>

In the **Stripo** email builder, bulk editing works differently. The **Global Styles and Layout** feature allows you to change the appearance of headings, buttons, and stripes, including setting text parameters separately for headers, footers, content, and the info area.

<Img
img="/api/uploads/013_strpglobstyles_1281cae678.png"
alt="Global Styles and Layout in Stripo"
/>

Yet at the same time, **Stripo** does not offer a dedicated tool for editing links in the email. You will have to go through the entire template manually, selecting each element one by one and making the necessary adjustments.

## ESP Integrations

When it comes to integrations, **Stripo** offers compatibility with dozens of different ESPs: from popular international platforms (such as ActiveCampaign, Mailchimp, Moosend, and Klaviyo) to more niche solutions. If the required platform is not on the list, you can request its addition.

It is worth noting that direct export to ESPs is available only on paid plans.

<Img
img="/api/uploads/014_strpesp_5140dc2a29.png"
alt="ESP integrations in Stripo"
/>

**Pixcraft** is also compatible with popular international ESPs, including Mailchimp, Klaviyo, and SendGrid. But for Russian users, the main advantage lies in its integrations with domestic solutions, such as [**Altcraft**](https://altcraft.com), Unisender, SendSay, DashaMail, and others.

<Img
img="/api/uploads/15_pxesp_681697a930.png"
alt="ESP integrations in Pixcraft"
/>

Ready-made integrations with popular Russian services simplify work and make it possible to start sending email campaigns immediately through a suitable platform, without lengthy setup from scratch.

## Social Media Logos

It is hard to imagine a modern marketing email without links to a company’s or brand’s resources. That is why sets of social media icons are available in many email builders, including **Pixcraft** and **Stripo**.

**Pixcraft** offers not only the library of logos itself, but also tools for their personalization. The icon library features both international and Russian social networks and messengers, including VK, Dzen, and Rutube.

You can change the appearance of logos as required: from the shape and size of the icon to its color (or even the color of the logo inside it). In other words, each icon can be adapted to the unique style of a specific email campaign.

<Img
img="/api/uploads/015_px_socialicons_bcc4826446.png"
alt="Social media icons in Pixcraft"
/>

The **Stripo** email builder also provides an extensive set of icons for social networks, messengers, and other platforms. However, it does not offer options for customizing their appearance.

The selected icon display style is chosen from a dropdown list. Several variations are available: for example, in the original colors of the corresponding platforms, black, gray, white, and so on.

<Img
img="/api/uploads/016_strpsocicn_1c59a9caa5.gif"
alt="Social media icons in Stripo"
/>

Size, spacing, and other standard parameters can be configured for the icons, but their colors, background, and borders correspond to the selected style. Icons with custom design will have to be created using a third-party editor.

## Rendering in Outlook and Yandex Mail

Finally, it is worth mentioning how emails are displayed in Outlook and Yandex Mail.

In Outlook, the **Stripo** template immediately faced several issues. First, on a 120 DPI screen, the display of borders in columns was broken. Second, the graphic element at the bottom of the email lost its background. In addition, extra lines appeared: they can be seen under the App Store and Google Play buttons.

<Img
img="/api/uploads/18_strpoutl_85e0efda34.png"
alt="Stripo template rendered in Outlook"
/>

The email is rendered as expected in the desktop Yandex Mail. But in the mobile client, the adaptation did not work: this is especially noticeable in how the columns are displayed.

<Img
img="/api/uploads/19_strpyand_de6a99fd93.png"
alt="Stripo template rendered in Yandex Mail mobile client"
/>

**Pixcraft** takes the specifics of Yandex Mail and Outlook into account. Email templates are adapted so that their rendering remains correct even when the email client does not support media queries or some of the CSS properties.

<Img
img="/api/uploads/20_pxyand_fbd2632ff3.jpg"
alt="Pixcraft template rendered in Yandex Mail mobile client"
/>

It is also worth mentioning mobile adaptation in the **Pixcraft** editor. You can directly configure how components are rearranged in the mobile version of the email: one column, two columns per row, or (when the block contains three columns) with one of them displayed in a separate row and the other two placed either above or below it.

<Img
img="/api/uploads/017_pxmbladapt_2bad90f352.png"
alt="Mobile adaptation settings in Pixcraft"
/>

## Conclusion

Both services have their own strengths:

- **Stripo** is a mature and well-established builder with broad capabilities for template creation, support for dozens of ESPs, and built-in sending of test emails. 
- **Pixcraft** offers similar flexibility when creating email templates. At the same time, it works more deeply with AMP, includes convenient tools for bulk editing of elements, and, most importantly, the email builder is fully available for Russian users.

Give **Pixcraft** a try: [**sign up**](https://app.pixcraft.io/user/register) today to receive a 14-day free trial. And if you have any questions regarding our email builder, contact us by [**email**](mailto:experts@pixcraft.io). 

_Facebook, Instagram, and WhatsApp are owned by Meta Platforms Inc., recognized as an extremist organization and banned in the Russian Federation._

_LinkedIn is blocked in the Russian Federation._

_Access to the social network X (formerly Twitter) is restricted in the Russian Federation._

In this article, we compare the capabilities of the Pixcraft and Stripo email builders: key features, AMP functionality, bulk editing of elements, and more.

small_pix_vs_strp_cover.png

thumbnail_pix_vs_strp_cover.png

pix_vs_strp_cover.png

Pixcraft vs Stripo: Which Email Builder to Choose

Choosing an email builder isn’t always an easy or straightforward task. Various tools may differ not only in obvious features but also in less noticeable — yet very important — details. Even subtle nuances may significantly affect how well a particular solution fits specific tasks.

Previously, we compared our email builder with [**Beefree**](https://pixcraft.io/blog/beefree-vs-pixcraft-which-tool-to-choose-for-your-email-campaigns) and [**Letteros**](https://pixcraft.io/blog/pixcraft-vs-letteros-testing-the-capabilities-of-email-builders). In this article, let’s take a closer look at how **Pixcraft** compares with **TOPOL**, focusing on the main differences between the two solutions.

## Basic Structure of Email Templates

In **Pixcraft**, email templates are created using either Primitives or ready-made Assets. Primitives are individual elements such as text, images, or interactive components. Assets are pre-assembled functional blocks (headers, footers, product cards, etc.) made up of several Primitives.

Regardless of whether you build an email from scratch, assemble it from Assets, or use a template from the [**gallery**](https://pixcraft.io/templates), flexibility remains the same. Any part of the email can be reworked for the current task: elements can be added or removed, their parameters adjusted, the number of columns changed, and much more.

You can edit blocks, columns, and each element within them. For example, if you need to change the properties of a column, simply select it and set the required values without the need to configure each element separately.

<Img
img="/api/uploads/001_pixcolumned_c1e32f9ad8.png"
alt="Pixcraft email builder interface"
/>

Both individual elements and entire stripes (horizontal sections that contain columns and elements) can be moved freely across the canvas. Columns within a single block can also be easily rearranged via drag-and-drop without dismantling and rebuilding them from scratch.

<Img
img="/api/uploads/002_pixcolrepl_9ea9a85e82.gif"
alt="Rearranging columns in Pixcraft"
/>

In **TOPOL**, the logic of email templates is based on Structures, each representing a separate row. Inside a Structure, Content elements are placed: these can be moved to different parts of the template and configured as required.

<Img
img="/api/uploads/03_topinterf_d2685acb81.png"
alt="TOPOL email builder interface"
/>

Reordering columns is also possible, though here, this is done through the settings of the selected structure and not directly on the canvas itself. The _Column’s properties_ option allows you to change column order within a row, as well as set alignment, border radius, background color, and other parameters.

<Img
img="/api/uploads/04_topcolprop_22e357ce7d.png"
alt="Column’s properties in TOPOL"
/>

## Mobile Responsiveness and Email Preview

**Pixcraft** provides tools for configuring mobile responsiveness directly in the editor. For example, you may choose how columns behave on mobile devices:

- a single column, either stretched to full width or without stretching; 
- a single row with reduced width; 
- for three columns — 1+2 (one column on a separate row with two below it) or 2+1 (two columns on the top row with the third below at full width); 
- for four columns — 2+2 (two columns per row).

<Img
img="/api/uploads/005_pixmobiladp_3fcb3cae52.png"
alt="Mobile adaptation options in Pixcraft"
/>

For email clients that do not support media queries, either block restructuring without stretching or simple width reduction without restructuring is used.

The preview mode allows for viewing both desktop and mobile versions of the email. You can check the template with AMP components enabled or disabled, as well as in light and [**dark modes**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it). This is especially important for emails with rich graphics, colored backgrounds, and accent elements.

The mobile preview width can be adjusted down to the pixel, making it easier to check layout accuracy and readability on different screen sizes. By clicking the _Screenshot_ button, you can save the template image in PNG format, which may come in handy for internal reviews or approvals.

<Img
img="/api/uploads/006_pixrszmbl_120ef3cb75.gif"
alt="Mobile version preview in Pixcraft"
/>

In **TOPOL**, preview is available directly within the editor and as a separate mode with the option to send a test email. Just like the desktop version of the template, the mobile version can be edited manually. It’s important to note that changes made in one version are synchronously applied to the other.

<Img
img="/api/uploads/07_topmobintf_afc9f49587.png"
alt="Mobile version of an email in TOPOL"
/>

**TOPOL** supports two column display scenarios for a mobile: stacking or compressing. Additionally, the _Fluid on mobile_ option in image settings controls scaling to screen width. Yet aside from that, no other options for adapting multi-column blocks for mobile are available.

<Img
img="/api/uploads/08_topmobeml_b8d04860bc.png"
alt="Settings for the mobile version of an email template in TOPOL"
/>

Both mobile and desktop previews are limited to a single fixed resolution, which cannot be changed. Dark mode preview is also not available, therefore correct rendering has to be checked using third-party services.

## AMP Capabilities

AMP components are included in the **Pixcraft** email builder alongside standard email elements. Among these is an AMP carousel that can contain up to 10 images. It offers two formats — a classic carousel and a slider — as well as looping and autoplay options.

<Img
img="/api/uploads/009_pxcrampcrsl_e7d76aaf8c.png"
alt="AMP carousel in Pixcraft"
/>

In addition to the image carousel, **Pixcraft** also includes AMP forms with flexible configuration options, from field types (text input, single or multiple choice) to visual presentation. Both the AMP forms and the AMP carousel are available as Primitives directly in the email builder interface.

<Img
img="/api/uploads/010_pxcrftform_0f2f86f7b3.png"
alt="AMP form in Pixcraft"
/>

Users can also create additional components that extend email campaign functionality. These include [**AMP-forward-link**](https://pixcraft.io/blog/amp-forward-link-how-to-confirm-actions-directly-in-the-email-client) for confirming actions without leaving the email, and an [**Interactive Stream**](https://pixcraft.io/blog/interactive-stream-in-amp-emails-next-level-of-engagement) that allows recipients to leave comments directly inside the email.

At the time of publication, **TOPOL** offers only a beta version of a carousel with support for up to five images. Settings include navigation arrows, image gallery options, border radius, and other parameters; autoplay and looping are not available. **TOPOL** does not currently provide information on whether additional AMP components are planned for implementation in the future.

<Img
img="/api/uploads/11_topcrsl_f863656031.png"
alt="Image carousel in TOPOL"
/>

## Comments in Templates

**Pixcraft** users can leave comments exactly where it makes most sense within the email. For example, a comment can be placed directly on a specific phrase in the text or on a particular part of an image that requires attention.

The _Comments_ tab in the left-side panel contains a complete list of all comments in the template along with replies. Searching for a specific comment in the layout is simple: click the target icon to immediately find the relevant spot.

<Img
img="/api/uploads/012_pxcrmnts_cf43ddfd39.png"
alt="Comments in Pixcraft"
/>

**TOPOL** takes a different approach. Here, comments are attached to a certain element without the option to specify an exact position. In order to leave a comment, users need to select an element, click the _Comment_ icon, and enter the text in the panel on the right.

<Img
img="/api/uploads/13_topcmnts_d36fcac4d8.png"
alt="Comments in TOPOL"
/>

Visually, the editor doesn’t indicate which elements contain comments. To view their list, you need to use the _Comments_ function in the top-right corner: it displays every comment in the template and, when you hover over them, highlights the associated elements.

## Email Export

**Pixcraft** provides several options to export a template: HTML (including the AMP version), EML, ZIP archive, or exporting the template directly to an email service provider. **TOPOL** supports HTML export, ZIP archive, saving a template in JSON format, or copying the code.

When it comes to built-in integrations with ESPs, by default, **Pixcraft** supports 11 platforms, while **TOPOL** supports 27. Both builders are compatible with popular international services such as Mailchimp, Klaviyo, and SendGrid. At the same time, Pixcraft also supports platforms such as [**Altcraft**](https://altcraft.com), Unisender, and Sendsay that are widely used in Russia and CIS countries.

## Links and Social Media

Both services provide convenient methods for basic work with links within the email. Differences become more noticeable when a single template contains numerous links spread across various blocks and elements.

In **TOPOL**, it’s not possible to view all links in an email at once. In order to check or edit them, you have to locate each link directly in the template one by one.

**Pixcraft**, on the other hand, includes a _Link Map_ tool that displays all links in a single list. This simplifies verification of emails with a large number of URLs in text, buttons, and banners. Links can be edited directly in the interface and quickly located on the canvas.

<Img
img="/api/uploads/014_pxcrftlnkmp_e312eba798.png"
alt="Link map in Pixcraft"
/>

Social media icons are also handled differently in both email editors. **TOPOL** includes a set of predefined icon styles, but if you require a custom icon, it has to be created and added manually. Built-in settings are limited to basic parameters such as size, alignment, and spacing.

<Img
img="/api/uploads/15_topsocmd_65544ca871.png"
alt="Social media icons in TOPOL"
/>

In contrast, **Pixcraft** allows for customization of social media icons directly in the interface. Settings include icon and logo colors, border radius, outlines, and other design details.

<Img
img="/api/uploads/016_pxcrftscicns_fa59bee41c.png"
alt="Social media icons settings in Pixcraft"
/>

## Rendering in Outlook and Yandex Mail

In **TOPOL**, mobile responsiveness relies on media queries, which may cause rendering issues in some email clients. For example, in the Yandex Mail mobile app, an email gets compressed, as seen in the screenshot below. Similar behavior may occur in the mobile web version of Gmail, where media queries are also not supported.

The first slide below shows how the email appears in Yandex Mail mobile app, and the second slide shows a screenshot from the tool's preview, demonstrating how the email is intended to adapt.

<Gallery>
<GalleryItem
original="/api/uploads/17_topadaptmobil_83cbdea3b9.jpg" 
thumbnail="/api/uploads/17_topadaptmobil_83cbdea3b9.jpg" 
/>
<GalleryItem
original="/api/uploads/18_tophowitsh_4d74f60f28.png" 
thumbnail="/api/uploads/18_tophowitsh_4d74f60f28.png" 
/>
</Gallery>

The desktop version of Outlook shows better results: the overall structure and block positioning remain intact. The only noticeable visual difference is the absence of rounded corners on buttons.

<Img
img="/api/uploads/19_topotlk_f687323974.png"
alt="TOPOL email template rendered in desktop Outlook"
/>

When it comes to template rendering, **Pixcraft** takes into account the nuances of different email clients to the maximum extent. As a result, templates maintain correct appearance even in environments that do not support media queries or certain CSS properties. The slides below show how an email created in **Pixcraft** is rendered in Yandex Mail mobile app and the desktop version of Outlook.

<Gallery>
<GalleryItem
original="/api/uploads/000_pixyanen_55d8dbd61d.jpg" 
thumbnail="/api/uploads/000_pixyanen_55d8dbd61d.jpg" 
/>
<GalleryItem
original="/api/uploads/000_pixoutlen_59f16fb879.png" 
thumbnail="/api/uploads/000_pixoutlen_59f16fb879.png" 
/>
</Gallery>

## Conclusion

Both **Pixcraft** and **TOPOL** email builders offer robust functionality for creating effective templates, but differ in details and overall approach to working with emails. These differences may become fundamental for choosing the tool that best matches your requirements and expectations.

One of the most reliable ways to make the right choice is to try a builder first-hand. [**Create a Pixcraft account**](https://app.pixcraft.io/user/register) today and get 14 days of free access to explore its capabilities. And if you want to learn more, feel free to [**contact us**](mailto:experts@pixcraft.io) and discuss any related details and questions. 

_Facebook and Instagram are owned by Meta Platforms Inc., recognized as an extremist organization and banned in the Russian Federation._

_LinkedIn is blocked in the Russian Federation._

_Access to the social network X (formerly Twitter) is restricted in the Russian Federation._

In this article, we compare the Pixcraft and TOPOL email builders: what are their approaches to creating email templates and what are the most noticeable differences between the two tools.

small_pixvstopcov (1) (1).png

thumbnail_pixvstopcov (1) (1).png

pixvstopcov (1) (1).png

Pixcraft vs TOPOL: How the Approach to Email Design Differs Between Email Builders

When creating AMP emails, it’s important to consider not only markup correctness but also the environment in which the email is opened and rendered. Email clients may interpret the same mechanics differently, which affects the behavior of components within the email template.

In this article, we examine the differences in how AMP templates are displayed in two email clients — Gmail and Mail.ru — as well as the limitations that must be taken into account during email development.

## States (amp-state) and Their Initial Values

States in AMP emails are used as variables that can store data and serve as a basis for conditional display logic. These values are substituted into attributes (`[text]`, `[class]`, and others) and are updated in response to user actions.

One important thing to note is that a value inside `<amp-state>` is applied only after the state is initialized via `AMP.setState`. If certain data needs to be shown immediately after the email is opened, it can be set as a regular element content or as a default attribute value:

```xml
default value
```

In this case, `default value` is displayed initially. After a user action, the value of `myItem.el` appears. The action itself can be arbitrary, including a purely formal one. For example:

```xml
<amp-state id="myItem">
 <script type="application/json">
 { "el": "new value" }
 </script>
</amp-state>
default value
<button on="tap:AMP.setState({})">Button</button>
```

In **Gmail**, this process works according to the specification. When the button is clicked, the state is initialized and the `` element displays `new value`.

**Mail.ru**, in contrast, doesn’t take the initial values defined in `<amp-state>` into account. Because of this, attributes that rely on default data will display `null` after initialization.

To work around this limitation, use `setState` instead of `<amp-state>` so that values are updated dynamically at the moment of user interaction:

```xml
<button on="tap:AMP.setState({ myItem: { el: 'new value' } })">
 Button
</button>
<div [text]="myItem.el">default value</div>
```

## Expression Size Limitations

Although the AMP specification doesn’t define any limits for `amp-bind`, **Mail.ru** enforces a strict limit on expression length — no more than **100**. The Pixcraft team encountered this limitation while developing the [**“Snake” AMP game**](https://pixcraft.io/blog/snake-in-an-email-how-we-created-a-game-for-an-amp-newsletter-with-altcraft). When clicking a button in the email, Mail.ru displayed the following error:

```xml
amp-bind: Expression eval failed. Expression size (194) exceeds max (100)
```

At the same time, no such limitations were observed in **Gmail**.

A practical approach here is to design the email template with Mail.ru’s limit in mind: optimize calculations so that expressions stay within the allowed range.

## AMP Carousel Behavior

`<amp-carousel>` is a convenient tool for creating interactive image galleries that behaves predictably in most AMP-supported email clients. However, in **Gmail for iOS**, tapping the navigation arrow causes the email to scroll upward, which breaks the viewing context. This issue can’t be fixed through `<amp-carousel>` settings, as it’s not related to the `type`, `layout`, or component dimensions.

A more reliable solution in this case is to build a custom carousel using amp-bind. With this approach, the email doesn’t scroll uncontrollably during interaction. Below is an example of such an AMP carousel that includes four slides:

```xml
<style amp-custom>
.carousel-wrapper {
position: relative;
width: 500px;
height: 400px;
overflow: hidden;
}
.carousel-container {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide-0 { transform: translateX(0%); }
.slide-1 { transform: translateX(-100%); }
.slide-2 { transform: translateX(-200%); }
.slide-3 { transform: translateX(-300%); }
.carousel-slide {
min-width: 100%;
flex: 0 0 auto;
}
</style>
<div class="carousel-wrapper">
<div class="carousel-container" [class]="'carousel-container slide-' + carouselState.index">
<amp-img src="pic1.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic2.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic3.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic4.jpg" width="500" height="400" class="carousel-slide"></amp-img>
</div>
</div>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 4) % 4}})">
Previous
</button>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 4}})">
Next
</button>
```

The underlying logic here is as follows:

- the index of the current slide is stored in state; 
- the slide container is shifted using `transform: translateX(...)`; 
- navigation is implemented via `AMP.setState` using the “Previous” and “Next” buttons.

## CSS Support

The way AMP CSS is interpreted differs noticeably between Gmail and Mail.ru. In particular, **Gmail** follows the AMP for Email specification very strictly, which manifests in several ways:

- **Only a limited set of CSS properties is allowed.** Anything that goes beyond the specification causes the email to fail validation. 
- **Pseudo-elements (`:before` and `:after`) are prohibited.** This affects common layout techniques such as decorative icons, list markers, overlays, and shadows designed using pseudo-elements. 
- **[Animations](https://pixcraft.io/blog/animation-in-email-newsletters-guidelines-for-reliable-display) and transitions are heavily restricted at the rendering level.** Only basic CSS animations, without complex timings or chained effects, are supported.

**Mail.ru**, in practice, applies looser requirements to CSS usage. Here:

- support for CSS animations is broader; 
- fewer restrictions on decorative techniques and visual effects are present; 
- some of the solutions that Gmail blocks or ignores during rendering are acceptable.

Because of this, when an email is developed with only Mail.ru in mind, CSS that Gmail rejects almost inevitably appears. Therefore, a more reliable strategy for working with AMP CSS looks like this:

- build the base layout in accordance with Gmail’s restrictions: only allowed properties, no pseudo-elements, minimal animations; 
- verify that AMP renders consistently in Gmail; 
- carefully expand the design for Mail.ru by adding extra animations and visual techniques on top of a layout already validated in Gmail.

## Dark Mode in AMP Emails

[**Dark mode**](https://pixcraft.io/blog/dark-mode-how-it-works-and-how-to-optimize-for-it) behavior depends on the email client as well as the platform. As a result, the same AMP template may look different in Mail.ru, Gmail on Android, and Gmail on iOS.

For instance, **Mail.ru** doesn’t automatically recolor AMP emails. Colors, backgrounds, and contrast are defined through CSS. Theme control is implemented using the meta tag:

```xml
<meta name="supported-color-schemes" content="light dark">
```

CSS selectors are also used:

- `:root[data-ogsc]` — dark mode; 
- `:root:not([data-ogsc])` — light mode.

In **Gmail for Android**, the situation is different. When dark mode is enabled, AMP emails with light-theme designs are automatically recolored according to the general logic of converting a light layout into a dark one. If an AMP email is originally designed using a dark color scheme, Gmail on Android preserves its appearance. For this reason, dark designs tend to render more consistently here than light ones.

In **Gmail for iOS**, AMP emails aren't recolored automatically. On top of that, dark mode can’t be controlled via CSS. The email is displayed in its original color palette, regardless of system or Gmail app settings.

As a result, full support for both light and dark themes is available only in Mail.ru. When strict color requirements apply, it’s advisable to use a neutral or base dark design and to test the template separately for each email client.

## Testing AMP Emails

Testing is the final step before sending an email campaign. It’s used to assess AMP code validity, CSS correctness, and how the email client reacts to errors. 

Here, **Gmail** offers the [**Gmail AMP for Email Playground**](https://amp.gmail.dev/playground/), which can be used to:

- check markup for compliance with the AMP for Email specification; 
- detect unsupported components or attributes; 
- send test emails to your own @gmail.com address.

<Img
img="/api/uploads/01_pgrndgm_ef906bc75c.png"
alt="Playground Gmail"
/>

If the AMP version is displayed in the email client after sending, this means that the template has successfully passed the test. If the HTML version is shown instead, a notification appears above the email with an error code (for example, unsupported component) and a documentation link.

**Mail.ru** also provides its own [**Playground**](https://postmaster.mail.ru/amp/playground.html?lang=en#hello-world). It can be used to identify errors related to specification violations or internal client limitations and to send test emails to your own inbox.

<Img
img="/api/uploads/02_plagrndmlru_a039dff020.png"
alt="Playground Mail.ru"
/>

An optimal workflow involves testing in both clients:

- start with a general validation of the AMP code; 
- next, test interactive elements and general behavior in Gmail; 
- after that, perform a mandatory check of rendering and behavior in Mail.ru.

More information about preparing AMP emails for testing and sending is available in our [**detailed guide**](https://docs.pixcraft.io/en/amp/getting_started.html).

## Conclusion

The behavior of AMP emails depends not only on how the code is implemented but also on the rules applied by the email client during processing. Taking into account the specifics of Gmail and Mail.ru makes it easier to maintain control over interactive elements and visual presentation. In this context, the differences between email clients form clear boundaries that shape the implementation of email campaigns.

This article explains how AMP emails rendering may differ between email clients: state handling, expression length limits, carousel behavior, dark mode, and more.

small_cov_gmmlr.png

thumbnail_cov_gmmlr.png

cov_gmmlr.png

AMP Emails: How Their Rendering Differs Between Email Clients

An email campaign is much more than just text and visuals. Under the hood, there’s always the template’s code that determines how the message is built, delivered, and rendered in the inbox. Among the most important technical parameters is email size, also called its weight.

But what does the term “email weight” actually mean, and what should you pay attention to so that the technical implementation remains aligned with the creative concept? Let’s break it down.

## What Counts Toward Email Size

To put it simply, email weight is the size of its HTML part. If an AMPHTML part is used, it’s also taken into account. This is strictly the number of bytes in the code, not how many “screens” the email takes up visually. A short-looking message can be heavy in code, and vice versa, a long one can be surprisingly light.

Two emails that look almost identical at a glance may differ in weight depending on how they were built. Size is mainly influenced by:

- HTML markup (tables, wrappers, nested blocks, comments); 
- CSS (rules inside `<style>` plus inline styles in element attributes); 
- text content (headings, paragraphs, buttons, footnotes); 
- links, tracking pixels, and hidden technical blocks.

Images and [**animations**](https://pixcraft.io/blog/animation-in-email-newsletters-guidelines-for-reliable-display) are not included in this weight calculation. Email clients fetch media separately after they process the markup. Still, media optimization matters, because file size affects what the recipient sees in the first seconds after opening:

- Large images take longer to load, especially on slow connections and in image-heavy emails. 
- Until images load, recipients see blank areas or placeholders. 
- If the main visual component appears too late, the first impression suffers.

So even though graphics don’t add to the HTML weight, optimizing them remains an important part of solid email production.

## What Limits the Maximum Email Size

### Gmail’s HTML Size Limit

[**Many email clients**](https://www.dailystory.com/blog/html-email-clipping-limits-across-different-mailbox-providers/) don’t have a strict maximum email size. Gmail is one of the notable exceptions: it caps the HTML part at **102 KB**.

If this threshold is exceeded, Gmail automatically clips the email and hides the lower portion behind a “View entire message” link. The full content becomes visible only after the recipient takes an extra action.

<Img
img="/api/uploads/01_msgclpd_ac0564ca2b.png"
alt="Clipped message in Gmail"
/>

As a result, this may affect both user experience and email performance:

- Even if only the footer gets clipped, that’s where contact info, legal text, and the “Unsubscribe” link are often located. If recipients can’t quickly find a clear way to opt out, the “Report spam” button becomes one of the few remaining options. 
- Tracking pixels that detect email opens are typically placed near the bottom of an email as well. If that section is clipped and not displayed, opens won’t register and analytics will become distorted. On top of that, if an automated [**communication sequence**](https://pixcraft.io/blog/must-have-email-sequences-every-business-should-be-using) depends on whether the email was opened or not, errors will ripple through subsequent steps.

### AMP Size Limits

AMP content has its own constraints, defined in the [**AMP for Email specification**](https://amp.dev/documentation/guides-and-tutorials/email/learn/email-spec/amp-email-format):

- AMPHTML part: up to **200,000 bytes** (about 195 KB). 
- CSS inside `<style amp-custom>`: up to **50,000 bytes** (about 48 KB).

If either limit is exceeded, the AMP content will fail validation, and the recipient will see the HTML version of the email instead. It’s important to note that these limits are set by the format itself and are checked at the AMP code validation stage.

### Spam Filtering

Email clients and anti-spam systems evaluate email campaigns using a number of signals, including code-related ones. Common factors include:

- HTML markup structure and complexity; 
- ratio of meaningful content to technical elements; 
- number of trackers and links; 
- attachments and the way they’re embedded.

Suspicion is triggered not by the email size itself but rather by the reasons it becomes heavy: bloated markup, excessive tracking, and overly complex, tangled nesting. In those cases, sending large volumes of the same email amplifies the overall negative signals during scoring.

This matters even more for bulk email campaigns. When the same “heavy” email is delivered to a large number of recipients, signals accumulate faster, which in turn affects deliverability and sender reputation.

## What Are Practical Ways to Reduce Email Weight

### Remove Unnecessary HTML Elements

Small details in the code can add up to a noticeable share of the email’s weight:

- extra spaces and tabs used to visually align the code; 
- line breaks that don’t affect rendering but increase the email size; 
- blank lines between content blocks that remain after edits or copying.

These elements don’t change the final look of an email. Therefore, at the final stage it’s worth minifying the markup: carefully removing the unnecessary fragments without changing structure or design, which can reduce the email by several kilobytes.

### Simplify the Table Structure

Tables (`<table>`, `<tr>`, `<td>`) are one of the core tools in email development and the backbone of email layout. They ensure stable and consistent rendering across various email clients. 

Still, table misuse can significantly increase code size. For example, extra weight may appear due to:

- **Excessive nesting**: tables are nested without any actual need or reason. 
- **Duplicate wrappers**: the same content is repeated across multiple tables or cells.

Practical optimization approaches include:

- **Reduce nesting depth**: if multiple table layers perform the same role, consider merging them. This reduces code size while keeping rendering stable. 
- **Use `padding` on table cells**: creating separate tables and rows just for additional spacing eventually bloats markup. In those cases, it’s preferable to set spacing via `padding` on `<td>`.

Even small but careful structural cleanups can noticeably reduce code weight, especially in long email layouts.

### Remove “Dead Code”

Templates that went through several stages of development and testing often accumulate leftover code fragments that are no longer used but remain in the email, increasing its size. Examples include:

- commented-out blocks from earlier versions of an email; 
- fragments related to already completed A/B tests; 
- hidden elements that don’t affect rendering or logic.

Removing unused code reduces size and makes the template easier to maintain. But it’s better to act with caution: some hidden elements may be required for preheaders, fallback logic, or personalization. Remove only what you’re certain is unused.

### Clean Up CSS

CSS has a noticeable impact on email size, especially after multiple rounds of edits. In this case, typical causes for extra volume include:

- repeated sets of CSS properties assigned to a number of elements without actual need; 
- rules and classes left behind from older versions; 
- auto-generated inline styles where every block gets the same set of properties.

Optimization comes down to regular style reviews: remove unused rules and reduce repetition. For [**AMP emails**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy), CSS control is particularly important because of strict size limits.

### Use TJML for Email Development

[**TJML**](https://pixcraft.io/framework) is a framework created by the Pixcraft team to make email development faster and more comfortable. It allows for creating both HTML and AMP emails using a single code base, while the resulting templates remain stable across most email clients, including Microsoft Outlook 2003–2024.

For email weight control, TJML offers the following mechanics:

- **Size checks**: the framework can calculate code size and warn the user when recommended thresholds are exceeded, providing the opportunity to fix issues before test sends and final builds.

<Img
img="/api/uploads/02_tjmlwarn_e794848c22.png"
alt="A warning about email size when using TJML"
/>

- **Code optimization**: TJML comes with a function to remove extra spaces and redundant elements that don’t affect rendering. As a result, you get a smaller email template that still renders correctly.

Read [**this article**](https://pixcraft.io/blog/tjml-framework-how-to-create-emails-quickly-and-easily) to learn more about the TJML framework, its features, and how it speeds up email development.

### Check Email Size After the Final Build

During the sending stage, ESPs and CDPs typically wrap links in tracking redirects. Each link gains extra parameters, making it longer and increasing the overall markup size. Therefore, an email that fits the limits during development may exceed them after processing.

A reliable approach here is to send a test email and inspect the message in its “finalized” form. This helps reduce the risk of Gmail clipping and AMP validation errors.

## Conclusion

Email weight isn’t a theoretical metric. It impacts analytics, deliverability, and how a campaign is perceived after it’s opened. Treat size control as part of template production: organize markup and CSS, and verify the final HTML after your ESP or CDP processes it.

Let's take a look at what email size is, what it includes, which factors can limit the maximum email weight, and how to optimize the size of email campaigns.

small_emailwght_cov.png

thumbnail_emailwght_cov.png

emailwght_cov.png

Email Size: What Affects the Weight of Email Campaigns and How to Optimize It

People skim through emails within seconds, and any movement instantly draws attention. Even a simple yet well-placed animation can make a message feel more vivid.

At the same time, adding animation raises a lot of questions, including:

- What types of emails can be enhanced with animation? 
- How to make an email bright and dynamic without overloading it? 
- Will the element behave consistently across different email clients?

In this article, we’ll take a look at the possibilities and limitations of animation in newsletters, and how to work with it to achieve the best possible display quality in email campaigns.

## How Animation Benefits Email

The main purpose of animated elements is to make a newsletter more expressive and engaging. Motion attracts attention more effectively than a static image and, when used wisely, strengthens the overall impression.

Animation fits a wide range of scenarios and email formats:

- **Promotional emails.** An animated banner can highlight the benefit and make an offer stand out visually. A [**countdown timer**](https://pixcraft.io/blog/amp-countdown-timer-by-pixcraft-how-to-use), in turn, pushes the reader to act fast while the promotion is still active. 
- **Onboarding.** A short interface demo in a welcome email shows how the service works: which features are available, how they behave, and what to do next. A new user immediately sees the product in action and grasps its structure faster. 
- **Digests.** If the message doesn't require a full-fledged [**dynamic product card**](https://pixcraft.io/blog/dynamic-product-cards-how-they-work-in-the-pixcraft-editor), a compact animation can be used to highlight individual items. For instance, it might show a new product from several angles or draw attention to a discounted item. 
- **Service emails.** Animated elements also work well in transactional messages. They can be used to illustrate order progress, for example, handover to a courier or delivery to a pickup point.

<Img
img="/api/uploads/01_trnsctnlanimexm_0db7bae6fb.gif"
alt="Animation in a transactional email"
src="Source: Really Good Emails"
/>

## How to Add Animation to Email Newsletters

Two most common ways to add motion to emails are GIF and AMP. Understanding their specifics helps to choose the right option for a particular scenario.

### GIF

GIF is the classic format for animated elements. It’s supported by most email clients and usually behaves predictably. Still, if you want GIFs in emails to work as intended, several important points must be taken into account.

- **File size.** For newsletters, short and lightweight GIFs are the most practical option. It’s generally recommended to keep the file size **under 1 MB** so that the message loads faster. 
- **Colors and detail.** The format supports **only 256 colors**. Therefore, complex gradients and smooth transitions between frames lose quality during compression. For a clean result, it’s better to use simple shapes, backgrounds, and outlines. 
- **Alt text.** This short text acts as a safety net when an element doesn't load because of a slow connection or filters in the email client. A concise description preserves the logic of the message and tells the reader what the contents of the animation are.

### AMP

AMP expands the possibilities for building email templates by adding interactive elements. It can be used to create swipeable galleries, [**interactive surveys**](https://pixcraft.io/blog/nps-surveys-whats-their-purpose-and-how-to-implement-them-in-pixcraft), and rich visual scenarios not available in classic HTML.

AMP also works with traditional GIF animation. Two components are used for this:

- `amp-img`; 
- `amp-anim`. 

Both can handle GIF files, but `amp-anim` is a specialized component with one important advantage: the animation runs only while the element is visible on the screen. As soon as the user scrolls past it, `amp-anim` stops playback and reduces the load on resources, which is especially useful in long newsletters and on mobile devices.

You can also use a static placeholder image inside the component. It appears before the GIF loads and prevents an empty area in case of a slow connection or a heavy file.

The element supports CSS styling and fits into the layout like any other AMP component. Here is an example of `amp-anim` markup:

```xml
<amp-anim width="500" height="400" src="animation.gif">
 <amp-img placeholder width="500" height="400" src="placeholder.jpg">
 </amp-img>
</amp-anim>
```

## How Animation Works in the Pixcraft Visual Editor

Adding an animated element to an email template in Pixcraft is as simple as inserting a regular illustration. Simply drag the “Image” primitive onto the canvas and upload a file from your device or specify a URL. The GIF becomes part of the email without extra actions and immediately appears in the layout.

<Img
img="/api/uploads/02_animhrtexmp_d6d2d591a9.gif"
alt="Animation in Pixcraft"
/>

After that, it can be configured in the same way as any other image. The panel on the right contains parameters that define its appearance and behavior:

- width and height; 
- alignment, corner radius, and margins; 
- border thickness, texture, and color; 
- external link; 
- alt text.

<Img
img="/api/uploads/03_animsttngs_56a663c219.png"
alt="Setting up image properties in Pixcraft"
/>

You can check how the element behaves under different conditions using the preview function. It shows how the email looks on desktop and mobile, as well as in light and dark mode.

Preview is especially important for animations with fine details that may blend into the background or disappear when scaled down. At this stage, you can spot such issues and adjust the image before sending the campaign.

<Img
img="/api/uploads/04_prvwanim_67a6644897.gif"
alt="Email preview in Pixcraft"
/>

It’s also possible to include AMP animations in email templates. For example, you can use the built-in “Carousel” component: a scrolling image gallery that supports various image formats, including GIF.

In addition, you can insert the required elements straight into the email code after building the main structure in the visual editor. To do this:

- export the AMP version of the template; 
- open the file in a code editor; 
- add the required AMP components to the email.

## What to Keep in Mind for Animations in Emails

### Compatibility with Outlook

Although GIFs usually work smoothly in most email services, some versions of Outlook for Windows may cause issues. Because rendering is handled by the Word engine, the animation freezes on the first frame and doesn’t play further.

In this case, fallback options are required:

- use conditional comments to replace the GIF with a static image; 
- design the first frame as a complete illustration that conveys the necessary information such as the offer, promotion dates, or discounts.

### Expressiveness and Balance

Animation can be functional or decorative. In the first case, it draws attention or makes the element more informative; in the second, it sets the tone and mood. And in both roles, it needs to remain appropriate.

This means the animation should:

- support the structure of the email instead of pulling attention to areas that aren't central to the message; 
- preserve readability and clarity; 
- avoid cluttering the layout or creating visual noise.

### Limited Attention Span

People move through emails quickly and spend only a few seconds scanning the content. Under these conditions, complex, drawn-out animation often doesn't have time to unfold, and individual details go unnoticed.

Short and simple scenarios usually work better: a state change, a subtle appearance, a neat switch. The fewer objects move on the screen at once, the easier and more accurately the element is perceived.

### Performance on Small Screens

Today smartphones are the primary way to read emails, and many mobile clients support animation playback. At the same time, limited screen space becomes a separate constraint.

Before sending the email, it’s worth checking whether:

- the animation keeps its aspect ratio; 
- any text inside it remains legible; 
- the overall meaning stays clear when the animation is scaled down.

In case of issues, animated elements need to be adapted specifically for the mobile version. For example, you may enlarge important details, simplify the graphics, or, in some cases, completely replace the animation with a static frame.

## Is Video Supported in Emails (And Is It Worth Using)

Embedding video directly in an email may sound like an appealing idea, but [**only a few email clients**](https://www.caniemail.com/features/html-video/), such as Apple Mail, support this technology. In most cases, a video inside the message simply won’t play: either nothing is shown in its place, or fallback content appears instead.

Because of this, a more reliable pattern is often used. A static frame with a play icon is inserted into the message. The user clicks on it and is redirected to a page with the video, for example, the brand’s website or a video hosting platform. This scenario is stable, but it involves switching to an external resource rather than inline playback.

<Img
img="/api/uploads/05_playbttnexm_9f29c65836.png"
alt="Play button in an email"
src="Source: Really Good Emails"
/>

If the goal is to simply add motion, emphasize a detail, or make the email more visually dynamic, regular animation is usually a more effective option.

## Conclusion

Animation in emails shapes the impression that remains after reading. It’s important that the format, graphics, and small details work together as a coherent whole. Good animation doesn’t overshadow the email content; instead, it serves to support the main idea of the message. And that’s exactly where its true value lies.

This article explores how to use animation in newsletters: formats, display in email clients, and tips for working with GIF and AMP.

small_anim_eml_cover.png

thumbnail_anim_eml_cover.png

anim_eml_cover.png

Animation in Email Newsletters: Guidelines for Reliable Display

Deadlines in emails are a powerful trigger that drives readers to take action. And when the remaining time is shown visually using a countdown timer, the deadline feels more tangible, and the decision-making process accelerates dramatically.

In this article, we’ll take a look at the AMP countdown timer by Pixcraft — how it differs from other timer implementations, and how its architecture and logic work in email templates.

## Why Add a Countdown Timer to an Email
Countdown timers enhance communication scenarios by turning a vague promise into a measurable deadline. They make time feel like a limited resource, giving subscribers an immediate reason to act. Timers trigger the **Fear of Missing Out (FOMO)**, making it harder to delay a decision.

Below are some marketing scenarios where countdown timers work best.

<Table>
| Scenario | Benefits |
| --------- | ---------------------------------- |
| **Flash Sales and Limited-Time Offers** | Phrases like “The sale ends in 5 hours 27 minutes” create urgency and a sense of exclusivity. Conversion rates may increase noticeably when paired with an additional incentive such as a discount or bonus. |
| **Limited-Availability Offers** | Promos with an expiration date, free delivery “for orders placed before 10:00 PM”, or early access to a product all require clear time frames. The timer defines those boundaries visually, prompting subscribers to act. |
| **Events (Webinars, Online Courses, and More)** | A message like “Event starts in 04:30:12” encourages users to complete registration faster to secure a spot (especially when the number of seats is limited). |
| **Order or Subscription Confirmation** | Timers work well when a customer hesitates before purchasing. A phrase like “Complete your order within 2 hours and get a gift” combines urgency with value and sounds way better than a vague “Hurry up!”. |
</Table>

## Technical Limitations of Traditional Timers
### GIF Countdown Timers
For a long time, animated GIFs were the only way to show a countdown timer in emails. These timers work like this: a server generates an image showing the remaining time, and the email client loads that image when the message is opened.

While this approach is considered classic, it has some serious limitations:

**1. Resource-Intensive and Costly.** To display the correct time at the moment of opening an email, the system must generate an animation that reflects the actual remaining time. Depending on the number of opens, this may lead to generating new animations every second, which requires significant computing power and increases costs.

**2. Image Caching in Email Clients.** Email providers use caching to speed up message loading. But with GIF timers, this means that upon reopening an email, the reader sees the cached frame and not the current countdown. 

Some developers try to bypass this by adding unique query parameters or request headers, but these methods offer no guarantees. As a result, the timer often loses its main function: showing real-time countdowns.

**3. Animation Length and File Size.** The size of a GIF grows with the number of frames and animation smoothness. To stay within acceptable limits, loops are usually capped at 10–20 seconds. After that, the animation either stops or restarts.

Even short timers can weigh hundreds of kilobytes or several megabytes. When combined with banners, images, and buttons, this may significantly slow down the email’s total loading speed.

### amp-timeago
`amp-timeago` is a standard AMP component used to display relative time in text form. It shows simple time values based on a given date, such as “in 16 hours”, “in 3 months”, or “2 years ago”.

<Img
img="/api/uploads/01_timeagoexmp_693c36a831.png"
alt="amp-timeago component"
src="An example of displaying time using amp-timeago. Source: amp.dev"
/>

Key features of `amp-timeago`:

- Correctly recalculates the remaining time regardless of when the email is opened. 
- Easy to implement and doesn't require complex setup. 
- Supports multiple languages (default locale is `en`).

However, this component isn’t ideal for marketing emails where visual and emotional effects matter. It lacks animation, the sense of a “ticking clock”, and visual flexibility. In general, it looks like static text rather than a live countdown.

That said, `amp-timeago` works fine for informational or technical notifications such as “Confirm your order within 2 hours” or “Your subscription will renew in 3 days”. But when it comes to promotional campaigns focused on engagement and conversions, it cannot replace a full-featured timer.

## How the Pixcraft AMP Countdown Timer Works

Pixcraft offers an alternative to both GIF timers and `amp-timeago`. Instead of generating image streams, it uses lightweight AMP mechanics to render the countdown directly inside the email. This provides a full visual timer experience with stable performance, no heavy files, and no caching issues.

<Img
img="/api/uploads/timeanimat_c82acbde96.gif"
alt="AMP countdown timer by Pixcraft"
/>

### General Logic of the AMP Countdown Timer

Each part of the timer is built as a separate AMP carousel, with the countdown tied to a specific deadline. For instance, if the deadline is December 31, 2025, at 11:59 PM, the source link will look like this: 

```xml
src="https://app.pixcraft.io/api/timer?date=2025-12-31&time=23-59"
```

The Pixcraft server returns the current countdown data, and the email renders it through AMP components. The numbers appear dynamically, creating the effect of a ticking clock.

Core components of the AMP timer: 

- **amp-list** — requests data from the server showing how much time is left. 
- **amp-mustache** — inserts those data into the email template. 
- **amp-carousel** — visually flips the values of hours, minutes, and seconds.

### How Hours Are Displayed

The server returns two values:

- `hours.i0` — current number of hours left. 
- `hours.i1` — next value (current hour minus one).

This means that if, for example, 2 hours and 30 minutes remain, then `hours.i0` equals “2” and `hours.i1` equals “1”. These values switch automatically inside the carousel: first “2” is shown, and when the hour ends, `hours.i0` switches to “1”, and `hours.i1` switches to “0”. The switch timing is controlled by the parameter `delay="{{ hour_left }}"`, which defines time until the end of the current hour.

### How Minutes Are Displayed

Here, a 60-element array is generated (from `minutes.i0` to `minutes.i59`), and the carousel flips every **60,000 milliseconds**. To ensure accurate display, the array starts from the current minute relative to the deadline. 

For example, if 1 hour and 30 minutes remain:

- The first value in the array is `30`. 
- It then changes every minute: `29`, `28` and so on until `0`. After that, it loops back to `59`, then switches to `58` and down to `31`, after which the cycle repeats.

This logic allows a continuous and correct minute-by-minute countdown.

### How Seconds Are Displayed

For simplicity and reliability, seconds are implemented as a **cyclic simulation**. The carousel always starts at `59`, counts down to `00`, and then loops back to `59` again. While it doesn’t sync with the system time, visually it produces a natural ticking effect, which is perfect for marketing purposes.

### What Happens After the Deadline

The overall delay until the deadline is controlled by the `time_left` element, which determines when the timer switches states after the countdown ends. Unlike GIF animations, here the timer can seamlessly **transition to a new block**, enabling post-deadline scenarios such as:

- Showing a short message like “The offer has ended”. 
- Offering an alternative, like a message “The sitewide sale is over, but check out our special deals up to 30% off” with a button leading to the relevant section.

<Img
img="/api/uploads/finmsg_bbf9fd6258.png"
alt="Message after a deadline was reached"
/>

## Advantages and Limitations of the AMP Countdown Timer

AMP timer by Pixcraft offers practical advantages that make it useful for email campaigns:

- **Accurate and reliable time display.** The AMP timer isn’t affected by image caching. It always shows up-to-date data, even if the reader closes and reopens the email later. 
- **Lightweight.** Countdown timer by Pixcraft doesn’t require rendering dozens of animation frames, which significantly reduces email loading time. 
- **Full control after the deadline.** AMP technology allows you to define what happens when the countdown ends, from showing a simple message to adding complex scenarios.

At the same time, AMP countdown timer comes with some limitations to keep in mind:

- **Simulated seconds.** The seconds carousel starts from `59` regardless of the system time: as of now, it can’t be customized to show the exact current second. Yet while technically this is a compromise, visually it looks natural and works perfectly for marketing use. 
- **AMP support required.** The countdown timer only works in email clients that support AMP (e.g., Gmail, Yahoo, AOL, Mail.ru). For others, a fallback is required — such as a static image or traditional GIF timer.

## How to Add the AMP Countdown Timer to Your Email

The Pixcraft email builder will soon include built-in AMP countdown timer functionality, but if you want to use it right away, there’s no need to wait. We've prepared the ready-to-use code for you: just insert your desired date and time, specify the post-deadline message, customize the visual style, and add the timer to your template.

▶️ [**Get the Pixcraft AMP countdown timer code here**](https://codepen.io/Todd-the-flexboxer/pen/pvgRXjP)

<Img
img="/api/uploads/timcod_2f5058512a.png"
alt="Pixcraft AMP timer code"
/>

## Conclusion
With the AMP timer by Pixcraft, you gain a clean, dynamic countdown that transitions smoothly once the deadline arrives. The timer component will soon be available directly in the Pixcraft interface, but you can already connect it via code and start making your campaigns more engaging today.

In this article, we'll take a look at how AMP countdown timer by Pixcraft works, what are its advantages over other types of timers, and how to incorporate it into your email campaigns.

Articles by tag: AMP