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

Product grids are among the most popular and expressive elements in marketing emails. They quickly showcase an assortment of goods and draw the recipient’s attention. When [**dynamic content**](https://pixcraft.io/blog/how-to-use-dynamic-content-in-email-campaigns) is used to build product cards, it becomes possible to control both their logic and appearance without manually creating dozens of separate elements.

In this article, we’ll discuss what dynamic product cards are, how they work, and how the **Pixcraft** editor helps with creating dynamic product grids within the **Altcraft** marketing platform.

## The Difference Between Static and Dynamic Product Cards

Static product cards are fixed elements with predefined content. Each card is built manually for a specific product and is suitable when an email needs to display a set list of items. Cases include:

- one-off newsletters with a product catalog relevant at the moment of sending; 
- promo campaigns where the assortment remains unchanged; 
- manually curated selections where a specific group of items must stay fixed.

Dynamic collections, on the other hand, make product grids more flexible. At the moment of sending the email, data is taken from the selected source and inserted into the product grid. This is especially useful for automated messages such as triggers and recurring emails: the selection is formed from the up-to-date feed based on the specific scenario or audience segment.

## How Dynamic Product Cards Work in Emails

First, a single card template that defines layout and fields is created. Next, items from the feed are inserted into that template, and the required number of cards is generated, creating the product grid structure. Each card receives its own data about a specific product.

<Img
img="/api/uploads/01_prodgrexmpl1_62c3339ff0.png"
alt="Product grid in an email"
src="An example of a dynamic grid used for product recommendations. Source: Really Good Emails"
/>

### Data Source

Dynamic product cards rely on a structured set of product information. Depending on the platform, the data may be uploaded using JSON files, spreadsheets, YML feeds, APIs, webhooks, or data from a CMS/CRM.

Regardless of the format, the file must contain all the essential product information:

- name; 
- image; 
- price; 
- link; 
- brand or category; 
- additional characteristics such as color, size, material, etc.

The card template in the email treats these values as variables and inserts the relevant data into each field.

### Layout Specifics

Product grids must display correctly both on mobile devices and in email clients such as the desktop version of Outlook. Mobile clients usually reflow the layout to fit screen width. However, in Outlook, due to its limited CSS support, additional table-based markup inside conditional comments is required.

Below is an example of what the code for a static grid of four items in two columns may look like:

```xml
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">
 <div style="display: inline-block; vertical-align: top; width: 300px;">
 product card 1
 </div>

 <div style="display: inline-block; vertical-align: top; width: 300px;">
 product card 2
 </div>

 <div style="display: inline-block; vertical-align: top; width: 300px;">
 product card 3
 </div>
 
 <div style="display: inline-block; vertical-align: top; width: 300px;">
 product card 4
 </div>
</td></tr>
</table> 
```

When working with a dynamic grid, the task is more complex since it becomes necessary to calculate row breaks. For this, the template uses an iteration counter to determine when to finish the current row and start a new one.

A generalized version may look like this:

```xml
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">

 { FOREACH item IN products }
 
 <div style="display: inline-block; vertical-align: top; width: 300px;">
 product card item
 </div>
 
 { IF !loop.last }
 { IF loop.index % 2 == 0 }
 
 { ELSE }
 
 { END }
 { END }

 { ENDFOREACH }

</td></tr>
</table>
```

This process can be described as follows:

- check whether the current card is the last in a row (`!loop.last`); 
- calculate the remainder when dividing by the number of columns (`loop.index % 2 == 0`).

The example assumes that the number of products matches the grid size. If that’s not the case, additional checks are required to avoid breaking the grid structure in email clients.

## How We Added Dynamic Product Card Support to Altcraft

In 2024, the Pixcraft email editor was integrated into the [**Altcraft**](https://altcraft.com/) marketing platform, which unifies customer data and communication channels. The platform automates segmentation, personalization, multistep workflows, and synchronization with various data sources.

For convenient work with product catalogs, a dedicated **Products** primitive was added. Essentially, it’s a ready-made tool for adding dynamic product grids into emails.

<Img
img="/api/uploads/02_prdctsicn_41cd9c1b30.png"
alt="Products icon"
/>

Product data comes from **Market**, a module designed for product management. The assortment of goods is uploaded using YML files (as plain files or archives in .zip or .tar.gz format), either manually or on a schedule. Additionally, Market supports manual creation of product items.

Static cards can also be created manually by placing images, product data, and links. However, these remain fixed and do not receive updates from the feed.

### Product Cards Settings

The Products primitive includes two tabs: **Design** and **Data**. 

The **Design** tab controls the appearance of both the cards and the grid. Here, you can specify the number of products, configure spacing, background, border-radius, and variable visibility.

To add a new element to the card template, simply drag it from the list. The following predefined elements are available:

- product title; 
- image; 
- price; 
- old price; 
- button with link.

It’s also possible to include standard Primitives in product cards.

When adding or removing elements, all cards update simultaneously. If the structure of a single card changes, the others adjust accordingly — an essential condition for a consistent dynamic grid.

The **Data** tab configures the data source, selection method, sorting, and filters. This determines which products appear in the grid.

Dynamic cards work with two product sources: **Market. Products** and **Market. SKU**. This means that depending on the task, you may use either original products or their specific variations.

Filtering options include:

- manufacturer; 
- categories; 
- price range; 
- products with images only; 
- products with delivery only; 
- products with an old price specified; 
- in-stock items only.

Filtering is also available for custom fields, which may be added to both products and SKUs.

<Img
img="/api/uploads/03_filtrsset_c1b808d61c.png"
alt="Filter settings"
/>

Additionally, selection by product ID is supported, allowing you to display specific catalog items.

<Img
img="/api/uploads/04_byprodid_004863db49.png"
alt="Filtering by product ID"
/>

### Real-Time Preview

The product grid appears exactly as it will look in the actual email, with all current filters and settings applied. Any change to filters, data source, selection method, or appearance immediately updates the grid: the structure adjusts, and new data is inserted.

This provides two benefits:

- You can immediately check the final state of the product grid. 
- The chance of missing an error is reduced — if the filter is too strict or some data is missing, the issue becomes visible right away.

<Img
img="/api/uploads/05_gridsimplexmpl_0be632633c.png"
alt="Simple product grid in Pixcraft editor"
/>

### Converting Dynamic Grid to Static Cards

To lock the results of a dynamic selection and convert it into a static set of cards, you only need to click one button. In Pixcraft, this is done via the **Convert to static cards** option, which:

- removes dynamic logic and detaches the cards from Market; 
- saves the current data of each card and turns the grid into a set of independent elements that can be edited manually.

The visual appearance of the grid remains unchanged: spacing, colors, buttons, and element positions stay intact.

<Img
img="/api/uploads/06_statconvrt_902b8f2fd8.png"
alt="A button to convert dynamic grid into static"
/>

This function makes Products a fast way to fill selections without manually inserting images, links, and prices. All that’s required is to:

- apply filters; 
- check that the selection looks correct; 
- convert to static; 
- edit individual cards if needed.

## How to Integrate the Pixcraft Email Editor Into Your Business Processes

If you want to use Pixcraft in your own system, choose the deployment format that fits your organization: embedded integration (**white label**) or **on-premise** installation.

### Embedding the Editor

Pixcraft can be integrated into various services, including CRM systems and other corporate tools. The editor becomes part of your interface and contains no Pixcraft branding.

You get:

- a block-based email editor with flexible settings; 
- a customizable interface; 
- AMP support and the option to develop custom AMP blocks; 
- a library of ready-made blocks for quick email building.

To learn more about integrating our editor into your platform, please [**contact the Pixcraft team**](mailto:team@pixcraft.io).

### On-Premise Deployment

Pixcraft is also available for a full local installation. All data stays inside your infrastructure with no transfer to third-party services. This option is suitable for banks, government organizations, large retail networks, and other companies with high security requirements.

The on-premise version includes:

- creation and editing of emails, including dynamic product cards and interactive AMP components; 
- data collection and storage, including AMP form responses; 
- AI generation of text, images, and entire emails; 
- work with ready-made blocks and templates.

[**Contact us**](mailto:team@pixcraft.io), and we will consult you about the local installation of the Pixcraft editor.

## Conclusion

Dynamic product cards in Pixcraft streamline the process of building product selections. Flexible settings ensure a predictable workflow: data, structure, and design stay under your control, while the final result remains stable and accurate.

Integrate Pixcraft into your business processes, and get a full-featured email editor suitable for tasks of any scale — from one-time promos to recurring campaigns.

In this article, we discuss what dynamic product cards are, what are their advantages over static product grids, and how the process of creating a dynamic grid is implemented in the Pixcraft editor.

small_dynam_crd_covr.png

thumbnail_dynam_crd_covr.png

dynam_crd_covr.png

Dynamic Product Cards: How They Work in the Pixcraft Editor

**Pixel-perfect** is an approach where the layout precisely matches the design mockup, and every element looks and behaves as originally intended. Over the years, this principle has become a symbol of precision and respect for detail in web design.

But is it actually possible to achieve absolute alignment between the initial design and the layout when creating email templates? And is it even worth striving for? In this article, we'll explore the line between precision and excessive pursuit of perfection, and why pixel-perfect doesn’t always guarantee quality in email campaigns.

## The Origin of the Pixel-Perfect Approach

This principle originated back when responsive design didn’t exist yet, and websites were built with fixed screen resolutions in mind. If a webpage looked exactly as it did in the mockup, it was considered perfectly accurate.

However, the situation changed over time. Mobile devices evolved, pixel density increased, and dark themes emerged. Ultimately, the adaptive approach evolved into responsive design. Instead of mathematical precision, visual consistency and readability on any screen became paramount.

## Why Pixel-Level Precision Shouldn’t Be Treated as a Standard in Email Design

At first glance, the internal structure of an email may resemble a web page: HTML code, tags, styles. But in practice, it's a different environment with its own set of rules and limitations. While browsers have been moving toward standardization for decades (HTML5, CSS3, unified rendering engines), email services have evolved independently.

Different email clients rely on their own engines, and support for modern standards isn’t always guaranteed:

- **Gmail** partially filters CSS styles. This helps protect users from potentially malicious code, but sometimes distorts the appearance of emails. 
- **Yandex Mail** completely removes media queries from emails. Therefore, responsive layouts may not adapt as intended. 
- **Outlook for Windows** uses the Microsoft Word engine, which doesn’t support many CSS properties.

Fonts in emails may also behave differently. For example, Helvetica is available by default in macOS but not in Windows. Arial is the system font for Windows, yet it’s missing on Android. When the desired font isn’t available, a fallback or default font is used instead. As a result, text size, spacing, and other parameters may slightly increase or decrease.

Sometimes the discrepancy is just a few pixels and is barely noticeable. However, in complex layouts, when these deviations accumulate, the grid becomes unbalanced. As a result, columns and visuals may misalign.

Simply put, the pixel-perfect approach doesn’t work in emails because of the very nature of the email environment. Creating a template that looks absolutely identical across all systems and email clients is technically impossible without imposing strict limits on structure and design.

<Img
img="/api/uploads/eml_clnt_compare_7345b645f9.png"
alt="Rendering in a number of email clients"
src="How the email renders in different email clients"
/>

## When the Pursuit of Perfection Hinders Perception

Imagine a standard product card with a title, description, price, and a “Buy now” button. The designer set perfect margins, a fixed block height of exactly 320 pixels, and complete symmetry.

In the mockup, everything looks flawless, but after a test send, the email starts to behave differently:

- In **Gmail**, the description text wraps to two lines, and the button shifts down. 
- In **Outlook**, border radius doesn’t work. 
- On **Android**, the system font is slightly larger, making one card appear taller than the others.

Sure, the text in the email is still legible, and the button performs the required action. But from a pixel-perfect standpoint, all of the above is a failure. Attempts may be made to restore the original appearance by using restrictions:

`height: 320px`
`overflow: hidden`

However, this solution introduces new risks, especially for mobile layouts:

- text may be cut off; 
- the button may extend beyond the container; 
- the background may no longer align with the interface elements.

Pixel precision for its own sake doesn’t improve the quality of emails. Users don't examine emails under a magnifying glass, don't measure margins, and may not even notice minor discrepancies. It's far more important for them that the email is easy to read, its message is clear at a glance, all key elements are visible, and no manual zooming is required.

## Realism Over Dogma: How to Approach Email Layout Rationally

The main task of a layout designer is to ensure that emails look neat and are easy to read in every email client. To achieve this, the development process itself should use a different approach, taking into account the differences in how various email clients render content.

The goal is not absolute similarity but consistency in different conditions, even if some details differ slightly:

- For the **desktop version**, the layout should stay as close to the original design as possible, but it's important to allow for a small amount of space and avoid creating a tight grid. Blocks should retain their shape even when the font or content changes. This is especially important in emails with dynamic content, where the length and amount of text may vary. 
- The **mobile version** should remain comfortable to read even without media queries. This ensures layout stability in email clients that don’t support them. 
- **Media queries** should be used to enhance the appearance, not to control structure. If supported by an email client, the message becomes more user-friendly, but the core logic must remain consistent even without them.

The focus should shift from precision to stability. It’s a more practical and pragmatic way to design emails: the layout doesn’t replicate the mockup pixel by pixel, but stays balanced and easy to read in a variety of scenarios.

## How Pixcraft Helps Maintain Visual Consistency

At Pixcraft, we take a realistic approach: the email environment is complex, but the results can still be kept under control. We offer tools that help maintain layout precision and stability in a wide range of conditions.

### TJML Framework

For those who prefer manual coding, the Pixcraft team has developed [**TJML**](https://pixcraft.io/blog/tjml-framework-how-to-create-emails-quickly-and-easily), a free email framework that speeds up template creation and provides several key advantages:

- layouts are responsive by default while keeping the code clean and compact; 
- messages render correctly even in email clients that don’t support media queries; 
- AMP and HTML versions of an email are generated from a single codebase; 
- typographic rules for texts in Russian are applied automatically.

The built-in **Pixel Perfect** tool makes it possible to compare a ready-made template with a reference image. It’s especially useful when you need to ensure that the email matches the original design closely, but with just enough margin to maintain layout stability. This makes it easier to maintain accuracy even in emails with complex designs.

<Img
img="/api/uploads/pxlprfct_en_9bab8caa2d.png"
alt="Pixel Perfect tool"
/>

### Visual Email Builder

Pixcraft is an [**email template builder**](https://pixcraft.io/builder) that combines visual simplicity with engineering precision. You can create and edit an email without writing a single line of code, and then immediately preview how it will look:

- on desktop and mobile devices with different screen resolutions; 
- in light and dark themes; 
- with or without interactive AMP elements.

When working with email templates, the builder takes into account the specific features of various email clients. As a result, it’s much easier to maintain layout logic.

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

### Predictable Results

Pixcraft is built around the idea of visual consistency: an email should preserve its structure and layout quality even when the environment changes. Instead of trying to chase pixel-perfect accuracy, the focus remains on what truly matters: a clean, logical, and predictable design that works reliably in real-world conditions.

## Conclusion

Pixel-perfect is an elegant and noble idea, but not a universal one. The true quality of an email campaign is defined not by how precisely it matches the initial mockup, but by its consistency and stability.

In particular, a good email:

- remains readable without media queries; 
- maintains its structure even when fonts change; 
- looks equally clean and consistent in Gmail, Outlook, and on mobile devices.

That’s the essence of a professional approach. The most effective direction in email development isn’t strict pixel perfection, but a pragmatic method with a flexible, well-thought-out layout that accounts for the nuances and pitfalls of different email clients.

In this article, we'll explore the pixel-perfect approach: what it is, when it originated, and why following the pixel-for-pixel principle in email newsletters isn't the best idea.

small_pxl_prf_cov.png

thumbnail_pxl_prf_cov.png

pxl_prf_cov.png

Pixel-perfect in Email Design: Is It Achievable (and Worth the Effort)?

Imagine having your own version of ChatGPT or DeepSeek running entirely on your personal computer. The data is stored on your device — no subscriptions, no cloud servers, no third-party access. Just a fully independent, private, and customizable AI assistant.

This is the idea behind local language models. Several tools make this possible, including **Ollama**, **vLLM**, and **GPT4All**. In this article, we’ll focus on the latter: what GPT4All is, how it works, and why it might become your go-to solution for private AI.

## How Text-Based Neural Networks Work

At the heart of every AI tool that processes text is a **Large Language Model (LLM)**, a neural network designed to function as a kind of general linguistic intelligence. These models are capable of:

- holding natural conversations; 
- analyzing data, drawing conclusions, and suggesting solutions; 
- explaining complex concepts in simple terms; 
- translating or adapting text to different tones and styles; 
- generating, reviewing, and commenting on code.

Popular examples include the already-mentioned **ChatGPT** and **DeepSeek**, as well as **Claude**, **Qwen**, and **xAI (Grok)**, among others.

## How Local LLMs Differ from Cloud-Based Ones

The biggest advantage of cloud-based models is that all the heavy computation is conducted on the provider’s servers. Users only need a browser or an API key to access them. However, this convenience comes with trade-offs:

- **Internet dependence.** No network connection means no AI. The model simply won’t run offline. 
- **Usage limits.** Cloud services often cap the number of requests, data size, or speed — especially in free tiers. 
- **Privacy risks.** Every query goes through external servers, which can be a major concern for anyone handling sensitive data.

**Local LLMs** take the opposite approach. They’re smaller and optimized for full offline operation. Some of their key strengths include:

- **Self-sufficiency.** They run directly on your computer, independent of internet access, pricing tiers, or server queues. 
- **Privacy.** All inputs and outputs are stored on the device. Nothing is sent to the cloud. 
- **Flexibility.** You can switch between models for different tasks or connect your own knowledge bases.

For businesses, local LLMs mean more **control**, **security**, and **autonomy**. For developers, these may serve as a **playground for experimentation** — testing hypotheses, building prototypes, or processing documents without external limits or hidden costs.

## What Makes GPT4All Useful

**GPT4All** is a full-fledged ecosystem for working with local language models. Think of it as an “[**Amuse**](https://pixcraft.io/blog/stable-diffusion-how-to-deploy-an-ai-image-generator-on-your-computer) for text”: not merely a raw engine, but a polished platform that makes interacting with AI smooth, flexible, and efficient.

The app allows you to:

- **Install and run different models,** from lightweight options to more advanced ones. Simply pick a language model from the catalog, download it, and start chatting. 
- **Work using an intuitive interface.** It’s as easy as “load the model and ask a question”. 
- **Use your own documents** to get responses based directly on their content.

## How to Install GPT4All

Setting up GPT4All is quick and straightforward. Simply download the installer, run it, and complete a short setup process.

**1. Go to the** [**official website**](https://www.nomic.ai/gpt4all) and choose the version for your operating system: Windows (`.exe`), macOS (`.dmg`), or Ubuntu (`.run`).

**2. Install and launch the application.** GPT4All automatically creates a working directory where it stores models, chat history, and settings.

**3. Download a language model** from the **Models** section or through the **Find Models** option on the main screen. Once downloaded, it will appear in the **Installed Models** library.

<Img
img="/api/uploads/01_ustmodel_e3f4df5815.png"
alt="Installed models in GPT4All"
/>

**4. Start the chat.** As with many cloud-based models, a prompt input field is located at the bottom, with the conversation window above it.

<Img
img="/api/uploads/02_dialexmpl_13c8034ecf.png"
alt="Dialog window in GPT4All"
/>

The **GPT4All** tab in the **Explore Models** section offers a catalog of models optimized for local use. Many of them run smoothly on standard CPUs; no dedicated GPU required.

<Img
img="/api/uploads/03_mdlctlg_fe56a7a2c5.png"
alt="Model catalog in GPT4All"
/>

It’s also possible to browse for additional LLMs on **HuggingFace** through a dedicated tab. However, the developers note that external models **aren’t guaranteed to work**, and many of them will require extra adjustments.

<Img
img="/api/uploads/04_mdlsrch_8d7934be7f.png"
alt="LLM search"
/>

GPT4All can also connect to **external cloud APIs** such as **OpenAI**, **Groq**, **Mistral**, and other OpenAI-compatible services. Though in that case, responses are generated remotely. Before enabling this feature, make sure it aligns with your privacy and data-handling policies.

## Which Models Are Available for GPT4All

The GPT4All catalog includes a wide selection of language models. Some are lightweight and run comfortably on modest hardware, while others demand more resources but offer performance closer to cloud-based LLMs. Your best choice depends on the task at hand and your computer’s specs:

- **Up to 4B parameters.** The fastest and most lightweight models, great for short prompts or quick notes. Examples include Qwen2-1.5B-Instruct and Llama 3.2 1B / 3B Instruct. 
- **Around 7–8B parameters.** Require more power but offer a solid balance between speed and output quality. Examples include GPT4All Falcon and Reasoner v1. 
- **13B parameters and above.** Resource-demanding, but capable of deeper reasoning and more coherent responses. Examples include Hermes and Snoozy.

Below are some of the most popular LLMs available in GPT4All, along with their strengths and limitations based on user feedback.

### GPT4All Falcon

A very fast model based on Falcon and finetuned by Nomic AI. Simple, versatile, and perfect for exploring what the app can do.

- **Strengths:** fast response speed with moderate hardware requirements. 
- **Weaknesses:** limited reasoning depth, tends to produce generic answers.

### Llama 3 Instruct

A modern, flexible model from the Llama 3 family. Well-suited for open-ended chats, Q&A, and general text generation or analysis.

- **Strengths:** runs smoothly even without a GPU; produces logical, natural-sounding responses. 
- **Weaknesses:** weaker reasoning compared to larger models; may lose context in longer conversations; performance varies depending on the version and quantization level.

### DeepSeek R1 Distill Qwen 7B / 14B

These models are distilled versions of DeepSeek R1. The 7B model, based on Qwen2.5-Math, is optimized for analytical and logical tasks, while the 14B model is more general-purpose, offering deeper reasoning and more natural language output.

- **Strengths:** suitable for step-by-step reasoning, analysis, and problem-solving; the 14B version provides richer, more precise answers. 
- **Weaknesses:** the 7B version struggles with longer reasoning chains, while the 14B model requires substantial resources (at least 16 GB of VRAM).

### Reasoner v1

An experimental model focused on reasoning and code-related work. It doesn’t just output answers but performs the logical steps to reach them.

- **Strengths:** can analyze, infer, and test hypotheses; includes a built-in JavaScript interpreter. 
- **Weaknesses:** may sound too formal or technical in casual conversations.

### Mistral Instruct

One of the most popular mid-sized models. Trained to follow instructions precisely, answer questions clearly, and produce structured, coherent text.

- **Strengths:** consistent, well-organized responses with a good balance between quality and performance. 
- **Weaknesses:** not ideal for highly technical or deeply logical tasks compared to larger models; may lose context or oversimplify reasoning; output quality depends strongly on prompt design.

### Orca 2

Developed by Microsoft, this model emphasizes reasoning and step-by-step analysis. It’s intended as a compact alternative to large-scale LLMs.

- **Strengths:** handles logical and analytical problems effectively, producing clear and structured reasoning. 
- **Weaknesses:** optimized for single-turn responses rather than extended dialogue; performance may vary depending on topic and prompt phrasing.

## How RAG Enables Working with Your Own Documents

While large language models can process enormous amounts of data, there’s still one crucial limitation: **they only “know” the information they were trained on**. If a model isn’t familiar with your internal documents, policies, or manuals, it can’t reference them in its responses.

That’s where **RAG**, or **Retrieval-Augmented Generation**, comes in. This method combines two steps:

- **Retrieval:** finding relevant information from your own sources. 
- **Generation:** producing an answer based on that retrieved content.

With RAG, you can connect your own files, knowledge bases, or internal documentation, allowing the model to generate answers based on your data. For example, if an employee asks, “How do I correctly submit a vacation request?”, a system powered by RAG would:

**1.** Locate the document describing the process.

**2.** Extract the relevant section.

**3.** Send it to the model along with the query.

**4.** Generate a clear, accurate response based on that material.

The result is a context-aware answer built on your organization’s internal information, not just general knowledge.

In GPT4All, RAG functionality is provided through the **LocalDocs** feature, which lets you create collections of documents. Simply point the app to a folder, and it will automatically index all the files it contains.

When new files are added, GPT4All breaks them into small text fragments and generates **vector embeddings** — mathematical representations that capture each fragment’s semantic meaning.

<Img
img="/api/uploads/05_embdng_a97c0474ef.png"
alt="Embedding в LocalDocs"
/>

When a user submits a prompt, the system compares it to these vectors, finds the most relevant text pieces, and sends them to the model along with the original question. The model then formulates a response based on this retrieved material.

<Img
img="/api/uploads/06_diallocdocs_48d09e9dc6.png"
alt="Chat based on local documents"
/>

GPT4All supports text formats such as `.txt` and `.docx`, as well as PDF, and Markdown (`.md`). It’s important to keep text clean and well-formatted, for instance, by removing redundant Markdown symbols or formatting code. The clearer the content, the more accurate the retrieval and the final response will be.

## Using GPT4All as a Local API Server

In addition to its desktop interface, GPT4All can also run as a local API server. This is especially useful if you want to integrate a local model into your company’s workflows, such as to automate text generation, document processing, or internal data analysis.

To enable the API server, follow this path: 

**Settings → Application → Advanced → Enable Local API Server**

Once activated, the server becomes available at `http://localhost:4891/v1`. The number may vary depending on the chosen port.

<Img
img="/api/uploads/07_apion_46bb3d255b.png"
alt="Enabling API server in GPT4All"
/>

The LocalDocs feature can also be accessed through the API. Your files never leave your computer: the API simply passes the necessary text fragments to the model so it can generate a context-aware response. Keep in mind that while the API can use existing document collections, creating and indexing new ones must be done through the app interface.

## Conclusion

GPT4All puts the control over language models into your hands. It enables a truly personal form of artificial intelligence: one that runs locally, integrates into your digital workspace, and operates entirely on your terms, all without relying on cloud services, subscriptions, or external servers.

This article explores GPT4All — a tool that lets you run text-based AI models directly on your own computer. Learn how it works, what features it offers, and what makes it useful.

small_gptall_cover.png

thumbnail_gptall_cover.png

gptall_cover.png

Local AI Under Your Control: The Possibilities of GPT4All

Over the past few decades, email has come a long way — from simple text messages to visually rich newsletters filled with graphics, animation, and interactivity. Yet as content became more diverse, so did the demands on email layout and coding.

To make email crafting comfortable and efficient under modern conditions, we developed a dedicated **TJML framework**. In this article, we’ll take a closer look at how it works and what makes it stand out when compared to other email coding methods.

## Is Manual HTML Coding Still Relevant Today

Manual HTML coding was once the only way to achieve maximum control and precision in email design. However, the technologies evolved, which has also affected email clients; each of them has its own peculiarities and rendering rules.

Today, you need to keep numerous details in mind: how external styles behave, whether media queries work, and how tables and paddings are handled across different clients. Moreover, many people check their inboxes on smartphones, which means every email must also be adapted for vertical screens and mobile operating systems.

Basically, a single email has to be created in **three different versions**:

- for modern desktop and web clients; 
- for mobile devices; 
- for Outlook on Windows, where CSS support is still heavily limited.

AMP technology deserves a special mention. It has made interactive emails possible thanks to carousels, forms, and other dynamic components. But technically, this means that you must provide both an AMP version and a regular HTML version of the same message for those email clients that don’t support interactive components.

### Where Visual Builders May Come In Handy

In modern marketing workflows, it’s impossible to rely solely on manual coding. One of the alternatives is **email builders**: modern, user-friendly tools for creating email campaigns. They require no coding skills and let you design professional templates in just a few minutes.

For example, the [**Pixcraft visual email builder**](https://pixcraft.io/) allows you to assemble emails using a drag-and-drop interface: simply drag the desired elements onto the canvas and adjust them. Component management (including AMP) is available directly in the interface. The resulting templates are compatible with most email clients and easily adapt to mobile screens. One more option is the [**Pixcraft plugin for Figma**](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-export-html-email-code-from-your-figma-design-responsive-outlook-gmail-ios), which can turn a finished design into a responsive HTML email.

Still, behind every message is a code that makes it work, and sometimes, editing it directly is inevitable. Can this process be just as convenient and modern? The answer is yes — with the help of TJML.

## What Is TJML

TJML is an email framework developed by the Pixcraft team for building HTML and AMP emails. It combines the simplicity of a block-based approach with the flexibility of manual coding, all while preserving familiar syntax.

A basic TJML email structure may look like this:

```xml
<tjml>
 <m-body>
 <m-wrap width="600">
 
 </m-wrap>
 </m-body>
</tjml>
```

Here’s what each component does:

- `<tjml>` — the root container that wraps the entire code; 
- `<m-body>` — the main body of the email containing all its content; 
- `<m-wrap>` — a wrapper responsible for width, padding, background, alignment, and other layout parameters.

To build multi-column layouts, TJML provides two types of content composition that determine how blocks behave on mobile devices:

- **Non-restructurable blocks.** Here, elements remain in a single row. The `<m-row>` component wraps `<m-column>` elements, which scale on mobile. 
- **Restructurable blocks.** These are `<m-box>` elements wrapped inside `<m-boxes>`. In mobile view, they automatically stack vertically if they no longer fit in one row.

These structures can be filled with content blocks such as text (`<m-text>`), images (`<m-img>`), buttons (`<m-button>`), and more. Please read the detailed [**documentation**](https://docs.pixcraft.io/en/tjml/) to learn more about all available components and attributes.

Here’s a simplified example of a TJML-based email:

```xml
<m-body bgcolor="#ffffff" font-family="Arial, sans-serif">
 <m-wrap width="600" padding="20px" bgcolor="#f9f9f9">
 <m-text font-size="20px" color="#333333" align="center">
 Hello! This email was created using TJML.
 </m-text>
 <m-button href="https://docs.pixcraft.io/en/tjml/" bgcolor="#6a66d3" color="#ffffff" border-radius="6px" width="200">
 Learn more
 </m-button>
 </m-wrap>
</m-body>
```

## What Makes TJML Special

### Code Editing Directly in the Browser

To start working with TJML, all that’s required is the online [**Playground**](https://app.pixcraft.io/playground/) editor. Here, you can code and preview your email in real time, toggle between desktop and mobile views, test dark mode, and inspect the generated HTML output.

<Img
img="/api/uploads/codeplgrnd_1286fc7955.png"
alt="Email created in Playground"
/>

TJML can also be used in any IDE of your choice. For extra comfort, we’ve also developed the following: 

- a special [**VS Code plugin**](https://marketplace.visualstudio.com/items?itemName=Pixcraft.vscode-tjml) that enables autocomplete and tooltips for all components and attributes; 
- [**web-types**](https://app.pixcraft.io/tjml/web-types.json) support for JetBrains products like WebStorm and PhpStorm.

### HTML and AMP in a Single Code

In a traditional approach, AMP and HTML versions of an email are built separately as two distinct templates. TJML simplifies this process by generating both versions simultaneously within the same markup.

If you want to show a specific block in one version only, you can use conditional rendering:

`<m-wrap m-if="isAmp">  </m-wrap>`

`<m-wrap m-if="!isAmp">  </m-wrap>`

TJML automatically includes all required AMP components (such as `amp-carousel`, `amp-form`, or `amp-list`) whenever they are used in the code.

### Rendering Across Email Clients

One of TJML’s main advantages is its smart approach to cross-client compatibility, including support for Outlook and Yandex Mail:

- The desktop **Outlook** email client uses a rendering engine that ignores modern CSS properties. TJML automatically inserts VML blocks and conditional comments to ensure correct display of backgrounds, alignment, and spacing (including in older versions). 
- **Yandex Mail**, on the other hand, doesn’t support media queries. TJML structures the layout in a way that preserves responsiveness even without them.

To put it simply, TJML eliminates the tedious routine of cross-client adaptation. Compatibility and rendering issues are handled at the framework level.

### Code Size Control and Optimization

In email marketing, message size is just as important as its content. For example, Gmail clips emails larger than **102 KB**, which may break layouts or affect tracking pixels.

TJML monitors the code size and warns you if it exceeds recommended limits. You can also use built-in optimization to remove unnecessary spaces, line breaks, and unused styles. The result is a lightweight, stable message that displays correctly and won’t be clipped by email clients.

### Error Checking and Typography

TJML continuously validates the email structure and nesting of `m`-elements. The framework alerts the user in case of any inconsistencies. In addition, it includes an automatic typograph, which inserts non-breaking spaces to prevent orphaned prepositions and conjunctions, ensuring the email looks clean not only technically but also visually.

## Pixel-Perfect Layout

To avoid discrepancies between the design mockup and final layout, TJML includes a **Pixel Perfect** tool. Simply upload a version of your design in a graphic format (e.g., PNG or JPG) and align it with your TJML template using this tag:

`<tjml pixel-perfect="img/mockup.png">`

After that, you may specify the offset and blending mode to visually compare the mockup and the email layout.

## Automating Email Creation with ChatGPT

To make the process of crafting TJML emails even easier, we came up with a [**special version of ChatGPT**](https://chatgpt.com/g/g-6823ad1f3c208191b9ce2d58bf3bb724-tjml) specifically for the framework. It can generate complete email layouts from a simple prompt: all you have to do is enter the description, and within seconds, you’ll receive a TJML code that can be customized to suit the requirements at hand.

<Img
img="/api/uploads/codechgp_de5b9f44d6.png"
alt="Email generation in a special ChatGPT version"
/>

Yet the functionality doesn’t end there. This ChatGPT version can also:

- **edit existing code** based on text instructions; 
- **explain how TJML works**, including the purpose of each tag and which attributes to use in different scenarios.

## Results and Efficiency

The framework has already proven itself in real-life production workflows and is ready for daily use.

For example, when TJML was implemented at a major Russian marketing agency, this showed a significant increase in productivity. Even for complex emails, coding speed improved by more than **50%**, and for AMP emails, the speed improved by **about 1.5×** without any loss of quality.

Another key metric is **code cleanliness and compactness**. In benchmark tests, an uncompressed TJML email weighed only about **13.5 KB**, compared to over **22 KB** for an equivalent created using [**MJML**](https://pixcraft.io/blog/email-frameworks-mjml-vs-tjml). Smaller size means faster loading times and a lower risk of clipping in Gmail.

One more major advantage is TJML’s **low entry barrier**. The framework lets you focus on the structure and design rather than worrying about technical adaptation for a variety of email clients. Combined with its **strong rendering stability**, TJML stands out as a reliable and efficient solution for professional email production.

## Conclusion

With TJML, the process of building email campaigns becomes fast, stable, and convenient. Quality control is ensured at every step, from the initial creative concept to the final delivery. For marketing professionals, this means less time spent on debugging and more time for content and creativity.

This article explains how TJML framework by Pixcraft simplifies email coding, what features make it even more convenient, and how to speed up the process using a special version of ChatGPT.

small_изображение1 (1).png

thumbnail_изображение1 (1).png

cov_pic_1.png

TJML Framework: How to Create Emails Quickly and Easily in 2025

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.

small_timer_covr.png

thumbnail_timer_covr.png

timer_covr.png

AMP Countdown Timer by Pixcraft: How to Use & What Makes It Helpful

The classic email confirmation scenario works like this: the user clicks a button and lands on a website, where the action result is recorded. But what if extra steps such as redirects and page loading were removed, and instead the recipient could complete actions directly inside the email?

For this purpose, Pixcraft provides a special component: **AMP-forward-link**. In this article, we will take a closer look at what this component is, how it works, and how you can add it to your campaigns.

## What Is AMP-forward-link
This AMP component brings the entire confirmation process inside the email itself. The button acts without redirecting the user or opening new tabs: basically, the email recipient submits a form, after which the server handles the processing in the background.

Thus, action confirmation in an email becomes:

- **More convenient** — quick response is ensured, unnecessary clicks are eliminated, and there is no need to visit an external website. 
- **More reliable** — the risk of losing the reader’s attention on intermediate steps is reduced to a minimum.

## Practical Use Cases
Let’s take a look at three basic ways to use **AMP-forward-link** that will help you get the most out of this component.

### Subscription Confirmation (Double Opt-In)
A typical scenario where **AMP-forward-link** becomes especially useful. The recipient opens the email and clicks the confirmation button. The component registers the action and immediately displays a successful completion message (for example: “Done! Subscription activated”). From the user’s perspective, everything looks as straightforward as it gets: one click, quick response, and status update.

### Collecting Additional Information
Immediately after a successful click, the email can display an extra form alongside the message. For example, it may include:

- **Categories for segmentation**. Here, the recipient chooses the most interesting categories of future newsletters. This way, the database is segmented by interests, and the subscriber receives relevant content from day one, which can increase open rates and reduce the risk of unsubscribing. 
- **Profile expansion**. Subscription confirmation emails typically achieve very high OR and CTR. When the user clicks the button and confirms the subscription, their attention is already focused on the brand. At this point, the email may gently offer to share some additional information such as name, phone number, or other details. 
This approach has already proven itself in practice. For example, after the email confirmation, Everyday Horoscopes asked users to provide their phone numbers. As a result, the conversion rate **exceeded 40%**, meaning that nearly half of subscribers agreed to share their additional contact data.

<Img
img="/api/uploads/01_horocexamp_f23f7b8b78.png"
alt="Phone number form in an email"
/>

## Unsubscription with Feedback Form
The mechanism works for both subscriptions and unsubscriptions. Here, the user clicks a button, after which the email displays not only a simple message (like “You have successfully unsubscribed”) but also a feedback form, for example, “Please share the reason why you decided to unsubscribe”.

This is useful because: 

- You immediately receive an explanation about the decision, which becomes valuable for further analysis. 
- You may offer a soft alternative right in the email. For instance, reduce the frequency of newsletters, change the topics, or keep only critical notifications. This helps to retain part of your audience.

## How to Create an AMP-forward-link Component in Pixcraft
As with other AMP components, the process of creating **AMP-forward-link** starts with the **Components** menu in your profile workspace.

<Img
img="/api/uploads/02_wrkspc_a0f9b92229.png"
alt="User workspace in Pixcraft"
/>

Click **New Component** and select **Link** from the list of available component types. After that, the system will ask you to fill in:

- **Component name.** Specify any appropriate name, for example, “Subscription Confirmation” or “Unsubscription with Feedback”. This will make the navigation easier. 
- **Component description.** You may optionally add a brief explanation, for instance, what this component is for or the campaigns where it is used. The field can be left blank, but it may prove helpful for better understanding of usage scenarios, especially when several users are working on the projects simultaneously.

<Img
img="/api/uploads/03_compcreat_3386d12497.png"
alt="Creating the component in Pixcraft"
/>

Next, click **Create Component** to open a new page that contains settings. Unlike other components such as [**Forms**](https://pixcraft.io/blog/how-to-create-and-use-forms-in-email) or [**Interactive Stream**](https://pixcraft.io/blog/interactive-stream-in-amp-emails-next-level-of-engagement) that include many different options, here you only need to specify two values for **AMP-forward-link**:

**1. Successful form submission message.** This is the text that the user will see immediately after confirming the action. It can be short (“Thank you, your subscription is confirmed!”) or more detailed, with additional instructions or an invitation to the next step. 
**2. Domain that will be used in links.** Here, you need to specify the domain of the confirmation link. Note: if your ESP uses a click-tracking system, the domain may be changed when sending the email.

<Img
img="/api/uploads/04_compset_c7e8f8a812.png"
alt="Link component settings"
/>

The **AMP-forward-link** operating principle is based on form submission and directly registers the action via the confirmation link. This means that there is no need to connect the email to external systems via webhooks or configure additional server-side events.

Once the parameters are set, click **Save**. The system will redirect you to the next screen that contains **Action-xhr** (the URL that processes the confirmation button request), ready-to-use **HTML code**, and a more compact **TJML** version of the code.

## Structure of the Generated Code
The HTML code consists of two parts: a block for the email header (`<head>`) and a block for the email body (`<body>`). The `<head>` block includes the AMP scripts required to ensure proper functioning of the form, processing user actions, and displaying messages.

However, the main logic of the component resides in the `<body>` block. This is where the form with the `action-xhr` attribute is located:

```xml
<form method="POST" action-xhr="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
```

The request is processed by the Pixcraft server. In turn, the `on="submit-success: AMP.setState(...)"` parameter defines what will happen after the action is successfully completed.

**The key element of AMP-forward-link is the confirmation link handling process.** This is done through a hidden `input` field with `name=”link”`:

```xml
<input type="hidden" name="link" value="${confirm}">
```

Here, `${confirm}` must be replaced with the confirmation link in your platform’s syntax.

When there are no changes on the screen for some time, this may leave the impression that nothing is actually happening. To prevent this, a loading block is displayed while the request is being processed:

```xml
 <div class="loading" submitting>
 Loading...
 </div>
```

This can be a simple message with any text (such as “Please wait” or “In progress…”). Additionally, an image or animation can be used instead of plain text. In this case, it is appropriate to apply an overlay with absolute positioning so that the visual element appears above the form, giving it a neat, modern look.

In addition to the standard HTML code, you receive automatically generated [**TJML**](https://pixcraft.io/framework) code. This is a special template markup syntax designed to simplify and speed up the coding of both AMP and regular HTML emails.

Compared to HTML, it offers the following advantages:

- **Compactness.** TJML code is shorter and lighter than the AMP-HTML implementation. 
- **Automation.** Unlike the HTML version, you do not need to manually connect `amp-bind`, `amp-form`, and `amp-mustache` for the TJML code to work properly.

The TJML code for **AMP-forward-link** looks like this:

```xml
<m-form action="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
 <div data-amp-hidden="confFormXXXX">
 <m-button bgcolor="#7D4DA3">Confirm Subscription</m-button>
 <input type="hidden" name="link" value="${confirm}">
 </div>
 <m-form-success>[[success]]</m-form-success>
 <div class="loading" submitting>
 Loading...
 </div>
</m-form>
```

Connecting the **AMP-forward-link** component to your campaigns is easy: simply embed the ready-made code into your email, and it’s done. Once the campaign is launched, you will be able to:

- **Track** how many users confirmed the action via email. 
- **Collect and analyze additional data** if a second screen with a form is provided in the email.

## Conclusion
**AMP-forward-link** adds extended action confirmation capabilities to emails. Thanks to Pixcraft, creating the component and using it as part of email campaigns is possible without complex development. All that’s required is inserting the ready-made code into an existing email template.

Give Pixcraft a try for free! [**Sign up now**](https://app.pixcraft.io/user/register) for a 14-day trial and explore all the capabilities of our visual email builder firsthand.

This article describes how the AMP-forward-link component helps to confirm actions in an email without redirecting to a website and how to create this component using Pixcraft email builder.

small_image (1).png

thumbnail_image (1).png

image (1).png

AMP-forward-link: How to Confirm Actions Directly in the Email Client

The quality of an email campaign depends on both the experience and skills of your team and the convenience and reliability of an email builder. However, despite interface similarities, the set of features and operating principles of visual email editors may significantly differ.

Previously, we conducted a [**detailed comparison**](https://pixcraft.io/blog/beefree-vs-pixcraft-which-tool-to-choose-for-your-email-campaigns) between **Pixcraft** and **Beefree** email builders. In this article, we are going to compare our tool with **Letteros**. Let’s check out the core functionality and key features: from no-code email building to integration capabilities and additional functions.

## Template Editor Flexibility
The process of crafting email templates in **Pixcraft** is built around a drag-and-drop principle: components are dragged onto the canvas, after which they can be modified. The following elements are used to create emails: 
- **Primitives** — basic elements such as text, image, button, divider, or empty block. 
- **Assets** — predesigned structures assembled from Primitives and ready for further editing. 

These allow users to build a template “piece by piece”, combining simple elements and more complex presets. Each block or individual component can be saved in a personal collection for future use in other emails.

<Img
img="/api/uploads/01_pimitandas_697e840c63.png"
alt="Assets in Pixcraft"
/>

A major advantage of **Pixcraft** is its level of flexibility, not limited to simple content editing. Users can enhance blocks with new Primitives, rearrange them, move Primitives to other blocks on the canvas, and even completely rebuild the structure (change the number of columns, their mobile adaptation, and other parameters). 

This opens up virtually unlimited opportunities for customization: any block from the collection can easily be adapted to specific tasks at hand.

<Img
img="/api/uploads/02_flexib_790f7c7834.gif"
alt="Changing the structure of blocks in Pixcraft"
/>

Additionally, **Pixcraft** features a special [**Figma plugin**](https://pixcraft.io/figma). It enables the import of Figma layouts and transforms them into fully functional and responsive HTML templates.

**Letteros** offers **Elements** as its basic components. These include both standard blocks for text, images, and buttons, as well as more advanced options, such as a countdown timer and embedded video. Instead of drag-and-drop, Elements are added by clicking, after which they immediately appear on the workspace.

<Img
img="/api/uploads/03_letworkfield_48bae5b61f.png"
alt="Canvas in Letteros"
/>

On top of that, **Letteros** provides **Layout** blocks and **Modules**.

**Layout blocks** — consist of up to 6 columns, each of which can hold one Element. Layout blocks are also added to the template by clicking, after which they can be filled with content or edited.

<Img
img="/api/uploads/04_letlayo_7813b2042b.png"
alt="Layout blocks in Letteros"
/>

Within Layout blocks, the components can be swapped horizontally, but cannot be moved to other blocks. Creating vertical columns of multiple Elements within a single Layout block is also not supported.

**Modules** — ready-made blocks with design and content that depend on the selected master template. They are divided into categories (banners, content blocks, text blocks, and so on), each containing several predesigned options. Unlike Elements or Layout blocks, Modules are added to the template by dragging them onto the canvas.

<Img
img="/api/uploads/05_letmodu_441021d237.png"
alt="Modules in Letteros"
/>

It is not possible to add new Elements inside Modules or rearrange existing ones. Their structure cannot be rebuilt: customization is limited to editing and replacing text and images in the available components.

## Ready-Made Email Templates
Often, ready-made templates become the starting point for future campaigns. Thanks to them, users don’t have to build the structure from scratch: instead, they can move directly to adding content and setting the parameters.

**Pixcraft** features an extensive **Template Gallery** with more than a hundred options grouped by categories. Users can choose a template by email type (for example, promotional newsletter, welcome message, triggered email), industry (e-commerce, education, automotive business), or event (International Women’s Day, Black Friday, Halloween). The library is regularly updated with new templates, ensuring fresh and relevant solutions.

<Img
img="/api/uploads/06_tempgalpix_cfb02b3a96.jpg"
alt="Pixcraft Template Gallery"
/>

Each **Pixcraft** template is essentially a complete email. Users only need to refine them and add the necessary content. As with individual components, templates offer maximum flexibility. It is possible to edit almost everything, from minor details to overall logic. If the initial structure does not fully suit the task, it can be supplemented or rebuilt using other Assets or Primitives.

<Img
img="/api/uploads/07_blockpix_ba17db8bf5.png"
alt="Block editing in Pixcraft"
/>

**Letteros**, by contrast, offers a different logic. There is no full-fledged template gallery here. Instead of ready-made emails, it offers a system of **master templates** divided by industries: “Auto”, “Hobbies and Entertainment”, “Gadgets”, and others. When creating an email, users are prompted to choose either a standard template with basic Modules or a specific industry with its own set of components

<Img
img="/api/uploads/08_mastemplet_5c40ce4eef.png"
alt="Master template selection in Letteros"
/>

The user can assemble their own version of an email using the predesigned Modules. However, as already noted, Modules are not very flexible. It is possible to drag them onto the canvas and edit the content within their Elements. However, it is not possible to add new Elements or completely remove existing ones. The structure customization is limited only to rearranging Modules within the email template.

## Bulk Editing of Styles and Links
In large-scale projects, the ability to bulk-edit elements can save a huge amount of time. For example, if the font throughout the text in an email needs to be changed or several links need to be updated, doing this manually is inconvenient. 

Special tools can help with that. In **Pixcraft**, two separate panels are provided for such tasks:

- **Styles.** With this panel, users can manage groups of similar text elements and buttons. For convenience, the Target icon can be used to highlight the location of the required elements in the template.

<Img
img="/api/uploads/09_stylpix_80abdfaa63.png"
alt="Styles in Pixcraft"
/>

- **Link Map.** This tool collects all the links in one place. Through the panel, users can quickly find the desired element, check the correctness of links, and replace them if necessary.

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

**Letteros** allows users to check the text for spelling and punctuation, as well as to detect incorrect links: these can be highlighted in the template, eliminating the need for manual search. 

<Img
img="/api/uploads/11_lnkchcklet_76d56154e3.png"
alt="Link Checker in Letteros"
/>

However, bulk editing is limited only to changing the color of links. All other edits must be made manually for each individual element.

## AMP Support
For **Pixcraft** users, the [**AMP technology**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy) (which makes it possible to add interactive components to a template) is available immediately after registration. Such components make email campaigns even more engaging.

For example, it is possible to include an **AMP carousel** that allows readers to switch between images directly in the email.

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

It is also possible to add an **AMP form** so that the reader can, for example, ask a question and submit it without leaving the email client.

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

Additionally, **Pixcraft** allows users to create standalone AMP components:

- **AMP-Form** — for advanced creation of surveys and feedback forms. 
- **AMP-List** — for loading and updating data in real time, enabling dynamic collections and other content within an email. 
- **AMP-Link** — for confirming registration or subscription directly in the email client. 
- **Interactive Stream** — for displaying a response feed in the email, where each reader can leave their comment.

For **Letteros**, AMP support is included in the list of planned updates, yet as of the time of publishing this article, the builder does not support this technology. Therefore, at the moment, users can work only with the standard capabilities of HTML emails.

## Social Media
Social media icons have become common practice for continuing communication with a brand and are constantly used in email campaigns. **Pixcraft** takes this important detail into account and offers a wide selection of social media icons. Yet most importantly, it brings extensive options for editing them.

In the email builder interface, users can:

- Select the necessary icons from a wide list of available platforms. 
- Change the appearance of the icons and logos, from size and spacing to colors and rounding, so that each icon looks natural in the email.

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

In **Letteros**, social media icons are available in a special Element. It is possible to add up to 5 icons, set their width, or specify alt text. But changing the color, shape, or style of the icon using the email builder is not possible. Therefore, when users need to modify an existing icon, the only option is to use other tools and upload the images.

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

## Email Preview
In **Pixcraft**, template preview works as a separate tool. The email template can be viewed in two main modes:

- **Desktop mode**, full screen width. 
- **Mobile device mode** with the ability to manually adjust the width down to a single pixel.

<Img
img="/api/uploads/16_resolpix_fd9e37c6b6.gif"
alt="Template preview in Pixcraft"
/>

Additionally, a set of useful extra functions is provided. These include previewing in light and dark modes, viewing AMP and HTML versions, checking dark mode for Gmail on iOS, as well as the ability to export the layout as an image using the Screenshot button.

In **Letteros**, the preview is embedded directly into the workspace. In particular, here it is possible to check the email in light and dark modes. However, width checking is limited to only three values: 768px for desktop and 375/425px for mobile devices. Specifying a custom resolution is not possible.

<Img
img="/api/uploads/98resolrepl_ca5501ecf6.gif"
alt="Template preview in Letteros"
/>

## Final Thoughts
**Pixcraft** and **Letteros** offer two different approaches to working with email templates.

In **Letteros**, the foundation of an email is a master template. Initially, it is created manually by a coder and marked up with special syntax. Users can then only manipulate predesigned blocks by changing their content without being able to edit the structure (except by editing the code).

**Pixcraft**, in turn, provides maximum freedom for building emails. Any creative idea can be implemented without code editing. Each separate block, element, or gallery template can be adapted down to the smallest details. Bulk editing and Link Map speed up routine processes and make them more convenient. And for an easier start, **Pixcraft** allows users to export ready-made email layouts from Figma.

Try **Pixcraft** in action: [**sign up today**](https://app.pixcraft.io/user/register) and get 14 days of free access. Have questions? [**Contact us**](mailto:team@pixcraft.io), and we will gladly discuss all the details with you. 

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

_Viber and LinkedIn are 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 core functionality of the Pixcraft and Letteros email builders — their flexibility, features, approach to email template editing, and more.

Blog