Абсолютное расположение в электронные письма Gmail
У меня есть клиент, который хочет отправить подарочные сертификаты людям, которые подписываются на их сайте. Они хотят все это разработанное, таким образом, я не могу только послать текстовое электронное письмо. Я пытаюсь расположить текст над изображением так, чтобы это могло все еще быть динамично.
Я пытаюсь сделать это с абсолютным расположением. Некоторые почтовые системы любят его. Некоторая ненависть это. Gmail, оказывается, ненавидит его.
Мы используем MailChimp для кампании. Вот полный источник электронной почты. Следующий, который является просто отрывком, который не работает.
*|MC:SUBJECT|*
*|FNAME|* *|LNAME|*
GetFreePellets.com
$100
*|COUPONCODE|*
view email in browser | Unsubscribe *|EMAIL|* | Update your profile | Forward to a friend
*|LIST:DESCRIPTION|*
*|HTML:LIST_ADDRESS_HTML|*
Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.
Sent to *|EMAIL|*. Unsubscribe |
Update Profile |
Forward to a Friend
*|REWARDS|*
И просто отрывок я волнуюсь по поводу:
*|FNAME|* *|LNAME|*
GetFreePellets.com
$100
*|COUPONCODE|*
Переменные слияния Примечание: MailChimp являются теми вещами между | и |.
Вот изображение того, на что оно похоже в Entourage. Красная панель является настоящим именем, таким образом.. ya: электронная почта, работающая http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg
И вот это в Gmail (я знаю, что имя не подвергается цензуре): электронная почта, не работающая http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg
Какие-либо идеи о том, как получить эту работу в Gmail?
2 ответа
К сожалению, вы не можете использовать position: absolute .
Кроме того, поскольку Outlook использует средство визуализации Word HTML, вы также столкнетесь с проблемами при использовании абсолютного позиционирования.
Большинство электронных писем в формате HTML представлены таблицами.
Я бы посоветовал сделать все в виде таблицы (поддержка div не на 100% надежна в почтовых клиентах). Используйте свойства границы, чтобы придать таблице зеленую рамку. Вставьте изображение логотипа / баннера в первую строку таблицы (объединенные три столбца). Используйте следующие 3 строки для полей To, From и Amount (со значениями в объединенных втором и третьем столбцах). И используйте последний столбец последней строки для кода купона.
Если вам действительно нужна двойная граница, вы можете либо обернуть таблицу в div, либо для максимальной совместимости обернуть таблицу в таблицу с 1 столбцом, 1 строкой.
Да, это некрасиво, но в почтовых клиентах есть крайне глючные и / или старые реализации HTML, так что сейчас не время и не место для беспокойства по поводу уродливого, не похожего на Web2.0 кода.
См. Ссылку, размещенную alex для получения дополнительной информации.