Кнопка в письме — один из важных элементов email-рассылки, который украшает письмо и помогает сделать письмо более эффективным. Без призыва к действию уже трудно представить проморассылки и транзакционные письма — они просто необходимы, чтобы захватить внимание клиентов и побудить их купить/почитать/перейти на сайт и т.д.
Для продвинутых пользователей, наверное, проще сверстать кнопку с нуля, чем брать уже готовую и заморачиваться над изменениями. Мы разобрали популярные практики, как можно сделать кнопку СТА разными способами.
Краткое содержание статьи, как сверстать кнопку:
1. Кнопки в виде картинок
Если вы не хотите мучиться с вёрсткой или дизайн вашего письма требует уникальных кнопок со спец. эффектами, такими как: тени, свечения, анимация, градиенты или нестандартные шрифты — вы всегда сможете использовать кнопку нарисованную в графическом редакторе. Такая кнопка будет выглядеть 100% одинаково везде, но есть вероятность, что некоторые почтовые клиенты сразу ее не загрузят. Тот же Outlook по-умолчанию блокирует загрузку картинок.
Не забывайте использовать ALT-текст для кнопок-картинок. Дублируйте в нем название вашей кнопки, а так же применяйте стили для оформления ALT-текста.
2. Campaign Monitor
Компания разработала инструмент для создания кнопок на основе VML. Язык VML используется для корректного отображения кнопки в MS Outlook.
Создать такую кнопку можно легко по ссылке buttons.cm, вам нужно будет лишь указать исходные параметры и вам автоматически сгенерится код для использования.
В зависимости от редактора, где вы планируете добавить кнопку, возможно, придётся её немного дорабатывать.
Пример кода для тестирования:
Откровенно говоря, слишком много кода получается. В Outlook такая кнопка хорошо смотрится, но она не универсальная из-за фиксированных размеров. Получается, её нужно постоянно генерировать заново, изменяя размеры в зависимости от длины названия.
3. MailChimp
Компания предлагает использовать кнопки на основе таблицы. Образец кнопки вы можете найти на странице Buttons.
Также компания рекомендует использовать адаптивные кнопки, в таком случае ширина призыва к действию будет зависеть от объема текста внутри ячейки таблицы.
Пример кода для тестирования
4. eSputnik
Мы верстаем наши кнопки используя в качестве основного элемента — ссылку, которая обернута в span элемент для создания эффектов границы вокруг кнопки или отбрасывания тени.
Мы не задаем фиксированных размеров кнопкам, поэтому наши кнопки увеличиваются в размерах вместе с увеличением размеров шрифта текста и его длины.
Делайте красивые письма!
«Объем» кнопки, или иными словами отступы вокруг текста, задается в виде толщины границ ссылки. Этот прием позволяет кнопке остаться объемной в Outlook и не превратиться в ссылку с цветным фоном. Однако Outlook не поддерживает css-свойство border-radius (и др.), поэтому закругленная кнопка в Outlook будет с острыми углами.
Вот так выглядят CSS-классы со стилями наших кнопок. Вы можете экспериментировать с этими стилями, чтобы добиться желаемого результата.
А это HTML верстка самой кнопки:
Пример кода для тестирования:
При создании письма выбираете блок кнопку и добавляете её в письмо.Кроме того, в нашей системе есть готовые наборы кнопок, которые можно добавлять лёгким движением руки.
Перед вами откроются все настройки кнопки, которые можно задать в несколько кликов даже без знаний вёрстки. В том числе, адаптивность кнопки и расположение в письме.
Создание кнопки, как и всего письма не займёт много времени. В редакторе вы сможете задать настройки кнопки:
Вот и всё! Останется только дополнить вашу кнопку красивым призывом к действию.
Кстати, всем нашим новым пользователям (для комфортного пользования нашей системой и быстрого старта) мы дарим первый бесплатный шаблон в стиле сайта клиента. В шаблоне так же создаем стили для главной и второстепенной кнопки вашей будущей рассылки.
Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.
Вёрстка по хардкору
Для новичков HTML-вёрстка писем — хардкор. Письмо может отлично выглядеть в браузере, но некрасиво разъехаться в мобильном приложении Gmail или старенькой версии Outlook. Разбираемся, как этого избежать.
Эта статья для вас, если вы уже что-то слышали про теги и CSS, но сами не сверстали ни одного HTML-шаблона. Если вы хотите заказать вёрстку письма у профи, статья поможет составить грамотное ТЗ.
Начнем с ошибок в вёрстке писем.
Почему «едет» вёрстка
Одного верстальщика попросили сделать письма для email-рассылки. Дизайн готов, текст написан, осталось перенести это в HTML-код. Верстальщик проверяет первое письмо в браузере:
Красота и порядок, каждый элемент на своем месте. Но не все подписчики откроют письмо в браузере. Поэтому пробуем открыть письмо через почтовые клиенты. Сразу вылезают ошибки.
Mail.ru неверно отображает хедер:
Outlook 2013 поиздевался над кнопкой:
Проблемы с отображением писем происходят из-за обилия программ и интернет-сервисов для чтения почты. Одно и то же письмо можно открыть через:
Даже если вы досконально знаете HTML и CSS, над письмом надо будет потрудиться. В вёрстке email-рассылок есть нюансы.
Основные правила вёрстки рассылок
Правило №1. Используем таблицы
Для верстальщиков в вебе таблицы — это пережитки 90-х годов. Но в email-рассылках только этот способ подходит для нормального отображения письма. Сообщения могут открывать в почтовых клиентах и браузерах, которые не поддерживают новые версии HTML и CSS. Табличная вёрстка — залог того, что письмо не «разъедется» и нормально отобразится на всех платформах.
Структура письма выглядит так: основную таблицу делят на ячейки, в которые помещают другие таблицы. В этих блоках находится контент: изображения, текст, кнопки и ссылки.
Правило №2. Применяем универсальные HTML-теги и атрибуты
Правило №3. Встроенные стили CSS
CSS — это язык, с помощью которого описывают внешний вид HTML-документа. HTML отвечает за структуру письма, а CSS — за форматирование: шрифт, цвет, поля, строки, фоновые изображения.
Есть 3 способа добавить CSS:
Способ 1. Написать тег внутри или :
Способ 3. Описать CSS как атрибут в элементах HTML (inline-CSS):
Правило №4. Делаем фиксированную ширину письма
Чтобы пользователи мобильных устройств не жаловались на горизонтальную полосу прокрутки, задайте фиксированную ширину. Она не должна превышать 600px:
Обязательные атрибуты HTML
Для некоторых тегов нужно прописывать конкретные атрибуты. В противном случае почтовый клиент подставит их по умолчанию и письмо отобразится неверно. Такими тегами являются, например,
для таблиц или для изображений.
Разберёмся, какие атрибуты для них прописывать.
Для таблиц
Для строчных элементов
Для изображений
Безопасные шрифты
Почтовые клиенты отображают ограниченный набор шрифтов (мы уже писали о том, какие шрифты использовать в рассылке ). Чтобы ваш текст везде отобразился одинаково, используйте безопасные значения свойства font-family. Оно отвечает за шрифты.
Цвет и фон
Цвета в письмах задают в виде шестнадцатеричных чисел формата HEX (например, #333333). Сокращения в виде #333 обрабатывают не все почтовые клиенты, поэтому их в верстке рассылок не используют. Цвета формата RGB тоже работать не будут.
При верстке HTML-писем фон задают через атрибуты background=»» и bgcolor=»» для тега
. Если задать их для других тегов, то Gmail, открытый в Safari, проигнорирует их.
Не все почтовые клиенты обработают фон, который прописан через стили CSS. Поэтому свойство background и его производные ( background-image, background-visibility, background-size ) лучше не применять.
Адаптивная вёрстка
Тут всё непросто. Как говорит наш верстальщик Денис Щукин, «Если для новичка HTML — это дремучий лес, то адаптивная вёрстка — джунгли». Перечислим только основные подходы, чтобы вы были в курсе.
Медиа-запросы. Чтобы пользователю было комфортно читать письмо с любого устройства, используйте медиа-запросы. В HTML-верстке медиа-запросы — это команды, которые подстраивают макет письма под разрешение экрана.
С их помощью можно менять размеры шрифта и цвет кнопок, расположение блоков и картинок в зависимости от размера экрана. Но полностью полагаться на них не стоит — до сих пор не все почтовые клиенты выполняют эти инструкции.
Mobile First. Один из способов адаптивной верстки — Mobile First. В этом случае сначала создают письмо для мобильных гаджетов, а потом — для компьютеров.
Как тестировать
Один минус — Mail.ru и Яндекс.Почта на этих сайтах нет. Поэтому самый верный способ протестировать макет письма — сделать рассылку на свои почтовые ящики. Именно этот прием используют опытные верстальщики.
Усредненную версию письма также можно посмотреть в UniSender. От конечной версии она будет отличаться некритично.
Как сделать кнопки в Instagram: полная инструкция (2021)
В этой статье вы узнаете:
Все советы и рекомендации актуальны в 2021 году.
Какие кнопки можно добавить?
В шапку Instagram-профиля можно добавить кнопки для связи. При этом, владелец аккаунта видит одни кнопки — «Редактировать профиль», «Промоакции», «Статистика», — а обычные посетители профиля видят совершенно другие кнопки.
Еще в постах есть кнопка «Продвигать», которая также доступна только для владельца аккаунта. Она нужна для запуска рекламы и продвижения публикаций.
Какие кнопки можно добавить в профиль:
Это важно: мечтаете стать популярным в Instagram и начать зарабатывать более 50 000 в месяц? Хотите привлекать новых клиентов для бизнеса? В этом поможет сервис Zengram.
Это полностью безопасный инструмент для профессионального продвижения в Instagram. Инструмент работает автоматически — взаимодействует с вашей целевой аудиторией. Результаты раскрутки будут уже через 2-3 часа после старта.
Пробуйте, первые 3 дня работы — бесплатно.
Зачем нужны кнопки?
Кнопки в шапке профиля делают процесс коммуникации с подписчиками и клиентами проще. Заинтересованный пользователь — например, потенциальный покупатель в вашем интернет-магазине, — может нажать на кнопку и позвонить/написать вам. Это поможет увеличить конверсию и продажи.
Еще один плюс кнопок: не нужно писать свой номер или электронную почту в описании профиля — лучше подробнее рассказать о себе или компании.
Как сделать кнопки в Инстаграм: инструкция
Чтобы сделать кнопки в Инстаграм, нужно подключить бизнес-аккаунт или перейти на аккаунт автора. Для этого откройте настройки своего Instagram-профиля и перейдите в раздел «Аккаунт». Здесь есть опция «Переключится на профессиональный аккаунт».
После того, как вы подключите профессиональный аккаунт, можно переходить к настройке кнопок.
Кнопки связи
Сначала добавим кнопки связи: написать, позвонить и как добраться. Для этого зайдите в свой Instagram-аккаунт и нажмите кнопку «Редактировать профиль».
В открывшемся окне «Изменить профиль» есть раздел «Способы связи» — перейдите в него.
Теперь укажите свои данные:
Если вы добавите все способы связи — почту и номер, — то в шапке появится кнопка «Контакты». При нажатии на «Контакты», откроется меню — здесь пользователю нужно выбрать способ связи: написать на эл.почту или позвонить на телефон.
Кнопка действия
В начале статьи мы говорили, что можно сделать кнопки действия: «Записаться», «Забронировать», «Купить билет». Для этого понадобится сторонний сервис — мы рассмотрим на примере «SimplyBook.me», так как он работает в России.
У онлайн-сервиса есть встроенная интеграция с Instagram. Зайдите на сайт системы записи SimplyBook и зарегистрируйте компанию: укажите логин, электронную почту, рабочий телефон, категория бизнеса, адрес, название страницы бронирования (можно указать название компании), Сделайте краткое описание — не более 500 символов.
Скопируйте ссылку на созданную страницу компании. Теперь перейдите в раздел «Редактировать профиль» в Instagram. Снова перейдите в «Способы связи». Нажмите «Добавить кнопку действия» и вставьте ссылку на страницу в SimplyBook.
Таким образом, в шапке профиля появится еще один способ взаимодействия с вашей компанией. Но это еще не все: благодаря этому синяя кнопка подписаться станет больше.
Кнопка WhatsApp
В шапку профиля можно добавить активную ссылку на WhatsApp. Да, это не совсем кнопка, но при нажатии на эту ссылку, пользователи смогут быстро отправить вам сообщение в мессенджер.
Добавить «кнопку» на WhatsApp просто:
Анализируем статистику кнопок
Когда вы подключите бизнес-аккаунт или аккаунт автора, то в профиле появится доступ к статистике. Здесь можно посмотреть, как пользователя взаимодействую с кнопками в шапке.
Чтобы посмотреть эту информацию, перейдите в раздел со статистикой своего Instagram-аккаунт (кнопка «Статистика» на главной странице профиля). Далее откройте вкладку «Действия».
Вся нужная информация отображается в этом разделе.
Итоги
Теперь вы знаете, как сделать кнопки в Инстаграм. Обязательно добавьте их в шапку своего профиля: так подписчикам и потенциальным клиентам будет намного проще связаться с вами, например, чтобы заказать товар или услугу.
По умолчанию в почтовом ящике пользователя показывается только тело письма и заголовок — поля От кого ( From ), Кому ( To ), Дата ( Date ) и Тема ( Subject ).
Свойства письма могут содержать подробную служебную информацию о письме:
Информация из свойств письма может помочь в борьбе со спамом или решить техническую проблему в вашем почтовом ящике.
Вы также можете просмотреть свойства письма в любой из используемых вами почтовых программ или в других почтовых сервисах.
Просмотр свойств письма в почтовых программах
Просмотр свойств письма в других почтовых сервисах
Откройте письмо и нажмите кнопку \n.
Как скачать оригинал письма?
Выберите ваш браузер:
Откройте свойства письма и нажмите Сохранить в адресной строке браузера.
Откройте свойства письма и нажмите Сохранить в адресной строке браузера.
Как скопировать адрес письма?
Как сделать скриншот?
Скриншот (от англ. screenshot ) — это снимок экрана вашего компьютера или мобильного устройства, который можно получить с помощью стандартных средств или специальной программы.
Как настроить обработку ссылок mailto в разных браузерах?
Ссылки mailto — это ссылки с адресом электронной почты, при переходе по которым открывается почтовая программа.\nЧтобы по ним сразу переходить на страницу создания письма в Яндекс.Почте, настройте обработку протокола mailto в своем браузере.
Яндекс.Браузер
Яндекс.Почта сама предлагает назначить обработчик протокола:
Чтобы включить дополнение:
Если в заголовке страницы не появился значок \n, назначьте Яндекс.Почту обработчиком самостоятельно:
Введите в консоль следующую команду, а затем нажмите Enter :
Mozilla Firefox
Google Chrome
Как скопировать сообщение из консоли ошибок?
Информация из консоли ошибок может помочь решить техническую проблему с вашим почтовым ящиком, вызванную конфликтами используемого программного обеспечения (браузеров, расширений и дополнений к ним, фаервола или антивируса и т. п.).
Чтобы открыть консоль ошибок
Выполните действия, которые приводят к ошибке. Если на вкладке Errors появились сообщения, разверните окно на весь экран и сделайте скриншот содержимого. Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы открыть консоль ошибок:
Чтобы открыть консоль ошибок, нажмите на некорректно загруженной странице значок в левом нижнем углу страницы.
Выполните действия, которые приводят к ошибке. Если в окне консоли появились сообщения, разверните окно на весь экран и сделайте скриншот содержимого. Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы открыть консоль ошибок
Выполните действия, которые приводят к ошибке. Если на вкладке Errors появились сообщения, разверните окно на весь экран и сделайте скриншот содержимого. Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Выполните действия, которые приводят к ошибке. Если на вкладке Ошибки появились сообщения, разверните окно на весь экран и сделайте скриншот содержимого. Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Как включить Java или JavaScript в разных браузерах?
Для корректной работы Яндекс.Почты необходимо включить поддержку Javascript в вашем браузере.
Яндекс.Браузер
Google Chrome
Internet Explorer 6 и выше
Mozilla Firefox
Opera
Safari
Во время проведения технических работ почтовый ящик доступен только для отправки писем или просмотра уже полученных. Вы не можете вносить какие-либо изменения, например, перемещать письма в другие папки или менять настройки почтового ящика.
В режиме «только чтение» может отображаться неактуальное состояние почтового ящика. Если вы получили или отправили письмо, оно не будет отображаться в списке писем до окончания работ.
По завершении технических работ данные в ящике будут обновлены — вы увидите все пришедшие и отправленные за время работ письма.
Как отключить портреты отправителей?
Почему при авторизации требуется ввести контрольные цифры?
Контрольные цифры при входе в почтовый ящик появляются в следующих случаях:
Также рекомендуется проверить ваш компьютер на наличие вирусов — некоторые вредоносные программы используются для автоматического подбора пароля.
Технический справочник
Как посмотреть свойства письма?
По умолчанию в почтовом ящике пользователя показывается только тело письма и заголовок — поля От кого ( From ), Кому ( To ), Дата ( Date ) и Тема ( Subject ).
Свойства письма могут содержать подробную служебную информацию о письме:
Информация из свойств письма может помочь в борьбе со спамом или решить техническую проблему в вашем почтовом ящике.
Вы также можете просмотреть свойства письма в любой из используемых вами почтовых программ или в других почтовых сервисах.
Просмотр свойств письма в почтовых программах
Просмотр свойств письма в других почтовых сервисах
Откройте письмо и нажмите кнопку .
Как скачать оригинал письма?
Выберите ваш браузер:
Откройте свойства письма и нажмите Сохранить в адресной строке браузера.
Откройте свойства письма и нажмите Сохранить в адресной строке браузера.
Как скопировать адрес письма?
Как сделать скриншот?
Скриншот (от англ. screenshot ) — это снимок экрана вашего компьютера или мобильного устройства, который можно получить с помощью стандартных средств или специальной программы.
Как настроить обработку ссылок mailto в разных браузерах?
Ссылки mailto — это ссылки с адресом электронной почты, при переходе по которым открывается почтовая программа. Чтобы по ним сразу переходить на страницу создания письма в Яндекс.Почте, настройте обработку протокола mailto в своем браузере.
Яндекс.Браузер
Яндекс.Почта сама предлагает назначить обработчик протокола:
Чтобы включить дополнение:
Если в заголовке страницы не появился значок , назначьте Яндекс.Почту обработчиком самостоятельно:
Введите в консоль следующую команду, а затем нажмите Enter :
Mozilla Firefox
Google Chrome
Как скопировать сообщение из консоли ошибок?
Информация из консоли ошибок может помочь решить техническую проблему с вашим почтовым ящиком, вызванную конфликтами используемого программного обеспечения (браузеров, расширений и дополнений к ним, фаервола или антивируса и т. п.).
Чтобы открыть консоль ошибок
Выполните действия, которые приводят к ошибке. Если на вкладке Errors появились сообщения, разверните окно на весь экран и сделайте скриншот содержимого. Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы открыть консоль ошибок:
Чтобы открыть консоль ошибок, нажмите на некорректно загруженной странице значок в левом нижнем углу страницы.
Выполните действия, которые приводят к ошибке. Если в окне консоли появились сообщения, разверните окно на весь экран и сделайте скриншот содержимого. Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы открыть консоль ошибок
Выполните действия, которые приводят к ошибке. Если на вкладке Errors появились сообщения, разверните окно на весь экран и сделайте скриншот содержимого. Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Выполните действия, которые приводят к ошибке. Если на вкладке Ошибки появились сообщения, разверните окно на весь экран и сделайте скриншот содержимого. Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Как включить Java или JavaScript в разных браузерах?
Для корректной работы Яндекс.Почты необходимо включить поддержку Javascript в вашем браузере.
.
, назначьте Яндекс.Почту обработчиком самостоятельно:
в левом нижнем углу страницы.