Как создать HTML версию письма для вашей рассылки

создать-html-версию-письма

Приветствую Вас уважаемые читатели и гости блога Антона Егорова.

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

создание-html-писем

В целом выглядит не плохо, но на картинке смотрится не так как должно быть. Полный вид, те кто подписан на рассылку видели уже в письме, которое получили по случаю выхода данной статьи ;) Как ваши ощущения, впечатления? Делитесь своими идеями и предложениями в комментариях, лучше, хуже, нравиться, не нравиться и т.д.

Как вы видите, я свои знания которые получил в процессе изучения курса Евгения Попова по CSS и HTML применяю на практике, я думаю что довольно успешно. Так что кому интересно, можете изучить на практике всё это и будите внедрять.

Сейчас я расскажу с чего я начал и какие нужно соблюдать правила чтобы письма отображались хорошо. Правила я вычитал у одного из зарубежных гуру вёрстки для 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 файлик в сервис рассылок smartresponder и дальше уже исправил что некоторые моменты.

Ссылки на картинки у меня не получилось загрузить вместе с html документов сразу, поэтому я залил данные картинки для письма в файлы сервиса рассылок и ссылки в коде html прописал уже непосредственно на эти картинки.

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

Кстати, для некоторой вёрстке и некоторых шаблонов HTML лучше подойдёт задания фиксированной ширины, допустим внутренней части, чтобы дизайн при масштабировании странице «не поплыл».

Минус всего этого в том, что без включённых картинок e-mail письмо выглядит коряво, хотя для того чтобы немного скрасить это всё используйте там атрибут alt="Это логотип блога" в котором прописывайте что за элемент должен отображаться. Когда пользователь включит картинки он увидит всё что прочитал на ваших надписях ;)

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

Успехов!

З.Ы. Кстати я тут подумал для тех кому нужно сделать что-то подобное и для моей тренировки сделаю 5 подобных писем для вас БЕСПЛАТНО. Дальше за подобную услугу буду брать деньги ;) Если есть желающие, то пишите мне в службу поддержке с темой «Вёрстка HTML письма!» и описываете задание что нужно, как видите и с чего берём элементы.

С уважением, Антон Егоров!

 

Понравилась статья? Поделись с друзьями!

