Как сделать кнопки электронной почты HTML, которые качаются

  1. ОБНОВЛЕНИЕ: Улучшение рендеринга в Outlook
  2. Скриншоты

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

Хороший призыв к действию требует кнопку, которая:

  1. Работает везде Совместим с каждым почтовым клиентом.
  2. Не полагается на изображения, загружаемые клиентом
  3. Легко понять и настроить (шрифты, цвета и т. Д.)


Вот код:

<table cellspacing = "0" cellpadding = "0">
<TR>
<td align = "center" width = "300" height = "40" bgcolor = " # 000091 " style = "- webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; цвет: #ffffff; отображение: блок; ">
<a href = " http://www.EXAMPLE.com/ " style = "font-size: 16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; оформление текста: нет; строка -высота: 40px; ширина: 100%; отображение: встроенный блок "> <span style =" color: #FFFFFF "> Потрясающая кнопка электронной почты </ span> </a>
</ TD>
</ TR>
</ Table>

ОБНОВЛЕНИЕ 1: Нажмите здесь, чтобы увидеть дополнительный код, чтобы добавить лучшую поддержку Outlook

ОБНОВЛЕНИЕ 2: перемещено объявление цвета внутри <span>, чтобы исправить цвет шрифта в Outlook Web App, также называемый Office 365

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

Обратите внимание, что если вы хотите изменить высоту кнопки, вы должны изменить ее в двух местах (высота в <td> и стиль высоты строки в <a>). Если вы хотите, чтобы кнопка центрировалась, просто добавьте align = "center" в тег <table>.

Предостережения: в некоторых «сложных» клиентах, таких как последние версии Outlook для Windows, кнопки не имеют закругленных углов, и только текст в кнопке можно нажимать. Смотрите ниже для обхода ,

Эта кнопка должна работать со следующими почтовыми клиентами:

    • GMail, Yahoo (без скругленных углов), Hotmail и Outlook.com
    • iPhone, iPad, Apple Mail
    • Outlook 2000 через Outlook 2013 (даже при пересылке)
    • Почтовый клиент Android 2.3+
    • Мобильное приложение Gmail
    • Windows Phone 7
    • Lotus Notes 8+
    • BlackBerry 5+
    • AOL Mail
    • Outlook Web App / Office 365 (без скругленных углов и только текст кликабелен)

ОБНОВЛЕНИЕ: Улучшение рендеринга в Outlook

Как я уже отмечал выше, эта таблица работает как кнопка в Outlook, но в ней нет закругленных углов, а кликабелен только центральный текст. Но есть исправление! Трюк опирается на Outlook Условные комментарии , который позволяет вам направить некоторый HTML-код в Outlook и полностью скрыть другой HTML-код. Нажмите здесь для кода ,

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

Скриншоты

Вот несколько скриншотов того, как это выглядит в паре разных клиентов (из лакмус а также EmailOnAcid услуги тестирования электронной почты):

Вот несколько скриншотов того, как это выглядит в паре разных клиентов (из   лакмус   а также   EmailOnAcid   услуги тестирования электронной почты):

Новая кнопка Outlook 2013:
Новая кнопка Outlook 2013:

Эли Дикинсон является соучредителем и техническим директором компании Dive. Следуй за ним в твиттере на @esd ,

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

Хотите связаться с руководителями и лицами, принимающими решения, с помощью собственного маркетингового сообщения? Проверьте наш список отраслей ,

Похожие

