Что такое Emmet?

По мере того, как компании отправляют все больше и больше электронных писем, маркетологи и дизайнеры ищут инструменты, которые помогут сократить время между разработкой кампании и ее завершением. Одним из самых трудоемких аспектов электронного маркетинга всегда было кодирование и тестирование кампаний. Хотя заранее закодированные шаблоны электронных писем могут сэкономить время в процессе разработки, как можно кодировать кампании более эффективно с нуля? Одним из способов является использование инструмента под названием Emmet для написания меньшего количества кода. Emmet — это бесплатное дополнение для вашего текстового редактора, которое позволяет набирать сокращения, которые затем расширяются в полные фрагменты кода. Используя Emmet, дизайнеры электронных писем набирают меньше, экономя клавиатурные удары и время при построении кампании. Кроме того, использование автозавершения Emmet означает меньше опечаток и пропущенных тегов, что приводит к более прочным электронным письмам. Emmet доступен для различных текстовых редакторов и встроен в Litmus Builder. Популярный среди веб-дизайнеров, Emmet также популярен среди небольшой группы разработчиков электронной почты, особенно в Европе и среди маркетологов, которые кодируют электронные письма с нуля. Например, 11% маркетологов в Европе и Великобритании и 13% тех, кто кодирует электронные письма с нуля, используют Emmet, согласно нашему исследованию 2018 года о состоянии рабочих процессов электронной почты. После установки Emmet позволяет набирать сокращенный код, следующий тем же соглашениям, что и HTML и CSS. Дизайнеры могут набирать имена элементов, добавлять селекторы идентификатора и класса, и использовать более продвинутые функции Emmet, чтобы ускорить процесс кодирования. Они даже могут вкладывать элементы, используя те же селекторы дочерних и родственных элементов, что и в обычном CSS, чтобы быстро создавать большие блоки кода. Самый простой способ понять Emmet — это посмотреть на пример. Скажем, вы хотите таблицу с тремя строками, каждая из которых содержит ячейку таблицы с изображением над абзацем текста и ссылкой. Вместо того, чтобы вручную набирать или копировать и вставлять каждую строку, ячейку таблицы, изображение, абзац и тег ссылки, вы можете сократить все это до одной строки и позволить Emmet сделать большую часть работы за вас. `table>tr*3>td>img+p+a` После нажатия кнопки TAB для активации Emmet одна строка кода выше расширяется в полный HTML. Это выглядит устрашающе, но как только вы привыкнете к синтаксису Emmet, это становится второй натурой. Давайте разберем это. Строка начинается с элемента таблицы, который говорит Emmet, что первый элемент для расширения — это HTML-таблица. Используя селектор дочернего элемента (>) и оператор умножения (*), мы затем говорим Emmet, чтобы он включил три строки таблицы в основную таблицу. Далее мы включаем еще один селектор дочернего элемента, чтобы добавить ячейку таблицы в каждую строку таблицы. В этих ячейках таблицы мы включаем изображение, абзац и тег ссылки как родственные элементы (+) друг друга. Для дизайнеров электронной почты, которые полагаются на атрибуты HTML для обеспечения согласованности в разных приложениях электронной почты, вы даже можете включать атрибуты, которые Emmet затем будет использовать в вашем расширенном коде. Просто поместите свои атрибуты и их значения в квадратные скобки, разделенные пробелами. Если мы хотим включить cellpadding и cellspacing в таблицу, например, мы бы написали: `table[cellpadding=0 cellspacing=0]` Emmet имеет множество полезных функций, включая функции для группировки элементов, быстрого навигации, удаления тегов, слияния строк и даже добавления образцового текста. Хотя здесь слишком много функций, чтобы обсудить, онлайн-документация Emmet — это отличное место, чтобы узнать больше. Существует также множество фантастических уроков в Интернете. Хотя большинство из них фокусируются на использовании Emmet в контексте веб-дизайна и разработки, те же принципы можно применить к дизайну электронной почты. Вот несколько наших любимых: — Статья «Прохладный и легкий HTML с Emmet» от Atomic Object — Сcreencast «Emmet (потрясающий)» от CSS-Tricks — Статья «Прощай, Zen Coding, привет, Emmet!» от Smashing Magazine — Серия «Быстрый рабочий процесс: освоение Emmet» от SitePoint Интересуетесь ли вы использованием Emmet в своем рабочем процессе? Litmus Builder поддерживает большинство функций Emmet. В сочетании с нашими мгновенными предпросмотрами это позволяет вам кодировать и тестировать кампании в более чем 90 разных клиентов электронной почты быстрее, чем когда-либо прежде.