Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML
Code

Пишем свой стартап: отзывчивая электронная почта для Gmail

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Refining Email Templates
Building Your Startup: Responsive Email for Gmail

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

Premailer

Этот учебник является частью серии статей Пишем свой стартап на PHP на Envato Tuts +. В этой серии я направляю вас через запуск приложения от концепции до готового продукта, используя приложение Планировщик встреч в качестве реального приложения. На каждом шаге я делаю релиз кода планировщика собраний в качестве примеров с открытым исходным кодом, из которых вы можете узнать что-то новое. Я также рассмотрю связанные с запуском бизнес-вопросы по мере их возникновения.

В нашем предыдущем эпизоде Доставка приглашений я представил гибкие шаблоны электронной почты HTML, которые мы построили на некоторых open-source шаблонах MailChimp. Затем, в нашем предыдущем эпизоде Очистка шаблонов электронной почты, мы перешли на шаблоны Sendwithus Oxygen. Новые шаблоны выглядели великолепно:

Meeting Planner Inlining - Working Email Template

Но были проблемы с шаблонами в Gmail. Вот ссылочный шаблон Oxygen в Gmail:

Meeting Planner Inlining - Broken Gmail Template

В этом уроке я расскажу историю о том, как я очистил появление новых HTML-шаблонов в Gmail. Это связано с наложением CSS, потому что гении в Google не поддерживают определения стиля, как и все остальное.

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

Если вы еще не опробовали Планировщик собраний, то пойдите и запланируйте свою первую встречу. Я участвую в комментариях ниже, так что скажите мне, что вы думаете! Вы также можете связаться со мной в Twitter @reifman. Меня особенно интересует, если вы хотите предложить новые функции или темы для будущих учебников.

Напомним, что весь код Планировщика собраний написан в Yii2 Framework для PHP. Если вы хотите узнать больше о Yii2, ознакомьтесь с нашей параллельной серией Программирование с Yii2.

Быстро освежим в памяти

Для шаблонов электронной почты я решил перейти на шаблоны электронной почты Sendwithus Oxygen. Oxygen предложил полное семейство шаблонов для полезных сценариев. Они казались простыми, хорошо организованы и легко расширяемы:

Meeting Planner Templates - The Send With Us Oxygen Templates

Каждый из отдельных шаблонов Sendwithus может быть просмотрен и протестирован на их учетной записи Litmus.

Здесь наш сброс пароля электронной почты сейчас на iPhone, гораздо приятнее, чем это было раньше:

Meeting Planner Templates - Reset Your Password

Я был немного смущен, когда первые письма в Gmail выглядели некорректно:

Meeting Planner Templates - Reset Your Password in Gmail

Но просмотрев их предварительные просмотры Litmus (которые они с тех пор обновили и отремонтировали) я понял, как именно они выглядят в Gmail:

Meeting Planner Templates - Oxygen Welcome in Gmail

Позже я узнал, что Gmail требует большей инкрустации CSS, чем другие сервисы. Моя задача - решить эту проблему для пользователей Meeting Planner.

Решение проблемы рендеринга Gmail

Первоначально я думал, что нам нужно будет управлять CSS-inlining для Gmail. Было два пути, которые нужно было сделать, и оба сложные.

Либо a) я мог обработать каждое исходящее сообщение через Python премейлер после того, как он был полностью сконструирован, или, б) я мог бы применить inlining к шаблонам в исходном коде письма.

Для простоты я решил применить inlining к шаблонам вручную, думая, что в будущем я могу выбрать живой инлайн. Я не так хорошо знаком с запуском задач Python из PHP и отслеживанием их производительности для такой важной функции, как отправка приглашений на собрание по электронной почте. Точно так же, если мне нужно отправить электронное письмо всем 10 000 пользователей, это будет 10 000 событий, которые могут замедлить работу сервера.

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

Premailer Питера Бенгтсона встраивает CSS для вас через Python. Он также помог мне заметить Premailer.io, что упростило ситуацию.

В принципе, вы копируете и вставляете свой шаблон электронной почты на вкладку Textarea и нажимаете кнопку Convert (не показано):

Meeting Planner Inlining - Premailerio Web Interface

Затем вы можете скопировать и вставить полученный шаблон электронной почты с уже встроенным CSS:

Meeting Planner Inlining - Premailer Results

Вот улучшенный HTML с встроенным CSS - обратите внимание на встроенные стили в каждом теге HTML, как это делают инженеры Gmail:

