Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Yii
Code

Пишем свой стартап: очистка шаблонов электронных писем

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: The Open-Source Foundation Behind Meeting Planner
Building Your Startup: Responsive Email for Gmail

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

Final product image
What You'll Be Creating

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

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

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

Вероятно, половина первого опыта людей с Планировщиком собраний будет через электронную почту с запросом на собрание.

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

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

Сообщения и шаблоны

Ранние шаблоны

Первоначально я использовал базовые фреймворки, которые я нашел в Интернете, чтобы создавать первые письма для Планировщика собраний. Они хорошо работали на ранней стадии разработки.

Вот пример наших существующих HTML-писем; они функциональны, но выглядят не очень привлекательно. И, в целом, я решил, что людям не нужны эти многочисленные варианты и ссылки в их приглашениях. Пришло время уменьшить множество вариантов для более простого опыта.

Meeting Planner Templates - Original HTML Invitation Template

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

Meeting Planner Templates - Example of Corrupted View of Invitation in Gmail

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

Разнообразие сообщений

Ниже приведен список сообщений, которые регулярно отправляет Планировщик собраний:

  • запросы на собрания (т. е. приглашения)
  • обновление cобраний для изменений (также известны как уведомления)
  • подтверждение встречи с прикреплением файла календаря
  • напоминание о встрече
  • запросы на контактную информацию для предстоящей встречи
  • запросы на сброс пароля

Для альфа-теста я надеюсь, что смогу достичь разумной эстетической основы, применяя open-source шаблоны, которые можно найти в Интернете. Затем мы наймем дизайнера, чтобы оживить шаблоны, тему и бренд.

Я начал поиск хороших шаблонов для электронных писем.

Open-Source ресурсы с шаблонами

Существует ряд полезных руководств, таких как:

И ряд провайдеров предлагают собственные шаблоны с открытым исходным кодом:

Первоначально меня привлекали шаблоны Mailgun, так как я чувствовал, что они были тщательно протестированы, и я мог бы опираться на них, но в конечном итоге я решил воспользоваться шаблонами электронных писем от Sendwithus Oxygen. Sendwithus - это синергетическая маркетинговая платформа для Mailgun (или, возможно, других поставщиков электронной почты), но у меня нет опыта работы с их общим сервисом.

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

Meeting Planner Templates - The Send With Us Oxygen Templates

Это очень приятно с их стороны предложить свои open-source шаблоны электронных писем, не требуя, чтобы вы были платным пользователем. Вперед open source!

Интеграция новых шаблонов

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

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

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

Разделение макета

В конечном счете, вот новый макет HTML (я вырезал стили здесь для удобочитаемости):

Замена общих элементов

Внутри шаблонов мне пришлось заменить несколько элементов:

  • логотип
  • Поддержка изображений
  • Ссылки

Я создал файл логотипа, который на данный момент для нас подойдет, и я статически размещал его и вспомогательные изображения, например, для Twitter, на сервере Планировщика собраний.

Meeting Planner Templates - Logo

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

Создание нижнего колонтитула

Чтобы упростить повторное использование в приложении, я разделил код нижнего колонтитула:

Обновление существующих шаблонов

Чтобы интегрировать шаблоны, я хотел начать с самого простого. Перемещение по сложным, незнакомым CSS и HTML никогда не бывает простым.

Я начал с нашего шаблона электронной почты «Сброс пароля».

Восстановление пароля

Я выбрал шаблон приветствия Oxygen, показанный ниже:

Meeting Planner Templates - Oxygen Welcome Template

Каждый из отдельных шаблонов SendwithU может быть просмотрен и протестирован на их учетной записи 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, чем другие сервисы. Я проведу вас через фикс этого бага в следующем учебнике.

Вот код passwordRequestToken.php:

Запрос на собрание

Приглашение, которое люди получают в качестве запроса на встречу, является нашим самым сложным шаблоном. Он содержит краткое введение, возможные места, возможное время, а иногда и записку.

Для этого я использовал шаблон Oxygen Confirm:

Meeting Planner Templates - Oxygen Confirm Template

Я думал, что Shipping и  Date Shipped могут использоваться для совместного использования опций Place and Date Time, и это работает довольно хорошо.

Вот как выглядит приглашение:

Meeting Planner Templates - Meeting Request Template

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

Вот код тела invitation-html.php:

Что дальше?

Теперь, когда базовые шаблоны были обновлены, я начну работу над исправлением их отображения в Gmail. И вскоре мы будем использовать уведомления и напоминания.

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

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

Следите за предстоящими учебными пособиями в разделе серии Пишем свой стартап на 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.