Как красиво украсить письмо. Красивое оформление письма своими руками в разных стилях

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

Старинное письмо, скорее всего, прошло длинный путь и поэтому оно не может быть абсолютно гладким и чистым, поэтому нам необходимо слегка смять лист бумаги.

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

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

После того, как бумага немного подсохнет, нужно прогладить лист с помощью утюга. Это разгладит бумагу и сделает ее более удобной для написания текста.

Теперь можно перейти к дальнейшему состариванию бумаги: чуть надорвать лист, капнуть на него воском или даже оставить на нем отпечатки от кружки горячего кофе.

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


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

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

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

Выбор оформления

Написать девушке красивое письмо лучше всего с оформлением в «любовном стиле» - смайлики, розовый оттенок письма. Можно прикрепить милую электронную открытку. На мужчин это не производит ожидаемого эффекта. Поэтому для письма, которое будет написано парню, лучше выбрать простое оформление. Если есть желание, то письмо можно написать на подходящей открытке, для этого существуют различные сервисы в интернете. Вот некоторые советы по оформлению:

  • Ощущение романтичности придаст написание письма в историческом стиле. Выберите интересное оформление шрифта в редакторе электронного ящика или подобным образом оформите письмо в «Word».
  • Также можно написать несколько строк в игривом стиле, приукрасив строки чем-нибудь веселым, если хотите мужчину слегка подзадорить. Красивое оформление письма придаст ему пикантность и индивидуальность.

Как следует писать письмо

  • Красивое письмо любимой девушке или любимому мужчине должно быть пропитано романтикой, поэтому нужно заранее настроиться на нужную волну. Возможно, в сердце есть то, чего вы не может решиться сказать в глаза, а через письмо передать слова любви легче. Все люди любят, когда ими восхищаются. Поэтому поразмышляйте, что вас привлекает в этом человеке, и опишите это, но не льстите. Если тот, кто будет читать письмо, поймет, что вы преувеличиваете или выдумываете, то это может дать обратный эффект. Комплименты лучше объяснять таким образом, чтобы не оставалось сомнений в их подлинности и искренности. От этого будет зависеть - поверит вам человек или нет.
  • В самом начале письма пишется обращение. Всегда обращайтесь по имени, используя при этом ласковые слова. Например: «Милая Анастасия» или «Дорогой мой Сергей». Первые слова имеют большое значение, так как благодаря им складывается первое впечатление.
  • Умение заинтриговать пойдет на пользу. Излагайте некоторые мысли так, чтобы они были неоднозначными, при этом ставя многоточие в конце предложения. Как сделать красивое письмо еще и интересным? Просто - заинтригуйте.
  • Конечно, в тексте письма должно прозвучать заветное «я люблю тебя». В некоторых случаях хорошо было бы написать даже небольшой отрывок в стихотворной форме, если вы можете сами придумать что-нибудь. Заимствовать чужие произведения не стоит, так как это мужчинам, да и женщинам тоже, не всегда нравится.
  • При написании письма нельзя торопиться, чтобы не написать глупостей, перед отправлением следует все хорошо обдумать.

Чего писать не стоит

Признаваясь избраннику в любви, не стоит слишком открыто намекать на взаимность, чтобы человек не почувствовал себя обязанным. Также не нужно писать о своих больших планах на его или ее счет, таких как: свадьба, создание семьи, рождение детей и т.д. Из-за этого может пропасть чувство легкой романтической непринужденности и тяги к возлюбленной. Пусть письмо пропитано теплом и романтичностью. Девушку скоропостижными предложениями так же можно напугать, ведь никто не собирается замуж впопыхах.

После завершения письма необходимо тщательно его перечитать и проверить на наличие ошибок, так как безграмотность может испортить впечатление вашего избранника.

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

Подготовка листа к дальнейшему оформлению

Изначально стоит выбирать исключительно качественную плотную бумагу, которая сможет выдержать определенные виды декорирования. После выбора основного материала стоит произвести и его подготовку:

  • Убрать с поверхности лишние элементы, такие как металлические скобы, зажимы, наклейки.
  • Расправить помятости или сгибы, которые возникли при определенных обстоятельствах.
  • Перед тем как начать оформление, стоит подготовить поверхность для работы и желательно иметь промокашку, чтобы не происходило перепечатывание текста или декора.

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

Возможные варианты оформления

