search

dudeonthehorse / kilogram

Email Development Framework
504 stars 94 forks source link

Https-ссылки в письмах и цвет текста ссылки при переходе в Outlook #12

Closed Sogl closed 9 years ago

Sogl commented 9 years ago

Приветствую!

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

То ссылка превращается в такую: https://foo.barcom, т е удаляется вторая точка, из-за чего переход по ней ни к чему не приводит. В моем случае срабатывает 100%-но только с определенными фамилиями в шаблоне и только с моей ссылкой. Письма отправляю по протоколу SMTP через корпоративный Exchange-сервер. При отправке на личный ящик gmail происходит такая же ерунда, значит дело не в Outlook.

Пока что нашел workaround - это использование http вместо https и редирект через apache/htaccess, однако сама проблема выглядит довольно странно. У Вас большой опыт в верстке писем. Может, сталкивались с чем-то подобным?

По второму вопросу. Решил изменить цвет кнопки Try Inliner с черного на зеленый. Поменял стили:

.button-link {
    ...
    background-color: #6fb58d;
    border: #6fb58d 10px solid;
    ...
}

Теперь при переходе из Outlook 2010 цвет ссылки становится фиолетовым. До перехода: image

После перехода: image

Такой проблемы нет со стандартной кнопкой. Как можно решить данную проблемку?

dudeonthehorse commented 9 years ago

Привет.

Проблема битым адресом ссылки действительно странная, но я не использую https ссылки в письмах. Редирект с http на https вполне себе удачное решение, которое используется большинством вменяемых сайтов.

Относительно цвета ссылки-кнопки: !important цвет ссылки присутствует?

Sogl commented 9 years ago

Относительно цвета ссылки-кнопки: !important цвет ссылки присутствует?

Все !important в сгенерированном файле присутствуют в <head> секции. Конкретно по этой ссылке:

