Europarts Rus - web-site

Текущая работа над сайтом euro-parts.ru

Html-верстка письма

Posted by Larisa Baskakova on March 25, 2014

Нужно разработать макет письма для электронной рассылки.
Образец - есть у Алексея.
Письмо включает:
        Воспользуйтесь нашим гидом (http://www.euro-parts.ru/catalog/index.aspx), чтобы найти запасную         часть для вашего оборудования.
В качестве комментов: в письме каждый раз будет меняться - основной баннер, текст анонсов, данные в таблице.

Comments

Alexey Bychkov on March 25, 2014:

Лариса, вопросы:
1. логотип EET Europarts в левом верхнем углу - должен остаться прежним?
2. То, что вы прислали - может быть, у вас есть этот макет в формате PSD?
3. Меню - давайте условно разобьём на 2 - основное (Assortment, Computer... Pos) и вспомогательное (Product Guide | ... | Log in). И исходя из этого перечислите, пожалуйста, пункты, какие в каком должны идти и в каком порядке со ссылками и названиями.
4. Все баннеры, которые должны тут быть - желательно сразу иметь для наглядности
5. Тексты, которые вы перечислили - не совсем ясно, что из этого должны быть заголовком, что обычным текстом, что баннером.
6. Таблица с графами должна быть 1 в 1, как сейчас?
7. Контакты - должны быть таким же текстом, как и сейчас?

Larisa Baskakova on March 26, 2014:

1. да, именно такой, как на европейском сайте - http://eu.eetgroup.com
2. к сожалению, нет. Это общая рассылка, которую мы получаем по электронной почте
3. строку с пунктами Assortment, Computer... Pos - удалить. Останется одно меню сверху
4. хорошо, соберу и пришлю
5. основной "слоган" будет на баннере, который пришлю
далее - выделенное обращение и просто тексты (жирность/размер - на усмотрение дизайнера):

СПЕЦПРЕДЛОЖЕНИЕ! ПРЯМО С НАШЕГО СКЛАДА!
Широкий ассортимент запасных частей к большому количеству продуктов. Воспользуйтесь нашим гидом (http://www.euro-parts.ru/catalog/index.aspx), чтобы найти запасную часть для вашего оборудования.

Новые сроки доставки со склада в Европе - 4 недели!

Наличие на складе в Европе Вы можете проверить по ссылке http://dk.eetgroup.com
6. максимально приближена к образцу
7. нет. Опять же, мы хотели бы сделать свою рассылку максимально похожей на рассылку головного офиса

Alexey Bychkov on March 26, 2014:

3. какие именно пункты должны быть в нём?

Larisa Baskakova on March 26, 2014:

На одном уровне, в левом углу лого, в правом меню (по порядку):

Alexey Bychkov on March 27, 2014:

Добрый день, Лариса.

Вёрстка - http://europarts.websumy.ru/email_tpl.html

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

Ждём комментарии, замечания

Larisa Baskakova on March 27, 2014:

Алексей!
Баннеры, изображения и данные для "таблицы" направила Вам по почте. Строку с названиями столбцов оставила для удобства, переносить ее в письмо не нужно.
Главное - артикул и название, напр. "Лампа для проектора Epson". Дальнейшее описание надо делать мелким шрифтом.
Цен в данном письме не будет.
Перечень аналогов (через запятую/столбиком - как получится) - важная инфа.
Фото - с сайта EET. 
Максимально хотелось бы уместить всю направленную информацию по каждой позиции. Но ее много, давайте пробовать/искать решение.
Пожелания к верстке следующие:
  1. Ссылка с "Гид по продуктам" (в верхнем меню) - http://www.euro-parts.ru/catalog/index.aspx
  2. "Связаться с нами" (верхнее меню) - http://www.euro-parts.ru/company/contacts/index.aspx
  3. "Личный кабинет" - http://www.euro-parts.ru/company/contacts/index.aspx
  4. Весь текст после основного баннера выровнять по левому краю. Рядом, справа разместить направленный баннер PRODUCT GUIDE. С него ссылка -  http://www.euro-parts.ru/catalog/index.aspx
  5. Лого внизу убрать.
  6. Убрать фразу: Контактная информация.
  7. Название (Европартс Рус) увеличить.
  8. Строку с контактами выровнять по левому краю.
Пока все.

Alexey Bychkov on March 27, 2014:

Лариса, просьба - из файла xls сложно и неудобно доставать картинки. Вы могли бы эти картинки приложить отдельно? Или сказать, где их взять?

Larisa Baskakova on March 27, 2014:

Да, конечно, извините:)
Я брала их с сайта EET по артикулу.

Alexey Bychkov on March 27, 2014:

Можете показать конкретнее? Не получается найти.

Larisa Baskakova on March 27, 2014:

Давайте я пришлю ссылки на каждую картинку? Или удобней как-то по-другому?

Larisa Baskakova on March 27, 2014:

Алексей, еще один важный момент - в нижней части письма необходимо разместить фразу:
Вы получили это письмо, т.к. являетесь клиентом ЗАО "Европартс Рус".

Alexey Bychkov on March 27, 2014:

Давайте я пришлю ссылки на каждую картинку? Или удобней как-то по-другому?

Отлично, ссылки будет вполне удобно.

Larisa Baskakova on March 27, 2014:

информацию прилагаю

Alexey Bychkov on March 27, 2014:

отлично, спасибо

Alexey Bychkov on March 27, 2014:

Лариса, доработали вёрстку - http://europarts.websumy.ru/email_tpl.html

Larisa Baskakova on March 28, 2014:

Алексей, не работает последняя ссылка на сайт. Посмотрите, пжл. 

Larisa Baskakova on March 28, 2014:

Алексей, в ближайшее время скину еще несколько небольших корректировок.

Alexey Bychkov on March 28, 2014:

Алексей, не работает последняя ссылка на сайт. Посмотрите, пжл. 

Поправили

Larisa Baskakova on March 31, 2014:

Алексей, ниже - финальные правки. Кое-что пришлось скорректировать обратно:
  • заменить основной баннер на "ламповый" (приложение)
  • ссылка с логотипа в верхнем левом углу - http://www.euro-parts.ru
  • ссылка с верхнего пункта меню "Гид по продуктам" - http://uk.eetgroup.com/Guide
  • уточняющий вопрос - может ли при клике на пункт верхнего меню "Личный кабинет" открываться pop-up окно как при нажатии на него на сайте?
  • ссылка с основного баннера 
  • ссылка с баннера PRODUCT GUIDE - http://uk.eetgroup.com/Guide
  • в тексте ссылка со слова "гидом" - http://uk.eetgroup.com/Guide

Alexey Bychkov on March 31, 2014:

ссылка с основного баннера

видимо, пропущена. какая ссылка?

Larisa Baskakova on March 31, 2014:

да, запуталась в них, сорри - http://uk.eetgroup.com/Guide

Alexey Bychkov on April 1, 2014:

Лариса, внесли правки - http://europarts.websumy.ru/email_tpl.html

может ли при клике на пункт верхнего меню "Личный кабинет" открываться pop-up окно как при нажатии на него на сайте?

к сожалению, нет. Т.к. это письмо

Larisa Baskakova on April 1, 2014:

Я сейчас у Дениса Раянова уточню, возможно он даст другую ссылку...

Larisa Baskakova on April 3, 2014:

Алексей, здравствуйте!
Все, тема со ссылками закрыта. Больше ничего не меняем.
Далее я собираюсь загружать сверстанную страницу в сервис рассылок.
Как мне ее корректно скачать?

Alexey Bychkov on April 3, 2014:

Добрый день, Лариса.

Далее я собираюсь загружать сверстанную страницу в сервис рассылок.
Как мне ее корректно скачать?
Честно говоря, затрудняюсь ответить, т.к. не знаю через что и как вы планируете осуществлять рассылку. Нужно смотреть требования в самом сервисе рассылок. Или же заливать в их систему и html и картинки или ещё как-то.

В любом случае, прикрепляю html-код письма.
Стили - внутри него.

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

Картинки:
* баннер - прописан абсолютный путь на наш сервер  (думаю, стоит его разместить где-то у вас и изменить ссылку, но вообщем-то не критично )
* для продуктов - абсолютные пути на s.eet.eu

Дайте знать, если что-то будет не получаться или будут какие-то вопросы.

Larisa Baskakova on April 3, 2014:

Да, я понимаю, так сложно сказать:)
Я попробую загрузить, если что - обращусь за помощью!
Спасибо