Вы даже можете увидеть результат на вкладке Preview - на этих скриншотах я только что обработал заголовок макета:

Meeting Planner Inlining - Premailer Preview

Кроме того, все должно было быть сделано вместе. Я мог бы создать старый и новый макет и измененный код шаблона один за другим, но это создало бы больше областей изменений. В конечном счете, у меня было около семи полных шаблонов и их общих компонентов для обработки.

Обработка шаблонов

Поскольку Планировщик собраний на MVC фреймворке Yii2, электронные письма имеют внешний шаблон макета и внутренний шаблон с большим количеством смешанного PHP для генерации данных. У меня также были подшаблоны для обычных, многоразовых элементов, таких как встречающие заметки и нижние колонтитулы.

Вы не можете просто обработать PHP-код. Вы должны удалить PHP-элементы, пропустить шаблон через Premailer, а затем повторно интегрировать PHP-код. Мне повезло, что большая часть моего PHP-кода не сильно использует стили.

В целом процесс создания встроенных шаблонов оказался довольно сложным и трудоемким. Мне также показалось, что будет сложно сохранить и создавать новые шаблоны.

В принципе, мне пришлось создавать временные файлы со всем блоком стиля выше и HTML, который я хотел бы включить ниже, удалить PHP, обработать шаблон и затем заново вставить PHP.

Сначала я обработал макет HTML. Затем я обработал каждый отдельный подшаблон и шаблон.

Но это сработало; вот скриншот шаблона Reset Your Password в веб-службе Gmail:

Meeting Planner Inlining - Completed Reset Your Password Email

Еще одно перспективное решение

В какой-то момент до конца всей этой нудной работы и понимания того, насколько сложно было бы поддерживать мои шаблоны в ближайшем будущем, я задавался вопросом, предоставил ли Mailgun встроенные CSS и начал искать в Интернете.

Mailgun этого не делал, но SwiftMailer, который Yii использует для доставки SMTP почты, делает. Потребовалось еще полчаса, чтобы очистить мою раннюю работу (a.k.a. беспорядок) и сортировать все, установкой плагина CSS Inlining для SwiftMailer.

Я использовал встроенный PHP-модуль Open Buildings CSS Inliner, который я добавил к composer.json:

Вот результаты обновления composer'а:

Мне также нужно было настроить конфигурацию почтовой программы для использования плагина в /common/config/main-local.php (в локальном и prod окружениях):

Дела пошли довольно быстрее, хотя в Gmail все еще был большой визуальный дефект:

Meeting Planner Inlining - Gmail Email Template with Visual Defect

Open Building's CSS inliner, написанный на PHP, не работал так успешно, как Python-based Premailer, по крайней мере, из коробки с настройками по умолчанию.

Вместо того, чтобы тратить время на отладку этого инлайнера и шаблонов прямо сейчас, я решил вернуться к шаблонам, обработанным в Premailer. На данный момент он работает хорошо.

В какой-то момент мне нужно будет пересмотреть, есть ли простые способы исправить это или настроить встроенный плагин на основе PHP. В качестве альтернативы, возможно, мне придется переключиться на Inliner на Python.

При создании стартапа вам нужно выбирать решения и определять приоритеты. На данный момент это более низкий приоритет и довольно легко работает.

В дереве кода вы найдете /common/mail/inlining с деревом различных папок и файлом mail-readme.txt с пояснениями. В основном, есть копии шаблонов Oxygen, рабочие версии PHP, отредактированный предварительно обработанный код и окончательный обработанный код.

Что дальше?

В настоящее время я работаю над подготовкой Meeting Planner для альфа-релиза. В первую очередь я сосредоточен на улучшениях и особенностях, чтобы сделать альфа-выпуск плавным. Сейчас я отслеживаю все в Asana, о котором я расскажу в следующем учебнике. Есть также некоторые интересные новые функции, все еще находящиеся в разработке.

Наконец, я начинаю экспериментировать с WeFunder на основе реализации новых правил SEC. Пожалуйста, подпишитесь на наш профиль. Я также напишу об этом в следующем учебнике.

Пока вы ждете больше эпизодов, запланируйте свое первое собрание и пробуйте шаблоны с друзьями у которых есть почтовые ящики Gmail. Кроме того, я был бы признателен, если вы поделитесь своим опытом ниже в комментариях, меня всегда интересуют ваши предложения. Вы также можете связаться со мной в Twitter @reifman напрямую.

Следите за предстоящими учебными пособиями в разделе серии Пишем свой стартап на PHP.

Ссылки по теме

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.