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

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

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

создание-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 письма!» и описываете задание что нужно, как видите и с чего берём элементы.

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

 

Помогла статья? Оцените её
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...

Комментарии
  1. Аватар
    Ваня

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

    • Аватар
      Антон Егоров

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

      • Аватар
        Ваня

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

        • Аватар
          Игорь

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

          • Аватар
            Ваня

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

            • Аватар
              Игорь

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

            • Аватар
              Ваня

              А что именно?

            • Аватар
              Игорь

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

  2. Аватар
    Игорь

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

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

    • Аватар
      Антон Егоров

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

      • Аватар
        Игорь

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

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

        • Аватар
          Антон Егоров

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

          • Аватар
            Игорь

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

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

            Так держать

            • Аватар
              Антон Егоров

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

            • Аватар
              Игорь

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

      • Аватар
        Ваня

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

        • Аватар
          Игорь

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

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

          • Аватар
            Антон Егоров

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

            • Аватар
              Игорь

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

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

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

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

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

  3. Аватар
    Ваня

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

    • Аватар
      Антон Егоров

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

      • Аватар
        Ваня

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

        • Аватар
          Игорь

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

        • Аватар
          Игорь

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

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

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

          • Аватар
            Ваня

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

            • Аватар
              Игорь

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

  4. Аватар
    Александр

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

    • Аватар
      Игорь

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

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

    • Аватар
      Ваня

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

    • Аватар
      Ваня

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

      • Аватар
        Игорь

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

        • Аватар
          Ваня

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

          • Аватар
            Игорь

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

            • Аватар
              Ваня

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

            • Аватар
              Игорь

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

  5. Аватар
    Ваня

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

    • Аватар
      Игорь

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

  6. Аватар
    Ваня

    Нынешняя рассылка до сих пор на HTML работает? Сбоев не было?

    • Аватар
      Антон Егоров

      Нынешняя рассылка, это настраевоемый шаблон от моего сервиса рассылок. В целом всё устраевает, сбоев не видел. Может и есть, но некто не жалуется. Тот шаблон написанный на html в данный момент я не использую. Потому что долго и не очень удобно для меня лично.

Добавить комментарий
Adblock
detector