Закон подлоха: самый красивый макет улетает в почту как говнокод
Всем привет, DreamBuilder здесь. Хочу поделиться историей своего малокровного инсульта и неожиданным спасением.
Делал я как-то для клиента крутейший лендинг. Клиент пустил слезу умиления. А потом говорит: "А теперь сделайте из него html письмо, чтобы мы рассылку красивую сделали".
"Легко!" — сказал я, наивный сеньор (с джуном в душе).
Началось самое страшное. Оказалось, что просто скопировать код html письма и вставить в почтовик — это как пытаться запихнуть слона в дипломат.
Yandex (html письмо яндекс) просто жрал половину стилей. Картинки ехали, все плыло. Выглядело как сайт из 90-х.
Mail.ru (html письма mail ru) вообще показал мне кукиш. Верстка рассыпалась в тайловую мозаику, от которой Кандинский бы обзавидовался.
Я гуглил "как отправить html письмо", "как отправить html письмо с mail ru". Все мануалы сводились к танцам с бубном: "скопируйте этот div, потом вставьте тот style...". Я потратил 4 часа, чтобы просто вставить html код в письмо и не сломать его.
В голове уже звучал голос клиента: "А где тут красота? Я за нее платил?".
И тут я нашел способ, который спас мне нервы, проект, а клиенту — веру в дизайн. Смотрите, как было ДО (скриншот уродливого письма в интерфейсе Яндекс.Почты):
Письмо ДО (можно отправлять только бабушке в таком виде)
После - уже гораздо луче!
И тут меня осенило. Я же разработчик! Надоело это терпеть, и я решил проблему раз и навсегда.
Я не стал искать готовое решение, а сел и сделал его сам. Прошел весь этот адский путь, чтобы вы больше никогда не мучились.
Смотрите, в чем была главная засада. Чтобы вставить html письмо в почтовик, нужно вручную, как в каменном веке, выискивать в коде html письма все стили, инлайнить их, проверять совместимость... Короче, часами сидеть в Chrome Dev Tools и плакать.
В итоге я упаковал весь этот скилл "как отправить html письмо" в одно простое расширение для браузера. Назвал его HTML2Email.
Теперь весь процесс выглядит не как многочасовой труд, а как магия:
Открываю свой готовый HTML-файл или верстку в браузере.
Жму одну кнопку на расширении. Оно само делает всю грязную работу: оптимизирует и готовит код html письма к отправке.
Копирую готовый код. Один раз.
Жму вставить и он автоматически вставляется в тело Yandex\Mail почтового клиента
ВСЁ. Письмо отображается идеально. Больше не нужно гуглить "как отправить html письмо с mail ru" — ответ теперь всегда под рукой.
Результат (пример):
Пример отправленного HTML Email (подборка топ мемом Пикабу)!
По сути, я заточил под эту задачь своё личное расширение для Chrome браузера и теперь делюсь им со всеми.
Кому надоело мучаться, вот ссылка: HTML2Email в Chrome Web Store
А для тех, кто хочет не просто вставить, а сразу делать крутые рассылки, я сделал отдельный сервис SendHtml.Email который буду постепенно развивать добавляя новые ништяки!
Итог: Я превратил свою боль в инструмент. Клиенты счастливы, я трачу на рутину 10 секунд вместо 4 часов, а мой кот наконец-то может спать спокойно, не опасаясь летящих в стену клавиатур.
P.S. Это решает ваши задачи? Есть ли что-то что можно было бы добавить\улучшить? - пишите в комментариях!