Красивое оформление письма можно выполнить, используя несколько простых техник, а также их сочетание. Самыми популярными, эффектными и простыми в исполнении являются следующие варианты:

  • На обычном листе бумаги сделать композиционную картину из цветной, гофрированной, декоративной бумаги.
  • Уголки листа можно оформить по принципу снежинки к Новому году - подготовить макет из мелких деталей и вырезать их с помощью канцелярского ножа.
  • С помощью обычных карандашей легко сделать цветной фон-рисунок, на котором будет размещаться текст.
  • Для украшения бумаги можно использовать стразы, блестки, бусы и наклейки, которые наносят на поверхность заготовки.

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

Оригинальное оформление новогоднего письма

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

Красивое оформление письма Деду Морозу, которое можно сделать с ребенком, может осуществляться по такому образцу:

  1. Стоит взять лист формата А 4 и расчертить его, формируя линии для заполнения текстом.
  2. В правом нижнем углу можно сделать рисунок с зимней тематикой по обычному стандарту.
  3. Более оригинальный вариант - это создание из цветной бумаги ладошек. Предложить ребенку обвести ладошки ребенка, а потом их вырезать.
  4. Из ладошек сделать елочку, приклеивая элементы с помощью клея. Поверх готового изделия приклеить елочные игрушки из бумаги, на которых написаны пожелания или просьбы.

Такая техника выполнения - это обычная аппликация, которую так любят дети.

Как украсить письмо, которое предназначено любимому?

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

Способ красивого оформления письма любимому человеку в современном стиле может представить собой сочетание миниатюрных абстрактных рисунков и надписей. Необходимо подготовить такие инструменты и материалы:

  • Ручка-перо и несколько цветов чернил. Обязательно наличие черных чернил.
  • Простой карандаш, ластик.
  • Акриловые краски.

Принцип оформления заключается в следующих шагах:

  1. Конверт и сам лист стоит оформить в стиле ретро-типографики. Нужно подготовить в заданной тематике шаблон, который создается на обычном листе бумаги.
  2. Положить лист в конверт и с помощью простого карандаша перенести рисунок на поверхность конверта.
  3. С помощью чернильной ручки обвести все элементы рисунка. Желательно, чтобы преобладали чернила черного цвета.
  4. Акриловыми красками закрасить отельные части изображения. Стоит использовать максимум 3 ярких цвета, среди которых обязательно будет присутствовать желтый.
  5. Стоит продумать шрифт для создания надписей. Лучше писать печатными буквами, которые можно встретить в книгах.

Декорирование листов для тематического письма

Красивые листы для оформления писем могут получиться при минимальном, но подходящем декорировании - не обязательно раскрашивать основу яркими красками, заполняя все пространство. Изначально стоит определить тему письма, а только потом выбирать способы и методы украшения.

Тематическое оформление письма красиво своими руками можно выполнить таким образом:

  • Если письмо пишется в летнее время, то в верхнем левом или правом углу можно нарисовать небольшой якорь, который будет украшать бант из атласных лент.
  • Послание можно сделать приятным и запоминающимся, если просто оклеить конверт с внутренней стороны подарочной бумагой с нейтральным принтом.
  • Романтические очерки можно оформить с помощью цветочного гербария, который будет украшен текстильными элементами в экостиле.

Стоит запомнить, что минимализм - это тоже искусство, которое требует намного больше таланта и тонкой организации души, чем любой другой стиль.

Секреты относительно оформления листов для писем

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

Для этого стоит использовать готовые или полуготовые шаблоны для писем. Можно приобрести специальный набор для красивого оформления письма с любой тематикой.

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

Наша тема на сегодня: дизайн электронного письма. Важно, чтобы этот правильный дизайн работал и приносил результат. Оформление — не то, что получатель сразу увидит и оценит. Чтобы труды на разработку классно написанного письма с грамотным дизайном окупились, сообщение должно быть доставлено целевой аудитории и должно быть открыто. Только после того, как эти два пункта решены, можно думать о том, как сделать красивое письмо для рассылки.

Доставляемость: как создать рассылку с минимальным попаданием в спам?

Я расскажу на примере Getresponse.ru

Тут рецепт достаточно прост. Сервис платный и жалеть о покупке вам точно не придется. «Гетрик» многими пионерами имейл-маркетинга называется «сервисом, гарантирующим самую высокую доставляемость во «Входящие» на сегодняшний день». И так уже много лет.