Larisa Baskakova on April 4, 2014:

Алексей, здравствуйте!
Все удалось. Я направила Вам по почте результат рассылки и один маленький вопрос. Посмотрите, пжл. Возможно, сообщение попало в спам из-за темы...

Alexey Bychkov on April 4, 2014:

Добрый день, Лариса.
Вижу Ваше письмо. Сейчас проверим.

Alexey Bychkov on April 4, 2014:

Лариса, проверили.
если вы создавали html структуру, то попробуйте сделать вот это - http://joxi.ru/4pw-U_3JTJDVRlxKu_U
если это уже сам почтовый сервис вставляет, то здесь ничего не сделаешь, к сожалению

Larisa Baskakova on April 4, 2014:

Я создавала письмо путем вставки "из файла".
Т.е. предварительно сохранила то, что Вы мне направляли, а потом просто выбрала файл, и письмо отобразилось.
В сервисе есть "текстовое отображение" письма, но мне кажется, это не то...

Alexey Bychkov on April 4, 2014:

Я создавала письмо путем вставки "из файла".
Т.е. предварительно сохранила то, что Вы мне направляли, а потом просто выбрала файл, и письмо отобразилось.

А где именно и что именно вы делаете?

Проблема в том, что наш html-код обёрнут "обёрткой". Эта обёртка - таблица без указания ширины, которую я показал на скриншоте. Нужно постараться задать ей ширину - и тогда всё будет хорошо. Либо вообще убрать эту дополнительную ненужную таблицу.

