Шаблон письма в формате html для рассылки по электронной почте

при работе использованы программы векторной графики Corel Draw + Photoshop, программа создания прототипов страниц Figma, техническая и литературная обработка текстов, подготовка HTML кода письма под рассылку Яндекс

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

Решение: Придумал основную идею исходя из названия "Медиа Лайнер" и опыта общения (ибо тему воздухоплавания не раз эксплуатировали) - получился такой образ воздушного шара, который медленно, но неотвратимо увлекает взгляд вверх. Опять же, этот образ носит яркий "завораживающий" характер, а значит уже остановит и удержит взгляд получателя, что нам и требовалось.. Образ хорош и тем, что может иметь некое дальнейшее развитие (тема отображена картинками воздушного шара в разных ракурсах :) винтажного пилота, смотрящего вверх).. короче, при желании будет рекламную линию легко продолжить.. пока же подготовил тексты, изображения и начинаю все это прописывать в код..

Что касается технической составляющей, то тут я все оптимизировал в соответствии с правилами и рекомендациями для подобных рассылок, прописал ссылки... Получился "резиновый" вариант - адаптирован под разные экраны, контент письма рассылки автоматически выравнивается под размер страницы, для верстки использовался максимально простой код - чтобы везде отображалось корректно, картинки все вынесены на сервер и  доступны онлайн... т. е. картинки не загружают в само письмо, а подгружаются с удаленного сервера непосредственно при открытии его получателем, ссылки формата mailto - адресация на почту обратной связи (темы и содержимое письма при этом автоматически прописывается в соответствии с тематикой обращения).

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

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

Отправил клиенту для ознакомления и утверждения..

На картинке - как это все я увидел в окне письма при получении :) Мог, конечно, для маньяков код написать :) да вроде как уже перебор...

Просмотров: