bad-bot-welcome

logo

Рассылка в формате HTML – это результат практического применения знаний по основам табличной вёрстки и CSS стилей. Представлен подробный алгоритм выполненных действий при редактировании макета с примерами html кода и изображение рабочего момента при подготовке графического материала.

 Особенность свёрстанного макета
в центрировании ячеек
независимо от разрешения.
тех задание

Задача:

  • Сделать рассылку новогодней акции кондитерской.

  • Сроки: cжатые

В качестве технического задания получил изображение с текстом расположенное выше.

Оригинальная Вёрстка

Милая Новогодняя рассылка с хорошей векторной графикой.

Реализация:

План действий:

  • Поиск подходящего макета по тематике в сети. (Времени на разработку мало. Рисовать графику с нуля нет смысла.)

  • Редактирование HTML и CSS кода рассылки.

  • Перерисовка графических файлов.

  • Выгрузка на сервер. Тестирование.

На сегодняшний день особенность HTML кода почтовых рассылок – это обязательная табличная вёрстка, в которой, согласно синтаксису, стили прописываются атрибутами тегов для каждой ячейки. Этот нюанс следствие «частичного игнорирования» почтовыми сервисами привычного написания CSS стилей и DIV элементов.


Пример тегов рассылки:

  • <table style="float:left;background-color:#dfdfdf;font-family:Arial,sans serif;">
    <td align="center" style="font:17px/20px Helvetica,Arial,sans-serif;color:#3f3f3f;padding:0 0 27px;">;
Исходная Вёрстка Рассылки

Пунктирными линиями показаны границы ячеек.

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

Итоговая Вёрстка Рассылки

Редактирование HTML кода:

На картинках выше можно посмотреть отличия в таблицах макетов. Изменения, так или иначе, коснулись каждой составляющей. Объединены вертикальные сегменты с лентами. Во время тестирования почтовые сервисы упорно отказывались отображать ячейки нижних лент без пробелов. Указание свойств cellpadding="0" cellspacing="0" border="0" не устраняло эту проблему. Только объединив ячейки, получил результат. В итоге макет стал более вытянутым по вертикали. Увеличил высоту столбцов для изображений.

