В статье рассказываем про инструмент GPT4All, с помощью которого можно запускать текстовые ИИ-модели прямо у себя на компьютере. Узнайте, как он работает, что предлагает и чем полезен для пользователей.

small_gptall_cover.png

thumbnail_gptall_cover.png

gptall_cover.png

Локальный ИИ под вашим контролем: какие возможности открывает GPT4All

За несколько десятилетий электронная почта прошла значительный путь от простых текстовых сообщений к визуально насыщенным рассылкам с графикой, анимацией и интерактивом. Но чем разнообразнее становился контент, тем больше требований предъявлялось к вёрстке.

Чтобы создание писем оставалось комфортным в современных реалиях, мы разработали специальный фреймворк — **TJML**. В статье рассмотрим его детально и расскажем, как он помогает верстать рассылки легко и управляемо.

## Стоит ли сегодня полагаться на ручную вёрстку

Когда-то ручная HTML-вёрстка считалась эталоном. Только она позволяла добиться наилучшего результата и контроля над письмом. Однако со временем технологии стали сложнее, а с ними эволюционировали и почтовые клиенты, каждый из которых имеет свои особенности.

Нужно держать в голове множество деталей: как ведут себя внешние стили, работают ли медиазапросы, что происходит с таблицами и отступами в разных клиентах. К тому же сегодня многие люди проверяют почту со смартфонов. Это значит, что каждое письмо необходимо адаптировать в том числе под вертикальный экран и мобильные системы.

Фактически одно письмо теперь включает **три разных версии**:

- для современных десктопных и веб-клиентов; 
- для мобильных устройств; 
- для Outlook на Windows, где поддержка CSS всё ещё сильно ограничена.

Отдельно стоит упомянуть AMP-технологию. Она открыла путь к интерактивным письмам с «каруселями», формами и другими динамическими элементами. Но технически это значит, что нужно предусматривать как AMP-вариант для совместимых клиентов, так и обычную HTML-версию для всех остальных.

### Где помогают визуальные конструкторы

В условиях современного маркетинга полагаться только на ручную вёрстку невозможно. Альтернативой стали **конструкторы писем** — современный и удобный способ работы над рассылками. Они не требуют знания кода и позволяют создавать шаблоны писем за несколько минут.