Чем больше база, тем больше стоит абонемент. Покупаем нужный тариф, идем в чат к техподдержке и спрашиваем о том, как нам снизить спам-рейтинг до нуля. Поддержка у Getresponse быстрая, толковая, за 20 минут вопрос будет решен.

  1. Не слать в базу, которая не подписывалась на вашу рассылку. У Данте было бы, как минимум, на один круг ада больше, родись он в 80-х
  2. Слать от имени корпоративного почтового ящика (drathutee@сайт)
  3. НЕ ДЕЛАТЬ ВОТ ЭТОГО в заголовке
  4. Вопросительные, восклицательные знаки (и другие знаки тоже) в заголовке провоцируют спам-рейтинг
  5. Разные языки в заголовке — провоцируют еще больше
  6. Аккаунт, с которого регулярно рассылаются письма с большим попаданием в спам, регулярно наращивает спам-рейтинг
  7. Это только часть нюансов, на разных сервисах email-рассылок водятся свои «спам-тараканы», так что обязательно стучитесь в поддержку

Заголовок: как создать письмо для рассылки, которое будут читать?

В почтовом клиенте видно: от кого письмо, заголовок письма. На открываемость влияют два фактора: авторитет отправителя и то, что он там написал в заголовке своего сообщения.

  • Знать аудиторию. Это 90% успеха. Вам нужно знать страхи, мечты, увлечения, потребности, распорядок дня, возраст, хобби, работу… Ну вы поняли, нужно знать аудиторию. От этого заголовки сами не напишутся, но придумывать их станет значительно легче и быстрее.
  • Выделиться из сообщений-конкурентов. Как прямых, так и косвенных. Зная аудиторию, вы знаете на кого еще она подписана. Подписывайтесь на конкурентов, смотрите на их дизайн email-рассылки и на контент, анализируйте и выделяйтесь.
  • Тестируйте и экспериментируйте. Проводите А\Б тесты, анализируйте открываемость предыдущих писем, сопоставляйте цифры с буквами в заголовке и делайте выводы.
  • Не повторяйтесь. Нашли классную структуру заголовка — используйте несколько раз, но не берите за основу. Одинаковые письма (сюда же одинаковый дизайн электронных писем), пусть и с разными словами, просто перестанут открывать со временем.

Как сделать красивое письмо для рассылки: 6 веб-приемчиков

Теперь, когда мы уверены в доставляемости и открываемости нашего письма, есть смысл потрудиться и сделать так, чтобы оно было дочитано до конца.

Вопреки мифам о том, что email-маркетинг уже не торт, не работает, устарел, остаются игроки, которые стараются и получают результаты. А есть те, кто шлет унылые буквы на белом фоне и жалуется на порядок вещей. Чтобы ваши сообщения не были мгновенно отправлены в корзину, используйте дизайнерские фишки!

1. Вовлекающий дизайн email-рассылок с проработанным цветом

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

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

Белое оформление электронного письма давно никого не интересуют, а неумелая работа с цветом чаще «вырывает глаз», чем интригует. Найдите несколько своих цветовых стилей и используйте их в рассылке.

2. Одно письмо, один шрифт, один клиент из множества возможных

Шрифтов хватает и вам совсем не обязательно использовать всего один для целого письма. Это так же не означает, что нужно каждое предложение писать новым шрифтом. Вы же точно видели примеры email-рассылок с кучей шрифтов. Так делать не нужно.

Оптимальный вариант: разные шрифты на абзацы и заголовки

Вам снова предоставляется возможность провести ряд экспериментов и найти то самое «свое» сочетание шрифтов. Какие-то отдельные слова или словосочетания можно выделить даже другим цветом текста. В таком случае у вас получится письмо, которое уже в несколько раз сильнее будет удерживать внимание читателя.

3. Красивое оформление письма, как части вашего сайта

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

Пример. Mercedes-Benz создает лакшери-атмосферу, используя темные тона на своем веб-ресурсе. И все их рассылки выполнены аналогично.

4. Правила оформления электронного письма: минималистичность дизайна

Меньше воды, больше разговора по делу и вот вы уже привлекли внимание! Особенно сейчас, когда простые пользователи живут в мощном инфополе.

Воплотите эту прописную истину в дизайне писем. Долой ненужные отвлекающие элементы. Есть пустое место и вы не знаете что туда поставить? Не ставьте ничего. Используйте 2-3 цвета, но не больше. Сделайте оформление интересным, но не таким, чтобы оно забирало больше внимания, чем сама суть письма.
Многие, задумавшись над тем, как создать красивое письмо для рассылки, гуглят: «Как правильно совместить 5 цветов». Когда секрет в том, чтобы привильно использовать всего 2 оттенка.

Если есть желание покреативить, тогда откажитесь от простых ссылок в тексте и замените их на кнопки. Это как раз тот элемент, который можно делать заметным, дерзким, так и кричащим: «Давай, клацай на меня!»

5. Красивое оформление писем гифками

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

Как оформить письмо красиво? На помощь приходят гифки, добавляя эффекта неожиданности и привлекательности вашим посланиям. С ними удобно работать, они гораздо меньше в размере, чем видео.

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