Larisa Baskakova on April 4, 2014:

сервис unisender, создание e-mail
я попробую найти где это прописывается

Alexey Bychkov on April 4, 2014:

сервис unisender, создание e-mail
к сожалению, не знакомы с ним.

я попробую найти где это прописывается
хорошо, сигнализируйте о результатах.

Larisa Baskakova on April 4, 2014:

ок, спасибо за помощь!

Larisa Baskakova on April 4, 2014:

Алексей, посмотрите, пжл, прилагаемый файл.
Это наше письмо в юнисендере. 

Alexey Bychkov on April 4, 2014:

Здесь всё верно. 
Но над этим кодом в письме есть ещё такой:

<div>
<table cellpadding="0" cellspacing="0">
<tbody><tr>
<td style="font-family:Arial,sans-serif" align="left">

он-то всё и портит. решение - разобраться, откуда он берётся и убрать его. либо для 2й строки добавить width:100%.

Larisa Baskakova on April 4, 2014:

Т.е. вторая строка в том тексте, что я направила должна выглядеть так?

<div style="width: 100%; margin: 0 auto;">

Или Вы про другую "вторую" строку?

Alexey Bychkov on April 4, 2014:

Т.е. вторая строка в том тексте, что я направила должна выглядеть так?
Нет, в том тексте всё хорошо и менять ничего не нужно.
Но перед этим "правильным" текстом в письме по факту появляется 4 строки неправильного (которые я показал в сообщение выше). 

Larisa Baskakova on April 4, 2014:

А где мне их найти/открыть? 
Или это профессиональная тайна:))

Alexey Bychkov on April 4, 2014:

Никаких тайн нет. Но не совсем понял, кого именно - их.
Если вы имеете ввиду те строки, которые я показал, то сохраните в формате html то письмо, которое вы мне пересылали и просмотрите его код - там я их и обнаружил.

Larisa Baskakova on April 4, 2014:

:))
то письмо, которое я Вам переслала - это текстовое отображение (как-то так называется) html-письма, которое Вы создали....
Алексей, извините, что так сумбурно, просто я пока не очень разбираюсь в html и прочих кодах, но вижу перспективу для себя:)

Alexey Bychkov on April 4, 2014:

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

Larisa Baskakova on April 4, 2014:

Я буду Вам весьма признательна.
http://www.unisender.com/ru/
логин - Europarts_EET
пароль - eet123456789
Во вложении инструкция сервиса. Наш случай начинается с п.2.
Тестовые письма можно слать мне - lb@mytask.me
Либо самому себе, но предварительно надо будет подтвердить адрес (в процессе отправки - просто).

Alexey Bychkov on April 5, 2014:

Добрый вечер, Лариса.
Я всё попробовал и проверил - решить проблему оказалось достаточно просто.
В инструкции, которую вы приложили выше есть пункт 3.17. В нём речь идёт об "Обрамлении HTML".
Выставляйте его либо в значение "Отключено", либо "По центру" - и тогда наше письмо будет располагаться по центру.

Larisa Baskakova on April 5, 2014:

Спасибо, Алексей!

Вы мне очень помогли.