Сегодняшняя сессия « Обсуждение с экспертами» имела огромный успех по всем показателям. Как следует из названия поста, предметом был HTML Email, а нашим экспертом была Николь Мерлин из Email Wizardry . Если вы подпишетесь на любую из наших новостных рассылок, вы будете знакомы с работой Николь.
Количество участников приближалось к максимальному, который я видел в одном из этих чатов, и стандарт вопросов был исключительным. Николь держала себя в руках и умела отвечать на все вопросы, которые ей задавали, одновременно предоставляя нам огромное количество ресурсов. Я собрал их во всеобъемлющий список, который вы найдете ниже.
Инструменты и шаблоны
Отзывчивый шаблон электронной почты
Еще один отзывчивый шаблон
HTML Email Boilerplate
Premailer — инструмент предварительной проверки электронной почты HTML
Учебные ресурсы
SitePoint создает потрясающую электронную почту в формате HTML, которая просто работает
Мобильный гид Campaign Monitor
Учебник по созданию шаблона
Большой список ресурсов электронной почты HTML
Современная HTML электронная почта от Джейсона Родригеса
Информация о встроенных изображениях
Примеры
Хороший пример не зависящей от устройства электронной почты
Отличный пример использования анимированных GIF-файлов в электронной почте
Если вы пропустили сессию сегодня, потому что не знали об этом, убедитесь, что вы подписались на электронные напоминания о будущих здесь . Далее мы поговорим о Руби в 13:00 по тихоокеанскому времени в среду, 20 ноября.
Если у вас есть какие-либо отзывы об этих сессиях, я хотел бы услышать это. Пожалуйста , отправьте мне письмо со своими мыслями.
Этого достаточно от меня. Вот полная стенограмма выступления сегодня утром (или нет, в зависимости от того, где вы находитесь в мире), для вашего удовольствия от чтения.
[20:30] <HAWK> Хорошо, мы тоже можем начать. NicoleMerlin — вы дадите нам краткое введение в предмет?
[20:30] <NicoleMerlin> Хорошо, наверное, я бы сказал, что электронная почта в настоящий момент переживает настоящий всплеск, и это фантастика. В прошлом электронная почта была темной лошадкой из-за того, что спамеры называли ее дурным именем, но если все сделано правильно, она может быть действительно эффективной.
[20:31] <NicoleMerlin> Требуется сборка с использованием таблиц, потому что почтовые клиенты имеют некоторые очень ограниченные возможности рендеринга CSS, но может быть действительно интересно получать удивительные вещи, работая с ограниченным набором инструментов.
[20:31] <lo_ny> Я недавно заметил анимацию в них
[20:31] <HAWK> Таблицы. Как ретро!
[20:31] <NicoleMerlin> Действительно ретро!
[20:31] <Rob> В каком почтовом клиенте вы видите перерывы в HTML-письмах?
[20:32] <NicoleMerlin> На данный момент это Gmail для Android, что очень сложно, потому что они представили новую функцию, которая сжимает вашу таблицу контента до 100% вашего окна просмотра, но не читает медиазапросы.
[20:32] <NicoleMerlin> Это довольно раздражает.
[20:32] <ralphm> Анимации обычно выполняются с анимированными гифками.
[20:32] <NicoleMerlin> Outlook 2013 также имеет несколько раздражающих особенностей.
[20:33] <Moraima> есть какой-нибудь инструмент для тестирования наиболее часто используемых почтовых клиентов?
[20:33] <NicoleMerlin> Старые версии Lotus Notes довольно плохие, но мне больше не приходится поддерживать Lotus Notes 6 или 6.5 больше (слава богу)
[20:33] <MalCurtis> Много ли автоматизированных инструментов для проверки совместимости с почтовыми клиентами?
[20:33] <NicoleMerlin> Да, есть несколько УДИВИТЕЛЬНЫХ инструментов.
[20:33] <Rob> Николь, ты успешно используешь адаптивную электронную почту?
[20:33] <NicoleMerlin> Вы можете использовать www.litmus.com или www.emailonacid.com
[20:33] <NicoleMerlin> Я использую оба этих
[20:34] <MalCurtis> Каковы преимущества каждого?
[20:34] <NicoleMerlin> Привет, Роб, вся моя работа отзывчива.
[20:34] <MalCurtis> то есть зачем тебе использовать оба?
[20:34] <NicoleMerlin> Responsive работает очень хорошо, а также дает отличные результаты для активности подписчиков, таких как переходы по ссылкам.
[20:34] <NicoleMerlin> Я использую оба из них, потому что я делаю это профессионально, поэтому, если один из них выходит из строя, я могу использовать другой.
[20:34] <NicoleMerlin> У них обоих есть плюсы и минусы.
[20:35] <Rob> Я еще не попробовал Responsive, потому что много негативных отзывов об этом, когда речь заходит о мобильных телефонах. Они не правы?
[20:35] <Киббидж> Как часто они спускаются?
[20:35] <chateaudesducs> Могу я задать простой вопрос? Можно ли создать HTML-письмо, которое достигает своего места назначения в той же степени, что и обычное текстовое письмо? Или это противоречие в терминах?
[20:35] <NicoleMerlin> Электронная почта на Acid имеет широкий спектр параметров браузера для каждого клиента, например, вы можете тестировать Gmail в Safari, Chrome, Firefox и т. Д. В то время как Litmus просто дает вам один вариант для каждого браузера.
[20:35] <MalCurtis> Как вы думаете, это немного излишне?
[20:35] <NicoleMerlin> Ох, они очень редко падают, но я просто не могу рисковать
[20:36] <rokio> Как ты реагируешь? Используете ли вы только медиа-запросы …
[20:36] <NicoleMerlin> Если у меня сжатые сроки, у меня нет 30 минут на ожидание теста.
[20:36] <NicoleMerlin> @Rob, какие негативные отзывы?
[20:36] <Rob> отрицательно в том смысле, что они ломаются при чтении
[20:36] <NicoleMerlin> chateaudesducs, ты имеешь в виду спам-фильтры?
[20:37] <NicoleMerlin> @Rob, если это так, они не были построены должным образом 🙂
[20:37] <lo_ny> Mail Chimp, похоже, дает хорошие результаты
[20:37] <Rob> Николь, спасибо, я тоже не могу сказать, потому что я еще не дал ему по-настоящему.
[20:37] <chateaudesducs> Да.
[20:38] <NicoleMerlin> @rokio вы используете медиа-запросы максимальной ширины. Это потому, что вам нужна ваша «базовая версия» для рендеринга в клиентах для настольных компьютеров и веб-почты (например, Outlook), и ни одна из этих программ не выполняет медиазапросы. Однако смартфоны и планшеты выполняют медиазапросы, поэтому они выбирают максимальную ширину и затем применяют ваши стили.
[20:39] <Ragwing> Почтовый шимпанзе великолепен и бесплатен, если вы не отправляете много
[20:39] <NicoleMerlin> Вы также можете создать отзывчивое электронное письмо без медиазапросов, если вы установили максимальную ширину в CSS вашей таблицы. Я на самом деле не пробовал этот метод, но я не понимаю, почему он не будет работать.
[20:39] <HAWK> Для всех, кто интересуется работой Николь, вы можете найти ее здесь http://emailwizardry.nightjar.com.au/
[20:39] <MalCurtis> Недавно я наткнулся на этот шаблон адаптивной электронной почты — выглядит ли он как современный шаблон отраслевых стандартов?
[20:39] <MalCurtis> https://gist.github.com/tinabeans/6996367
[20:39] <Robin> Прошло много времени с тех пор, как мне приходилось кодировать рассылку по электронной почте. Существуют ли инструменты, которые вы используете для их создания, или вы сами вручную пишете разметку? Использует ли электронная почта HTML5? Я думаю, что я новичок, хотя я веб-разработчик
[20:39] <Narcisa> также Getresponse, кажется, имеет эту опцию
[20:40] <Rob> Николь, ты используешь какое-либо программное обеспечение для создания адаптивной электронной почты или все написано от руки?
[20:41] <Robin> HAWK, где на сайте точка? Я обучаемый член
[20:41] <NicoleMerlin> @Robin Электронная почта HTML не так актуальна. Есть несколько тегов HTML5, которые вы можете использовать, и некоторые люди использовали тип документа HTML5 для своих электронных писем, но я не пробовал это с хорошими результатами.
[20:41] <NicoleMerlin> В этом бесплатном адаптивном шаблоне из электронной почты на Acid используется тип документа HTML5 http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i
[20:41] <HAWK> На домашней странице Робин. Это бесплатно для доступа. Если вы находитесь в списке рассылки для этих сессий, я отправлю ссылку. Или вы можете найти его в заголовке этой страницы, когда сеанс не запущен.
[20:42] <NicoleMerlin> И когда я создаю свою электронную почту, я кодирую их вручную, но использую Sublime Text и хорошо использую фрагменты кода.
[20:42] <Robin> спасибо, Николь, я тоже использую Sublime
[20:42] <слушатель> Я как Робин. Я хотел бы знать, как начать делать эти электронные письма HTML
[20:42] <Робин> Спасибо, Хок
[20:42] <NicoleMerlin> MalCurtis Мне нужно взглянуть на этот код и сообщить вам
[20:42] <NicoleMerlin> 🙂
[20:43] <NicoleMerlin> С электронной почтой вы можете попробовать НИЧЕГО. Ничто не является слишком сумасшедшим — если вы думаете «ну и дела, эта штука HTML5 будет работать», тогда вы можете просто пойти и создать файл и попробовать его. Затем запустите его через тест (с Litmus или Email на Acid и с использованием некоторых живых устройств) и посмотрите, работает ли он. Иногда вы будете удивлены — я обнаружил, что веб- шрифты действительно работают в некоторых версиях Outlook Express и Lotus Notes 8. Всегда стоит попробовать.
[20:43] <lo_ny> Какие услуги вы используете для их отправки?
[20:44] <lo_ny> разослать в большой список, то есть.
[20:44] <NicoleMerlin> Я предпочитаю Campaign Monitor, потому что мне очень нравится их интерфейс. Я также работаю для клиентов, использующих все, от MailChimp до ExactTarget, которая является платформой более корпоративного уровня.
[20:45] <Robin> NicoleMerlin, какую ширину вы используете для ширины стола? Кроме того, есть ли ограничение на размер файла для более быстрой загрузки? также, тот же вопрос для мобильного
[20:45] <Роб> хм, но если некоторые вещи работают только на нескольких клиентах, разве это не опасно?
[20:45] <mindlogik> Я разрабатываю электронные письма HTML в BC, но обнаружил, что Outlook 2013 не отображает представление в браузере правильно — есть предложения?
[20:46] <Mike> кто-то упоминал Thunderbird? Я читал, что это было хорошо.
[20:46] <NicoleMerlin> @Rob Я имею в виду, что вы можете что-то пробовать, но если они не работают, вы их не используете.
[20:46] <john> У меня есть веб-приложение, управляемое базой данных, которое использует ASP.NET SMTPClient для отправки электронных писем, но форматирование HTML — это кошмар, строящий строки. Какие-нибудь инструменты для улучшения генерации контента электронной почты?
[20:46] <Rob> Я люблю Thunderbird, все в Thunderbird работает. Не ломать электронные письма
[20:47] <Rob> НикольМерлин понял 😉
[20:47] <NicoleMerlin> @Robin Я склонен придерживаться размера 480-600 пикселей для ширины рабочего стола. Размер файла лучше всегда держать под 200 КБ, но очевидно, что он лучше! Особенно на мобильном телефоне. 100k или меньше на мобильном телефоне — это Святой Грааль.
[20:47] <HAWK> Вау. У вас, ребята, есть все хорошие вопросы сегодня! Отличная сессия до сих пор.
[20:47] <NicoleMerlin> Да, Thunderbird — отличный клиент.
[20:47] <lo_ny> @Rob, сколько можно отправить одним выстрелом с T-птицей?
[20:48] <NicoleMerlin> mindlogik, что такое BC?
[20:48] <NicoleMerlin> Для этого есть исправление …
[20:49] <HAWK> Сохраненный редактор: https://gist.github.com/745617
[20:49] <NicoleMerlin> Это исправление в HTML-листе электронной почты
[20:49] <NicoleMerlin> http://htmlemailboilerplate.com
[20:49] <Rob> @lo_ny Я никогда ничего не рассылал в списке рассылки Thunderbird
[20:49] <Robin> NicoleMerlin, можете ли вы обсудить ваш рабочий процесс для создания и развертывания вашей рассылки электронной почты? Многие здесь говорят о браузерах, нескольких почтовых клиентах и сайтах тестирования. Я немного растерялся, когда «последовательные» шаги прошли первоначальное html-кодирование макета таблицы.
[20:49] <Робин>: 0
[20:49] <NicoleMerlin> Email Boilerplate — это действительно отличный ресурс. Я не рекомендую брать весь документ, чтобы начать свою электронную почту, так как я обнаружил, что он был слишком раздутым и вызвал некоторые проблемы, но он великолепен как справочник и позволяет выбирать и исправлять ошибки.
[20:50] <mindlogik> Бизнес-катализатор
[20:50] <NicoleMerlin> О, хорошо.
[20:50] <rokio> Я второй Робин
[20:50] <слушатель> Спасибо, Хок
[20:50] <NicoleMerlin> Джон Я боюсь, что у меня нет опыта работы с .net или со сборкой строк, мне всегда везет, что я просто строю прямой HTML.
[20:52] <Mike> кто-то упоминал Thunderbird? Я читал, что это было хорошо.
[20:52] <HAWK> У них есть Майк — все фанаты, включая Николь
[20:52] <ArchaicLord> Привет, я думал, что это были шаблоны электронной почты HTML?
[20:52] <HAWK> ArchaicLord — это так 🙂
[20:53] <NicoleMerlin> Конечно @Robin, то, что обычно происходит, это сначала этап каркаса и проектирования. Затем я начинаю с собственного пустого «шаблона» в Sublime Text и начинаю сборку. Сначала я строю структуру, затем тестирую ее в электронной почте на Acid или Litmus, чтобы убедиться, что она работает на настольных и мобильных устройствах Затем я вхожу и применяю все стили, а затем проверяю это, и у меня также есть несколько устройств, на которых я тестирую (Android, iPhone, iPad и т. Д.). Как только все ошибки устранены, он готов к работе.
[20:53] <mindlogik> спасибо за исправление 2013 года. Оно работает !
[20:53] <NicoleMerlin> Итак, его нужно загрузить на платформу для отправки почты. Кампания Monitor или MailChimp являются примерами этого.
[20:53] <HAWK> ArchaicLord — если у вас есть конкретные вопросы, задавайте, и я поставлю их в очередь, чтобы Николь ответила
[20:53] <NicoleMerlin> Вы регистрируетесь у одного из этих провайдеров, а затем создаете «Кампанию», которая позволит вам загружать созданный вами HTML-код.
[20:53] <NicoleMerlin> Вам также необходимо загрузить список подписчиков на выбранную вами платформу.
[20:54] <NicoleMerlin> Как только вы готовы к работе, вы можете отправить им письмо через систему.
[20:54] <NicoleMerlin> миндлогик Yay!
[20:54] <ArchaicLord> Насколько мне известно, есть ли лучший способ создать кампанию по электронной почте без использования таблиц в html для размещения элементов
[20:55] <john> НикольМерлин — забудь пока что .Net часть моего вопроса. У меня просто есть некоторый код, который работает на веб-сервере, берет данные из базы данных и выкачивает электронные письма. Тем не менее, создание содержимого электронной почты требует чего-то другого, кроме огромного упражнения по объединению HTML-тегов с переменными из базы данных. Должен быть лучший способ.
[20:55] <Robin> @john, вы могли бы создать базовый шаблон в вашей строке, а затем написать и запустить небольшую программу, в которой ваш текст вводится в соответствующие теги таблицы с помощью идентификаторов или имен классов с помощью jQuery, а затем копировать вставить этот HTML в твоя форма?
[20:55] <rokio> Как вы строите структуру? Вы строите структуру, используя таблицу? Вы используете встроенный CSS или вы положили в разделе заголовка?
[20:56] <NicoleMerlin> @ArchaicLord Нет. Иногда вы можете использовать div внутри таблиц для достижения различных целей, но нет смысла пытаться работать без таблиц. Таблицы — единственное, что работает универсально, и бесполезно пробовать что-либо еще 🙂
[20:56] <Narcisa> @Nicole: вы используете внешние таблицы стилей или только встроенный CSS?
[20:57] <Mo7sin>. = И какой из них лучше>
[20:57] <NicoleMerlin> @rokio Да, вы определенно строите структуру, используя таблицу. Обычно у вас есть большая таблица шириной 100%, которая действует как ваше «тело» (некоторые клиенты не допускают стилизацию тегов тела), а затем у вас есть еще одна таблица.
[20:57] <NicoleMerlin> Когда вы отправляете свою электронную почту, ваш CSS должен быть встроенным
[20:57] <Rob> @john Я только что закончил создание полной системы доставки электронной почты с шаблонами. Я просто использую переменные в шаблоне для поиска и замены из базы данных.
[20:57] <Robin> NicoleMerlin, когда вы говорите, что «тестируете по электронной почте» на Acid или Litmus, вы имеете в виду, что отправляете себе электронную почту на свои учетные записи (например, gmail, Yahoo и т. Д.), А затем открываете их на различных устройствах ?
[20:57] <NicoleMerlin> Потому что некоторые клиенты (например, Gmail) игнорируют CSS в голове и / или удаляют его.
[20:58] <NicoleMerlin> Ваши медиазапросы остаются в голове, они будут игнорироваться каждым клиентом, который не может их прочитать
[20:58] <NicoleMerlin> Но вы можете кодировать с CSS в голове, однако, прежде чем отправлять, вы ДОЛЖНЫ использовать инструмент, чтобы все это встроить.
[20:58] <NicoleMerlin> Это один из таких инструментов http://premailer.dialect.ca
[20:58] <Robin> НикольМерлин, извини, я нажала слишком быстро. Вот весь мой вопрос: когда вы говорите «тест по электронной почте» на Acid или Litmus, вы имеете в виду, что вы отправляете себе электронное письмо в свои учетные записи (например, gmail, Yahoo и т. Д.), А затем открываете их на разных устройствах?
[20:58] <NicoleMerlin> Монитор кампаний по умолчанию включает встроенный CSS, как и MailChimp (вы также можете отключить его)
[21:00] <NicoleMerlin> @john На самом деле я понятия не имею, я обычно поставляю свою работу другим гениальным людям, которые занимаются интеграцией, и, насколько я знаю, им пришлось выполнить большую связку. Я предполагаю, что HTML-код электронной почты существует, а затем в него «внедряются» переменные и значения, но я не знаю, может ли он так работать.
[21:01] <Джон> Роб — спасибо за идею. Где я могу узнать больше о шаблоне (ах)? Моя архитектура — это Windows .exe, работающий на сервере, который периодически генерирует электронную почту получателю. Создание содержимого электронной почты является болью.
[21:01] <Rob> Вот подсказка, которую я нашел, когда использовал много изображений в таблицах, чтобы они не ломались в Gmail. добавить рамку = ”0 ″ style =” display: block; ”ко всем тегам <img>
[21:01] <NicoleMerlin> @ Робин, хороший вопрос, мне следовало бы прояснить эту часть процесса.
[21:03] <NicoleMerlin> @Robin Когда вы тестируете в электронной почте на Acid, вы можете загрузить ZIP-файл своего файла, или открыть URL-адрес удаленного файла, или вы можете отправить электронное письмо на адрес youraccountname @ emailonacid .com, и он получит письмо. Таким образом, вы загружаете свой файл в их систему, а затем ОНИ запускают тест на множестве разных почтовых клиентов, и они отображают скриншот каждого из них.
[21:03] <Steve> Привет, Николь. Вы размещаете ячейки таблицы только по атрибуту width или используете пробел GIF?
[21:03] <NicoleMerlin> Когда вы тестируете в Litmus, вы можете вставить свой HTML-код или отправить электронное письмо по указанному вами адресу, он генерируется случайным образом. Затем они делают то же самое .. запускают тесты и дают вам скриншоты.
[21:04] <NicoleMerlin> Они рекомендуют отправлять им электронные письма с фактической платформы, которую вы будете использовать, поскольку это дает наиболее точные результаты.
[21:04] <Робин> НикольМерлин, спасибо. Я должен проверить эти инструменты
[21:05] <NicoleMerlin> Я часто загружаю свои электронные письма в Campaign Monitor или MailChimp, а затем отправляю себе тестовые электронные письма, а затем мне настраивают этот адрес электронной почты на моих тестовых устройствах, чтобы я мог получать его на всех них одновременно ,
[21:05] <Rob> @john Я должен был продумать этот процесс сам и найти фрагменты поиска. Я в основном создаю «шаблоны» таблицы БД, содержащие HTML-код в 1 поле. Определите переменные, такие как% address%, которые должны быть заменены данными с данными db.
[21:05] <Robin> NicoleMerlin, то есть разметка — это просто таблица с вложенными таблицами, содержащими содержимое (div, a, ul, ol и т. Д.)? нет структуры <html> <title> </ title> <body> </ body> </ html> dom?
[21:06] <NicoleMerlin> @lizardlounger Это отличный вопрос, о котором я действительно думал на днях! Я собирался провести несколько тестов по этому вопросу. Я думаю, что, возможно, если вы добавите много & NBSP; теги? Тогда вы просто получите большой разрыв. Это моя лучшая идея, но я буквально думал об этом 2 дня назад, и мне нужно это проверить!
[21:06] <HAWK> К вашему сведению, вопрос lizardlounger был: есть ли способ жестко закодировать предзаголовок, чтобы он отображал только назначенное вами предложение, не набирая дополнительный текст?
[21:07] <CaptainSin> Николь, Когда я отправляю электронные письма в формате таблицы из обычной электронной почты, изображения появляются в виде вложений.
[21:07] <MalCurtis> NicoleMerlin Я не удивлюсь, если многие клиенты урежут несколько пробелов в один
[21:07] <MalCurtis> Так как технически есть много новых строк, когда вы убираете HTML-теги
[21:07] <CaptainSin> У вас есть предложения по работе со встроенными изображениями. лучше? На данный момент они находятся в виде вложений в электронное письмо.
[21:08] <NicoleMerlin> Привет, @Steve, я предпочитаю использовать как можно больше отступов, так как считаю, что это лучший и самый простой способ достичь пробела, и иногда есть некоторые грохоты, в которых слишком много пустых ячеек с & nbsp; теги внутри них плохи с точки зрения СПАМА (хотя я не могу ни подтвердить, ни опровергнуть это). Заполнение поддерживается ПОЛНОСТЬЮ, вопреки распространенному мнению, но вы должны убедиться, что вы указали каждое отдельное значение. Например, <td style = ”padding: 0 0 5px 0;”>
[21:09] <NicoleMerlin> Если по какой-то причине я не могу использовать отступы, я бы использовал ячейки таблицы только с атрибутом width / height.
[21:09] <Робин> ах, спасибо, Стив за то, что спросил, и Николь за подсказку!
[21:09] <Джон> Роб — Спасибо. Я думаю, что эти инструменты и методы, упомянутые здесь, в основном имеют дело с маркетинговыми электронными письмами. Мои очень сильно привязаны к данным базы данных получателей (в отличие от Litmus и этих других инструментов).
[21:09] <Robin> NicoleMerlin, вы используете свойство cellpadding или padding?
[21:10] <Робин> или как?
[21:10] <Робин> НикольМерлин * или оба
[21:11] <Nelmedia> Поскольку мы используем таблицы для отображения, это означает, что вы не помещаете размер в html, а просто используете CSS для адаптивного макета, иначе CSS переопределит атрибуты HTML?
[21:11] <Steve> Похоже, мне нужно вернуться в школу кодирования электронной почты. Любые хорошие ресурсы или ссылки, чтобы помочь с моей учебой? Вы уже предоставили пищу для размышлений!
[21:11] <NicoleMerlin> Привет, капитан, у меня никогда не было отличных результатов при отправке электронной почты в формате HTML из почтового клиента. Чтобы избежать отправки изображений в виде вложений, по моему опыту, вы должны использовать такие службы, как Campaign Monitor или MailChimp.
[21:11] <HAWK> Добро пожаловать, если вы только что присоединились. Не стесняйтесь прыгать в любое время, и я буду в очереди вопросы для Николь. Позже я выложу стенограмму на SitePoint, чтобы вы могли увидеть, что вы пропустили
[21:12] <MalCurtis> @john Если вы ищете сервис, который обрабатывает шаблоны электронных писем, и вы можете просто отправить на него данные, я фактически собираюсь запустить один
[21:12] <NicoleMerlin> @ Робин Нет, простите меня, есть все остальное. Если вы посмотрите на HTML Email Boilerplate http://htmlemailboilerplate.com Вы увидите структуру. У вас есть тип документа, тег HTML, тег HEAD, тег BODY и т. Д.
[21:12] <Rob> @john да, но, в конце концов, ваша электронная почта все равно должна быть правильно построена для почтовых клиентов. Удачи.
[21:12] <NicoleMerlin> @MalCurtis Это действительно может произойти .. Мне нужно проверить это.
[21:13] <Robin> NicoleMerlin, хорошо, спасибо за разъяснения, сегодня я узнаю кое-что хорошее!
[21:13] <lizardlounger> Спасибо, Николь. Мне нужно посмотреть, как & NBSP; работает так же ?! Меня беспокоит, будут ли при этом проблемы со спамом?
[21:13] <слушатель> Кто-нибудь знает какие-либо онлайн-видео или книги, в которых показаны основы создания HTML-писем? Благодарю.
[21:14] <Робин> Я второй Стив
[21:14] <MalCurtis> «Создавайте потрясающие электронные письма в формате HTML, которые просто работают!» Автор SitePoint: http://www.sitepoint.com/store/create-stunning-html-email-that-just-works/
[21:14] <NicoleMerlin> @Robin Я всегда использую заполнение CSS, а не атрибут HTML cellpadding, потому что это дает вам больше контроля.
[21:15] <Робин> Николь Мерлин, я вижу. Хорошо, я запомню это
[21:15] <Rob> @listener Lynda.com имеет учебник
[21:15] <Nelmedia> Sitepoint должен будет обновить свою книгу, чтобы учесть мобильные телефоны…
[21:15] <NicoleMerlin> @Nelmedia Вы можете поместить материал ширины и размера в HTML, CSS в медиазапросах действительно переопределяет атрибуты ширины и высоты HTML (слава богу). Мне нравится устанавливать как можно меньше ширины, поэтому я обычно задаю ширину моей внешней таблицы (то есть 600 пикселей), а затем все, что в ней делается, делается с использованием процентов. Таким образом, мне нужно переопределить только одно значение 600px. Часто это не ТАКОЕ аккуратно, но это и есть цель.
[21:16] <Робин> Хорошая информация
[21:16] <NicoleMerlin> @lizardlounger Да, это возможно. Это, безусловно, то, что я хочу выяснить, хотя … мы должны «подключиться» в Twitter (ненавижу это слово: р)
[21:17] <ralphm> @Steve CampaignMonitor имеет несколько отличных бесплатных шаблонов, которые многому научат вас в макете электронной почты, как и MailChimp. CM также имеет несколько отличных учебных ресурсов, таких как этот, для адаптивных макетов электронной почты: http://www.campaignmonitor.com/guides/mobile/
[21:18] <HAWK> Добро пожаловать, если вы только что присоединились. У нас осталось около 10 минут, поэтому, если у вас есть важный вопрос, обязательно ответьте на него!
[21:18] <HAWK> Не должно быть в контексте, я могу поставить их в очередь
[21:18] <CaptainSin> НикольМерлин Спасибо
[21:18] <HAWK> Кто-нибудь задавал вопрос, на который еще не ответили>
[21:18] <NicoleMerlin> @Steve Рад слышать! Я написал базовый учебник для Tuts + http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/build-an-html-email-template-from-scratch/ Но он НЕ отзывчив, извините. Я буквально в середине моего адаптивного урока на этой неделе и надеюсь опубликовать это. Тем временем вы можете использовать руководства Campaign Monitor http: //www.campai gnmonitor.com/guides/
[21:18] <слушатель> Спасибо, Роб
[21:18] <NicoleMerlin> Да, у SitePoint есть книга, я верю? 🙂
[21:19] <Робин> Ральфм ответил на тот вопрос, который я поддержал Стива. Но также хотелось бы, чтобы Николь рекомендовала инструменты для изучения
[21:19] <Робин> ой.
[21:19] <Робин> она только что ответила
[21:20] <NicoleMerlin> Есть видео, но я просто разузнаю, будет ли это только для участников на Litmus.
[21:20] <NicoleMerlin> Может быть, мне стоит снять видео, хотя я ненавижу звук собственного голоса: p
[21:20] <Vetski> Кто-нибудь рекомендует VerticalResponse как хорошую систему доставки электронной почты, или вы все думаете, что MailChimp или htmlemailboilerplate лучше?
[21:20] <Робин> ха, ха, не мы все!
[21:21] <NicoleMerlin> Хорошо, мы идем, на этой странице много хороших ссылок https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources
[21:21] <ralphm> Для отправки ваших собственных тестовых электронных писем я обнаружил, что если вы размещаете изображения в Интернете и ссылаетесь на них, отправка электронной почты через Safari работает нормально (проблемы с изображениями в виде вложений отсутствуют). Safari имеет опцию «Поделиться»> «Отправить по электронной почте».
[21:21] Слушатель <lizardlounger> кроме Sitepoint «Создавайте потрясающие электронные письма в формате HTML, которые просто работают!», Я рекомендую http://modernhtmlemail.com/ Джейсона Родригеса. Отличный ресурс для современной электронной почты / отзывчивый!
[21:22] <NicoleMerlin> Привет @Vetski, я никогда не использовал VerticalResponse, он выглядит как платформа отправки электронной почты, так же, как MailChimp. Шаблон электронной почты в формате HTML НЕ является платформой отправки — это просто базовый «шаблон» кода. Вы не можете отправлять свои электронные письма, используя его.
[21:22] <Nelmedia> Для электронной почты RWD, я полагаю, нам следует ориентироваться только на смартфоны, поскольку планшет уже должен хорошо отображать их (поскольку мы планируем использовать около 600 пикселей для таблицы)… Или есть другие вещи, которые следует учитывать для планшета, которые отличается от настольного почтового клиента?
[21:22] <Vetski> ах, спасибо за разъяснения!
[21:23] <Narcisa> @Nicole: про мобильные устройства. Что я должен сделать, чтобы правильно отображать мои электронные письма? Достаточно ли следовать правилу ширины <600 пикселей?
[21:23] <Robin> относительно вопроса об изображениях, отображаемых в виде вложений. Это поведение по умолчанию в почтовом клиенте? Я знаю, что иногда я получаю электронное письмо, и клиент спрашивает меня, хочу ли я загружать изображения. Кроме того, будет ли связывание их с абсолютным URL на вашем сервере отображать изображения как встроенные, а не как вложения?
[21:23] <NicoleMerlin> @Nelmedia По моему опыту, планшеты вполне хороши и отображают настольную версию, но, очевидно, в последнее время наблюдается рост размеров планшетов (даже только с Samsung, Kindle Fire и Kobo Vox), поэтому это может зависеть ,
[21:24] <Robin> NicoleMerlin, относительно вопроса об изображениях, отображаемых в виде вложений. Это поведение по умолчанию в почтовом клиенте? Я знаю, что иногда я получаю электронное письмо, и клиент спрашивает меня, хочу ли я загружать изображения. Кроме того, будет ли связывание их с абсолютным URL на вашем сервере отображать изображения как встроенные, а не как вложения?
[21:24] <Rob> Если вы ищете недорогую службу доставки электронной почты с отличным AP и библиотеками, попробуйте postmarkapp.com, но я несколько раз использовал шаблоны.
[21:24] <lizardlounger> Хаха, Николь Мерлин, это было бы здорово! @dmageli для твиттера.
[21:25] <ralphm> @Robin. Для тестирования да, размещение изображений в сети где-то должно решить проблему с вложениями, но я бы сделал это только для целей тестирования. Альтернативой загрузке проблемы «Вы хотите загрузить» является вставка изображений с URI данных. Это довольно изящно, хотя не будет работать идеально во всех почтовых клиентах.
[21:26] <Rob> Николь, как ты можешь заблокировать размер шрифта при чтении мобильными приложениями. У меня есть шаблон электронной почты, в котором шрифт 6 и 7, но мобильные телефоны автоматически повышают его на 10 пунктов.
[21:26] <NicoleMerlin> @Narcisa Вы можете сделать несколько вещей. Если вы не хотите создавать отзывчивое электронное письмо в формате HTML, лучше использовать ширину около 450 пикселей. Таким образом, при изменении размера на мобильный он не будет сильно уменьшаться. Хорошим примером такого подхода, не зависящего от устройства, является Aeon, одно из моих любимых писем. http://us5.campaign-archive2.com/?u=89c6e02ebaf75bbc91 8731474 & id = d9ca5249ab & e = 6182d0070d
[21:26] <Робин> Ральфм, ах, хорошо. Я использовал URI данных в спрайтах, попробую это тоже
[21:27] <NicoleMerlin> @Narcisa В этом письме вы заметите, что шрифты на настольном компьютере очень большие, поэтому они будут подходящими по размеру для мобильных устройств. Это работает хорошо.
[21:27] <ralphm> Вот последняя информация CM о встроенных изображениях: http://www.campaignmonitor.com/blog/post/3927/embedded-images-in-html-email
[21:27] <Робин> Сладкий! спасибо, Ральфм
[21:28] <Нарциса> понял, спасибо 🙂
[21:29] <Робин> кто-то упомянул, что видел анимацию в электронной почте
[21:29] <NicoleMerlin> @Robin Существует небольшая разница между изображениями, отображаемыми в виде вложений (где они на самом деле отображаются с небольшим скрепкой и являются файлами, которые поставляются вместе с электронной почтой), и теми, которые требуют загрузки. Нет необходимости «загружать изображения», поскольку это поведение встроено в почтовые клиенты. Когда вы отправляете электронное письмо в формате HTML с помощью платформы отправки , оно автоматически помещает абсолютные удаленные URL-адреса для ваших изображений, и они «встраиваются» в HTML-файл для отображения, но пользователям все равно нужно сказать «загрузить изображения», если они используя клиент, который блокирует изображения по умолчанию.
[21:29] <lo_ny> Существует ли максимальный рекомендуемый размер вашей электронной почты?
[21:29] <ralphm> Анимации обычно выполняются с анимированными гифками. Довольно круто.
[21:30] <NicoleMerlin> @ralphm Я никогда не слышал об этом! Звучит подлый 🙂
[21:30] <Робин> ах, хорошо. Спасибо, НикольМерлин!
[21:30] <Rob> HAWK NicoleMerlin, как вы можете заблокировать размер шрифта при чтении мобильными приложениями. У меня есть шаблон электронной почты, в котором шрифт 6 и 7, но мобильные телефоны автоматически повышают его на 10 пунктов.
[21:30] <NicoleMerlin> Привет @Rob, это сложно, потому что нет смысла иметь 6px на мобильном телефоне. Вы пытаетесь скрыть свои ссылки для отказа от подписки? 😉
[21:31] <NicoleMerlin> Вы можете отключить изменение размера шрифта, хотя я думаю, что сейчас это намного сложнее для Android.
[21:32] <Rob> NicoleMerlin Мой клиент рассылает промо-купоны и открытки, мелкий шрифт — легальный. В основном это для рабочего стола, но мне, очевидно, нужно учитывать мобильность.
[21:32] <HAWK> Ладно, ну, вот и все, если только у Николь есть что-то еще, что она хотела бы сказать.
[21:33] <ralphm> Что касается анимированных GIF-файлов в электронной почте, посмотрите на эту великолепную электронную почту CM, разосланную недавно. Демонстрирует действительно хороший пример простого анимированного GIF с большим эффектом: http://campmon.createsend.com/t/ViewEmailArchive/y/CD0CC20AD380E615/C67FD2F38AC4859C/?kmi=3CbnpTAp0wI%2FNINHGbp9rxFZcag%3D
[21:33] <NicoleMerlin> @ Робин любой анимации, как правило, анимированные GIF ОДНАКО CSS3 анимация работает на новых устройствах, таких как смартфоны. Он тоже грациозно деградирует … с ним можно делать довольно классные вещи!
[21:33] <Rob> NicoleMerlin, спасибо за беседу и информацию
[21:33] <Robin> lo_ny, не беспокойтесь, есть также стенограмма
[21:34] <Tasha> Здравствуйте, где не член может найти стенограмму ?
[21:34] <Robin> Я часто использую CSS3-анимации
[21:34] <NicoleMerlin> @Rob Я только что опубликовал отрывок из HTML-макета электронной почты, но по памяти сейчас немного сложнее с Android, и я помню, что недавно мне пришлось немного погуглить. Извините, что у меня нет прямого ресурса, которым можно поделиться сейчас.
[21:35] <HAWK> Большое спасибо, Николь Мерлин, за то, что уделили мне время этим утром. Это высоко ценится.
[21:35] <Rob> НикольМерлин, спасибо. Я попробовал некоторый предложенный код, чтобы отключить изменение размера, но он не работал для iOS или Android.