Верстка писем в интернет маркетинге

Верст­ка писем в интер­нет мар­ке­тин­ге — делюсь полез­ны­ми зна­ни­я­ми про верст­ку писем для e‑mail рас­сы­лок. Основ­ные момен­ты про­сто и понят­но. Пользуйтесь!

Искусство верстки писем: Как заколдовать почтовый ящик

При­вет! Если ты зани­ма­ешь­ся интер­нет-мар­ке­тин­гом или хочешь улуч­шить свои навы­ки в созда­нии элек­трон­ных писем, то попал имен­но туда, где нуж­но. Сего­дня мы пого­во­рим о чем-то, что может казать­ся скуч­ным и замыс­ло­ва­тым, но на самом деле – это целая нау­ка, тре­бу­ю­щая кре­а­тив­но­сти и точ­но­сти: верст­ке элек­трон­ных писем. Итак, давай прыг­нем без пара­шю­та в этот вихрь цве­та, кодов и тэгов!

Почему верстка писем так важна?

Давай нач­нем с про­сто­го вопро­са: зачем вооб­ще нуж­но парить­ся с верст­кой писем, если мож­но про­сто напи­сать текст, при­кре­пить кар­тин­ку и отпра­вить? Ответ прост: пото­му что твое пись­мо – это лицо тво­е­го биз­не­са. Как ты его пода­ешь, так кли­ен­ты и пред­ста­вят себе твои услу­ги или товары.

• Про­фес­си­о­наль­но оформ­лен­ное пись­мо уве­ли­чи­ва­ет дове­рие к бренду.
• Хоро­шая верст­ка помо­га­ет выде­лить глав­ное и напра­вить вни­ма­ние на важ­ные элементы.
• Пись­мо, кото­рое хоро­шо выгля­дит на всех устрой­ствах, повы­ша­ет откры­тость и кликабельность.

Базовые элементы верстки письма

Типовая структура письма

Давай раз­бе­рем на косточ­ки, из чего же состо­ит пись­мо, кото­рое мы хотим отпра­вить нашим поль­зо­ва­те­лям. Рас­смот­рим типич­ные элементы:

• Шап­ка (Header)
• Основ­ное содер­жа­ние (Body)
• Под­вал (Footer)

Принципы верстки

Перед тем как засу­чить рука­ва и погру­зить­ся в Кас­кад­ные Таб­ли­цы Сти­лей (CSS) и HTML, важ­но усво­ить несколь­ко клю­че­вых принципов:

1. Сов­ме­сти­мость с поч­то­вы­ми кли­ен­та­ми: не все кли­ен­ты хоро­шо интер­пре­ти­ру­ют совре­мен­ные сти­ли и скрипты.
2. Про­сто­та и чисто­та: чем про­ще верст­ка, тем мень­ше шан­сов, что что-то пой­дет не так.
3. Адап­тив­ность: пись­мо долж­но выгля­деть хоро­шо на любом устрой­стве, неза­ви­си­мо от раз­ме­ра экрана.

Технические аспекты верстки

До HTML

Когда дело дохо­дит до верст­ки, HTML явля­ет­ся кир­пи­чи­ка­ми, из кото­рых стро­ит­ся наше пись­мо. Из-за огра­ни­че­ний поч­то­вых кли­ен­тов, как пра­ви­ло, исполь­зу­ет­ся HTML вер­сии 4.01 или XHTML 1.0, кото­рый поз­во­ля­ет избе­жать боль­шин­ства про­блем с отображением.

Основы HTML для писем:

<!-- Структура письма -->
<table width="100%"> 
	<tr> 
		<td> 
			<!-- Шапка письма --> 
			<table> 
				<tr> 
					<td>Здесь логотип и/или название компании</td> 
				</tr> 
			</table> 
			<!-- Основной контент --> 
			<table> 
				<tr> 
					<td> Тут будет текст, изображения, кнопки - всё что душе угодно. </td> 
				</tr> 
			</table> 
			<!-- Подвал --> 
			<table> 
				<tr> 
					<td> Контактная информация, отказ от подписки и прочие юридически необходимые вещи. </td> 
				</tr> 
			</table> 
		</td> 
	</tr> 
</table>

Каскадные таблицы стилей (CSS)

CSS в пись­мах – это чаще все­го инлай­но­вые сти­ли. Это зна­чит, что сти­ли напря­мую встав­ля­ют­ся в HTML тэги через атри­бут «style».

Основы CSS для писем:

Вот при­мер сти­лей для заголовка:

<td style="font-size: 20px; color: #333;">Мой замечательный заголовок</td>

Изображения и мультимедиа

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

• Все­гда ука­зы­вай атри­бу­ты «width» и «height».
• Поль­зуй­ся атри­бу­том «alt», что­бы если изоб­ра­же­ния не загру­зят­ся, поль­зо­ва­тель всё рав­но узнал, что там было.
• Ну и, конеч­но, ста­рай­ся не пере­гру­жать пись­мо кар­тин­ка­ми, ведь мно­гие поч­то­вые кли­ен­ты сна­ча­ла их блокируют.

Советы по тестированию писем

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

Чек-лист перед отправкой

• Пись­мо кор­рект­но отоб­ра­жа­ет­ся в основ­ных поч­то­вых клиентах?
• Все ссыл­ки рабо­та­ют и ведут туда, куда нужно?
• Про­верь­те, что адап­тив­ный дизайн рабо­та­ет на мобиль­ных устройствах.
• Про­верь­те тек­сты на нали­чие опе­ча­ток и грам­ма­ти­че­ских ошибок.

Верстка писем в интернет маркетинге: заключение

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

Так что, бери инстру­мен­ты – редак­тор кода, пару чашек кофе (или чая, кому что) – и впе­ред за поко­ре­ни­ем поч­то­вых ящи­ков! Уда­чи тебе, доро­гой мар­ке­то­лог, и пусть каж­дое твое пись­мо будет малень­ким шедевром!

Засим всё поз­воль­те откланяться.