6. Как сделать красивое письмо для рассылки с персонализацией

В последнем пункте вернемся к первым двум, которые не совсем о дизайне. Чем хороша обезличенная email-рассылка по своей базе? Да ничем.

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

Достаточно простого обращения по имени в заголовке и уже становится сложнее не открыть рассылку.

Правда, есть минус. Вам придется в ручном режиме редактировать базу. Ведь, при подписке, люди часто пишут в строке ФИО всякое разное… Bubochka, Huligan777, Вано, Татьна, Юий Васильевич и т.д. Как написать красивое письмо, если оно начинается со слов: «Torpeda, здравствуйте!» Такие «имена» лучше редактировать, чтобы персонализация не принесла больше вреда, чем пользы.

Используйте эти нехитрые приемы и получайте крутые конверсии! Помните, что никто не знает ваших клиентов лучше, чем вы. Именно вы лучше всех понимаете как красиво оформить электронное письмо для своих клиентов.. А задача подрядчиков заключается в предоставлении вам разных вариантов для выбора.

Обновили материал 21.02.2019

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

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

Размер письма

Большинство почтовых клиентов и веб-интерфейсов почтовых провайдеров дают ограниченное пространство для отображения письма. Поэтому не делайте слишком широкие макеты.

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

Оптимальная ширина контентной части в дизайне письма — не более 600 пикселей. Желательно уместить в них и возможные тени от основного контейнера. Однако общий фон «под письмом» может быть любого размера и может быть залит любым паттерном или цветом.

Ширина контентной области письма и общего фона «под письмом»

Структура письма

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


Пример модульной сетки из четырёх столбцов для дизайн-макета письма


Пример модульной сетки из трёх столбцов для дизайн-макета письма

Адаптация под мобильные устройства

Существует два способа адаптации:

  1. Адаптация с помощью медиазапросов.
  2. Адаптация «резиновых» макетов.

Адаптация на медиазапросах применяется при разработке веб-страниц, но для дизайна писем это не лучшее решение. Например, Яндекс — один из крупнейших почтовых провайдеров в России — до сих пор не поддерживает данный подход к адаптации. Поэтому при разработке дизайна письма, подразумевающего адаптацию с помощью медиазапросов, нужно быть уверенным, что емейл создаётся для конкретного сегмента получателей, в котором нет адресов на Яндексе.


Адаптация на медиазапросах

Актуальную информацию о том, какие из основных почтовых клиентов поддерживают медиазапросы, вы всегда можете посмотреть в нашем справочнике по поддержке стилевых свойств .

Основное решение для адаптации электронных сообщений — создание «резиновых» макетов с блочным перестроением внутренних элементов. Когда ширина письма указывается относительно (в процентах) и ограничивается лишь максимальным и минимальным размерами, дизайн письма будет подстраиваться под ширину устройства, на котором его открыли, а текст и блоки внутри будут перестраиваться, чтобы уместиться на экране.
Элементы дизайна письма при «резиновом» подходе адаптируются тремя основными способами. Назовём их условно: масштабирование, отсечение и перестроение.

Масштабирование

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


Масштабирование элементов дизайна письма

Пример письма компании Throne Rush

Отсечение

Этот тип адаптации также применим к графическому контенту в дизайне письма. При его использовании часть элемента, который не умещается по ширине, отсекается и становится невидимой для пользователя. При вёрстке есть возможность указать, с какой стороны будет происходить отсечение. Делайте так, чтобы в креативе вся важная информация и графика располагались на одной из его половин. Также не следует оставлять какие-то незначительные элементы выступающими с отсекаемой половины на «важную».


Отсечение элементов дизайна письма

Пример письма компании «Техпорт»

Перестроение

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

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

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

Таким образом на мобильном устройстве мы увидим логичное и привычное представление статьи или товара. Оптимальное решение в этой ситуации — сделать соседние блоки одинаковыми по ширине и равными половине ширины письма. Этот тип адаптации вариативен и позволяет создавать нетривиальные структуры писем.


Перестроение элементов дизайна письма

Пример письма компании «Райффайзенбанк»

Важно
Иногда в блоках с фоном-картинкой, внутри которых происходит перестроение, необходимо оставлять определённый «запас» фонового изображения. В примере ниже наглядно показано использование дополнительного фона:


Если бы здесь не было «запаса», то текст «Путешествуйте с нами!» частично попал бы на белый фон тела письма и стал бы нечитабельным.

Не пересекайте строки

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


Строки в дизайне письма пересекаются


Строки в дизайне письма не пересекаются