Комментариев: 57


  • 08.11.2015 в 10:45
    Ваня

    Курсы Попова по CSS и HTML были хороши до момента пока не появился новый стандарт HTML5. HTML и HTML5 небо и земля.

    Ответить
    • 08.11.2015 в 17:35
      Антон Егоров

      Только большая часть сайтов написано на HTML :)) А HTML5 изучить не сложно, если ты в четвёртом разобрался

      Ответить
      • 18.11.2015 в 08:28
        Ваня

        Боюсь ошибиться в HTML5 применены встроенные функции. Это резко меняет положение вещей.

        Ответить
        • 28.02.2016 в 10:39
          Игорь

          Да не на много то и меняет)))

          Ответить
          • 28.02.2016 в 10:46
            Ваня

            Не меняет если не знаете.

            Ответить
            • 09.03.2016 в 20:49
              Игорь

              Я рад за вас что вы в курсе)))

              Ответить
            • 11.03.2016 в 21:44
              Ваня

              То есть со мной согласны?

              Ответить
            • 14.03.2016 в 17:06
              Игорь

              Частично да))) Это смотря с какой стороны посмотреть))))

              Ответить
            • 17.03.2016 в 04:00
              Ваня

              С любой. Двух мнений быть не может.

              Ответить
            • 18.03.2016 в 19:11
              Игорь

              Смотря что и как оценивать))))

              Ответить
            • 19.03.2016 в 02:05
              Ваня

              Вы уже забыли что оценивать?

              Ответить
            • 19.03.2016 в 08:45
              Игорь

              Да все я помню.

              Ответить
            • 20.03.2016 в 00:39
              Ваня

              А что именно?

              Ответить
            • 26.03.2016 в 21:28
              Игорь

              Я смотрю игрой слов занимаетесь

              Ответить
  • 09.11.2015 в 20:31
    Игорь

    Привет Антон. А мне рассылка последнее время не приходили на почту.

    С первого дня был подписан на твой блог.Решил еще продублировать подписку.

    Ответить
    • 10.11.2015 в 11:16
      Антон Егоров

      Очень странно... я высылаю её периодически. В ближайшее время будут новые статьи. Я буду высылать рассылку, проверите.

      Ответить
      • 10.11.2015 в 22:05
        Игорь

        Вот теперь все нормально.Все работает.

        Лучше предупредить

        Ответить
        • 11.11.2015 в 13:51
          Антон Егоров

          Ну как новый вид рассылки лучше предыдущей?

          Ответить
          • 18.11.2015 в 20:50
            Игорь

            Проморгал твой комментарий Антон.Извини.

            Сейчасняя рассылка на много прикольнее чем была.

            Так держать

            Ответить
            • 21.11.2015 в 00:55
              Антон Егоров

              Ну это хорошо. Значит своей цели я достиг, хотя её и не ставил ;) Польза от моего изучения вёрстки на лицо ;)

              Ответить
            • 21.11.2015 в 14:34
              Игорь

              Есть польза и существенная.

              Ответить
            • 21.11.2015 в 22:26
              Ваня

              Что в планах после рассылки следующим будет?

              Ответить
            • 22.11.2015 в 20:20
              Игорь

              Ну а это уже секрет фирмы)))

              Ответить
      • 18.11.2015 в 08:30
        Ваня

        Мне нормально всё приходит и рассылка и ответы на комментарии.

        Ответить
        • 18.11.2015 в 20:53
          Игорь

          Рассылка приходит на почту,по тому что ты на Смартреспондер подписан.

          А коммент по RSS.Это де разные подписки.

          Ответить
          • 19.11.2015 в 14:16
            Антон Егоров

            Кстати я вообще думаю RSS отключить... Что-то о нём плохо отзываються некоторые инфобизнесмены.

            Ответить
            • 19.11.2015 в 22:13
              Игорь

              Плохо только в том,что на RSS подписываются.

              А на почтовую рассылку нет.

              А вот если не будет RSS,то люди будут подписываться на почтовую рассылка,да и чаще на блог забегать.

              Ответить
            • 21.11.2015 в 22:28
              Ваня

              Чем RSS плох? Слышал про ленту новостей RSS, а ни разу не пользовался ей.

              Ответить
            • 22.11.2015 в 20:22
              Игорь

              Тем что вы подписной базой RSS,управлять и направлять не можете.

              Не возможно им подписные писма направлять.

              Ну это уже самые главные нюансы.

              Ответить
  • 18.11.2015 в 08:31
    Ваня

    Какие некоторые e-mail клиенты не поддерживают CSS, как они называются? Клиенты рамблера, мэйл и яндекса поддерживают CSS?

    Ответить
    • 21.11.2015 в 00:57
      Антон Егоров

      Это нужно смотреть. Я имел ввиду десктопные. Также есть нюансы и с браузерными. Я просто сразу изучил статьи по теме и поэтому верстал письмо по правилам, чтобы отображалась даже там где не поддерживается, но честно не знаю какие.

      Ответить
      • 21.11.2015 в 22:32
        Ваня

        Вчера прочитал, что почтовый клиент Рамблера был признан самым надёжным.

        Ответить
        • 22.11.2015 в 20:25
          Игорь

          По моему сейчас надежного ничего нет.Все можно сломать и вскрыть.

          Ответить
        • 22.11.2015 в 20:27
          Игорь

          Ну а чем он надежен?

          И где вы об этом прочитали?

          В интернете за каждый почтовый клиент пишут, что он надежный

          Ответить
          • 28.02.2016 в 10:30
            Ваня

            В поиск вбейте почтовый клиент рамблер. Найдёте статью в ней написано.

            Ответить
            • 28.02.2016 в 10:40
              Игорь

              Да читал я эту статью.И тоже самое пишут про все почтовые клиенты

              Ответить
            • 28.02.2016 в 10:47
              Ваня

              Есть независимые эксперты. Да вы же их читали.

              Ответить
            • 09.03.2016 в 20:50
              Игорь

              Вот я и говорю.Каждый кулик, хвалит свое болото

              Ответить
            • 11.03.2016 в 21:47
              Ваня

              Независимые эксперты часто оказываются купленными.

              Ответить
            • 14.03.2016 в 17:08
              Игорь

              Ну вот видите, вы сами поняли что они купленные.

              Кому верить?))))

              Ответить
            • 17.03.2016 в 04:02
              Ваня

              Я знал это давно, как и то что есть некупленные.

              Ответить
            • 18.03.2016 в 19:12
              Игорь

              А как их определить?

              Ответить
            • 19.03.2016 в 02:06
              Ваня

              Смотря в каком случае определить.

              Ответить
            • 19.03.2016 в 08:48
              Игорь

              Ну с этим я согласен

              Ответить
            • 20.03.2016 в 00:45
              Ваня

              С чем согласны?

              Ответить
            • 26.03.2016 в 21:29
              Игорь

              Антон, ты видишь идет голимый спам.Блокирни ты нас обоих, а то так и будет продолжаться.

              Ответить
  • 30.11.2015 в 17:57
    Александр

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

    Ответить
    • 27.12.2015 в 18:10
      Игорь

      Что есть то есть,письма приходят классно оформленые.

      Значит Антон развивается.

      Ответить
    • 31.12.2015 в 12:59
      Ваня

      Такие письма запоминаются и выделяются среди прочих.

      Ответить
    • 28.02.2016 в 10:58
      Ваня

      Возьму статью на заметку, появится блог, применю обязательно.

      Ответить
      • 09.03.2016 в 20:53
        Игорь

        Обязательно примените.Отлично выглядет письмо будет

        Ответить
        • 11.03.2016 в 21:50
          Ваня

          Я сейчас недоволен приходящими от других писем без аватара.

          Ответить
          • 14.03.2016 в 17:10
            Игорь

            Я уже привык к этому.

            Ответить
            • 17.03.2016 в 04:02
              Ваня

              А я пока не привык.

              Ответить
            • 19.03.2016 в 08:49
              Игорь

              Ну куда деваться, привыкайте

              Ответить
  • 20.03.2016 в 00:47
    Ваня

    Куда ж деваться, привыкну.

    Ответить
    • 26.03.2016 в 21:30
      Игорь

      Да все время так было, так что привыкать не к чему

      Ответить
  • Добавить комментарий

    ;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
    Logo