Открываю почту утром и вижу десяток писем от разных рассылок. Половину я закрываю, не дочитав до второй строки, и дело тут чаще всего не в теме письма, а в том, как оно выглядит внутри. Глазу не за что зацепиться, текст сливается в серое полотно, а кнопка теряется где-то внизу.
За годы работы с рассылками я много раз наступал на эти грабли. Сначала казалось, что чем наряднее письмо, тем лучше оно сработает. Потом я смотрел на свою же статистику и понимал, что нарядность не спасает, если человеку неудобно читать.
Оформление письма — это не про красоту ради красоты. Это про то, насколько легко подписчику добраться до сути и до действия, которое вы от него хотите. Если ему приходится щуриться, искать ссылку или разбираться, куда нажимать, он просто закроет вкладку.
В этой статье я хочу разобрать вёрстку письма спокойно и по деталям. Без модных терминов, без обещаний волшебных результатов, только те вещи, которые реально влияют на то, дочитают ли ваше письмо.
Многие думают, что вёрстка — это работа дизайнера, а автору достаточно написать текст. На практике всё наоборот: именно автор лучше всех понимает, где в письме главная мысль, а где второстепенная деталь. Значит, и расставлять акценты должен он.
Я видел письма, свёрстанные в конструкторе за двадцать минут, которые читались на одном дыхании. И видел письма с дорогим дизайном, где человек не мог найти кнопку на телефоне. Разница была не в бюджете, а во внимании к мелочам.
Ещё один важный момент: письмо живёт в чужом интерфейсе. Вы не контролируете, какая у человека почтовая программа, какой размер экрана, включены ли картинки и какой у него свет в комнате. Ваша задача — сделать так, чтобы письмо выжило в любых условиях.
Поэтому дальше мы будем говорить не о вкусах, а о правилах, которые проверяются опытом. Что-то покажется очевидным, что-то вызовет желание поспорить. Это нормально, я и сам иногда отступаю от своих же правил, но отступаю осознанно.
Начнём с самого базового: с того, зачем вообще думать об удобстве, если текст уже написан и вроде бы всё в порядке. Казалось бы, обсуждать тут нечего, но именно на этом уровне чаще всего и теряется читатель.
Почему удобство важнее внешней красоты
Когда я только начинал вести рассылку, я мерил письмо глазами дизайнера. Мне хотелось, чтобы оно выглядело как рекламный буклет: много блоков, красивые фоны, декоративные линии. Подписчики же мерили его глазами человека, у которого пять минут на почту в перерыве между делами.
Эти две оптики почти всегда расходятся. То, что кажется изящным на большом мониторе, на телефоне превращается в кашу. То, что выглядит стильно в конструкторе, в почтовой программе теряет половину оформления.
Удобство — это когда человеку не нужно думать, как читать. Он видит заголовок, понимает, о чём речь, находит нужное и нажимает. Всё остальное — украшение, которое либо помогает этому процессу, либо мешает.
Что подписчик видит в первые секунды
Первое, что происходит с письмом, — его оценивают за пару секунд. Человек скользит взглядом сверху вниз и решает, стоит ли тратить время. В этот момент он не читает, а сканирует: ищет знакомое, ищет понятное, ищет повод остаться.
Если сверху висит огромная картинка без единого слова, взгляд упирается в неё и не получает ответа. Что это? Зачем мне? Кто это написал? Вопросы без ответов — самый быстрый способ потерять читателя ещё до того, как он начнёт читать.
Поэтому первая строка текста должна работать как вывеска. Коротко, по делу, человеческим языком. Не «информируем вас о том, что», а сразу суть, от которой человеку станет либо полезно, либо любопытно.
Я замечал за собой интересную вещь: когда я убирал из начала письма всё лишнее и оставлял одну ясную мысль, дочитывания становились ровнее. Люди не становились внимательнее, им просто больше не мешали.
Отдельно стоит подумать о том, что человек видит в списке писем до открытия. Там у вас есть только имя отправителя и тема, и это тоже часть оформления, хотя технически к вёрстке не относится.
Имя отправителя лучше делать узнаваемым и одинаковым от письма к письму. Если сегодня вы «Команда проекта», завтра «Иван», а послезавтра «Новости», подписчик не свяжет эти письма в одну историю.
Разница между «красиво» и «читаемо»
Красиво — это про впечатление. Читаемо — это про усилие, которое человек тратит, чтобы понять текст. И вот здесь кроется главная ловушка: чем эффектнее оформление, тем чаще оно повышает усилие.
Возьмём типичный пример. Текст светлым шрифтом на цветной подложке. На макете смотрится дорого. В реальности человек щурится, особенно если читает с телефона на улице или вечером при тусклом свете.
Или другой пример: узкая колонка с крупными отступами и мелким шрифтом. Вроде бы воздушно и стильно, но глаз спотыкается на каждой строке, потому что в строку помещается слишком мало слов.
Я для себя вывел простой критерий. Если письмо можно прочитать, не прилагая усилий, и при этом оно не выглядит как служебная записка — значит, баланс найден. Всё, что мешает этому балансу, идёт под нож.
Красота в рассылке всё-таки нужна, но она служебная. Она поддерживает смысл, а не соревнуется с ним. Красивый блок с цитатой хорош тогда, когда цитата действительно важна, а не потому, что в конструкторе есть такой шаблон.
Ещё я перестал гнаться за оригинальностью ради оригинальности. Люди привыкли к определённым паттернам чтения писем, и ломать их без причины — значит заставлять человека заново учиться. Это лишнее усилие, а лишнее усилие всегда стоит вам читателя.
В итоге я пришёл к скучному, но рабочему принципу: простая структура, ясные акценты, аккуратные детали. Ничего лишнего, но и ничего небрежного. Дальше в статье — как это выглядит на практике.
Основа вёрстки: одна колонка, ритм и воздух
Если из всех правил вёрстки оставить только одно, я бы оставил это: письмо должно читаться сверху вниз, без метаний. Взгляд человека движется по прямой, и любая попытка разложить информацию в несколько колонок заставляет его прыгать.
Всё остальное — размеры, отступы, шрифты — это уже настройка внутри этой простой конструкции. Сначала каркас, потом отделка. Если каркас кривой, никакая отделка не спасёт.
Я много раз переделывал письма, где сначала нарисовал красивые блоки, а потом пытался впихнуть в них текст. Правильный порядок обратный: сначала текст и его логика, потом рамка вокруг него.
Одна колонка вместо газетной сетки
Многоколоночная вёрстка пришла из печатных газет, где нужно было уместить максимум текста на дорогой бумаге. В письме такой необходимости нет, зато есть маленькие экраны и вечная нехватка внимания.
Когда человек читает в две колонки на телефоне, ему приходится то и дело менять направление взгляда. Это утомляет быстрее, чем кажется, и многие просто бросают чтение на середине, не понимая почему.
Одна колонка решает сразу несколько задач. Она задаёт очевидный порядок чтения, упрощает адаптацию под мобильные и снижает риск, что при переносе строк что-то съедет в сторону.
Иногда хочется сделать сетку из карточек: три преимущества в ряд, четыре пункта рядом. На широком экране это выглядит аккуратно, но на узком всё превращается в длинную лестницу из блоков разной высоты.
Если очень нужно показать несколько равнозначных пунктов, проще сделать вертикальный список с короткими подписями. Он займёт больше места по высоте, зато прочитается без напряжения и не развалится на телефоне.
Ширина письма и боковые поля
Классическая рекомендация — держать ширину письма в районе шестисот пикселей. Это не магия, а компромисс: так письмо нормально смотрится и на большом мониторе, и в узком окне почтовой программы.
Слишком широкое письмо заставляет глаз делать длинные горизонтальные движения. Строка получается длинной, и человек теряет место, на котором остановился, когда переходит на следующую.
Слишком узкое письмо с большими полями, наоборот, дробит текст на короткие обрубки. Читать такое утомительно, потому что мысль постоянно рвётся, хотя формально всё аккуратно.
Боковые поля нужны не для красоты, а для того, чтобы текст не прилипал к краям экрана. Особенно это заметно на телефонах, где письмо растягивается на всю ширину и без отступов выглядит как сплошной поток.
Я обычно оставляю поля примерно в двадцать-тридцать пикселей с каждой стороны. Этого хватает, чтобы текст дышал, и при этом ширина строки остаётся комфортной даже на маленьком экране.
Ещё одна мелочь: не стоит ставить фон письма в тон фона почтовой программы. Письмо просто растворится, и человек не поймёт, где заканчивается интерфейс и начинается ваше сообщение.
Первый экран: что человек видит до прокрутки
Первый экран — это самая дорогая площадь в вашем письме. Здесь решается, останется человек или закроет. И здесь же чаще всего совершается одна и та же ошибка: место отдают картинке, а не смыслу.
Я не против изображений, они нужны. Но у них должна быть роль, а не привилегия. Если картинка занимает весь первый экран и не сообщает ничего конкретного, она работает против вас.
Давайте по порядку разберём, что и в каком порядке ставить сверху. Это простая последовательность, которую легко запомнить и потом повторять в каждом письме.
Что ставить выше картинки
Первым делом человеку нужен ответ на вопрос «о чём это». Ответ даёт короткая строка текста, а не изображение. Даже самая удачная иллюстрация требует расшифровки, а текст не требует ничего.
Я обычно ставлю сверху небольшой блок с приветствием или сразу с сутью: одна-две фразы, которые объясняют, зачем открывать дальше. Дальше уже можно показать картинку, которая эту мысль поддерживает.
Если письмо продающее, на первом экране полезно дать намёк на выгоду. Не длинный список, а одну фразу, после которой хочется узнать подробности. Остальное человек прочитает ниже, если ему станет интересно.
Если письмо информационное, на первом экране должен быть главный тезис. Читатель сразу понимает, о чём пойдёт речь, и решает, актуально ли это для него сейчас.
Хорошо работает приём, когда первая строка обращается к ситуации человека. Не «мы подготовили материал», а «если вы когда-нибудь ловили себя на том, что…». Это сразу включает узнавание.
И конечно, не стоит начинать письмо с длинного вступления про то, как у вас дела и какая сегодня погода. Такое вступление имеет смысл в личной переписке, а в рассылке оно просто съедает первый экран.
Шапка письма и узнаваемость
Шапка — это визитная карточка. Она не обязана быть большой, но должна быть одинаковой. Когда человек открывает письмо и узнаёт оформление, он быстрее понимает, что это от знакомого отправителя.
Проще всего использовать логотип или название проекта в спокойном виде, без рамок и градиентов. Логотип лучше делать ссылкой на сайт, потому что люди интуитивно кликают по нему, когда хотят узнать больше.
Если логотипа нет, подойдёт аккуратно набранное название. Главное — постоянство: один и тот же шрифт, один и тот же цвет, одно и то же место в письме.
Высота шапки должна быть разумной. Если она занимает половину первого экрана, полезная площадь исчезает, и человек видит только оформление, а не содержание.
Под шапкой хорошо смотрится тонкая линия или небольшой отступ. Это визуально отделяет «обложку» от текста и помогает глазу переключиться на чтение.
Ещё один приём — короткая навигация в шапке. Но с ней нужно быть осторожным: на телефоне она легко превращается в мешанину из мелких ссылок. Если сомневаетесь, лучше отказаться.
Текст, который читается без усилий
Даже идеальная сетка не спасёт, если сам текст набран неудобно. Я видел письма с прекрасной структурой, которые хотелось закрыть на третьем абзаце, потому что глаз физически уставал.
Тут работают простые, почти скучные правила. Их не надо выдумывать, их достаточно соблюдать, и результат заметен быстрее, чем от любых экспериментов с дизайном.
Разберём три вещи: размер и интервал, структуру абзацев, цвет и контраст. Именно они создают ощущение лёгкости или тяжести при чтении.
Размер шрифта и межстрочный интервал
Мелкий шрифт экономит место, но забирает внимание. Человек начинает читать медленнее, а когда чтение замедляется без причины, интерес падает. В письме лучше пожертвовать парой строк, но оставить читаемость.
Я ориентируюсь на размер, при котором текст спокойно читается на телефоне без увеличения. Если приходится приближать экран, значит, шрифт слишком мелкий, каким бы изящным он ни казался в макете.
Межстрочный интервал часто недооценивают. Плотно сбитые строки сливаются в тёмное полотно, и глаз теряет строку при переходе. Небольшой запас между строками делает текст воздушным и снимает половину усталости.
С абзацами та же история. Если между ними нет отступа, текст превращается в кирпич. Если отступ слишком большой, письмо растягивается и кажется бесконечным.
Отдельная тонкость — длина строки. Слишком длинная строка утомляет, слишком короткая рвёт мысль. Золотая середина находится опытным путём, но правило простое: читать должно быть удобно, а не «стильно».
Я не сторонюсь и того, чтобы проверить письмо на своём телефоне перед отправкой. Пять секунд взгляда на реальный экран дают больше, чем полчаса разглядывания макета.
Ещё помогает читать письмо вслух, хотя бы про себя с интонацией. Там, где голос спотыкается, обычно спотыкается и глаз, и это верный признак слишком длинной или запутанной фразы.
Абзацы, списки и подзаголовки
В рассылке короткий абзац — это не приём выразительности, а необходимость. Экран телефона узкий, и большой кусок текста в нём выглядит как стена, в которую не хочется упираться.
Оптимально, когда абзац занимает две-три строки на мобильном. Тогда взгляд легко находит точку остановки, а чтение идёт маленькими шагами, без перегрузки.
Списки помогают там, где нужно перечислить. Но список из десяти пунктов никто не читает, он превращается в декорацию. Лучше оставить три-четыре пункта, а остальное переписать словами.
Подзаголовки в письме работают как указатели. Человек, который просматривает письмо по диагонали, должен по ним понять, о чём каждая часть и стоит ли читать дальше.
При этом подзаголовков не должно быть слишком много. Если после каждой пары абзацев идёт новый заголовок, текст рассыпается на куски, и связная мысль исчезает.
Ещё один приём — выделение. Жирным стоит подчёркивать одну-две фразы на письмо, не больше. Когда выделено всё, не выделено ничего, и глаз просто перестаёт реагировать.
Хорошо работает и деление текста на небольшие смысловые куски по два-три абзаца. Человек видит, что часть закончилась, и ему легче продолжать, потому что есть ощущение движения.
Контраст и цвет текста
Контраст — самая недооценённая часть оформления. Тёмный текст на светлом фоне читается легко, а вот светлый на цветном требует усилий, даже если выглядит нарядно.
Я обычно не экспериментирую с цветом основного текста. Он должен быть тёмным и спокойным, а цвет пусть остаётся для акцентов: ссылок, кнопок, небольших врезок.
Серый текст любят за «мягкость», но в письмах он часто оказывается слишком бледным. Особенно если человек читает с телефона при слабом освещении, серые буквы просто исчезают.
Цветной фон под текстом — отдельная зона риска. Если очень хочется врезку, лучше сделать её светлой подложкой с достаточным контрастом, а не насыщенным блоком, в котором текст теряется.
Не забывайте и о том, что у людей бывает тёмная тема в почтовой программе. Письмо с прозрачным фоном и тёмным текстом может стать нечитаемым, поэтому фон лучше задавать явно.
В целом правило одно: читаемость важнее эффекта. Если между красивым и понятным нужно выбирать, в рассылке почти всегда выигрывает понятное.
Картинки в письме: сколько и зачем
Изображения делают письмо живым, но только когда их не слишком много и у каждого есть работа. Картинка ради картинки занимает место и ничего не добавляет.
Я долго относился к иллюстрациям как к обязательному атрибуту: раз письмо, значит, нужна шапка с фото. Потом понял, что часто эта шапка просто отодвигает текст на второй экран.
Сейчас я задаю себе вопрос перед каждой картинкой: что она объясняет? Если ответа нет, картинка не нужна, как бы хорошо она ни выглядела.
Сколько изображений и какую роль они играют
Для обычного письма хватает одного-двух изображений. Одно может задавать настроение, второе — иллюстрировать конкретную мысль. Больше в большинстве случаев уже перегруз.
Если письмо про продукт, картинка должна показывать продукт так, как его увидит человек. Абстрактные коллажи и стоковые улыбки вызывают меньше доверия, чем понятный кадр или аккуратная схема.
Если письмо текстовое, по смыслу, изображение может быть вовсе не нужно. Иногда спокойное письмо без картинок читается лучше, потому что ничто не отвлекает от мысли.
Важно, чтобы картинка не дублировала текст. Если на изображении написано то же самое, что в первом абзаце, это двойная работа без пользы для читателя.
Ещё один момент — единообразие. Когда в одном письме смешаны фотографии, иллюстрации и иконки в разных стилях, возникает ощущение случайности. Лучше придерживаться одного визуального языка.
Цвет изображений тоже стоит держать в одной гамме с оформлением письма. Пёстрая картинка рядом со спокойным текстом тянет внимание на себя и мешает читать главное.
И не стоит ставить изображения вплотную к тексту. Небольшой отступ сверху и снизу даёт глазу паузу и делает письмо аккуратнее.
Размер файла и скорость загрузки
Тяжёлые картинки — частая причина, по которой письмо выглядит плохо. Пока изображения грузятся, человек видит пустые рамки, и это ощущение незавершённости подталкивает закрыть письмо.
Особенно чувствительны к этому мобильные сети. То, что мгновенно открывается дома по быстрому интернету, в дороге может грузиться несколько секунд, и этих секунд достаточно, чтобы потерять читателя.
Поэтому изображения стоит заранее уменьшать по ширине и сжимать. Для письма редко нужны файлы огромного разрешения, экран всё равно не покажет лишние детали.
Формат тоже имеет значение. Лёгкие форматы с поддержкой прозрачности хороши для графики, а для фотографий лучше подходят сжатые варианты, которые не раздувают вес письма.
Я обычно проверяю общий вес письма перед отправкой. Если он кажется большим, первым делом смотрю на картинки, потому что именно они чаще всего виноваты.
Отдельно стоит помнить, что у некоторых подписчиков картинки отключены по умолчанию. Это не повод отказываться от изображений, но повод сделать так, чтобы письмо читалось и без них.
Альтернативный текст вместо пустоты
Когда картинка не загрузилась, на её месте остаётся пустой прямоугольник. Если у изображения есть описание, человек хотя бы понимает, что там должно быть.
Альтернативный текст пишется коротко и по делу. Не «картинка», не набор ключевых слов, а человеческое описание того, что изображено и зачем.
Это ещё и вопрос доступности. Люди, которые пользуются специальными программами для чтения с экрана, воспринимают описание вместо изображения, и без него часть смысла для них теряется.
Я стараюсь не оставлять это поле пустым никогда, даже если картинка декоративная. Пара слов занимает немного времени, зато письмо остаётся понятным в любых условиях.
Иногда полезно сделать так, чтобы смысл письма не зависел от картинки вообще. Тогда даже при отключённых изображениях человек получит всё, что вы хотели сказать.
Проверить это просто: отключите картинки в своей почте и откройте письмо. Если смысл сохранился, вёрстка сделана с запасом прочности.
Кнопки и ссылки: куда человек должен нажать
Письмо почти всегда ведёт к действию. Человек читает, соглашается и нажимает. Если нажать некуда или непонятно куда, вся работа над текстом оказывается напрасной.
Поэтому кнопка — не украшение в конце, а важнейший элемент вёрстки. Ей нужно уделить столько же внимания, сколько заголовку письма.
Дальше поговорим о том, как выглядит кнопка, сколько ссылок оставлять и почему на телефоне всё решает размер зоны нажатия. Эти три вещи чаще всего и определяют, нажмёт человек или просто закроет письмо.
Как выглядит кнопка, по которой хочется нажать
Хорошая кнопка заметна сразу, но не кричит. Она отличается от текста цветом и формой, при этом не выглядит как аварийная сигнализация.
Надпись на кнопке должна быть глаголом и обещанием. «Посмотреть программу», «Забрать материал», «Прочитать разбор» — человек понимает, что произойдёт после нажатия.
Плохо работают надписи вроде «Подробнее» или «Перейти». Они ничего не обещают и не отвечают на вопрос, зачем нажимать. В голове читателя сразу возникает сомнение.
Размер кнопки тоже важен. Слишком маленькая теряется, слишком большая выглядит навязчиво. Ориентир простой: кнопку должно быть удобно нажать пальцем, не целясь.
Не забывайте про отступ вокруг кнопки. Когда она стоит вплотную к последнему абзацу, письмо выглядит так, будто действие приклеили в последний момент, и это ощущение передаётся читателю.
Не стоит делать несколько кнопок подряд с разными надписями. Это ставит человека перед выбором, а выбор в письме почти всегда снижает вероятность действия.
И ещё: кнопка должна вести туда, куда обещает. Если надпись говорит об одном, а открывается совсем другое, доверие к следующим письмам падает.
Сколько ссылок оставить в письме
Каждая ссылка — это развилка. Чем больше развилок, тем больше шансов, что человек свернёт не туда или вообще остановится в раздумьях.
Для продающего письма я стараюсь оставить одну главную ссылку и, может быть, пару второстепенных, если они действительно нужны. Всё остальное лучше убрать.
В информационном письме ссылок может быть больше, но и там стоит следить, чтобы они не спорили друг с другом за внимание. Иерархия важнее количества.
Отдельная история — ссылки в тексте. Они удобны, когда человек читает внимательно, но почти незаметны при просмотре по диагонали. Поэтому главное действие всё равно стоит дублировать кнопкой.
Не забывайте про подписи к ссылкам. Текст, который сам по себе не объясняет, куда ведёт, заставляет сомневаться. Лучше, чтобы из подписи всё было понятно без контекста.
Если ссылок много, проверьте каждую перед отправкой. Одна битая ссылка в письме способна испортить впечатление от всей рассылки.
Кликабельная зона на телефоне
На компьютере человек попадает курсором в маленькую ссылку без труда. На телефоне палец грубее, и мелкие элементы становятся настоящей проблемой.
Поэтому все интерактивные элементы стоит делать с запасом. Кнопка с внутренними отступами нажимается легче, чем плотный прямоугольник по размеру текста.
Ссылки в тексте тоже лучше разносить. Когда они стоят рядом, легко нажать не ту, а в почтовой программе это ещё и раздражает.
Хорошо работает приём, когда вся карточка с описанием ведёт на нужную страницу. Человеку не нужно целиться в мелкую надпись, он нажимает на понятный блок.
При этом важно, чтобы такое решение не мешало читать. Если вся картинка становится ссылкой, человек случайно попадает куда-то, хотя просто хотел пролистать письмо.
Проверка простая: откройте письмо на телефоне и попробуйте нажать все элементы большим пальцем одной руки. Всё, во что попасть неудобно, нужно переделать.
Мобильная версия: главный экран вашего письма
Большинство людей открывают почту с телефона. Это не статистическая догадка, а ежедневное наблюдение: человек проверяет письма в очереди, в транспорте, на ходу между делами. Значит, письмо в первую очередь должно быть удобным на маленьком экране.
Я долго делал наоборот: проверял письмо на большом мониторе, а телефон вспоминал в последний момент. Почти каждый раз находилось что-то, что съезжало, обрезалось или становилось нечитаемым, и приходилось всё переделывать уже после отправки.
Проще сразу проектировать письмо как мобильное, а потом смотреть, как оно живёт на широком экране. В таком порядке проблем заметно меньше, и результат не зависит от того, где именно человек откроет письмо.
Почему телефон решает больше, чем компьютер
На телефоне человек читает быстрее и отвлекается легче. Одно уведомление, один звонок — и письмо закрыто, хотя дочитано не было. Поэтому вёрстка должна помогать вернуться к чтению, а не мешать.
Короткие абзацы, ясные подзаголовки и заметные кнопки работают именно на этом экране. Если письмо удобно на телефоне, оно почти всегда нормально выглядит и на компьютере, потому что запас прочности уже заложен.
Обратное неверно. Красивое широкое письмо на телефоне часто рассыпается: картинки вылезают за край, таблицы сжимаются до нечитаемого состояния, кнопки становятся крошечными и неудобными для пальца.
Кроме того, на телефоне важнее всего путь к действию. Человек должен добраться до кнопки за пару движений пальцем. Иначе он доберётся до неё в другой раз, которого может и не быть, потому что письмо уже утонуло в списке новых.
Ещё одна мелочь — пустое место вокруг главного элемента. Оно не тратит письмо впустую, а наоборот, делает акцент заметнее, потому что рядом нет ничего, что спорило бы за внимание.
Я заметил ещё одну деталь: на телефоне письма с длинными вступлениями закрывают чаще. Экран маленький, человек видит только начало, и если там нет сути, он не станет прокручивать в надежде, что дальше будет интереснее.
Поэтому первый экран в мобильной версии — это буквально несколько строк. Всё важное должно уместиться в них или быть видно сразу после одного короткого движения пальцем.
Ещё стоит помнить про освещение. Телефон часто достают на улице, в транспорте, в помещении с тусклым светом. Всё, что выглядит нежным и деликатным на калиброванном мониторе, в этих условиях может просто исчезнуть с экрана.
Что ломается на маленьком экране
Первым делом ломаются таблицы. То, что на компьютере выглядит аккуратной сеткой, на телефоне превращается в сплющенные колонки с текстом по два слова в строке.
Дальше страдают изображения. Широкая картинка без адаптации либо обрезается, либо вылезает за границы письма, а вместе с ней уезжает и вся вёрстка, включая текст под ней.
Мелкие шрифты и тонкие линии почти исчезают. То, что на большом экране кажется деликатным и стильным, на телефоне просто перестаёт существовать как элемент оформления.
Кнопки, сделанные текстом со ссылкой, теряются среди абзацев. Человек может вообще не понять, что в конце письма было действие, к которому его аккуратно вели весь текст.
Отдельная проблема — длинные заголовки. Если заголовок не помещается в две строки, он ломается в неожиданных местах, выглядит неаккуратно и занимает половину экрана.
Ещё одна мелочь, которая заметна только на телефоне, — отступы между блоками. Если они разные, письмо кажется собранным на скорую руку, даже когда текст хороший.
Единый ритм отступов создаёт ощущение порядка. Человек этого не осознаёт, но читает такое письмо спокойнее, потому что глаз не спотыкается о случайные сдвиги.
Ещё ломается шапка. Логотип с широкими полями на большом экране смотрится солидно, а на телефоне съедает весь первый экран, отодвигая смысл куда-то вниз.
Все эти вещи лечатся просто: одна колонка, гибкие изображения, крупный шрифт, явные кнопки. Но лечить их нужно заранее, а не после того, как письмо ушло подписчикам и уже открыто сотни раз.
Как проверить письмо на телефоне перед отправкой
Проверка занимает меньше времени, чем кажется. Достаточно отправить письмо себе и открыть его на своём же телефоне, не заглядывая в макет и не пытаясь вспомнить, как задумывалось.
Смотрите на три вещи. Видно ли, о чём письмо, без прокрутки. Читается ли текст без увеличения экрана. Понятно ли, куда нажимать, чтобы сделать следующий шаг.
Дальше полезно прокрутить письмо до конца медленно, как это сделал бы читатель. Часто именно так находятся обрезанные картинки, съехавшие отступы и ссылки, которые слишком близко стоят друг к другу.
Ещё один хороший тест — открыть письмо одной рукой. Если до кнопки неудобно дотянуться большим пальцем, значит, элемент стоит переместить выше или сделать крупнее.
Полезно проверить и горизонтальную ориентацию экрана, хотя бы один раз. Некоторые письма в ней выглядят совершенно иначе, и это стоит увидеть до отправки, а не после.
И последнее: проверьте письмо с выключенными картинками. Если смысл сохраняется и кнопка на месте, вёрстка сделана с запасом прочности и не подведёт в неудобных условиях.
Проверка перед отправкой: разные почты и типичные ошибки
Письмо никогда не выглядит одинаково во всех почтовых программах. Где-то оно идеально, где-то сдвинуто, где-то теряет фон. Это не повод отказываться от оформления, это повод проверять.
Я отношусь к проверке как к обязательному этапу, а не как к формальности. Несколько минут тестов экономят репутацию и избавляют от неловких писем с кривой вёрсткой, которые потом стыдно вспоминать.
Дальше — о том, почему вёрстка плывёт, и о самых частых ошибках, которые я встречаю в рассылках, включая свои собственные. Список получился длинным, но почти каждый пункт из него я видел не один раз.
Почему вёрстка плывёт в разных программах
Почтовые программы по-разному показывают одно и то же письмо. Одни поддерживают современные способы оформления, другие понимают только базовые вещи, третьи вырезают часть стилей ради безопасности.
Кроме того, многие программы автоматически сжимают письмо по ширине экрана. Если вёрстка сделана жёстко, с фиксированными размерами, при сжатии она разваливается, и восстановить замысел уже невозможно.
Иногда почтовая программа показывает письмо в узком окне просмотра, даже если рядом есть место. В этом случае любая широкая конструкция выглядит так, будто её сжали силой.
Проверить это просто: уменьшите окно программы до половины экрана и посмотрите на письмо. Если всё осталось читаемым, значит, вёрстка сделана с запасом.
Отдельная головная боль — отступы и фоны. Там, где один клиент покажет аккуратную подложку, другой просто проигнорирует её, и текст окажется на белом фоне без границ, хотя задумывался как отдельный блок.
То же самое со шрифтами. Красивый редкий шрифт может не отобразиться, и письмо подменится системным. Иногда это незаметно, иногда весь вид рассыпается, особенно если размеры подбирались под конкретную гарнитуру.
Вывод простой: чем проще конструкция, тем меньше поводов для сюрпризов. Сложная вёрстка даёт больше возможностей, но и больше мест, где что-то может не сработать в чужой программе.
Поэтому я стараюсь строить письма на базовых элементах. Текст, картинки, кнопки, отступы — этого достаточно почти для любой задачи, и это работает предсказуемо в самых разных условиях.
Тестовая отправка себе — самый быстрый способ увидеть реальность. Открыть письмо в двух-трёх программах и на телефоне полезнее, чем читать длинные советы о совместимости.
А ещё полезно отправлять тестовое письмо человеку, который не знает, что вы задумали. Он увидит то, что видит обычный подписчик, и честно скажет, если что-то выглядит странно.
И не забывайте про ссылки в тестовом письме. Иногда они ведут на тестовую версию страницы, которая ещё не опубликована, и человек попадает в пустоту.
Что чаще всего ломает письмо
Первая по частоте ошибка — перегруз деталями. Много блоков, много цветов, много выделений. Письмо начинает напоминать витрину, на которой всё яркое и ничего не запоминается.
Вторая — бледный текст на цветном фоне. Это выглядит нарядно в макете и почти не читается в реальной жизни, особенно вечером в комнате с ярким экраном и уставшими глазами.
Третья — отсутствие явной кнопки. Автор уверен, что человек поймёт, куда нажимать, а человек просто дочитывает письмо и закрывает его, не заметив действия.
Четвёртая — картинки без описания и слишком большой вес письма. В результате часть подписчиков видит пустые рамки и медленную загрузку, а часть вообще не дожидается, пока всё откроется.
Пятая — длинные абзацы. Текст, набранный сплошным полотном, читают единицы, даже если внутри отличная мысль и очень нужная информация.
Особенно тяжело читаются абзацы, в которых несколько мыслей подряд. Глаз цепляется за первую, теряет вторую и не доходит до третьей. Разбить такой кусок на три коротких — работа на минуту, а эффект заметен сразу.
То же касается предложений. Длинная конструкция с несколькими оборотами хороша в книге, где человек настроен читать внимательно. В письме, которое открывают на бегу, она почти всегда превращается в препятствие.
Шестая — сломанные ссылки или ссылки, ведущие не туда. Это мелочь до момента отправки и большая проблема после, потому что письмо уже не отредактируешь.
Седьмая — несоответствие письма и страницы, на которую оно ведёт. Человек нажал, ожидая одно, увидел другое, и доверие к следующему письму заметно уменьшилось.
Восьмая — отсутствие проверки на телефоне. Самая обидная ошибка, потому что лечится за пару минут, а последствия видит каждый подписчик и делает свои выводы о вашей аккуратности.
Девятая — слишком много однотипных писем с одинаковой вёрсткой. Оформление, которое сначала кажется свежим, через месяц становится незаметным, и человек перестаёт различать ваши письма в потоке.
Все эти вещи объединяет одно: они не про талант и не про вкус. Это просто невнимательность к деталям, которую легко исправить, если относиться к вёрстке как к части работы, а не как к финальному украшению.
Я и сам иногда ловлю себя на желании добавить ещё один блок, ещё одну линию, ещё один акцент. Спасает простое правило: если элемент не помогает понять текст или сделать шаг, он не нужен в этом письме.
И ещё одно наблюдение напоследок. Письмо, в котором всё аккуратно и просто, не вызывает восхищения, но его читают и по нему переходят. Письмо, которым восхищаются, но в котором неудобно, читают редко.
Текст остаётся главным. Оформление лишь убирает препятствия между мыслью и человеком. Когда препятствий нет, люди читают охотнее и делают то, о чём вы их просите, без лишнего внутреннего сопротивления.
Начинать стоит с малого. Возьмите одно своё письмо, откройте его на телефоне и просто посмотрите глазами читателя. Скорее всего, вы сразу увидите две-три вещи, которые хочется поправить, и это будет самое полезное упражнение по вёрстке.
Не нужно переделывать сразу всю рассылку и придумывать новый шаблон. Достаточно одного изменения, которое вы проверите на практике и сможете оценить спокойно, без спешки.
Дальше это входит в привычку. Вы начинаете писать письма так, чтобы их было удобно читать, и перестаёте думать об оформлении как о чём-то отдельном от текста. Одно перестаёт мешать другому, и рассылка становится тем, чем и должна быть: спокойным разговором по делу.
Комментарии (0)