Например, [**визуальный редактор писем Pixcraft**](https://pixcraft.io/ru/builder) позволяет собирать рассылки по принципу drag-and-drop: просто перетаскивайте нужные элементы на холст и меняйте их. Управление компонентами, включая AMP, доступно прямо в интерфейсе, а готовые шаблоны совместимы со множеством email-клиентов и легко адаптируются под мобильные устройства. Ещё одной альтернативой является экспорт готового email-кода с помощью [**плагина Pixcraft для Figma**](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-export-html-email-code-from-your-figma-design-responsive-outlook-gmail-ios): он позволяет преобразовать готовый макет в адаптивное HTML-письмо.

Но так или иначе в основе каждого письма лежит код, и порой взаимодействия с ним не избежать. Можно ли сделать работу с кодом такой же комфортной и современной? Ответ — да. Именно здесь и пригодится TJML.

## Что такое TJML

Это email-фреймворк, созданный командой Pixcraft для разработки HTML- и AMP-писем. Он объединяет простоту блочного подхода с гибкостью ручной вёрстки, сохраняя при этом привычный синтаксис.

Базовый каркас письма в TJML может выглядеть так:

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

Здесь роли компонентов распределяются следующим образом:

- `<tjml>` — корневой контейнер, обрамляющий весь код; 
- `<m-body>` — основное тело письма, которое содержит весь его контент; 
- `<m-wrap>` — обёртка, отвечающая за ширину, отступы, фон, выравнивание и другие параметры.

Для построения многоколоночной структуры в письме могут использоваться два типа композиции контента. Они определяют, как именно блоки будут вести себя на мобильных устройствах:

- **Неперестраиваемые (резиновые) блоки.** Здесь элементы остаются в одной строке. За это отвечает компонент `<m-row>`: он обрамляет блоки `<m-column>`, которые масштабируются в мобильных клиентах. 
- **Перестраиваемые блоки.** Это компоненты `<m-box>`, которые обрамляются с помощью `<m-boxes>`. В мобильной версии письма они автоматически выстраиваются друг под другом, если не помещаются в одну строку.

Внутрь структур добавляются контентные блоки, в том числе текст (`<m-text>`), изображения (`<m-img>`), кнопки (`<m-button>`) и другие. Больше деталей о компонентах TJML можно узнать в [**документации**](https://docs.pixcraft.io/ru/tjml/).

Ниже — упрощённый пример того, как может выглядеть письмо, свёрстанное в TJML:

```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">
 Привет! Это письмо собрано на TJML.
 </m-text>
 <m-button href="https://docs.pixcraft.io" bgcolor="#6a66d3" color="#ffffff" border-radius="6px" width="200">
 Узнать больше
 </m-button>
 </m-wrap>
</m-body>
```

## Что делает TJML особенным

### Работа с кодом в браузере

Чтобы начать работу с TJML, достаточно открыть онлайн-редактор [**Playground**](https://app.pixcraft.io/playground/). Прямо здесь можно верстать и визуально проверять письмо, переключаться между десктопным и мобильным отображением, тестировать тёмную тему и просматривать готовый HTML-код.

<Img
img="/api/uploads/01_kodplaygr_69012019da.png"
alt="Вёрстка письма с помощью TJML в Playground"
/>

При этом с TJML можно работать в любом IDE. Для ещё большего комфорта мы: 

- разработали [**плагин для VS Code**](https://marketplace.visualstudio.com/items?itemName=Pixcraft.vscode-tjml), добавляющий автокомплит и подсказки по доступным компонентам и атрибутам; 
- подготовили [**web-types**](https://app.pixcraft.io/tjml/web-types.json) для продуктов JetBrains (WebStorm/PhpStorm).

### HTML и AMP в одном коде

В классическом подходе AMP- и HTML-версии письма — это две независимые разметки, которые верстаются по отдельности. Однако TJML значительно упрощает этот процесс: в рамках разметки фреймворк формирует сразу две версии кода.

Если нужно, чтобы определённый блок отображался только в одной из версий, можно использовать условный рендеринг:

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

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

При этом TJML сам подключает необходимые AMP-компоненты, если они задействованы в коде (например, `amp-carousel`, `amp-form` или `amp-list`).

### Отображение в почтовых клиентах

Одним из основных преимуществ TJML является продуманный подход к совместимости с различными почтовыми клиентами, включая Outlook и Яндекс Почту:

- Десктопная версия **Outlook** использует движок рендеринга, где современные CSS-свойства не работают. TJML автоматически добавляет VML-блоки и условные комментарии, чтобы фоны, выравнивание и отступы корректно отображались даже в старых версиях клиента. 
- **Яндекс Почта**, в свою очередь, не поддерживает медиа-запросы. TJML формирует структуру так, чтобы сохранить адаптивность даже без них.

Проще говоря, TJML убирает из процесса рутину, связанную с кросс-клиентной адаптацией. Вопросы совместимости и корректного отображения решаются на уровне фреймворка.

### Контроль веса и оптимизация кода

В email-маркетинге вес писем не менее значим, чем их наполнение. К примеру, Gmail автоматически обрезает письма, если их размер превышает **102 КБ**, что может повлиять на вёрстку и работоспособность трекинговых пикселей.

TJML предупредит, если текущий размер кода превышает рекомендуемое значение. При необходимости можно запустить встроенную оптимизацию, чтобы удалить лишние пробелы, переносы и неиспользуемые стили. В результате вы получите компактный и стабильный код рассылки, который корректно отображается и не обрезается в почтовых клиентах.

### Проверка ошибок и типографика

В процессе работы TJML проверяет структуру письма и корректность вложенности `m`-элементов. Если обнаружатся нарушения, фреймворк предупредит пользователя о них.

Дополнительно в TJML предусмотрен автоматический типограф: он расставляет неразрывные пробелы, чтобы убрать висячие союзы и предлоги. Благодаря этому письмо выглядит аккуратно не только технически, но и визуально.

## Вёрстка пиксель в пиксель

Чтобы между дизайн-макетом и вёрсткой не было визуальных расхождений, в TJML предусмотрен инструмент **Pixel Perfect**. Работает он так: для проверки письма необходимо загрузить макет в графическом формате (например, PNG или JPG). Затем нужно прописать тег и атрибут с указанием адреса:

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

После этого необходимо совместить макет с вашей вёрсткой, указав относительное смещение, и выбрать режим наложения (прозрачность или вычитание).

## Как автоматизировать вёрстку с ChatGPT

Чтобы верстать письма на TJML было ещё проще, мы обучили [**специальную версию ChatGPT**](https://chatgpt.com/g/g-6823ad1f3c208191b9ce2d58bf3bb724-tjml) работе с фреймворком. Она помогает создавать письма буквально по запросу. Достаточно сформулировать описание, и уже через несколько секунд вы получите TJML-код, который сразу можно добавлять в редактор и адаптировать под задачу.

<Img
img="/api/uploads/02_generirovkod_cc4f8e261f.png"
alt="Генерация TJML-письма"
/>

Но функционал специальной версии ChatGPT не ограничивается только этим. Помимо генерации она:

- **умеет вносить правки** в существующий код на основе текстового описания; 
- **помогает учиться работе с TJML**: объяснять назначение тегов и подсказывать, какие атрибуты стоит использовать в разных сценариях.

## Результаты и эффективность

Фреймворк уже прошёл проверку в реальных условиях и может использоваться в рабочих проектах.

В частности, мы помогали внедрять TJML в ежедневную работу одного из крупных российских маркетинговых агентств. Здесь на начальных этапах фреймворк дал заметный рост производительности. Даже при создании сложных писем средняя скорость вёрстки увеличилась **более чем на 50%**, а при создании AMP-писем — в среднем **в 1,5 раза** без потери качества.

Следующий показатель — **чистота и компактность разметки**. В сравнительных тестах при использовании TJML код весил **13,5 КБ**, тогда как аналог на [**MJML**](https://pixcraft.io/ru/blog/mjml-ili-tjml) — более **22 КБ**. Меньший вес обеспечивает более быструю загрузку и снижает риск обрезки письма в Gmail.

Ещё одно преимущество TJML — **низкий порог входа**. Фреймворк позволяет сосредоточиться на структуре и дизайне письма, не углубляясь в тонкости адаптации под множество почтовых клиентов. Наконец, одним из главных аргументов в пользу TJML остаётся уже упомянутая **стабильность отображения**, в том числе в наиболее требовательных к вёрстке email-клиентах.

## Заключение

С TJML процесс создания рассылок становится не только быстрым, но также стабильным и надёжным. Контроль качества обеспечивается на каждом этапе, начиная от творческой задумки и заканчивая запуском рассылки. Для маркетинговых специалистов это означает меньше времени на отладку и больше — на контент и креатив.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

В статье рассказываем, как фреймворк TJML от Pixcraft упрощает вёрстку писем, какие функции делают работу с ним ещё более удобной и как ускорить процесс с помощью специальной версии ChatGPT.

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

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

cov_pic_1.png

Фреймворк TJML: как в 2025 году верстать письма быстро и просто

Как запустить ИИ-генератор изображений Stable Diffusion на своём компьютере: инструкция, основные функции и советы по генерации.

Статьи по тегу: AI