Email marketing continues to evolve, offering new ways to interact directly with audiences. Static emails no longer meet users’ expectations — they want interactive, personalized content that allows them to take action without leaving their inbox.  

AMP technology for email unlocks new possibilities by integrating dynamic elements and feedback forms directly into emails. [**In a previous article**](https://pixcraft.io/blog/using-the-amp-list-component-in-email-campaigns), we covered the basics of working with AMP-list in email campaigns. In this article, we’ll focus on the **AMP-form** component — a key tool for creating forms inside emails. It enables real-time user interactions such as collecting data, confirming actions, and building fully functional in-email experiences. We'll explore how to use AMP-form effectively in email marketing and how to integrate it with Pixcraft.

## What is AMP-form

AMP-form is an AMP component that allows you to create forms directly inside an email, without needing to redirect the user to another page. With it, you can add to your email:

- Event registration.
- Feedback collection.
- Newsletter subscription.
- In-email surveys.

<Img
img="/api/uploads/amp_form_message_9b3d2277a4.png"
alt="Example of AMP in email"
src="An example of a form in an email created with AMP-form"
/>

### AMP-form Syntax

The markup for a basic AMP form looks like this:

```HTML
<form method="post" action-xhr="https://example.com/submit">
<input type="text" name="name" placeholder="Your name" required>
<input type="email" name="email" placeholder="Your email" required>
 	<button type="submit">Submit</button>
 <div submit-success>
<template type="amp-mustache">
Thank you for your submission, {{name}}!
</template>
  </div>
  <div submit-error>
Error: please try again.
  </div>
</form>
```

The main attributes here are:

- **action-xhr**: specifies the URL for submitting the form data;  
- **div submit-success**: element displayed upon successful form submission;  
- **div submit-error**: element displayed if there is an error during form submission;  

For dynamic response rendering, [**amp-mustache**](https://amp.dev/documentation/components/email/amp-mustache) is used.

## Form Usage Examples

### Event and Webinar Registration

With AMP-form, you can create a registration form that appears directly in the email. The user enters their name and organization, clicks the Register button, and their data is instantly sent to the organizer’s server.

<Img
img="/api/uploads/amp_form_8e63f91f35.png"
alt="AMP in email"
/>

### Surveys and Feedback Collection

You can embed a form with one or more questions directly in the email to instantly collect feedback, NPS, or suggestions. This form can be styled as a text input field or as a star rating scale.

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

### Booking Meetings and Consultations

With AMP-form, a client can select a date and exact time for a meeting, as well as leave their contact information — all directly within the email.

<Img
img="/api/uploads/amp_form_booking_0305ae3ba8.png"
alt="Booking in an AMP email"
/>

### Placing Orders and Requests

The email recipient can place a product order or request a service without leaving the email or visiting a website.

<Img
img="/api/uploads/web_form_order_e052b2b061.gif"
alt="Order form in email"
/>

### Expanding Communication Channels
If your client already receives notifications via email, you can also subscribe them to other channels, such as SMS.

<Img
img="/api/uploads/amp_form_phone_number_6_35773b5c67.png"
alt="Phone number in email"
/>

### Collecting Additional Information

Forms can be used to collect any marketing-relevant information about the user — for example, their clothing size, pet details, area of work, and more. This data can later be used for personalized newsletters and offers.

<Img
img="/api/uploads/amp_form_example_1fb11c0a1e.png"
alt="Collecting additional information"
/>

## Implementation in Pixcraft

You can quickly create and configure an AMP form using the [**Pixcraft visual builder**](https://pixcraft.io). To do this, go to the **AMP Components** section on the main page of the platform and click **Create AMP-form**.

<Img
img="/api/uploads/amp_form_pixcraft_1_229db4e6d2.png"
alt="Creating an AMP form"
/>

Give your form a name and add a description. If needed, choose a form template, such as a rating scale or a simple form with text fields. You can later add more components to the template.

Next, add and arrange the **form elements** in the desired order. The following elements are available:  

**Input** — single-line text input field;  
**Checkbox** — checkboxes for selecting multiple options;  
**Radio** — radio buttons for selecting a single option;  
**Textarea** — multi-line text input field;  
**Select** – dropdown list for choosing a single option from the available ones;  

You can also add a success message that will appear after the form is submitted.

For text fields, you can configure validation options:  

**Not Validate** — do not validate the value;  
**Required** — field is required;  
**Equal to value** — field content must exactly match a specific value (to be entered in the prompt field);  
**Phone** — validates the number of numeric characters; the required count should be set in the additional validation field;  
**Email** — the entered value must match the email address format.

<Img
img="/api/uploads/amp_form_pixcraft_2_cd61786065.png"
alt="Element label"
/>

By default, form data is stored in Pixcraft, but if you need to send it to an external service or database, you can add a **Webhook** URL. To do this, enter the redirect URL in the corresponding field, and Pixcraft will start sending **POST requests** to the specified address. The request includes the following parameters:

| Parameter   | Type                                           | Example                             | Description                                                                                      |
|-------------|------------------------------------------------|-------------------------------------|--------------------------------------------------------------------------------------------------|
| componentId | Number                                         | 123                                 | ID of the component in Pixcraft.                                                                  |
| campaignId  | Number                                         | 124                                 | ID of the campaign the component belongs to. Can be left empty if the component is not linked to any campaign.                                 |
| email       | String                                         | test@test.com                       | Email address of the subscriber who submitted the form.                                           |
| date        | UNIX date                                      | 1648553051                          | Time when the event occurred.                                                                     |
| owner       | Number                                         | 125                                 | ID of the form owner in Pixcraft.                                                                 |
| data        | Content-Type: application/x-www-form-urlencoded | {"field0": "testInput", "field1": "radio1", "field2": "checkbox2", "success": "success"} | Form data.                                                                |

For more information on creating a form and configuring a webhook, see the [**Pixcraft documentation**](https://docs.pixcraft.io/en/amp/components/form.html).

The form is ready. Copy the generated code and paste it into your email template.

<Img
img="/api/uploads/amp_form_pixcraft_3_bf61c08e30.png"
alt="AMP Form"
/>

After saving, the form will be available in the **Components** section.


<Img
img="/api/uploads/amp_form_pixcraft_4_d72cc9bd46.png"
alt="AMP Form"
/>

The data collected through the forms will be stored in Pixcraft. In the **Statistics** section, you will find information about all interactions with the form.

<Img
img="/api/uploads/amp_form_events_5_48aed250ab.png"
alt="Events: AMP analytics"
/>

This information can be exported as a **CSV file** or uploaded to **Google Sheets**.
### Zapier integration
Form data can be automatically sent to external services using webhooks and tools like Zapier. This enables seamless integration of emails with any service without writing additional code or complex programming.
To begin, click **Create Zap** in the left-hand menu.

In the **Trigger** field, select **Webhook**. On the right, in the menu that appears, choose **Event — Catch Hook**.

<Img
img="/api/uploads/amp_form_zapier_1_d79602fdc2.png"
alt="Zapier webhooks"
/>

Click **Continue** here and in the Trigger section that follows.
The service will generate a webhook URL, which must be specified in the form settings in Pixcraft.

<Img
img="/api/uploads/amp_form_zapier_2_087c033c2b.png"
alt="Enter webhook: Zapier"
/>

Paste the URL and click **Save.**
Return to Zapier and click **Test Trigger**. Now you need to submit the form to trigger the request.

To do this, insert the form code into your email or use Google’s AMP playground.
After submitting the form, go back to Zapier, click **Test Trigger**, and you’ll see a list of received fields.

<Img
img="/api/uploads/amp_form_zapier_3_02aabcd5fe.png"
alt="Test trigger"
/>

Click **Continue with selected record**.

Next, decide what to do with the received data: send it to an ESP, CDP, CRM, etc. — select any integration from the list. For example, to send the data to **Pipedrive**, select **Pipedrive** in the **Action** field.

For **Event**, choose **Create Person**. Click **Continue**, then add or select your Pipedrive account.
In the **Action section**, map the submitted fields accordingly.

<Img
img="/api/uploads/amp_form_zapier_4_a9e19a9d1a.png"
alt="Pipedrive"
/>

Click **Continue**, then **Test step**.
Finally, just publish the integration by clicking **Publish**.

## Conclusion

By using AMP forms, you save your clients time — they don’t need to open a browser or wait for a separate page to load. This greatly simplifies data collection and significantly boosts audience loyalty and engagement.

And if you're creating forms with the [**Pixcraft visual builder**](https://pixcraft.io/builder), you won’t have to deal with the specifics of AMP-form syntax. Instead, you can spend that time crafting more creative marketing campaigns for your company.

Learn how to use AMP-form in email marketing to create interactive emails with forms, feedback collection, and data gathering — all within the email client.


small_amp-form.png

thumbnail_amp-form.png

amp-form.png

How to Create and Use Forms in Email

Why do some emails immediately grab attention while others get ignored? It’s not just about the content and images — the visual presentation of your text plays a major role.

Typography isn’t just about picking beautiful fonts — it’s an entire approach to presenting text visually. The way you use fonts to emphasize certain parts directly affects how your email is perceived and how effective it is.

In this article, we’ll explore which fonts are best for emails, how to choose them, and how to avoid common mistakes that can cost you your readers' attention.

## Types of Fonts for Email

**Sans-serif fonts** — like Arial, Helvetica, Verdana, and Tahoma — appear modern, neutral, and are easy to read on all kinds of screens. Their biggest strengths are readability and versatility. These fonts are ideal for business emails, newsletters, and any communication that prioritizes clarity and accessibility. For body text, Verdana or the more neutral Arial are especially recommended.

<Img  
img="/api/uploads/typography_example_2e8fd02dce.png"  
alt="Example of an email using popular fonts"  
src="The body uses a standard sans-serif font — Arial"  
/>

**Serif fonts**, like Georgia and Times New Roman, give off a more formal, classic vibe. Serifs add a sense of seriousness to the text, which is helpful in official communications or projects where a traditional brand image is key. However, be aware that serif fonts can reduce readability on small screens.

<Img  
img="/api/uploads/typography_times_new_roman_b96b907936.png"  
alt="Email example with elegant fonts"  
src="The body uses a serif font that resembles Georgia or Times New Roman"  
/>

**Script fonts** like Pacifico, Dancing Script, or Lobster bring a casual, emotional feel to emails. They create a sense of personal connection and can boost engagement. That said, script fonts can significantly reduce readability in longer texts, so use them sparingly — only for small accents like headings or short inserts. They are not suitable for body text.

<Img  
img="/api/uploads/typography_script_font_5_11zon_92d657bfd6.jpg"  
alt="Email with a script font"  
src="This email uses a modern serif (like Canela) and an elegant script font (like Bickham Script Pro)"  
/>

**Decorative fonts** (e.g., Impact, Comic Sans, or custom branded typefaces) are designed to attract attention through their unique appearance. They may be suitable for banners, holiday headers, or special promos. But for business emails or long texts, they’re a no-go: they quickly become hard on the eyes and make the content harder to absorb.

<Img  
img="/api/uploads/typography_decorative_font_7758031037.png"  
alt="Decorative font example"  
src="A decorative font is used in the header"  
/>

### Standard vs. Custom Fonts

**Standard (web-safe) fonts** are fonts that come pre-installed on most major operating systems: Windows, macOS, Android, iOS. These fonts render correctly across nearly all email clients without any special setup. Common web-safe fonts include Arial, Verdana, Tahoma, Times New Roman, and Georgia. They guarantee consistent appearance, fast loading, and minimal risk of display issues.

**Custom fonts**, on the other hand, require special inclusion using @font-face or services like Google Fonts. Support for these fonts is extremely limited — they only work reliably in Apple Mail (iOS and macOS) and some versions of Outlook for Mac. In most other cases (e.g., Gmail, Outlook on Windows, mobile apps), the custom font gets replaced by a fallback. This not only breaks the intended design but can also mess up layout.

Using custom fonts in email is only justified in rare cases when you know exactly what email clients your audience is using.  


**@font-face** is practically useless in email design today — with support in [**less than 20% of clients**](https://www.caniemail.com/features/css-at-font-face/), it’s not a viable option. If you try to use a custom font without a fallback, your email may look broken.

The only truly reliable solution is to stick to web-safe fonts. They ensure fast loading, consistent display, and meet the basic UX standards for email design.

There’s one important exception: if you’re using an image (like a banner), you can use any font you want — since it’s a picture, not live text, it will render correctly. This is a good way to preserve brand style, but keep in mind that if the recipient has images turned off, that part won’t load.

### How to Combine Fonts

Using more than two fonts in a single email is not recommended. The ideal combo: one font for the body text and one for headers. For example:

- Georgia for headers and Verdana for body text — gives a classic touch.
- Arial for headers and Times New Roman for body — formal, professional look.
- Trebuchet MS for headers and Arial for text — clean, modern, and very readable.

## Font Size, Line Height, and Contrast: Key Rules for Readable Emails

**Header size** should be much larger than body text. Go for 28–36 px for main headers and 18–24 px for subheaders. This creates clear visual hierarchy and helps guide the reader’s attention.

<Img  
img="/api/uploads/typography_font_size_d67ec48fb6.png"  
alt="Header size in an email"  
src="The headline email appears to be set at approximately 32–36 px"  
/>

**The ideal font size for body text is 16 px.** It’s readable on both desktop and mobile. Anything smaller hurts readability and risks being skipped over.

**Line height** is just as important. Even if your font size is correct, cramped lines are hard to read. A line height of 1.4–1.6 times the font size works best. For 16 px font, use around 22–24 px for line spacing. This makes the text breathe, improves readability, and reduces eye strain.

<Img  
img="/api/uploads/typography_line_height_5cab8d6539.png"  
alt="Font names and line spacing"  
src="Line-height about 1.4–1.5"  
/>

**Text and background contrast** is essential for readability. Low contrast makes text hard to follow and easy to ignore. Dark text on a light background — black on white or dark gray on light gray — is the safest bet. Avoid low-contrast color combos and thin, light-colored fonts on bright backgrounds.

Practical tip: Your email text should be easy to read even when someone scrolls quickly on their phone. Always test readability on different screen sizes before sending.

## Other Details That Make a Big Difference

Good typography isn’t just about fonts and spacing. These basics also have a big impact on the look and feel of your email — even if you don’t notice them right away.

- **Awkward line breaks for short words.** While English typography doesn't strictly forbid prepositions or conjunctions at the end of a line, breaking after very short words like “a,” “an,” “in,” or “to” can look unbalanced. If you’re coding your emails manually, consider using non-breaking spaces to keep these words together with the next one. Tools like [**Pixcraft**](https://pixcraft.io) and the [**TJML framework**](https://pixcraft.io/en/framework) help automate this for a cleaner, more polished layout.
- **Digit grouping.** Large numbers like 10,000 or 1,200,000 should always include commas — it makes them easier to read.
- **Punctuation**. A hyphen (-) is not the same as an em dash (—). Use the em dash for pauses and emphasis. And for quotation marks, American English uses “curly quotes.”
- **Text alignment**. Keep text, buttons, and images consistently aligned — ideally to the left. Don’t justify text — it creates awkward gaps between words and makes it harder to read.
- **Text color**. Your main text should be a neutral dark tone — black or dark gray on a light background. For headers or highlights, one or two accent colors are okay, but avoid going overboard. Too much color clutters the layout.
- **Text emphasis**. Bold and italic are great for short emphasis — like promo codes or important points. But use them sparingly. If everything is bold, nothing stands out.

## Final Recommendations


- **No more than two fonts.** One for headings and one for body text. Any more than that makes the email look cluttered.
- **Font size should be 14–16 px.** Anything smaller becomes hard to read, especially on mobile devices.
- **Let the text breathe.** Use a line height of 1.4–1.6. This keeps lines from crowding together and makes the content easier to read.
- **Dark text on a light background.** The most reliable option is black or dark gray on white. Complex color combinations reduce readability.
- **Don’t use text as images.** These emails can’t be read by screen readers and may not load properly.

How to choose the right font, size, and spacing for your emails to improve readability, keep attention, and increase conversion rates.


small_typography-in-emails.png

thumbnail_typography-in-emails.png

typography-in-emails.png

Email Typography: How to Make Your Text Easy to Read

You've launched your business, started building an audience, and of course, added a newsletter signup form. But what's next? A lonely welcome email and occasional holiday blasts just won’t cut it anymore. Today, email marketing is about consistency, personalization, and dialogue. That’s why email sequences are essential.  

Automated email series (or "email sequences") help you do more than stay top of mind — they let you build real relationships: to introduce, educate, and sell. This is especially crucial in the early stages, when every subscriber counts and the path from interest to purchase should be simple and smooth.  

This article explores the must-have email sequences to implement right from the start, what they do for your business, and how to make them not just useful but truly engaging with interactive elements and AMP.

## Welcome Sequence

<Img  
img="/api/uploads/email_sequence_welcome_4_11zon_546e6cacca.jpg"  
alt="Welcome Email" 
src="Source: reallygoodemails.com"
/>

**Welcome sequence** is a series of emails triggered right after a new user signs up. It’s one of the first points of contact with a potential customer, and how you handle it can shape your future relationship.  

The very first email should be a DOI (Double Opt-In) — asking the user to confirm their subscription. Once confirmed, the welcome series begins.  

Here's a clever trick for DOI: AMP-forward link. It allows the user to confirm their subscription directly in the email, without leaving it. Right after the click, you can gently ask for more details — like phone number or birth date.

**Key aspects of a welcome sequence:**

- **When it starts:** Immediately after the user confirms their email, signs up on the website, registers for a service, or makes a first purchase.
- **Purpose:** To introduce your brand, highlight your products or services, and build trust. It reduces hesitation and guides the user toward a first meaningful action (purchase, profile setup, etc.).
- **Number of emails:** Typically 3–4. They thank the user, welcome them, and introduce your brand and offers.
- **Interactive elements:** Great for collecting user data. Add a preference survey or a carousel with product suggestions users can scroll through right in the email. You can also ask for feedback using a scale or buttons to get valuable insights.

## Onboarding Sequence

<Img  
img="/api/uploads/email_sequence_onboarding_2_11zon_6a06348cd5.jpg"  
alt="Onboarding Email"  
/>

**Onboarding sequence** is a series of emails designed to help customers understand and get the most out of your product or service — especially helpful after a first purchase or signup for a complex tool.

**Key aspects of an onboarding sequence:**

- **When it starts:** After a user registers for your service, purchases a product, or subscribes to a course.
- **Purpose:** To explain how to use your product, walk through features, offer tips, and prevent common issues. A well-onboarded user is more likely to stay and buy again.
- **Number of emails:** Usually 3–5. For example, email 1 thanks the user and shares a startup guide, email 2 breaks down key features or shares a tutorial, and email 3 answers FAQs. Later, follow up for feedback or offer help.
- **Interactive elements:** Use AMP to create expandable FAQ sections or step-by-step guides. These make emails easier to digest and give users a sense of progress.

## Sales Sequence (Conversion-Focused)

<Img  
img="/api/uploads/email_sequence_abandoned_cart_1_11zon_2eae63fd4c.jpg"  
alt="Sales Sequence"  
/>

**Sales sequences** are focused on converting leads into paying customers. They’re triggered when someone shows interest but hasn’t completed a purchase — like downloading a freebie or abandoning their cart.

**Key aspects of a sales sequence:**

- **When it starts:** When a user is exploring but hasn’t bought yet — after downloading a lead magnet, visiting a pricing page, abandoning a cart, or viewing a product.
- **Purpose:** To move users closer to a purchase. These emails build trust, handle objections, and highlight the value of your offer.
- **Number of emails:** Varies. For warm leads, 2–4 emails work well: offer value, address concerns, and close with a strong offer. For cart abandonment, 2–3 emails: the first within hours, a second the next day, and a third a few days later with a discount.
- **Interactive elements:** Product carousels are great — especially in fashion, tech, or furniture — showing different angles or styles directly in the email to spark action.

## Retention Sequence (Repeat Sales)

<Img  
img="/api/uploads/email_sequence_restock_3_11zon_bbc3b0cf52.jpg"  
alt="Retention Sequence"  
/>

**Retention sequences** aim to turn one-time buyers into loyal customers. Loyal customers are more profitable and cheaper to retain than acquiring new ones. Also called post-purchase or re-engagement flows.

**Key aspects of a retention sequence:**


- **When it starts:** After a purchase. It could also be triggered when a subscription is about to expire or it's time to reorder.
- **Purpose:** To stay in touch and encourage the next purchase — share usage tips, suggest related items, or offer loyalty perks.
- **Number of emails:** Typically 2–4 per cycle. Email 1 thanks them and gives order info. Email 2 asks for feedback. Email 3 suggests complementary products. Email 4 reminds them to reorder or offers a special deal.
- **Interactive elements:** AMP surveys are great here — quick ratings, feedback forms, or emoji reactions right in the email.

## Re-engagement Sequence (Bring Back Inactive Users)

<Img  
img="/api/uploads/email_sequence_we_miss_you_5_11zon_6219500abc.jpg"  
alt="Re-engagement Sequence"  
/>

Over time, some subscribers stop engaging. **Re-engagement sequences** aim to wake up these users or clean your list if interest is gone for good.

**Key aspects of a re-engagement sequence:**
- **When it starts:** When a user is classified as inactive — based on your business rules, e.g., 3–6 months without opens or purchases.
- **Purpose:** To rekindle interest or unsubscribe inactive users. Remind them of your brand, share updates, or offer a strong incentive.
- **Number of emails:** Usually 2–3. Start with a soft reminder, follow with a bold offer or announcement, and end with a goodbye email (with a one-click resubscribe option).
- **Interactive elements:** Use games or quizzes to boost engagement — like puzzles, “build your perfect product,” or update preference forms using AMP.

## How to Make Emails Interactive

You don’t have to be a developer to create interactive emails. Tools like [**Pixcraft**](https://pixcraft.io/) let marketers build AMP emails with interactive blocks using a visual editor — or [**Figma**](https://www.figma.com/community/plugin/1403763341617358835/).  
Pixcraft offers ready-made blocks: surveys, product carousels, ratings, live comment feeds. You just drag-and-drop elements, add text and images, and the platform generates valid AMP code.  

Start with the most important sequences — the must-haves covered above. With Pixcraft, it’s easy to embed surveys into welcome emails, create beautiful product carousels in sales emails, and add dynamic content.

## Conclusion

Email sequences are the foundation of effective email marketing. Welcome, onboarding, sales, retention, and re-engagement flows create a structured dialogue with your audience — from first contact to repeat purchases and reviving inactive users.  
By using AMP interactivity — for example, via Pixcraft — you amplify their impact: emails become not only informative but engaging. This builds trust and lays the groundwork for sales growth from day one.  

Pay special attention to trigger-based emails — they’re far more effective than mass blasts since they respond to specific user actions. The best place to start automation is with these scenarios: welcome flows, post-purchase emails, reorder reminders. They create a sense of personal touch and foster stronger connections with each customer.  

And if you want to level up your email marketing skills, check out our [**Telegram channel**](https://t.me/pixcraft_io) — we share useful tips, tricks, and ideas every week.

Let’s explore which email sequences you should launch first, how they benefit your business, and how to make each email not just useful but engaging.

small_email-sequence.png

thumbnail_email-sequence.png

email-sequence.png

Must-Have Email Sequences Every Business Should Be Using

Before sending out an email campaign, it's important to thoroughly test it. Even a small mistake in an email can lead to lower engagement, increased unsubscribes, and damage to your brand's image. We’ve all received emails with broken links or missing images — not exactly confidence-inspiring.

Email remains one of the most effective marketing channels, with an impressive ROI — [**up to 264%**](https://www.mailgun.com/blog/deliverability/deliverability-impacts-roi/#:~:text=%E2%80%9CEmail%20has%20the%20highest%20ROI,have%20to%20do%20it%20right). But to get results, you need to avoid mistakes at every level — from visuals to technical setup.

Here’s a detailed checklist of what to test before sending, so your emails look professional and actually deliver results.

## Step 1: Visual Check

What to look for:

**1.** **Match with the design layout.** First, check how closely the final email matches the original design. Compare padding, fonts, colors, and alignment — the easiest way is to take a screenshot of the coded version and place it side-by-side with the design mockup. Then, draw horizontal guides across both. The guides should hit the same elements in both views. This simple method helps spot differences quickly — whether it's text that wasn’t updated, images missing, or spacing inconsistencies.

**2.** **How it looks without images.** Many desktop email clients (especially corporate ones like Outlook) block image loading by default. Make sure every image includes alt text. For example, if it’s a button, the alt text should match the label: “Download report” instead of “image1.” This ensures your message is clear even without visuals and improves accessibility. To preview your email without images, you can temporarily rename the image folder next to your HTML file.

<Img
img="/api/uploads/email_testing_pics_not_working_2_11zon_de70efc412.jpg"
alt="Image display issue in email"
src="Images didn’t load — the email won’t leave a good impression"
/>

**3.** **Dark mode display.** When users enable dark mode, email apps often invert light backgrounds and text colors. Gmail on iOS is especially aggressive — it fully inverts colors, turning light designs dark and vice versa. To avoid surprises, test your email in dark mode across different clients and devices. 

<Img
img="/api/uploads/dark_mode_testing_710a596e64.jpg"
alt="Dark mode in email"
src="Email in Gmail dark mode. Logo blends into the background"
/>

To streamline testing, use modern tools. The [**Pixcraft email builder**](https://pixcraft.io/builder) lets you compare your HTML to the original design and preview it in light/dark mode across different screen sizes.

## Step 2: Technical Check

Even if your email looks great, it might not reach subscribers or break in certain email clients due to technical issues. Here's what to check before sending:

**1.** **Correct HTML structure.** Errors like unclosed tags or improper nesting can cause rendering issues. Run your code through a validator like [**W3C**](https://validator.w3.org/) to spot problem areas. While email HTML supports some older tags, clean and consistent code is still essential — especially for deliverability and consistent display.

**2.** **All links work properly.** Click through your email and verify every button, link, and anchor takes the user where it should. Broken or incorrect links are one of the most common — and damaging — mistakes. Users won’t go looking for the right link, they’ll just close the email.

**3.** **UTM tags are in place.** If you're tracking performance (and you should be), UTM parameters are a must. Without them, traffic from the email will be lumped in with other sources, and you won’t know what actually worked. Double-check every link for ```utm_source```, ```utm_medium```, ```utm_campaign```, etc.

**4.** **Unsubscribe link is included.** Sending bulk emails without an unsubscribe option is a one-way ticket to the spam folder. Make sure the link is functional, leads to the correct page, and is easy to find.

<Img
img="/api/uploads/email_testing_unsubscribe_link_3_11zon_224d6e345c.jpg"
alt="Example of an unsubscribe link"
/>

**5.** **Plain-text version is included.** Your email should have both HTML and plain-text versions — a standard feature in reputable email platforms. Plain-text emails boost sender reputation and are used by spam filters to determine if your message is real or just a template blast. Make sure your plain-text version is readable: no code, proper line breaks, working links, and clear content.

**6.** **HTML size is under Gmail's limit.** Gmail clips emails over 102 KB, showing a message like “[Message clipped] View entire message.” That means your final CTA or key content might go unseen. The open tracking pixel, usually at the bottom, may also fail to load, giving you inaccurate open rates.

**7.** **JSON-LD and AMP work without errors.** If your email uses JSON-LD, validate it using a structured data tool. [**This article**](https://pixcraft.io/blog/smart-cards-and-order-status-using-json-ld-in-email-campaigns) has helpful examples. For AMP emails, check the AMP code with the [**official Playground**](https://amp.gmail.dev/playground/) to ensure everything renders correctly — even small errors can prevent AMP from working and fall back to standard HTML.

## Step 3: Content Check

**1.** **Subject line and preheader.** The subject should be clear, relevant, and non-spammy. Most email clients cut it off after 50–60 characters.

The preheader complements the subject line, adds value, and encourages opens. It’s usually set in a separate field in your email tool or hidden using styles in the first visible line of the email.

**2.** **Rendering across email clients.** Emails can look very different in Gmail vs. Outlook vs. Apple Mail. Always test your message in multiple clients and devices.

Tools like **Litmus**, **Email on Acid**, **Testi@**, and others help identify rendering issues, background glitches, unreadable text, or code errors. They’re especially useful for complex layouts or custom elements. Some tools even flag spam triggers and offer improvement tips.

**3.** **Testing on real devices.** Emulators are useful but can’t fully replace real-world testing. If possible, send your email to yourself on different devices.

Check how it looks in Gmail on Android, Mail on iPhone, and Outlook. Open it on laptops and desktops in various browsers. Look for image loading, mobile scaling, font size, and button tap targets.

You might catch things that previews miss — animations that don’t work, AMP blocks that don’t load, or blurry images. If you lack test devices, ask colleagues to check and send screenshots.

## Step 4: Dynamic Content Check

This step applies if your email includes dynamic content that changes per recipient — like triggered emails, personalized product recommendations, or segmented offers. You need to ensure each scenario displays correctly.

If you're using conditional blocks, check that all rules are set correctly and display for the right audience. Make sure there are fallback blocks or hidden sections in case of missing data — your email should never display empty spaces.

Test major content versions by sending test emails to multiple addresses with different parameters (e.g., VIP, new customer, no name, no preferences). Make sure each recipient sees the right version, no “wrong” blocks appear, and no variables are left blank.

If you have lots of variations and can’t check them all, at least cover the most critical ones. Also consider the complexity: overly dynamic logic can slow delivery or cause errors — sometimes simpler is more reliable.

## Conclusion

Testing your email before sending isn’t an extra step — it’s essential for avoiding mistakes, protecting your reputation, and increasing performance.

Here’s a quick checklist to keep on hand:

- Visual check: design match, image-free version, dark mode preview  
- Technical check: valid HTML, working links, UTM tags, plain-text version  
- AMP and JSON-LD (if used): validated and error-free  
- Subject + preheader: correct and personalized  
- Client tests: rendering across email apps and devices  
- Dynamic content: rules, fallbacks, and proper personalization

Make testing a habit. It saves time, stress, and ensures every email you send performs its best.

Full checklist for email testing before sending: how to avoid mistakes, improve deliverability, and make your campaign truly effective.

small_checklist-testing-email.png

thumbnail_checklist-testing-email.png

checklist-testing-email.png

Checklist: What to Test Before Sending an Email

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

## JSON-LD Structured Data

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## Testing Templates with JSON-LD

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

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

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

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

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

## Conclusion

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

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


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


small_JSON-LD.png

thumbnail_JSON-LD.png

JSON-LD.png

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

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

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

## What is a Component?

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

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

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

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

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

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

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


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

## Component Instance

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

### How Instances Work

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

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

## Component Variants

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

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

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

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

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

## Nested Components

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

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

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

## Component Properties

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

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

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

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

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

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

Let's go over each in detail.

### Text Properties

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

**How to create:**

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

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

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

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

### Boolean Properties

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

**How to create:**

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

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

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

### Instance Swap Properties

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

**How to create:**

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

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

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

### Variant Properties

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

**How to create:**

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

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

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

## Variables

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

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

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

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

 Figma supports four types of variables:

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

### Color Variables

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

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

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

### Number Variables

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

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

### String Variables

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

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

### Boolean Variables

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

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

In Figma, boolean variables control layer visibility.

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

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

## Creating an Email Guideline

### Analysis and Planning

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

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

### Creating a Design System

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

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

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

### Building Components

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

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

### Auto Layout and Responsiveness

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

### Documentation

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

### Testing and Optimization

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

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

## Conclusion

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

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

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

small_figma.png

thumbnail_figma.png

figma.png

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

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

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

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

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

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

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

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

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

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

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

## Which Wording Works Best?

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

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

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

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

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

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

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

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

**What to Test?**

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

## What CTA Buttons Should Look Like

### Size

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

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

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

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

### Button Shape

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

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

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

### Space Around the Button

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

### Visual Feedback

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

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

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

## How to Choose the Best Button Design

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

**What to Test?**

When testing buttons, consider the following:

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

**How to Test?**

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

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

## What Are Bulletproof Buttons?

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

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

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

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

## Conclusion

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

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


small_cta-pixcraft-knopki-dlya-emeilov.jpg

thumbnail_cta-pixcraft-knopki-dlya-emeilov.jpg

cta-pixcraft-knopki-dlya-emeilov.jpg

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

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

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

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

Branding in email campaigns serves several purposes:

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

### Essential Branding Elements for Emails

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

To prevent this, define key template elements in advance: 

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

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

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

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

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

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

## How to Keep Emails Recognizable Without Becoming Repetitive

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

### Adding Variety Without Losing Consistency

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

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

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

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

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

### Playing with the Logo and Other Brand Elements

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

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

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

## How to Maintain Brand Consistency in Dark Mode

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

### What to Do:

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

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

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

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

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

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

## Conclusion

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

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

small_email-branding.jpg

thumbnail_email-branding.jpg

email-branding.jpg

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

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

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

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

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

## What is AMP-list

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

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

### General Syntax

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

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


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

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

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

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

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

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

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

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

## Usage Examples

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

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

### Styling by Time of Day or Date

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

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

### Promotions and Special Offers

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

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

### Weather Forecast

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

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

## Implementation in Pixcraft

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

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

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

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

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

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

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

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

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

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

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

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

## Conclusion

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

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

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

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

Blog