Данное ограничение дизайна писем справедливо для тех случаев, когда:

  • — первая строка целиком состоит из текстового блока, как на примере выше;
  • — первая и вторая строки состоят из двух ячеек. Верхняя строка адаптируется строго прямым перестроением (правая колонка переходит под левую), а общий элемент находится в левых (первых) ячейках обеих строк;
  • — первая и вторая строки состоят из двух ячеек. Верхняя строка адаптируется обратным перестроением, а общий элемент находится в правых (вторых) ячейках.

Для большей наглядности посмотрите на схемы допустимых решений , где 1 и 2 — ячейки первой строки, 3 и 4 — ячейки второй строки.


Прямое перестроение ячеек первой строки и обратное перестроение ячеек второй строки. Общий объект справа


Обратное перестроение ячеек первой строки и прямое перестроение ячеек второй строки. Общий объект слева

Шрифты

Шрифты, использованные в дизайне писем и отсутствующие в системе пользователя, будут заменены браузером на один из стандартных, что приведёт к искажению отображения письма. Используйте только безопасные веб-шрифты, которые гарантированно отображаются на экране пользователя так, как и было задумано дизайнером:

  • Arial,
  • Comic Sans MS,
  • Courier New,
  • Georgia,
  • Impact,
  • Times New Roman,
  • Trebuchet MS,
  • Verdana.

Используйте стандартные шрифты для основного контента, а также таких элементов, как, например, промокоды и номера телефонов, чтобы пользователь мог легко скопировать их в буфер обмена.
В мобильных почтовых приложениях шрифты часто заменяются на стандартные для операционной системы. Системные шрифты Android и iOS могут отличаться по ширине от того, который вы предусмотрели в дизайне письма. Поэтому не заполняйте блоки текстом впритык к их границе. Это чревато появлением лишних строк на мобильном устройстве.

Все альтернативные шрифты вставляются в вёрстку как изображения, поэтому письмо из картинок без текстовой части может восприниматься провайдером как спам. Использование нестандартных шрифтов допустимо в креативах и при накладывании на другие изображения. Если вы применяете их в основном тексте, учитывайте следующие моменты:

— при адаптации под мобильные устройства нестандартные шрифты в вёрстке ведут себя как обычные картинки;

— эти тексты могут масштабироваться либо перестраиваться согласно общим принципам адаптации письма. Если вы используете нестандартный шрифт, например, в качестве заголовка, то убедитесь в том, что:


Графика

По возможности используйте векторные объекты для создания дизайна писем. Обычно это иконки и логотипы. Вектор позволяет избегать размытия, которое случается при использовании растровых изображений на retina-экранах и дисплеях с разрешениями больше 1800 пикселей.

Важно
Векторное изображение весит значительно меньше, чем растровое, благодаря этому письмо загрузится быстрее и «съест» меньше трафика.


В другой графике используйте картинки в два раза больше конечного разрешения. Например, если в дизайне письма вы используете картинку, занимающую 300×300 пикселей, то в её основе должно быть изображение не менее 600×600 пикселей. При работе в Photoshop это можно сделать превращением большой картинки в смарт-объект и последующим её уменьшением до необходимых размеров.


Стоит помнить, что изображения, которые в вёрстке будут использованы как background-image, необязательно делать больших размеров, чем фактический, так как задать размеры фона кодом в данный момент не представляется возможным. Может получиться так, что в итоговом письме фон ячейки окажется вдвое больше, чем нужно.

Градиенты

Если собираетесь использовать градиенты в блоках, которые будут перестраиваться при адаптации, помните следующее:


Динамика

Так как почтовые клиенты и провайдеры пока не поддерживают JavaScript и большую часть CSS-свойств, динамику в дизайн письма вносят посредством GIF-анимации. Тут тоже есть свои нюансы.
Немногие знают, но клиент Outlook просто не воспроизводит анимацию, а показывает лишь её первый кадр. Поэтому, если анимация у вас зациклена, убедитесь, что она начинается с нужного, самого информативного кадра. Для случаев, когда анимация воспроизводится единственный раз, что лишает нас возможности начать её с «нужного» момента, есть возможность в вёрстке подменять её на другое (заранее подготовленное) изображение.

Но из-за слабой поддержки CSS их увидит лишь маленький процент пользователей. Вышеупомянутое меню, по сравнению с «классическим», показало себя хуже по количеству кликов. Поэтому до тех пор, пока провайдеры не расширят список поддерживаемых свойств, внедрение таких экспериментов в массы нецелесообразно.

Границы

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


Чтобы у вас перед глазами всегда были примеры правильных емейлов, заглядывайте к нам в . Там мы публикуем дизайны писем, которые разработали для клиентов, и работы западных коллег.