Разбираем значение вырезки Gmail для разработчиков, дизайнеров и редакторов информационных бюллетеней
Если вы работаете с электронной почтой, вы наверняка сталкивались с вырезкой Gmail. Важно помнить, что это функция Gmail, которая автоматически обрезает ваше сообщение, если размер его файла превышает 102 КБ. Это означает, что отсечение является результатом количества базового HTML-кода в вашем электронном письме. Каждый символ составляет один или два байта, и все они складываются.
В зависимости от того, являетесь ли вы разработчиком, дизайнером или редактором информационных бюллетеней, вырезка в Gmail может иметь разные последствия для того, что вы делаете и как вы это делаете. Воспользуйтесь этими ссылками, чтобы перейти к той части, которая вам интересна (или прочитать все):
- Я разработчик. Что это значит для моего кода?
- Я дизайнер. Что это значит для моего дизайна?
- Я редактор информационного бюллетеня. Что это означает для моего содержания?
- Приложение: Техническое погружение в вырезку HTML и Gmail
Я разработчик. Что это означает для моего кода?
Если отсечение имеет большое значение для вашего продукта (скорее всего, по многим причинам, включая чистую долю рынка), то вам нужно подумать, стоят ли написанные вами HTML и CSS байтов, которых они стоят. Это означает обдумывание таких вопросов, как:
Я пишу слишком много стилей? Могу ли я использовать сокращенные объявления?
Например, вы можете написать:
font: normal 17px/25px Arial, sans-serif;
Вместо эквивалента:
font-weight: normal; font-size: 17px; line-height: 25px; font-family: Arial, sans-serif;
Что сэкономит вам немало персонажей.
Могу ли я добиться того же результата другим способом, использующим меньше разметки?
Например, подумайте, действительно ли вам нужно вложить свой код в еще одну таблицу (я знаю, иногда другая таблица - единственный выход. Вздох). Какую минимальную таблицу вы можете написать для визуализации дизайна, работающего во всех ваших почтовых клиентах? Если ваша команда заботится только о Gmail и Apple Mail, которые снисходительнее, чем Outlook, возможно, вам не понадобится HTML с гипертаблицей.
Могут ли эти URL-адреса и атрибуты быть короче?
Если у вас есть URL-адрес, который выглядит как https://www.very-long-url.com/its-long/for-some-reason/like-with-alphanumeric-stuff, возможно, стоит использовать средство сокращения URL-адресов (например, Bitly), чтобы сократить его до чего-то вроде https://very.long/stuff.
Также подумайте о названиях ваших классов. Может быть, class="footer-container-wrapper" вместо этого class="ft-wrapper"? Классы предназначены для многократного использования, поэтому старайтесь избегать длинных имен.
А как насчет языков разметки, упрощающих создание электронных писем в формате HTML?
Такие языки разметки, как MJML, упрощают создание электронных писем, потому что они делают тяжелую работу по обеспечению того, чтобы электронное письмо отображалось как можно более правильно и единообразно для всех клиентов. Они действительно хороши в этом. Однако эти языки разметки все еще необходимо скомпилировать в простой HTML. Например, с помощью MJML вы можете написать:
<mj-section padding="0">
<mj-column padding="0">
<mj-button href="#" padding="0" color="#ffffff" font-family="arial, sans-serif" font-size="15px">
Button
</mj-button>
</mj-column>
</mj-section>
Это выглядит просто, но на самом деле компилируется в очень длинную строку сильно вложенного HTML, например:
И вся эта разметка быстро накапливается.
По сути, цель здесь - написать как можно меньше HTML-кода - особенно если вы создаете динамические компоненты электронной почты, например, для библиотеки компонентов или службы шаблонов. Однако, как правило, прежде чем углубляться в кодирование и стилизацию электронной почты, проверьте, хорошо ли поддерживаются стили, которые вы хотите использовать. В Campaign Monitor есть отличное руководство по этому поводу. Также проверьте свою работу в сервисе тестирования электронной почты, таком как Litmus или Email on Acid, который проверит, работают ли ваши стили, и покажет, будет ли ваше электронное письмо обрезано.
Я дизайнер. Что это значит для моего дизайна?
Чем сложнее дизайн, тем больше кода нужно написать. Это значит думать о таких вещах, как:
Перевешивает ли выгода от наличия еще одной точки останова затраты на байты?
Чем больше у вас точек останова, тем больше CSS нужно написать, тем больше размер вашего файла.
Можно ли использовать макет с одним столбцом?
Макеты с двумя столбцами сложны и требуют большого количества разметки, особенно если вам нужны два столбца для настольных компьютеров и один для мобильных устройств.
Обязательно ли нажимать на весь блок контента?
Электронная почта оформляется в виде таблиц. В отличие от Интернета, мы не можем просто обернуть ссылку вокруг целого блока контента. Скорее, мы должны обернуть ссылку вокруг каждого фрагмента блока, чтобы он выглядел так, как будто все это интерактивно. Например, если у вас есть блок ссылок, который выглядит так:
Который состоит из трех компонентов - изображения, заголовка и абзаца - разработчику, возможно, придется написать разметку ссылки три раза. Кроме того, каждый URL-адрес может быть длинным, и у вас может быть много таких блоков, что может значительно способствовать отсечению.
Я редактор информационного бюллетеня. Что это означает для моего содержания?
Мы можем сделать дизайн и код максимально простыми и минимальными, но, в конце концов, чем больше контента в электронном письме, тем больше вы получите обрезков.
Иногда это бывает сложно понять. Вы уже сократили количество ссылок, которые у вас есть, и на самом деле у вас не так много слов. Вы можете спросить: «Почему меня все еще обрезают?»
Как упоминалось в начале этой статьи, важно понять, сколько HTML необходимо для создания имеющегося у вас контента. Это особенно важно Это важно, если вы пишете электронные письма с использованием службы на основе шаблонов, такой как Mailchimp, или собственной службы, основанной на библиотеке компонентов, потому что, будучи редактором, вы можете не увидеть код, который используется для создания вашей электронной почты за кулисами.
Думайте о каждом блоке содержания в своем электронном письме как об айсберге: то, что вы, как редактор, можете видеть и с чем взаимодействовать, - это лишь верхушка, которая находится над поверхностью воды. Но есть и остальная часть айсберга, которая скрывается под поверхностью - это HTML-код, который разработчики написали, чтобы он выглядел так, как планировали дизайнеры. Для каждой вершины айсберга есть больше айсберга, который держит его на плаву. А поскольку электронное письмо будет содержать множество таких айсбергов, вы можете себе представить, что под поверхностью творится многое, чего вы не видите. Таким образом, каждый раз, когда вы создаете новый блок контента, вы действительно создаете целый айсберг, а не только то, что находится на поверхности.
Примечание. Полное техническое, неметафорическое объяснение см. в приложении.
Исходя из этого, как редактор важно помнить о нескольких вещах:
- Я пишу слишком много блоков контента?
- Могу ли я объединить некоторые из них?
- Могу ли я эффективно сообщить о своих намерениях, если использую более простой и понятный шаблон или макет?
Электронная почта HTML сложна для работы. Она привередлива и не использует веб-стандарты. Надеюсь, когда-нибудь это произойдет! Обрезка Gmail добавляет еще один уровень сложности к тому, что и без того сложно сделать. С учетом сказанного, я надеюсь, что это прояснило, каковы последствия вырезки Gmail для вас, независимо от вашей роли!
Приложение: Техническое погружение в HTML и вырезку Gmail
Чтобы понять, почему ваша электронная почта обрезается, мы собираемся здесь немного углубиться в проблемы HTML. Если вы не знакомы с HTML, пожалуйста, несите меня!
Допустим, у вас есть фрагмент текста из 390 символов (включая пробел, который также является символом), например:
Это один абзац. Lorem Ipsums - это просто фиктивный текст в полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифтов и скремблировал их, чтобы сделать книгу образцов шрифтов. Он пережил не только пять веков, но и скачок в электронный набор, оставшись практически неизменным.
Предположим, ваша почтовая служба создает блок абзацев, заключая текст в следующий HTML-код:
Эта разметка HTML для блока абзаца имеет длину 106 символов (не считая содержимого заполнителя). Итак, для одного блока контента, который у нас был ранее, у нас фактически есть всего 390 + 106 = 496 символов.
Что, если бы мы взяли тот же самый блок контента и разбили его на три более мелких абзаца?
Это один абзац. Lorem Ipsums - это просто фиктивный текст в полиграфической и наборной индустрии.
Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифтов и скремблировал их, чтобы сделать книгу образцов шрифтов.
Он пережил не только пять веков, но и скачок в электронный набор, оставшись практически неизменным.
Каждый из них будет заключен в HTML-код абзаца, а это означает, что за кулисами содержимое на самом деле выглядит следующим образом:
Ого! Это на намного больше разметки, чем раньше! В первом абзаце 98 символов, во втором - 170, а в третьем - 120. Если вы отслеживаете, это 388 символов, что на два меньше, чем в оригинале. Это потому, что нам больше не нужны два пробела, разделяющие предложения, которые стали нашими новыми абзацами. Таким образом, общее количество символов в HTML составляет (3 × 106) + (98 + 170 + 120) = 706, что на 210 (около 42%) больше, чем раньше!
Это показывает, что даже несмотря на то, что объем содержимого по существу одинаков, объем необходимого HTML увеличивается на каждый блок содержимого, который у вас есть. И чем больше у вас HTML, тем больше вы будете обрезаны.