Используемые картинки насыщенны графическими элементами, но активной ссылкой должна быть лишь небольшая, конкретная часть. В этой ситуации выручают карты-изображения, которые позволяют привязать ссылки к указанной области. На изображении выше карты обозначены полигоном - ломанной многоугольной областью бирюзового цвета.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<title>Новогодние Торты на заказ!</title>
<!-- Выполнено для кондитерской Третьяков Сергей http://sergey-tretyakov.ru/  -->
<style>
body, html
{
	font-family:Arial, Helvetica, sans-serif;
	background-color:#fff;
	background-position:center top;
	background-repeat:repeat-x;
	margin-top:0px;
}
.bg
{
	width:782px;
	background-repeat: no-repeat;
}
.text
{
	color:#665b56;
	text-align:justify;
	font-size:15px;
	font-family: Arial, Helvetica, sans-serif;
}
.text span
{
	color: #B01519;
}
.img
{
	float:left;
	width:175px;
	height:250px;
}
.product
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	font-weight:bold;
	color:#7b6156;
	text-transform:uppercase;
	line-height:19px;
}
.price
{
	font:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	text-align:center;
	color:#8d4d33;
	text-transform:uppercase;
	line-height:20px;
}
.foot_text
{
	font-size:12px;
	color:#B2AEAD;
	text-align:center;
	padding-bottom:20px;
	text-decoration:none;
}
.foot_text a:hover, .foot_text a:visited
{
	font-size:12px;
	color:#7BC1D6;
	text-align:center;
	padding-bottom:20px;
	text-decoration:none;
}
</style></head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0" border-spacing="0" >
  <tbody width="auto" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
    <tr width="auto" height="112" cellpadding="0" cellspacing="0" border="0" border-spacing="0">
      <td width="auto" height="112" border="0" cellspacing="0" cellpadding="0" border-spacing="0"></td>
    </tr>
    <tr height="773" width="auto" cellpadding="0" cellspacing="0" border="0" border-spacing="0">
      <td valign="top" height="773" align="center" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
	  <table width="auto" height="773" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
          <tbody width="800" height="773" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
		  <tr width="800" height="773"border="0" cellspacing="0" cellpadding="0" border-spacing="0">
            <td valign="top" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
			<table width="800" height="773" border="0" cellspacing="0" cellpadding="0">
                <tbody width="800" height="773" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
				<tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                  <td width="109" height="773" valign="top" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><!-- левая колонка старт-->
				  <table width="109" height="773" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                      <tbody width="109" height="773" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
					    <tr width="109" height="773" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                        <td width="109" height="773" valign="top" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><img src="http://sergey-tretyakov.ru/images/catalog_job/blog/2014/mail-tz/left_img.png" width="109" height="773" alt="" border="0"></td>
                      </tr>
                    </tbody></table></td>
                  <td width="606" height="773" valign="top" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
  <table width="606" height="773" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
       <tbody width="606" height="773" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
	        <tr width="606" height="136" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                 <td height="136" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
				   <img src="http://sergey-tretyakov.ru/images/catalog_job/blog/2014/mail-tz/top_img.png" alt="" width="606" height="136" usemap="#Map"border="0" border-spacing="0"></td>
            </tr>
            <tr height="210" style="background-color: #FFFFFF;" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                 <td height="210" valign="top" align="left" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
				   <table width="606" height="210" border="0" cellspacing="0" cellpadding="0" border-spacing="0" class="text">
                      <tbody width="606" height="210" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
					    <tr width="606" height="210" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                          <td width="606" height="210" align="center" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><!-- контент старт -->
                             <p><strong>Дорогие Друзья!</strong> </p>
                              <p>В преддверии Нового Года и Рождества коллектив Кондитерской "Торт-Заказ"<br /><span style="color: #F00;"><strong>Дарит Вам скидку 15 %,</strong></span><br />которую Вы можете использовать при заказе любого торта в период </span>
                              <br /><span><strong>с 15 декабря по 31 января </strong></span>
                              <br /><br /><span  style="color: #F00;"><strong>Создайте себе праздник! </strong></span>                                
                              </td><!-- контент стоп -->
                        </tr>
                       </tbody>
					 </table>
				</td>
             </tr>
             <tr height="291" style="background-color:#FFFFFF;" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                 <td height="291" valign="top" align="left" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                     <table height="291" width="606" border="0" cellpadding="0" cellspacing="0" class="text" border-spacing="0">
                            <tbody width="606" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                              <td border="0" cellspacing="0" cellpadding="0" border-spacing="0"><!-- центральная колонка старт-->
							   <table width="606" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                <tbody width="606" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
								   <tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                    <td border="0" cellspacing="0" cellpadding="0" border-spacing="0"><!-- секция продукци старт -->
                                      <table height="291" width="175" border="0" cellspacing="0" cellpadding="0"  border-spacing="0" class="img">
                                        <tbody width="606" height="291" border="0" cellpadding="0"  border-spacing="0" cellspacing="0">
										<tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                          <td height="20" class="product" align="center" border="0" cellspacing="0" cellpadding="0" border-spacing="0">Торт "Новогоднее чудо"</td>
                                        </tr>
                                        <tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                          <td height="250" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><a href="http://tort-zakaz.ru/torts/n-3" rel="nofollow"><img src="http://sergey-tretyakov.ru/images/catalog_job/blog/2014/mail-tz/N-3.png" width="175" height="250" alt="Торт Новогоднее чудо" border="0"></a></td>
                                        </tr>
                                        <tr height="31" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                          <td height="31" class="price" align="center" border="0" cellspacing="0" cellpadding="0" border-spacing="0">Арт: N-3</td>
                                        </tr>
                                      </tbody></table></td>
                                    <td width="60" border="0" cellspacing="0" cellpadding="0" border-spacing="0"> </td>
                                    <td border="0" cellspacing="0" cellpadding="0" border-spacing="0">
									 <table height="291" width="175" border="0" cellspacing="0" cellpadding="0"  border-spacing="0" class="img">
                                        <tbody width="606" height="291" border="0" cellpadding="0"  border-spacing="0" cellspacing="0"><tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                          <td height="20" class="product" border="0" align="center" cellspacing="0" cellpadding="0" border-spacing="0">Торт "на год Козы"</td>
                                        </tr>
                                        <tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                          <td height="250" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><a href="http://tort-zakaz.ru/torts/n-2" rel="nofollow"><img src="http://sergey-tretyakov.ru/images/catalog_job/blog/2014/mail-tz/N-2.png" width="175" height="250" alt="Торт на год Козы" border="0" ></a></td>
                                        </tr>
                                        <tr height="31" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                          <td height="31" class="price" align="center" border="0" cellspacing="0" cellpadding="0" border-spacing="0">Арт: N-2</td>
                                        </tr>
                                      </tbody></table></td>
                                    <td width="60" border="0" cellspacing="0" cellpadding="0" border-spacing="0"> </td>
                                    <td border="0" cellspacing="0" cellpadding="0" border-spacing="0">
									 <table height="291" width="175" border="0" cellpadding="0" cellspacing="0"  border-spacing="0" class="img">
                                        <tbody width="606" height="291" border="0" cellpadding="0" cellspacing="0" border-spacing="0" ><tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                          <td height="20" width="175" class="product" align="center" border="0" cellspacing="0" cellpadding="0" border-spacing="0">Торт новогодний №52</td>
                                        </tr>
                                        <tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                          <td height="250" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><a href="http://tort-zakaz.ru/torts/n-52" rel="nofollow"><img src="http://sergey-tretyakov.ru/images/catalog_job/blog/2014/mail-tz/N-52.png" width="175" height="250" alt="Торт новогодний" border="0"></a></td>
                                        </tr>
                                        <tr height="31" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                                          <td height="31" class="price" border="0" align="center" cellspacing="0" cellpadding="0" border-spacing="0">Арт: N-52</td>
                                        </tr>
                                      </tbody></table></td>
                                  </tr>
                                </tbody></table>
                                <!--секция продукции стоп --></td>
                            </tr>
                          </tbody>
						   <!-- центральная колонка стоп--></table></td>
                      </tr>
                      <tr width="606" height="138" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                        <td width="606" height="138" border="0" cellspacing="0" cellpadding="0" border-spacing="0" ><img src="http://sergey-tretyakov.ru/images/catalog_job/blog/2014/mail-tz/button-footer.png" alt="" width="606" height="138" usemap="#Map2" border="0" ></td>
                      </tr>
                    </tbody></table></td>
                  <!-- правая колонка старт--><td width="90" height="773" valign="top" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><table width="90" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                      <tbody width="90" height="773" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><tr  border="0" cellspacing="0" cellpadding="0" border-spacing="0">
                        <td width="90" height="773"  valign="top" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><img src="http://sergey-tretyakov.ru/images/catalog_job/blog/2014/mail-tz/right_img.png" width="90" height="773" alt="" border="0" border-spacing="0"></td>
                      </tr>
                    </tbody></table></td>
                </tr>
              </tbody></table></td>
          </tr>
        </tbody></table></td>
    </tr>
    <tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
      <td valign="top" align="center" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
	  <table width="782" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
          <tbody border="0" cellspacing="0" cellpadding="0" border-spacing="0"><tr border="0" cellspacing="0" cellpadding="0" border-spacing="0">
            <td width="782" valign="top" align="center" border="0" cellspacing="0" cellpadding="0" border-spacing="0"><!-- disclaimer text starts -->
              <span class="foot_text">Порадуйте своих родных и близких, любимых и дорогих, знакомых и коллег <br>
              незабываемым и оригинальным подарком - тортом, изготовленным на заказ!<br/><a href="http://tort-zakaz.ru/" rel="nofollow">Интернет-магазин: tort-zakaz.ru</a></span>
              <!-- disclaimer text ends -->
            </td>
          </tr>
	<tr>
      <td height="112" border="0" cellspacing="0" cellpadding="0" border-spacing="0"></td>
    </tr>
        </tbody></table></td>
    </tr>
  </tbody>
