как оформить красивую верстку письма
Новичкам
Анатомия письма. «Да» и «нет» в email-дизайне
В этом выпуске мы расскажем, как создать письмо с нуля.
Я никогда не занимался дизайном и вёрсткой. Я смогу создать письмо?Мы уверены, что каждый должен делать свою работу: дизайнер — макет рассылки, верстальщик — вёрстку, email-маркетолог — стратегию и управление. Но если нет подходящего ресурса, всё приходится делать самому.
Скорее всего, с наскока создать письмо не получится. Это нормально: люди годами учатся дизайну и вёрстке. Мы надеемся, что эта статья задаст направление и предостережёт от типичных ошибок, которые делают новички.
В чём особенности дизайна и вёрстки писемСоздание писем отличается от разработки сайтов и приложений. В чём проблема:
В письмах не работают многие CSS и HTML-теги. Это специальные настройки, которые отвечают за внешний вид страниц в интернете. Например, в письме не получится наложить два элемента друг на друга или добавить анимацию кнопке.
Письма открывают в разных программах. Outlook, Mail.Ru, Gmail, почта Mac — эти программы по-разному отображают письма.
Письма открывают на разных устройствах. На телефоне, планшете и компьютере разный размер экрана. Дизайнер и верстальщик должны учитывать это при создании письма.
Из-за этих особенностей даже появились отдельные профессии: email-дизайнер и email-верстальщик.
Я расскажу об основных принципах создания писем. Начнём с базовых понятий в email-дизайне.
Что нужно знать о дизайне писемРазмер письма600 пикселей — оптимальная ширина письма. Именно такую рекомендуют почтовики. Если письмо шире — на некоторых устройствах появится горизонтальная полоса прокрутки. При этом длина письма и размер фона может быть любым.
Элементы письмаКлассическое письмо состоит из прехедера (короткая полоса в начале письма), шапки, тела и футера. Всё, что снаружи этих элементов — фон.
МодулиПисьма верстают таблицами. Поэтому каждый элемент занимает участок в виде прямоугольника или квадрата — это нужно учитывать ещё на этапе создания макета. Эти модули не пересекаются и редко накладываются друг на друга. Их наполнение может быть разным: текст, изображение, кнопка, GIF-анимация, ссылка.
ШрифтыВ email-рассылках используют набор «безопасных» шрифтов, которые отображаются во всех браузерах и почтовых приложениях.
Если использовать какие-то другие шрифты, то почтовые приложения могут автоматически заменить их на шрифт по умолчанию. В итоге внешний вид рассылки будет совсем не таким, каким его задумал дизайнер.
Цвета, общий стильОбычно письмо — это продолжение сайта. В нём используются те же семейства шрифтов, такие же логотипы и цветовые сочетания. Так мы сохраняем корпоративный стиль, а подписчикам проще узнать нас среди входящей почты.
Проще всего подсмотреть цвета и шрифты для рассылки в брендбуке компании. Если такого нет — можно собрать палитру цветов с сайта и перенести их в письмо. Я для этого использую расширение для Chrome Eye Dropper.
Что нельзя вставлять в письмо
Из-за особенностей вёрстки и требований почтовых провайдеров далеко не все элементы можно безболезненно вставить в письмо. Вот, например, что нельзя добавлять в рассылки:
- Одну картинку вместо полноценного письма. В email-сообщениях помимо изображений обязательно должен быть текст.
- JavaScript.
- Flash-анимацию.
- CSS-анимацию.
- Сокращённые ссылки (например, через сервис Unisender или bit.ly).
- Формы.
- Параллаксы.
Некоторые из этих элементов не будут отображаться в рассылке (например, Flash-анимации, JavaScript). Другие могут отображаться, но при этом значительно повысят шанс рассылки на попадание в спам (сокращённые ссылки, письмо из одной картинки).
С чего начать
Проще всего создать письмо в блочном редакторе. В нём можно выбрать готовый шаблон или собрать письмо из блоков с нуля. Вот, для примера, один из 200+ бесплатных шаблонов в блочном редакторе Unisender.
Прокачайте рассылки по-максимуму 💪
Учитесь в школе email-маркетинга → получаете 100% кешбек на счет в Unisender → делаете крутые рассылки и много зарабатываете 💸
Вперёд!
Собрать в блочном редактореБлочный редактор ускоряет сборку писем и помогает верстать email тем, кто в совершенстве не владеет HTML и CSS. Работа в таких редакторах построена по принципу «бери и тащи» — мы перетаскиваем нужные блоки в макет письма и заполняем их контентом.
Но если вы решили сделать дизайнерский макет, который после этого пойдёт в вёрстку, порядок действий будет другой. С чего начать:
- Скачайте или зайдите в графический редактор: Photoshop, Figma, Sketch.
- Создайте документ шириной 600 px.
- Набросайте примерный эскиз: как будут располагаться элементы, что это будут за элементы — текст, картинки, анимации.
- Наполните шаблон контентом, отредактируйте расстояние между элементами.
Рекомендуем почитать статью, в которой мы пошагово создаём макет письма. Будет полезно, если вы до этого никогда не делали дизайн рассылок.
Как сверстать письмоДизайн письма готов. Теперь его нужно переложить на HTML — специальный язык, который отвечает за внешний вид сайтов. Только в таком виде письмо можно отправить пользователям.
ВручнуюЧтобы сверстать письмо вручную, нужно знать HTML и CSS. Верстают email в редакторах исходного кода: Eclipse, Visual Studio Code, Notepad++. В них мы создаём табличный макет, прописываем теги и атрибуты, адаптируем письмо под мобильные.
Плюсы | Минусы |
Можно создавать гибкие шаблоны, которые будут легко адаптироваться под устройства с разными размерами экранов. Можно сверстать сложный макет, который не всегда получится создать в блочном редакторе. | Нужно хорошо знать HTML и CSS. Прописывать код вручную дольше, чем создавать письмо в блочном редакторе. |
Сверстать письмо в блочном редакторе можно, например, в Unisender, Tilda или других сервисах.
Плюсы | Минусы |
Верстать письма в блочном редакторе быстрее, чем делать это вручную. Знать HTML и CSS не обязательно. В большинстве блочных редакторов можно сверстать адаптивные письма, которые будут подстраиваться под различные размеры экранов. | Трудно сделать необычный, дизайнерский макет. |
Как вариант, всю работу по дизайну и вёрстке писем можно отдать агентствам или фрилансерам. Агентства находят через поисковую выдачу, фрилансеров проще искать на специализированных сайтах (fl.
ru, freelance.ru) или в соцсетях.В чём преимущества и недостатки такого подхода:
Плюсы | Минусы |
Мы разгружаем себя или штатного маркетолога от рутинной работы. На аутсорсе можно найти узких специалистов, которые хорошо разбираются в дизайне и вёрстке писем. | Это дороже, чем делать письмо самостоятельно — мы платим внештатным специалистам за работу. Тяжело предугадать результат работы агентства или фрилансера. |
Если не хотите рисковать с поиском агентства или фрилансера — можете обратиться к Unisender. Мы найдём эксперта, который качественно и вовремя подготовит дизайн и сверстает письмо.
Запомнить
Собрали самое важное из статьи в один чеклист.
Обновлено 15 июля 2022 г.
Поделиться
СВЕЖИЕ СТАТЬИ
Другие материалы из этой рубрики
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
Статьи почтой
Наш юрист будет ругаться, если вы не примете 🙁
Как запустить email-маркетинг с нуля?
В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️
*Вместе с курсом вы будете получать рассылку блога Unisender
Оставляя свой email, я принимаю Политику конфиденциальностиНаш юрист будет ругаться, если вы не примете 🙁
Красиво заверстанное письмо для одного адресата | by Maria Vereschak | Дизайн-кабак
Дизайн0эксперимент
Дизайнерский лайфхак: как сделать красивое письмо и отослать его только одному получателю.
Инструкция.Проблема
Сталкивались ли вы с нестандартной задачей, когда нужно отослать красивое письмо одному адресату а второе письмо с такой же версткой, но другим текстом должно уйти другому получателю? И этот получатель один. Свеженький пример: коллеге из отдела HR необходимо сделать красивое приветсвенное письмо новому кандидату. И таких кандидатов у него много. Он хочет использовать один красивый корпоративный шаблон, но иметь возможность заменять некоторые строки текста при пересылке другому человеку. Как минимум заменять имя и фамилию.
Какие первые решения приходят в голову:
- Сделать обычное письмо, а всю красоту прикрепить в пдф-документе. В этом случае прикрепленный файл не всегда увидят и тем более откроют. Конверсия может быть низкой. Получатель сможет оценить всю силу вашего креатива только после открытия пдф-документа. А этого может и не произойти. Само письмо будет блеклым и без изюма.
- Заверстать письмо в сервисе e-mail-рассылок, к примеру Mail Chimp. Отличный план! Только одному получателю отправить письмо сложно. Надо создавать группу рассылок на одного адресата. А если у вас таких получателей несколько и каждому нужен уникальный контент? Слишком много заморочек. К тому же качественный конструктор, в котором можно создать действительно хорошо-заверстанное письмо, стоит денег. И если у вас нет надобности в рассыльщике — хотя у кого сейчас такой надобности нет — или нет средств, или вы не подключены к хорошему сервису, то это не вариант.
Решение
В моей работе подобных задач становится все больше и надо находить работающие решения. Вот, что мы придумали для этого случая.
Мы давно используем конструктор Tilda Publishing для создания лендингов. Недавно разработчики Тильды добавили конструктор рассылок. Цель тильдовского конструктора — это верстать красивые адаптивные письма и рассылать их через внешний сервис рассылок. Это очень удобно.
Но в нашем случае надо отослать всего лишь одному получателю. Что мы делаем.
- Создаем письмо в Тильде
2. Опубликовываем
3. Высылаем себе тестовое письмо. Заодно и проверите, как все получилось.
Если бы в теме письма не прописывалось TEST, то его можно было бы прямо пересылать адресату.
4. Пересылаем тестовое письмо из своего почтового ящика нужному получателю, удалив следы пересылки.
Вот и все.
Более того, вы можете пересылать это тестовое письмо много раз, заменяя в нем нужные текстовые данные. Это удобно, если, к примеру HR-ы попросили вас разработать шаблон велком-письма, где они могут изменять какие-то данные в каждом новом письме новому кандидату.
Картинки не получися менять в почтовой программе. Но иногда помогают шаблоны с заготовленными картинками.
Есть при этом решении одна проблемка. При пересылке или переадресации письма, фон перестает быть резиновым а контентная часть адаптивной. Это меня сильно удручает.
В мобильном телефоне, оно будет выглядеть мельче. Вот для сравнения два скриншота одного письма с телефона.
Слева адаптивное (тест от Тильды), справа пересылкаАдаптивное выглядит крупнее. Пересланное сообщение похоже на картинку, вшитую в тело письма. Но выглядит не так уж плохо.
Надеюсь, тильдовцы помогут нам с решением этой проблемки) А пока будем пользоваться тем, что есть.
Причудливые буквы ➜ #𝟙😍 𝕊𝕥𝕪𝕝𝕚𝕤𝕙 Текст 𝔣𝔬𝔫𝔱𝔰 Дизайн
𝐹𝒶𝓃𝒸𝓎 𝐿𝑒𝓉𝓉𝑒𝓇𝓈 — генерировать 𝐔𝐧𝐥𝐢𝐦𝐢𝐭𝐞𝐝 (͡ ° ͜ʖ ͡ °) ♥ ℭ𝔬𝔬𝔩 ♥ и ⓢⓣⓨⓛⓘⓢⓗ Причудливые буквы с символами ✅✥ω🥰➓ и смайликов (☞ ͡° ͜ʖ ͡°)☞ (Генератор текста).
Этот сайт является лучшим генератором Fancy Letters. Вы можете генерировать неограниченный причудливый текст для вашего причудливого письменного проекта, а также в любое время, когда вы хотите, чтобы вы могли его использовать. Многие люди также называется наш веб-сайт генератором причудливых текстов. Поскольку Fancy-Letters.Com может генерировать множество удивительных стильных и крутых шрифтов. Вот почему мы также можем назвать его Причудливым. Инструменты письма. Этот сайт предоставляет совершенно бесплатный сервис.
Что такое причудливые буквы?
Причудливые буквы — необычные буквы, которые красивее и привлекательнее обычных буквы. Этими причудливыми буквами можно делиться практически где угодно. Такие как Facebook, Instagram, Twitter, электронная почта и т. д. Вы можете использовать его во всех видах свадебных пригласительных писем, на любом фестивале, ежедневно. заявление. какие-то причудливые буквы. Иногда также считается причудливым текстом. Потому что эти два работают так же, как вам просто нужно ввести любой простой текст на вышеупомянутое поле, если вы используете ноутбук/ПК и если вы используете мобильный телефон, то вы увидите приведенные ниже части экрана вашего мобильного телефона, в этом поле вы должны ввести то же самое и мгновенно этот веб-сайт генерирует красивые красивые невообразимые причудливые текстовые шрифты для ты.
Причудливый текстовый символ, созданный на нашем сайте, более привлекателен для невест. Это очень легко скопировать и вставить причудливый текст с этого сайта. Любой может скопировать и вставить его. Воля получить новый вид и сможет привлечь внимание людей.Какие причудливые буквы он может генерировать?
Этот сайт создает множество видов ​Fancy Letters​ стили, включая гладкий экстравагантный контент, крутые экстравагантные шрифты контента и так далее. Тем не менее, есть некоторые экстравагантные тексты, которые люди любят использовать. Мы сослались на эти экстравагантные текстовые стили ниже. Экстравагантный курсивный контент, Экстравагантный древнеанглийский контент, Моно-пространство ✅ причудливое письмо, текстовый стиль пузырей Lunitools, экстравагантный стиль текста, текстовые стили Vaporwave Text2, случайное экстравагантное содержимое, экстравагантное содержимое Dotty Joiner, экстравагантный режим Neon Fancy Letters и так далее. Наш генератор текстовых стилей Fancy Letters может создавать множество видов текстовых стилей ig bio, которые могут поддерживать ваши публикации в Instagram.
Наш красивый и крутой генератор ​Fancy Letters​ использовать очень просто. Вам просто нужно ввести типичный контент в контейнер, доступный на этом сайте. Некоторое время спустя он превратит ваш обычный контент в красивый контент с удивительными изображениями и удивительными буквами. В этот момент вам не нужно делать ничего особенного, просто переупорядочивайте текстовый стиль в любом месте, где вам нужно. Например, вы можете поделиться экстравагантным контентом в WhatsApp, электронной почте, Facebook и т. д. Кроме того, с этого сайта пользователи могут законно печатать наши стильные письма Fancy Letters. Если вы используете мобильный телефон, в этот момент вы можете увидеть поле для создания в нижней части этого сайта. Для разносторонних людей мы дали эти ресурсы для простого маршрута. Вы также можете изменить размер текстового редактора стилей для удобного просмотра. Получить или создать текстовые стили шрифтов Instagram на этом сайте просто и понятно.
Для этого перейдите на ​www.fancy-letters.com​ и вы получите возможность увидеть одно поле со ссылкой на «Ваш текст здесь». В этот момент вам просто нужно ввести свой контент в этот ящик. Одновременно вы можете получить а-ля мод и крутые текстовые стили для причудливого текста, который дополнительно вызывается в стилях биотекста. Далее скопируйте и вставьте буквы, где вам это нужно. Это текстовые стили, которыми вы можете поделиться практически в любой социальной сети. Большинство классных причудливых стилей текста также будут поддерживаться в фотошопе и на сайтах редакторов онлайн-фотографий Like-Canva, Pixlr и т. д. Таким образом, измените текстовый стиль Instagram на поразительные и привлекательные текстовые стили, которые помогут расширить число ваших поклонников в социальных сетях. Поскольку наш текстовый стиль причудливого алфавита выглядит необычно, вам не нужно загружать ​причудливые шрифты для письма​ применение стилей для этого.
В чем разница между Fancy Letters и Fancy Text?
www.fancy-letters.com​ несколько не совсем то же самое, что и другой веб-сайт, создающий причудливые буквы. Поскольку большая часть модных экстравагантных генераторов контента апатична и имеет ограниченный выбор для ​cool Fancy Letters​ создание. Как бы то ни было, сколь бы контрастными и разными сайтами наш конвертер стилей причудливых букв ни был, он просто поражает воображение. Наш экстравагантный генератор контента разумно использовать на любом гаджете. Например, мобильные телефоны, ноутбуки и планшеты. В тот момент, когда вы собираетесь просматривать этот онлайн-генератор причудливых писем, вы сэкономите свое время. Так как он слишком быстро работает на широком спектре устройств и работает практически невероятно. Между причудливыми буквами и причудливым текстом существует множество контрастов. Хотя обе мотивации использования почти эквивалентны. For Fancy Text немного отличается от этого веб-сайта. Как бы то ни было, Fancy Text на данный момент сделан на сайте. Пользователю просто нужно переупорядочить его в любом месте, где ему нужно. Оба являются одним из видов Unicode, который поддерживается в Facebook, Twitter, Whatsapp и других социальных сетях. Причудливые буквы также можно использовать в описании видео на Youtube, а также ​Причудливые буквы​. Во всяком случае, модные буквы легко создавали красивый и стильный контент, но вы также можете добавить классный и удивительный контент с помощью Fancy Text, который может сделать ваши модные шрифты более привлекательными. Этот сайт предлагает абсолютно бесплатную поддержку, однако некоторые ​модный конвертер текста​ или генераторы как бы берут на себя ответственность за свою небольшую помощь.
Могу ли я использовать Fancy Letters на Facebook?
Да, вы можете использовать ​Fancy Letters для Facebook​. Наш веб-сайт поддерживает причудливые текстовые шрифты на Facebook, и вы можете создавать очень красивые стильные и крутые причудливые буквы с символами. Если вы девушка, вы можете отправить его своему парню, который сделает вас более привлекательным. А если вы мальчик, вы можете поделиться причудливым алфавитом шрифта со своей девушкой в социальных сетях, таких как Facebook. Итак, в полдень вы можете использовать наши Fancy Letters в качестве названия своей страницы и названия группы Facebook. После использования этих шрифтов на своей странице или в группе ваша страница и группа станут более интересными. это поможет привлечь ваших поклонников.
Могу ли я использовать Fancy Letter в Instagram?
Да, вы также можете использовать наше ​Fancy Letter для Instagram.​ Наши шрифты Fancy Letter очень красивы, и вы можете использовать их при загрузке своих фотографий и видео. Потому что Instagram — это такая социальная медиа-платформа в современном обществе, которой пользуются более миллиарда человек. люди. Когда вы публикуете в Instagram, вы можете превратить свой обычный текст в интересный текст, который мы также называем ​смена шрифтов​. Instagram – одно из лучших мест для размещения причудливых букв.
Могу ли я использовать Fancy Letters в Твиттере?
Да, вы также можете использовать ​красивые буквы для Twitter​ но в Твиттере есть некоторые ограничения. Вы не можете использовать все причудливые буквы в Твиттере, потому что невозможно использовать причудливые буквы для какой-то личной политики конфиденциальности в Твиттере. но самые интересные и красивые причудливые буквы вы можете использовать каждый раз, когда публикуете в своем Твиттере. Так что используйте хотя бы одно причудливое письмо, чтобы ваши сообщения в Твиттере могли легко появиться перед людьми. Если пост неинтересен, вы не получите никаких результатов даже после тысячи постов. Пост без колебаний популяризирует ваш аккаунт так же, как и пост
Могу ли я использовать генератор Fancy Letters на своем Устройстве?
Да, вы можете открыть веб-сайт Fancy Letter Generator на своем устройстве и создать ​стильные и крутые Fancy Letters​ отсюда. хотя мы не знаем, какое устройство вы используете, мы можем сказать, что наш веб-сайт Fancy Letters определенно будет поддерживаться на вашем устройстве, потому что наш веб-сайт генератора Fancy Letter прекрасно работает на всех устройствах в мире, будь то мобильный телефон или ноутбук или планшет. Вы наверняка сможете создавать причудливые курсивные буквы и другие удивительные буквы на своем устройстве без какого-либо сжатия по теме.
Этот веб-сайт может генерировать такого рода причудливые буквы:-
🆈🅾🆄🆁 🅻🅴🆃🆃🅴🆁🆂
ⓨⓞⓤⓡ ⓛⓔⓣⓣⓔⓡⓢ
. ˥ ɹno⅄
🅈🄾🅄🅁 🄻🄴🅃🅃🄴🅁🅂
ꙅɿɘƚƚɘ⅃ ɿuoY
ᖻᓍᑘᖇ ᒪᘿᖶᖶᘿᖇS
Y̲o̲u̲r̲ ̲L̲e̲t̲t̲e̲r̲s̲
Y̶̤͉̗̌͌̄̐̕͜ò̷̡̟̩̈́u̵̧͖̱̫̻͔̟͗̐̚͝ȓ̶͈̆̾̈́́̎͐̽͝ ̸̧̼̳̝̈́͛̈͝L̸̡̧͍͍̻̤̬͈̱̓̌̿̌̾̈́̔ĕ̷͈̌̄͒̐ẗ̶̞́̓̓̆̒̇͝t̴̘̼̰̱̊̕ḛ̶͎̝̑̚͠r̶̭̦̦͈͖̒̒̓̎̍̑͂͝͝s̸̤͉̞̱͉̯̳̗͔̹͋̇͗̋̾̔̈͑̓
Y⃣ o⃣ u⃣ r⃣ L⃣ e⃣ t⃣ t⃣ e⃣ r⃣ s⃣
𝕐𝕠𝕦𝕣 𝕃𝕖𝕥𝕥𝕖𝕣𝕤
𝒴𝑜𝓊𝓇 𝐿𝑒𝓉𝓉𝑒𝓇𝓈 и многие другие веб-сайты с буквами F603 (без ограничений) 9003?
1. Первый шаг — ввести текст в поле ввода (Enter Your Text)
2. Второй шаг довольно прост: в тот момент, когда вы вводите любой текст, он автоматически генерирует для вас множество различных типов причудливых букв, после чего вы просто нажимаете на любой текст, который хотите скопировать в свою систему. В тот момент, когда вы щелкнете по нему, он автоматически скопируется в вашу систему, после чего вы сможете вставить его куда угодно, будь то Facebook, Twitter, Instagram, электронная почта или текстовое сообщение.
Good & Beautiful в App Store
Описание
Дети могут попрактиковаться в правописании, складывая из плиток слова. Часть приложения «Практика от А до Я» полезна для всех. Части приложения уровней K-2 предназначены для использования с учебным планом Good and the Beautiful Language Arts.
Версия 1.0.5
Обновление доступных писем
Рейтинги и обзоры
23 Оценки
Легко использовать
Приложение загружается быстро и очень простое в использовании. Плитки легко прокручиваются на моем iPhone, чтобы их могли использовать мои дочери, и они быстро поняли, как перемещаться и очищать слова. Я очень доволен тем, как хорошо это работает на моем телефоне. Супер гладкий.
Спасибо, что нашли время поделиться своим описательным отзывом! Мы надеемся, что вы продолжите пользоваться приложением!
Просто и увлекательно
Это приложение простое в использовании, но оно предоставляет бесконечные возможности для обучения моих детей. Моей старшей дочери тоже понравится пользоваться приложением, несмотря на то, что она учится в пятом классе. Отличный способ попрактиковаться в написании слов, не слишком отвлекаясь!
Мы очень рады, что вашей семье нравится приложение! Спасибо за положительный отзыв!
Без отвлекающих факторов
Моему 5-летнему ребенку нравится это приложение для тренировки правописания. Он очень удобен в использовании, красиво оформлен и очень хорошо организован. Я ценю, что у меня нет рекламы или звуков, которые могут отвлекать мою дочь, когда она тренируется в написании слов.
Спасибо за прекрасный отзыв! Мы ценим время, которое вы потратили на то, чтобы поделиться, и надеемся, что ваша дочь продолжает пользоваться приложением.
Разработчик, The Good and the Beautiful LLC, указал, что политика конфиденциальности приложения может включать обработку данных, как описано ниже. Для получения дополнительной информации см. политику конфиденциальности разработчика.
Данные не собираются
Разработчик не собирает никаких данных из этого приложения.
Методы обеспечения конфиденциальности могут различаться, например, в зависимости от используемых вами функций или вашего возраста. Узнать больше
Информация
- Продавец
- ООО «Хорошие и красивые»
- Размер