Приветствую Вас уважаемые читатели и гости блога Антона Егорова.
В данной статье я хочу рассказать о том, как я сверстал (создал) новое HTML письмо для своей рассылки. Для начала хочу показать, что у меня получилось:
В целом выглядит не плохо, но на картинке смотрится не так как должно быть. Полный вид, те кто подписан на рассылку видели уже в письме, которое получили по случаю выхода данной статьи 😉 Как ваши ощущения, впечатления? Делитесь своими идеями и предложениями в комментариях, лучше, хуже, нравиться, не нравиться и т.д.
Как вы видите, я свои знания которые получил в процессе изучения курса Евгения Попова по [urlspan]CSS[/urlspan] и [urlspan]HTML[/urlspan] применяю на практике, я думаю что довольно успешно. Так что кому интересно, можете изучить на практике всё это и будите внедрять.
Сейчас я расскажу с чего я начал и какие нужно соблюдать правила чтобы письма отображались хорошо. Правила я вычитал у одного из зарубежных гуру вёрстки для e-mail писем, у кого не скажу, так как читал его русский перевод на блоге. В общем это не важно.
Правила вёрстке HTML версии письма:
- Каркас письма делаем с помощью таблиц, потому что некоторые e-mail клиенты не поддерживают CSS и всё что с ним связано.
- В теги <table> прописываем ширину для главной таблицы 95%-98% <table width="98%">, для других таблиц внутри главной (если таковые есть), прописываем 100% <table width="100%">.
- Для удобства пользователей сделайте html версию стилизованную или копирующую стиль вашего сайта, чтобы читатель сразу по внешнему виду понимал, что это письмо от Вас.
- Если вы всё же хотите использовать некоторые стили, то не используйте объявления стилей в теге <head> как для веб-страниц. Вместо этого прописывайте стили ниже тега <body> — GMail, в частности, сканирует документ и, если находит объявление стилей выше этого тэга, удаляет.
- Для фоновых изображений используйте атрибут background, вместо кода CSS.
- Для ссылок используйте атрибут target="_blank", чтобы у тех, кто использует браузерные версии e-mail ссылки открывались в новом окне, а не в окне их почты.
Письмо я верстал сначала на компьютере и смотрел как оно будет отображаться в браузер, потом загрузил html файлик в сервис рассылок [urlspan]smartresponder[/urlspan] и дальше уже исправил что некоторые моменты.
Ссылки на картинки у меня не получилось загрузить вместе с html документов сразу, поэтому я залил данные картинки для письма в файлы сервиса рассылок и ссылки в коде html прописал уже непосредственно на эти картинки.
После того как всё сделаете протестируйте в разных браузерах и клиентах для ПК как всё получилось, возможно вам нужно многое чего будет исправить, ведь каждый клиент отображает использует разные версии отображения данного письма.
Кстати, для некоторой вёрстке и некоторых шаблонов HTML лучше подойдёт задания фиксированной ширины, допустим внутренней части, чтобы дизайн при масштабировании странице «не поплыл».
Минус всего этого в том, что без включённых картинок e-mail письмо выглядит коряво, хотя для того чтобы немного скрасить это всё используйте там атрибут alt="Это логотип блога" в котором прописывайте что за элемент должен отображаться. Когда пользователь включит картинки он увидит всё что прочитал на ваших надписях 😉
Вот небольшой ликбез с советами о том, как сделать красивые HTML шаблоны для ваших писем, чтобы повысить вашу узнаваемость, авторитетность и открываемость писем. Как показала практика такие письма лучше читают и по ссылкам в таких письмах лучше переходят.
Успехов!
З.Ы. Кстати я тут подумал для тех кому нужно сделать что-то подобное и для моей тренировки сделаю 5 подобных писем для вас БЕСПЛАТНО. Дальше за подобную услугу буду брать деньги 😉 Если есть желающие, то пишите мне в службу поддержке с темой «Вёрстка HTML письма!» и описываете задание что нужно, как видите и с чего берём элементы.
С уважением, Антон Егоров!
Предыдущая
Курсы Попова по CSS и HTML были хороши до момента пока не появился новый стандарт HTML5. HTML и HTML5 небо и земля.
Только большая часть сайтов написано на HTML :)) А HTML5 изучить не сложно, если ты в четвёртом разобрался
Боюсь ошибиться в HTML5 применены встроенные функции. Это резко меняет положение вещей.
Да не на много то и меняет)))
Не меняет если не знаете.
Я рад за вас что вы в курсе)))
То есть со мной согласны?
Частично да))) Это смотря с какой стороны посмотреть))))
С любой. Двух мнений быть не может.
Смотря что и как оценивать))))
Вы уже забыли что оценивать?
Да все я помню.
А что именно?
Я смотрю игрой слов занимаетесь
Привет Антон. А мне рассылка последнее время не приходили на почту.
С первого дня был подписан на твой блог.Решил еще продублировать подписку.
Очень странно... я высылаю её периодически. В ближайшее время будут новые статьи. Я буду высылать рассылку, проверите.
Вот теперь все нормально.Все работает.
Лучше предупредить
Ну как новый вид рассылки лучше предыдущей?
Проморгал твой комментарий Антон.Извини.
Сейчасняя рассылка на много прикольнее чем была.
Так держать
Ну это хорошо. Значит своей цели я достиг, хотя её и не ставил 😉 Польза от моего изучения вёрстки на лицо 😉
Есть польза и существенная.
Что в планах после рассылки следующим будет?
Ну а это уже секрет фирмы)))
Мне нормально всё приходит и рассылка и ответы на комментарии.
Рассылка приходит на почту,по тому что ты на Смартреспондер подписан.
А коммент по RSS.Это де разные подписки.
Кстати я вообще думаю RSS отключить... Что-то о нём плохо отзываються некоторые инфобизнесмены.
Плохо только в том,что на RSS подписываются.
А на почтовую рассылку нет.
А вот если не будет RSS,то люди будут подписываться на почтовую рассылка,да и чаще на блог забегать.
Чем RSS плох? Слышал про ленту новостей RSS, а ни разу не пользовался ей.
Тем что вы подписной базой RSS,управлять и направлять не можете.
Не возможно им подписные писма направлять.
Ну это уже самые главные нюансы.
Какие некоторые e-mail клиенты не поддерживают CSS, как они называются? Клиенты рамблера, мэйл и яндекса поддерживают CSS?
Это нужно смотреть. Я имел ввиду десктопные. Также есть нюансы и с браузерными. Я просто сразу изучил статьи по теме и поэтому верстал письмо по правилам, чтобы отображалась даже там где не поддерживается, но честно не знаю какие.
Вчера прочитал, что почтовый клиент Рамблера был признан самым надёжным.
По моему сейчас надежного ничего нет.Все можно сломать и вскрыть.
Ну а чем он надежен?
И где вы об этом прочитали?
В интернете за каждый почтовый клиент пишут, что он надежный
В поиск вбейте почтовый клиент рамблер. Найдёте статью в ней написано.
Да читал я эту статью.И тоже самое пишут про все почтовые клиенты
Есть независимые эксперты. Да вы же их читали.
Вот я и говорю.Каждый кулик, хвалит свое болото
Независимые эксперты часто оказываются купленными.
Ну вот видите, вы сами поняли что они купленные.
Кому верить?))))
Я знал это давно, как и то что есть некупленные.
А как их определить?
Смотря в каком случае определить.
Ну с этим я согласен
С чем согласны?
Антон, ты видишь идет голимый спам.Блокирни ты нас обоих, а то так и будет продолжаться.
Очень классные получаются письма, сам сейчас наглядно увидел письмо которое пришло от вас после подписки. Очень понравилось. Буду использовать для работы
Что есть то есть,письма приходят классно оформленые.
Значит Антон развивается.
Такие письма запоминаются и выделяются среди прочих.
Возьму статью на заметку, появится блог, применю обязательно.
Обязательно примените.Отлично выглядет письмо будет
Я сейчас недоволен приходящими от других писем без аватара.
Я уже привык к этому.
А я пока не привык.
Ну куда деваться, привыкайте
Куда ж деваться, привыкну.
Да все время так было, так что привыкать не к чему
Нынешняя рассылка до сих пор на HTML работает? Сбоев не было?
Нынешняя рассылка, это настраевоемый шаблон от моего сервиса рассылок. В целом всё устраевает, сбоев не видел. Может и есть, но некто не жалуется. Тот шаблон написанный на html в данный момент я не использую. Потому что долго и не очень удобно для меня лично.