.button-link{font-family:helvetica;font-size:14px;color:#fff!important;font-weight:700;text-decoration:none;background-color:#6fb58d;border:#6fb58d 10px solid;padding:0 10px;border-radius:25px;display:inline-block}
.button-link span{color:#fff}

При попытке добавить !important еще в span:

.button-link span{color:#fff!important}

ничего не изменилось.

Более того, при сохранении полученного письма в html-формате и просмотре инспектором Chrome, видно, что стили из head не применяются: image

Затем внес стили инлайн в span:

<span style="color:#fff !important">Войти в ПУЛЬС</span>

При сохранении письма в html: image

По идее, все должно уже работать. Однако, ссылка снова срабатывает фиолетовым цветом.

dudeonthehorse commented 9 years ago

В принципе все должно работать если в инлайне будет присутствовать запись color:#ffffff !important; для самой ссылки. Но сейчас этого не происходит. Дело в gulp инлайнере. Вопрос решается с разработчиком инлайнера. Плюс проведу пару тестов на неделе. Вопрос остается открытым. Тему не закрываю.

Sogl commented 9 years ago

Первая проблема куда-то пропала после замены одного слова в шаблоне. Вернул обратно - тоже работает. Мистика прям :confused:

При возврате цвета кнопки "как было":

.button-link {
    ...
    background-color: #333333;
    border: #333333 10px solid;
    ...
}

2-я проблема пропадает.

Смотрим в инспектор: image

Не вижу разницы с применением другого цвета.

В принципе все должно работать если в инлайне будет присутствовать запись color:#ffffff !important; для самой ссылки.

Не хочет работать, даже если к ссылке и span'у добавить.

dudeonthehorse commented 9 years ago

Будет решено в релизной версии

tegscramp commented 9 years ago

Outlook меняет цвет на ссылки по которым уже переходили. a:visited{color:#fff;} это должно профиксить баг. span не надо добавлять.

tegscramp commented 9 years ago

Причем фиолетовый или другой цвет, по моему, меняется в настройках винды, если я ничего не путаю.

dudeonthehorse commented 9 years ago

Span необходим в случае разноцветных ссылок в письме.

Sogl commented 7 years ago

@dudeonthehorse Проблема с цветом посещенной ссылки в Outlook осталась в последней версии вашего фреймворка. Пробовал внести в base.less:

.button-link:visited {
  color: #ffffff;
}

и не увидел вообще псевдоклассов в сгенерированном билде html.

Далее нашел, что, похоже, Outlook вообще не поддерживает псевдоклассы: https://www.campaignmonitor.com/forums/topic/7303/visited-links-in-outlook-2010-and-probably-2007/

И вот есть вероятное решение, которое кому-то помогло: https://litmus.com/community/discussions/4164-outlook-07-13-visited-link-color-fix

dudeonthehorse commented 7 years ago

.button-link { color:#ffffff !important; } в инлайне не решает вопрос?

Sogl commented 7 years ago

Нет, не решает. Он стоит там по умолчанию, я сейчас посмотрел.

dudeonthehorse commented 7 years ago

https://litmus.com/community/discussions/4164-outlook-07-13-visited-link-color-fix

Sogl commented 7 years ago

Я выше дал ссылку на это :wink: Мне только mso-style-priority:99; нужен? Цвет то у нас конкретный задан.

Sogl commented 7 years ago

Вот так пробовал внести в стили:

a.button-link {
    mso-style-priority:99;
    color:inherit;
}
a.button-link span {
    mso-style-priority:99;
    color:inherit;
}

Потом так:

<a class="button-link" href="https://mylink/" target="_blank" style="background-color: #6fb58d; 
border: #6fb58d 10px solid; border-radius: 25px; color: #ffffff !important; display: inline-block; 
font-family: helvetica; font-size: 14px; font-weight: bold; padding: 0 10px; 
text-decoration: none;mso-style-priority:99;">
    <span style="color: #ffffff;mso-style-priority:99;">Войти в ПУЛЬС</span>
</a>

Не помогает.

Sogl commented 7 years ago

В общем, нашел вот такой issue: https://github.com/zurb/foundation-emails/issues/139

А в нем ссылку на данный проект, который делает bulletproof кнопки: https://buttons.cm/

Мои настройки: image

Итоговый код:

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
xmlns:w="urn:schemas-microsoft-com:office:word" href="https://mylink" style="height:37px;
v-text-anchor:middle;width:148px;"
arcsize="68%" strokecolor="#6fb58d" fillcolor="#6fb58d">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;
font-weight:bold;">Войти в ПУЛЬС</center>
  </v:roundrect>
<![endif]--><a href="https://mylink"
style="background-color:#6fb58d;border:1px solid #6fb58d;border-radius:25px;color:#ffffff;
display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:37px;
text-align:center;text-decoration:none;width:148px;-webkit-text-size-adjust:none;
mso-hide:all;">Войти в ПУЛЬС</a></div>

Основную проблему оно решило, но добавило дополнительных. В действии: mail_button2

Грубо говоря, у нас теперь кнопка еще и разные виды состояний при нажатии поддерживает: нажатая кнопка мышки + курсор сверху (фиолетовый цвет), нажатая кнопка мышки + курсор вне кнопки (зеленый цвет), а также скругленные углы. Только текст пропадает когда нажимаешь на нее. :joy:

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

p.s. issue, кстати, можно открыть заново. Так больше шансов, что кто-то наткнется и подскажет решение

dudeonthehorse commented 7 years ago

Решение по ссылке Литмуса используется без связки со спаном. Стили необходимо вынести в head для того, чтобы генерируемый Аутлуком спан наследовал стиль ссылки

Sogl commented 7 years ago

Выносил стили в <head>, не помогло. Можете в виде кода пример написать? Может я не так что-то делаю.

dudeonthehorse commented 7 years ago 

<style type="text/css">
  span.MsoHyperlink {
      mso-style-priority:99;
      color:inherit;
  }
  span.MsoHyperlinkFollowed {
      mso-style-priority:99;
      color:inherit;
  }
  </style>
<body>
<a href="https://mylink" style="color:#000000;">Войти в ПУЛЬС</a>
</body>```

В этом случае visited ссылка также должна быть черной