</table>
<map name="Map" id="Map">
  <area shape="poly" coords="144,134,134,110,131,96,138,82,151,75,162,74,179,81,190,95,197,95,204,92,207,82,225,88,235,88,249,99,256,96,270,96,281,92,291,89,302,92,312,99,319,96,330,89,337,92,347,92,365,92,379,96,390,92,407,92,424,95,418,120,235,124,207,113,194,116,187,131,187,131,183,134" href="http://tort-zakaz.ru/" target="_blank" alt="ссылка на главную страницу" rel="nofollow"/>
</map>
<map name="Map2" id="Map2">
  <area shape="poly" coords="116,58,484,58,501,54,505,40,501,33,494,23,484,19,124,19,113,23,103,37,103,47,110,58" href="http://tort-zakaz.ru/categories/novogodnie-torty" target="_blank" alt="ссылка на страницу новогодних тортов" rel="nofollow"/>
</map>
</body></html>
							

Перерисовка графики:

Все картинки корректировались и переведены в формат PNG. К сожалению, в исходном макете не было PSD файла. Ретушировал заголовок и текст активной кнопки. Изображения товара - тортов с последней фотосъёмки 13 ноября 2014 года.

Фотосъёмка

Как снимал используемые изображения сладких красавцев.

 

Готовая рассылка

Свёрстанный макет открывается в iFrame окне. Все элементы активны. Можно перейти по ссылкам.

 

Итоговое изображение рассылки
Блог фотосессий и ретуши предметных фотографий
Подписаться Комментарии (0)
Отмена или