Как использовать диагностику DirectX в Windows
DirectX - это набор API, используемых в Windows для мультимедийных и видео программ, и он особенно важен для геймеров. Средство диагностики DirectX отображает обширную информацию о DirectX, а также
Как использовать Tor Browser для поиска в Интернете анонимно
В эту эпоху онлайн-отслеживания активности, профилирования и слежки люди, настроенные на конфиденциальность, обратились к программному обеспечению анонимного просмотра, чтобы скрыть свои цифровые треки от посторонних глаз. Одним из самых популярных и незаметных инструментов является The Onion Router или Tor, для краткости. Первоначально разработанная в середине 1990-х годов военно-морским флотом США для защиты онлайн-коммуникаций США, теперь это бесплатная глобальная сеть, доступная для
Как проверить оперативную память на вашем Mac
... вас есть использованный Mac, или более новый, или тот, который вы обслуживали для обновления своей оперативной памяти, тогда настоятельно рекомендуется проверить оперативную память системы, прежде чем полагаться на нее для повседневной деятельности. Оперативная память - это активная рабочая станция, которую ОС и приложения используют для работы, и если есть проблемы с оперативной памятью, то могут возникнуть проблемы, возникающие из-за сбоев и зависаний при повреждении данных.
Как установить приложения Android на Windows Phone
В конце концов это возможно. Если вам не хватает приложений и игр на Windows Phone, вы можете легко установить те, которые доступны на Android. Как это сделать? В начале вам понадобится обновление для Windows 10 Mobile. Windows
Как быстро и качественно построить рекламный портал
Вы хотите создать свой собственный рекламный портал и не знаете, как это сделать? Чтобы облегчить эту задачу, стоит подумать о полном, дешевом и функциональном решении. Мы предлагаем вам взглянуть на готовые шаблоны Joomla, подготовленные для таких порталов. Используйте готовый
Как скачать фильмы и сериалы с Zalukaj.tv бесплатно
Вы пользуетесь сайтом Zalukaj.pl? Вам не нужно иметь подключение к Интернету вообще, чтобы смотреть фильмы и сериалы на вашем компьютере или смартфоне. Вот самый простой способ скачать видео с Zalukaj.tv. Он работает как в Google Chrome, так и в Mozilla Firefox. Быстро и просто, просто :)
Как выбрать и проверить компанию или SEO предложение
Сегодня я расскажу о довольно важной теме, касающейся выбора SEO / агентства по позиционированию и, что более важно, «как проверить предложение о позиционировании / SEO». Я решил опубликовать простую инфографику (внизу статьи) после недавних запросов по электронной почте и нескольких телефонных звонков от потенциальных клиентов для службы SEO, которые попросили меня проверить полученные предложения. Я сознательно опущу аспект различных типов сервисов позиционирования,
Как BLIK работает на Allegro? Ну очень хорошо!
... в Allegro вы можете оплачивать покупки с помощью системы мобильных платежей BLIK. Платежи BLIK полностью интегрированы с платформой Allegro и стали одним из основных способов оплаты. - Удобство и интуитивность являются ключевым элементом, влияющим на устойчивый рост популярности продаж в Интернете. Мы рады, что BLIK, созданный крупнейшими польскими банками и получивший признание клиентов, теперь доступен на Allegro, - сказал Пшемыслав Будковски,
Как сделать веб-почту электронной почтой по умолчанию в Chrome, Firefox и Opera
Сколько раз вы нажимали адрес электронной почты на веб-странице, а не копировали его только для того, чтобы случайно запустить Outlook или другой настольный почтовый клиент? Кто больше использует настольные почтовые клиенты? Ну, я делаю, но это другая история. Многие люди в наши дни просто хранят всю свою электронную почту в таких веб-службах, как Gmail, Outlook.com и Yahoo Mail. Когда вы нажимаете на адрес электронной почты, ваш браузер передает ответственность за специальный
Как запустить средство инициализации домашних настроек PlayMemories (Windows)
Эта статья относится к моделям, совместимым с PlayMemories Home. Для получения подробной информации, пожалуйста, обратитесь к руководству или другой документации вашего устройства. В этой статье описывается использование средства инициализации домашних настроек PlayMemories на компьютерах с ОС Windows. Пожалуйста, прочитайте следующие инструкции. Средство инициализации домашних настроек PlayMemories позволяет удалять различные настройки, которые автоматически сохраняются
Иск для рекламы AdWords? Проверьте, как избежать скольжения
При создании рекламы мы должны помнить о законе и модерации Google, и довольно строгие условия обслуживания не помешают нам ни с какими проблемами. Много раз объясняя, как это работает AdWords

Комментарии

