• Войти через OpenID
  • СВЕЖИЕ НОВОСТИ

    Instagram сообщил о сбое в работе счетчика подписчиков
    Страницы Facebook смогут общаться в групповых обсуждениях
    Через Facebook Messenger можно будет отвечать на сообщения в Instagram
    Instagram позволит привязывать к одному профилю несколько других
    Mail.Ru Group запускает новый браузер
    Показано с 1 по 8 из 8

    верстка шаблона письма

    1. Andreas002 вне форума #1
      Участник Аватар для Andreas002
      Регистрация
      05.08.2013
      Адрес
      Москва
      Сообщений
      49
      Репутация
      0
      Поблагодарили 1 раз
      здравствуйте. я никогда не занимался версткой, но сейчас мне необходимо сверстать два шаблона писем для имейл рассылок. дизайнер разработал дизайн и прислал мне psd файлы. подскажите, пожалуйста, как все это делают профи? необходимо вставить код в дримвивер? где этот код взять и как мне использовать эти файлы psd. за любой совет буду благодарен!

      не судите строго, все с чего то начинают

    2. Draft вне форума #2
      Новичок Аватар для Draft
      Регистрация
      25.11.2013
      Адрес
      Москва
      Сообщений
      7
      Репутация
      20
      Поблагодарили 1 раз
      По пуктам:

      1. Файлы .psd это Adobe Photoshop. Где искать эту программу не скажу, так как она платная и дорогая. Бывает на торрентах, но часто закрывают раздачи.
      2. После того как откроете файл, увидите как там всё устроено в нем. Придётся учиться и фотошопу, хотя-бы азам.
      3. Затем то, что вам прислали в качестве дизайна нужно разрезать на маленькие картинки. Или не резать, это уже Вам решать, смотря на дизайн.
      4. После этого нужно сделать HTML код. Так как это для почты - верстать лучше самым простым методом без использования таблиц стилей. Стили прописывать сразу в тэги.

      Вот странички по урокам верстки вообще, как таковой: ruseller.com/adds.php?rub=12&id=1673
      Вот полезная статьи и ссылки в ней тоже полезные: habrahabr.ru/post/60420/
      Вот сайт вообще по всем тэгам html и что они умеют: htmlbook.ru.

      А вообще, даже после многих лет работы всегда в сети инфу ищу, никогда всё не запомнишь полностью.

    3. Пользователь сказал cпасибо:


    4. Ruson вне форума #3
      Новичок Аватар для Ruson
      Регистрация
      27.11.2013
      Адрес
      USA
      Сообщений
      12
      Репутация
      0
      Поблагодарили 0 раз(а)
      Цитата
      Сообщение от Draft Посмотреть сообщение
      По пуктам:
      4. После этого нужно сделать HTML код. Так как это для почты - верстать лучше самым простым методом без использования таблиц стилей. Стили прописывать сразу в тэги.
      Не понимаю в чем разница, для почты или не для почты, что мешает в CSS корректно дописать несколько строк стилей для отдельной страницы, и не засорять ее.

      --- Следующее сообщение ---

      Вы правы все с чего то начинают, но хоть убейте меня, но никак не с приема заказов на верстку темболее если вы никогда ее не делали =)

    5. shvetic вне форума #4
      Новичок Аватар для shvetic
      Регистрация
      30.10.2012
      Сообщений
      21
      Репутация
      0
      Поблагодарили 0 раз(а)
      А каких-то уроков по особенностям шаблонов для html никто не встречал?

    6. SocFishing вне форума #5
      Новичок Аватар для SocFishing
      Регистрация
      02.09.2014
      Сообщений
      21
      Репутация
      -20
      Поблагодарили 0 раз(а)
      Попробуй mailchimp, в нем можно создавать шаблоны писем, не зная основ html.

    7. Intuit Design вне форума #6
      Новичок Аватар для Intuit Design
      Регистрация
      19.10.2014
      Сообщений
      21
      Репутация
      -23
      Поблагодарили 0 раз(а)
      если Adobe Photoshop нужен - дайте свой e-mail, я скажу вам, где взять этот хороший фотошоп

    8. Mikki вне форума #7
      Новичок Аватар для Mikki
      Регистрация
      03.02.2015
      Сообщений
      3
      Репутация
      0
      Поблагодарили 0 раз(а)
      Цитата
      Сообщение от Intuit Design Посмотреть сообщение
      если Adobe Photoshop нужен - дайте свой e-mail, я скажу вам, где взять этот хороший фотошоп
      Вёрстка писем имеет свою специфику, инлайновые свойста, теги, которые корректно отображаются во всех браузерах.
      Версткой занимаюсь по фрилансу, делаю даже адаптивные письма.[COLOR="Silver"]

    9. webgroupco вне форума #8
      Новичок Аватар для webgroupco
      Регистрация
      03.11.2015
      Адрес
      Ташкент
      Сообщений
      1
      Репутация
      0
      Поблагодарили 0 раз(а)
      Есть некоторые моменты которые надо учитывать при верстке для почтовой рассылки

      Что же необходимо знать тем, кто собирается самостоятельно верстать HTML-код для email-писем?

      1. Табличная верстка.
      Верстая таблицами и забыв про блочную верстку, вы однозначно убережете себя от проблем со старыми почтовыми клиентами. Также, не стоит забывать, что веб-версии у почтовых провайдеров могут открываться в самых разнообразных браузерах, вполне возможно, даже в IE 6.0. Таблицы помогут вам быть аккуратными и красивыми везде одинаково.

      2. Использовать универсально-поддерживаемые аттрибуты у HTML-тегов.

      Тэг Аттрибуты
      a class, href, id, style, target
      b class, id, style
      br class, id, style
      div align, class, dir, id, style
      font class, color, face, id, size, style
      h1 align, class, dir, id, style
      h2 align, class, dir, id, style
      h3 align, class, dir, id, style
      h4 align, class, dir, id, style
      h5 align, class, dir, id, style
      h6 align, class, dir, id, style
      head dir, lang
      hr align, size, width
      img align, border, class, height, hspace, id, src, style, usemap, vspace, width
      label class, id, style
      li class, dir, id, style, type
      ol class, dir, id, style, type
      p align, class, dir, id, style
      span class, id, style
      strong class, id, style
      table align, bgcolor, border, cellpadding, cellspacing, class, dir, frame, id, rules, style, width
      td abbr, align, bgcolor, class, colspan, dir, height, id, lang, rowspan, scope, style, valign, width
      th abbr, align, background, bgcolor, class, colspan, dir, height, id, lang, scope, style, valign, width
      tr align, bgcolor, class, dir, id, style, valign
      u class, id, style
      ul class, dir, id, style

      3. Использовать универсально-поддерживаемые CSS-свойства

      CSS Свойства (строго Inline)
      background background-color border
      border-bottom border-bottom-color border-bottom-style
      border-bottom-width border-color border-left
      border-left-color border-left-style border-left-width
      border-right border-right-color border-right-style
      border-right-width border-style border-top
      border-top-color border-width color
      display font font-family
      font-size font-style font-variant
      font-weight height letter-spacing
      line-height list-style-type padding
      padding-bottom padding-left padding-right
      padding-top table-layout text-align
      text-decoration text-indent text-transform
      vertical-align width Использование CSS строго Inline.

      Забудьте про блочные css в начале документа. Только inline-стили. Конечно, это может вызвать геморрой при ручном приведении html-документа в порядок, но устранения подобных проблем существует сервис Печкин, который предлагает автоматический CSS-inliner, в рамках проекта Печкин.Лаборатория.

      4. Желательно использовать ширину всего документа в 600px.
      Задайте максимальную ширину в 600 пикселей и обезопасьте себя от гневных отзывов о горизонтальной прокрутке в почтовых клиентах ваших подписчиков.

      Использование этих правил позволит вам создать универсально отображаемую HTML-версию своего письма, а, значит, все ваши подписчики будут удовлетворены ее внешним видом без исключений!

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

    Информация о теме

    Пользователи, просматривающие эту тему

    Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

    Ваши права

    • Вы не можете создавать новые темы
    • Вы не можете отвечать в темах
    • Вы не можете прикреплять вложения
    • Вы не можете редактировать свои сообщения
    •  

    SEMSOCIAL.RU © 2012 - 2014.
    О поисковых системах просто