Электронная почта в формате HTML неправильно отображается в Outlook 2007

о радость html писем

Есть много правил, которым вы должны следовать при работе с электронной почтой на основе HTML, особенно когда у вас требовательные клиенты и идеальные до пикселя дизайны, и я очень рад, что мне не приходилось работать над таким проектом по крайней мере два года. теперь... Основная причина моей полной неприязни к этой практике в первую очередь сводится к двум почтовым клиентам. Первым и худшим за все время является Lotus Notes 6.5.4 (честно говоря, ему уже больше 10 лет... но все же!) даже лучший может быть плохим, Outlook 2007 и 2010!

Тот, кто думал, что будет хорошей идеей использовать HTML-движок Microsoft Word WYSIWYG для рендеринга электронных писем в формате HTML в Outlook 2007 и 2010, должен был быть сумасшедшим, ленивым, потерянным или немного запутавшимся (удалить, если это уместно). Это вызывает у разработчиков бесконечные проблемы с рендерингом, обычно со случайными и необъяснимыми расчетами размеров или проблемами заполнения.

Взято из моего блога http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html

Проще говоря, я вам не завидую :)

Я обнаружил, что лучший способ помочь мне решить проблемы с электронной почтой — это следовать следующим правилам:

1. Никогда не используйте colspans или rowspans.
2. Всегда устанавливайте правильные размеры для ваших таблиц и ячеек.
3. Используйте разделительные картинки, а не &nbps;.
4. Всегда указывайте правильные размеры изображений и никогда не увеличивайте или уменьшайте изображения.
5. Всегда добавляйте style="display:block;" к изображениям.
6. Избегайте использования divs.
7. Если вы хотите покрасить ссылки, поместите стиль в span как дочерний элемент внутри тега a.
8. Не используйте курсив.
9. Не используйте BR для макета, всегда используйте таблицы.
10. Используйте BR в тексте, а не Ps (чтобы избежать проблем с большими полями и полного игнорирования абзацев).

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

http://pastie.org/6250834

Скрипт можно добавить как обычный тег script или включить с помощью GreaseMonkey или чего-то подобного (он был разработан для работы с Firefox, но я не вижу причин, по которым он не должен работать где-то еще). Из-за того, как я создавал свои электронные письма, он активируется только при соблюдении следующих условий:

1. Существует внешняя таблица-оболочка с набором width="100%", используемая для центрирования фактического содержимого электронной почты.
2. или... есть внешний элемент (таблица или div), который имеет id="base".

Я передал через него ваш HTML-код, и изображение ниже является результирующим результатом. Это имеет больше смысла, когда у вас есть реальная страница, потому что вы можете навести указатель мыши на каждый элемент с рамкой, и это даст вам приблизительное представление о том, в чем проблема (либо это или вы можете просто проверить элемент непосредственно с помощью Firebug или аналогичного).

Итак, из проверки вышеизложенного кажется, что у вас есть несколько проблем, которые необходимо исправить, я бы сказал, что наиболее важными из них являются избавление от rowspan и colspan (они всегда вызывают проблемы в Outlook) и убедитесь, что все ваши измерения совпадают правильно. После того, как вы исправите эти проблемы, вы можете увидеть значительное улучшение, но опять же, вы не можете этого сделать, в опасной жизни создания электронной почты в формате HTML нет уверенности ...

Надеюсь, поможет.

Попробуйте это для своей верхней таблицы:

<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td height="23" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td width="575">

        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td>
              <img src="https://www.tagwebstore.com/email/testimonial-top.png" width="575" height="36" style="display:block;" />
            </td>
          </tr>
          <tr>
            <td bgcolor="#f0d7c1" width="575">
              <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td width="28">
                  </td>
                  <td width="519" style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG &ndash; we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.
                        </td>
                      </tr>
                      <tr align="right">
                        <td valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
                          Excell Home Care and Hospice, Oklahoma</td>
                      </tr>
                    </table>
                  </td>
                  <td width="28">
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="575" height="57" style="display:block;" />
            </td>
          </tr>
        </table>

      </td>
      <td width="25">&nbsp;</td>
    </tr>
  </table>

и это для вашего дна:

  <table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td width="575">
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="left" valign="middle" width="280" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">
              <a href="mailto:[email protected]" style="color:#000001; text-decoration:none;">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;866.232.6477
            </td>
            <td width="193" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">
              Follow us on Twitter &amp; YouTube
            </td>
            <td valign="middle" width="49">
              <a href="https://twitter.com/TAGhomecaremktg"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" style="display:block;" /></a>
            </td>
            <td valign="middle" width="53">
              <a href="http://www.youtube.com/TAGWebinars"><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" style="display:block;" /></a>
            </td>
          </tr>
        </table>
      </td>
      <td width="25">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
  </table>

В целом, он был закодирован очень хорошо, просто изменено несколько мелких вещей, не говоря о том, что каждая из них должна быть обязательной, но ЕСЛИ это работает, вы можете перепроектировать изменения, чтобы выяснить, что сломалось. Я не проверял это, так что, надеюсь, это работает...