Сколько раз вы нажимали адрес электронной почты на веб-странице, а не копировали его только для того, чтобы случайно запустить Outlook или другой настольный почтовый клиент?
Сколько раз вы нажимали адрес электронной почты на веб-странице, а не копировали его только для того, чтобы случайно запустить Outlook или другой настольный почтовый клиент? Кто больше использует настольные почтовые клиенты? Ну, я делаю, но это другая история. Многие люди в наши дни просто хранят всю свою электронную почту в таких веб-службах, как Gmail, Outlook.com и Yahoo Mail. Когда вы нажимаете на адрес электронной почты, ваш браузер передает ответственность за специальный
Поддержка внешних учетных записей электронной почты?
Поддержка внешних учетных записей электронной почты? Приложение Gmail может это сделать. Тем не менее, я не вижу ничего плохого в том, что Interia пытается сравниться с гигантом. Эти решения хорошо зарекомендовали себя в Gmail, поэтому они также должны понравиться пользователям почты Interia.
Вы хотите создать свой собственный рекламный портал и не знаете, как это сделать?
Вы хотите создать свой собственный рекламный портал и не знаете, как это сделать? Чтобы облегчить эту задачу, стоит подумать о полном, дешевом и функциональном решении. Мы предлагаем вам взглянуть на готовые шаблоны Joomla, подготовленные для таких порталов. Используйте готовый рекламный шаблон для Joomla основанный на рекламное приложение
Как это сделать?
Как это сделать? Просто скачайте приложение NativeWrap и установите его. Затем в любом браузере мы открываем страницу Facebook.com, разрабатываем меню браузера и используем опцию «Поделиться страницей». Из списка методов обмена выберите «NativeWrap» - все, что вам нужно сделать, это дать имя нашему приложению (например, Facebook Mobile) и нажать «Сделать APK». Приложение будет установлено, и браузер Facebook будет доступен в списке приложений. Плюсы: браузерная версия Facebook
Это, конечно, облом, но как часто вы получаете обновление программного обеспечения для электронных книг, которое на законных основаниях приносит новые функциональные возможности?
Это, конечно, облом, но как часто вы получаете обновление программного обеспечения для электронных книг, которое на законных основаниях приносит новые функциональные возможности? Для родителей есть FreeTime, которая позволяет создавать профили и, как правило, поощрять больше чтения с помощью значков достижений и так далее. Тем не менее, обновление, которого мы действительно ждем, - Goodreads - функциональность, которую мы ожидали с Amazon
Как вы думаете, это хороший телефон?
Как вы думаете, это хороший телефон? 9.6 Это удобно? 9.4 Видите ли вы это хорошо на солнце? 9,1 Производительность и оборудование Antutu Оценка 136,773 (Antutu v6). Общая производительность лучше, чем у 84% устройств. Безопасность Отпечаток пальца Да, на передней панели датчиков Отпечаток пальца Да Акселерометр Да Барометр Да Компас Да Гироскоп Да Зал Да Датчик света Да Близость Да другие
О, если вы думаете, что это молозиво, обета и чихание вообще, то как, по-вашему, будет иначе просить незнакомцев купить ваши продукты?
О, если вы думаете, что это молозиво, обета и чихание вообще, то как, по-вашему, будет иначе просить незнакомцев купить ваши продукты? Создайте свое сообщество Многие люди, которые ведут блоги, считают, что люди, комментирующие их записи, уже являются сообществом. Это не правда Люди, которые приходят к вам в блог, могут комментировать только то, что вы создали. Это означает, что вы находитесь в центре. Между тем, создание сообщества означает, что люди, их дилеммы
Как мы можем заразиться таким вирусом?
Как мы можем заразиться таким вирусом? Обычно преступники отправляют поддельные электронные письма клиентам банка, которые содержат вложения с вредоносными программами. Если наш компьютер не защищен должным образом и мы открываем такое электронное письмо с вложением, мы рискуем потерять доступ не только к компьютеру, но и к электронному банкингу. Как избежать потери данных и ресурсов? Помните, что ни один банк никогда не отправляет своим
Сколько детей ели ночью, как часто и сколько?
Сколько детей ели ночью, как часто и сколько? Большинство обследованных детей (64%) ели от 1 до 3 раз за ночь. Помните, что ночь была определена как время между 22:00 и 4:00. Количество ночного кормления не зависело от возраста малыша! Не было различий в общей суточной выработке молока и емкости молочной железы в зависимости от того, ел ребенок ночью или нет. Не было различий в общем количестве кормлений в день между
Как должна выглядеть гостиная с кухней в провансальском стиле?
Как должна выглядеть гостиная с кухней в провансальском стиле? Посоветуйте! Гостиная с кухней в провансальском стиле - цвета и материалы Интерьеры в провансальском стиле
А как проверить передачу в сети Wi-Fi, например, между компьютерами?
А как проверить передачу в сети Wi-Fi, например, между компьютерами? Многие люди путают скорость интернета с пропускной способностью в сети Wi-Fi. Пропускная способность подключения к Интернету - это постоянная скорость, которую мы получаем от нашего оператора - например,

Хотите связаться с руководителями и лицами, принимающими решения, с помощью собственного маркетингового сообщения?
Как это сделать?
Pl?
Кто больше использует настольные почтовые клиенты?
Сколько раз вы нажимали адрес электронной почты на веб-странице, а не копировали его только для того, чтобы случайно запустить Outlook или другой настольный почтовый клиент?
Кто больше использует настольные почтовые клиенты?
Поддержка внешних учетных записей электронной почты?
Вы хотите создать свой собственный рекламный портал и не знаете, как это сделать?
Вы хотите создать свой собственный рекламный портал и не знаете, как это сделать?
Как это сделать?