Specyfikacja tworzenia wiadomości w formacie HTML

Wstęp

Współcześni użytkownicy poczty elektronicznej mają w do wyboru wiele urządzeń, programów oraz systemów operacyjnych, z pomocą których mogą odbierać przychodzące wiadomości email. Każda aplikacja służąca do odbierania i wysyłania poczty elektronicznej stosuje natomiast własne reguły interpretacji kodu HTML. W konsekwencji, ta sama wiadomość może być odmiennie przetwarzana i wyświetlana zależnie od tego, za pomocą jakiego programu czy na jakim urządzeniu została ona otwarta.

Aby mieć kontrolę nad tym, jak zaprojektowana wiadomość email będzie wyglądała po odebraniu poprzez użytkowników poczty elektronicznej, przygotowaliśmy dokument zawierający najlepsze zasady i standardy tworzenia kodu HTML pod newslettery.

Mimo iż prezentowane tu reguły są sprawdzone, a przygotowany kod HTML zgodnie z nimi powinien wyświetlać się prawidłowo we wszystkich popularnych klientach pocztowych, sugerujemy, abyście zawsze testowali swoje wiadomości przed wysyłką do większej liczby subskrybentów.

Ze względu na zmieniające się standardy i reguły stosowane poprzez poszczególnych dostawców usług poczty elektronicznej dokument ten będzie odpowiednio aktualizowany i uzupełniany.

Podstawowe zasady

Poniżej znajdują się podstawowe zasady tworzenia kodu HTML dla newsletterów. Stosowanie się do wymienionych reguł pomoże Ci w zaprojektowaniu wiadomości tak, aby po wysłaniu z systemu GetResponse była responsywna i prezentowała się dobrze w każdym kliencie pocztowym.

W celu zapewnienia jednakowego wyświetlania wiadomości email w różnych klientach pocztowych powinieneś budować go na tabelach. Zaniechaj używania <div> i staraj się korzystać z najprostszej formy HTML, jaką znasz, unikając skrótów stosowanych przy tworzeniu stron WWW.
Ze względu na fakt, iż większość klientów pocztowych wycina sekcję <head> z kodu HTML wiadomości, powinieneś umieszczać style wyłącznie za pomocą inline CSS2, unikając skrótów w zapisie.
Wykorzystuj w maksymalnym zakresie atrybuty tagów, aby upewnić się, że kod HTML będzie jednakowo interpretowany w różnych klientach pocztowych.
Nie zalecamy korzystania z colspan i rowspan.
Z uwagi na problemy w renderowaniu kodu przez starsze programy pocztowe do pozycjonowania elementów, wykorzystujemy wyłącznie padding, a nie margin.
Ścieżki do grafik, które umieszczasz w swojej wiadomości, muszą być absolutne. Nie używaj skrótów do katalogów np. "/images/image.gif", a zamiast tego podaj całą ścieżkę do pliku.
Nazywając pliki graficzne, warto nadać im unikalną nazwę (np. wskazującą nazwę wiadomości), aby uniknąć ewentualnych problemów przy kopiowaniu wiadomości pomiędzy kampaniami.
W celu uniknięcia powstawania niechcianych przestrzeni pod obrazkami, każda grafika użyta w mailingu powinna być wyświetlana jako element blokowy.
W szablonach HTML nie używaj tagów <thead> i <tfoot>. Są one zarezerwowanego dla edytora WYSIWYG GetResponse.
Wyrównanie tekstu (lewo/prawo/środek) definiujemy wyłącznie poprzez atrybut align. Nie stosujemy zapisów style="text-align: center | right | left".
Przed każdą realizowaną wysyłką mailingów testuj, czy Twój szablon wyświetla się poprawnie, zgodnie z Twoim projektem. Stosuj do tego funkcję Podglądu Wiadomości GetResponse.

Dobre praktyki

Przedstawione poniżej dobre praktyki pomogą Ci w optymalnym zaprojektowaniu wiadomości, zapewniając pełną kontrolę nad jej wyświetlaniem.

Zalecana szerokość szablonu to 600px. Dzięki temu maksymalna część wiadomości jest widoczna w klientach pocztowych.
Aby zwiększyć prawdopodobieństwo poprawnego i jednakowego wyświetlania treści przekazywanych w mailingu, stosuj popularne czcionki, takie jak Arial, Verdana, Georgia czy Times New Roman. Jeśli chcesz używać czcionek, które nie są uniwersalnie wspierane na poszczególnych systemach operacyjnych, umieść je w grafice.
Nie używaj obrazków do wyznaczania struktury w wiadomości.
Zeruj wartość marginesu i paddingu w każdej komórce, aby uniknąć niezaplanowanych przesunięć treści w wiadomości.
Aby dopasować grafiki i tekst, stosuj align="left" i align="right" zamiast float’ów.
Pamiętaj, aby zawsze zamykać tagi <img> i <td> w jednej linii. Pozbędziesz się w ten sposób niechcianych przestrzeni pod grafikami w starszych klientach pocztowych typu Outlook.
Osadzając grafiki w mailingu podawaj wartości alt, width i height. Dzięki temu Twój szablon będzie prezentował się lepiej w przypadku zablokowanych grafik w kliencie pocztowym.
Nazwy plików graficznych wykorzystywanych w kreacji zaczynaj od 0, np. 01.jpg, 02.jpg, itp.
Zapisuj grafiki w formacie, który dla zdefiniowanych kolorów wykaże się najmniejszym rozmiarem. Jeśli to możliwe, wykorzystaj funkcję “Zapisz dla Internetu” i zoptymalizuj wagę i jakość grafik. Preferowany format to .gif i .jpg.
Kolory zapisuj w formacie HEX.
Kod html pisz wyłącznie małymi literami i pamiętaj o wcięciach korespondujących ze strukturą (1 tabulator = 4 spacje).
Nie używaj w szablonach animacji Flash. Zastąp je animowanymi gifami, które są niemal uniwersalnie wspierane.
Nie używaj w szablonach JavaScript’u gdyż zostanie on zablokowany niemal we wszystkich klientach pocztowych.
Nie umieszczaj w szablonach wiadomości formularzy <form>, gdyż nie są one uniwersalnie wspierane. W klientach pocztowych, w których zadziałają, użytkownikom ukaże się systemowy alert ostrzegawczy przed przesłaniem danych.

Szkielet newslettera

Wiadomości email tworzone są zazwyczaj w formacie jedno lub kilkukolumnowym. W zależności od tego jakiego typu wiadomości przesyłasz (np. wiadomość promująca ofertę Twojego e-sklepu lub zaproszenie na organizowane przez Ciebie wydarzenie) i jaki efekt chcesz osiągnąć, powinieneś wybrać szkielet, który najlepiej odda przekaz Twojej wiadomości.

Poniżej znajdują się przykłady szkieletów wiadomości, których możesz użyć przy realizacji własnych kampanii.

W obu z nich znajdziesz komentarze takie, jak:

<!—Moduł –> – W tym miejscu należy wprowadzić wybrany przez Ciebie moduł (np. preheader, blok tekstowy, itp.), które są dokładnie omówione w kolejnym rozdziale

<!– Podstawowa tabela zawsze o szerokości 100% –> – Oznaczenie tabeli, która stanowi ramę wiadomości i powinna mieć niezmienną szerokość. W niej osadzone są kolejne tabele, w których znajduje się treść główna

<!– Tabela wyznaczająca szerokość mailingu –> – Oznaczenie tabeli, która wyznacza szerokość wiadomości (sugerowana szerokość to 600 px). To właśnie w niej umieszczone zostaną osobne kolumny lub poszczególne moduły

<!– definicja pierwszej kolumny wraz z szerokością –> – Oznaczenie pierwszej kolumny wiadomości. W załączonym przykładzie ma ona 300 px.

Jeżeli, któryś z podanych szkieletów Ci odpowiada, możesz go od razu skopiować do kreatora wiadomości GetResponse. Zawarte w nim komentarze nie wyświetlą się dla odbiorców newslettera, a Tobie pozostanie jedynie uzupełnienie modułów w wybranych przez Ciebie miejscach.

Układ jednokolumnowy

<table width="100%" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0">
  <!-- Basic table always with 100% width -->
  <tr>
      <td  align="center" valign="top" style="margin: 0; padding: 0;">
          <table  width="600"  align="center" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0">
          <!-- Table describing the width of your message -->
              <tr>
                  <td  align="center" valign="top" style="margin: 0; padding: 0;">
                      <!-- Module -->
                  </td>
              </tr>
              <tr>
                  <td  align="center" valign="top" style="margin: 0; padding: 0;">
                      <!-- Module -->
                  </td>
              </tr>
              <tr>
                  <td  align="center" valign="top" style="margin: 0; padding: 0;">
                      <!-- Module -->
                  </td>
              </tr>
              <tr>
                  <td  align="center" valign="top" style="margin: 0; padding: 0;">
                      <!-- Module -->
                  </td>
              </tr>
              <tr>
                  <td  align="center" valign="top" style="margin: 0; padding: 0;">
                      <!-- Module -->
                  </td>
              </tr>
              <tr>
                  <td  align="center" valign="top" style="margin: 0; padding: 0;">
                      <!-- Module -->
                  </td>
              </tr>
              <tr>
                  <td  align="center" valign="top" style="margin: 0; padding: 0;">
                      <!-- Module -->
                  </td>
              </tr>
              <tr>
                  <td  align="center" valign="top" style="margin: 0; padding: 0;">
                      <!-- Module -->
                  </td>
              </tr>
              <tr>
                  <td  align="center" valign="top" style="margin: 0; padding: 0;">
                      <!-- Module -->
                  </td>
              </tr>
          </table>
      </td>
  </tr>
</table>

Układ wielokolumnowy

Łączna szerokość kolumn nie może być większa niż zadeklarowana szerokość szablonu (tutaj 600 px). Wiadomość skonstruowana w ten sposób i wysłana przez system GetResponse będzie responsywna. Na urządzeniach mobilnych kolumny zostaną umieszczone jedna pod drugą, w kolejności od lewej do prawej.

<table width="100%" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0">
  <!-- Basic table always with 100% width -->
   <tr>
       <td  align="center" valign="top" style="margin: 0; padding: 0;">
           <table  width="600"  align="center" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0">
           <!-- Table describing the width of your message -->
               <tr>
                   <td  align="center" valign="top" style="margin:0; padding:0;">
                       <table  width="100%"  align="left" border="0" cellpadding="0" cellspacing="0">
                           <tr>
                               <td  width="300"  align="left" valign="top" style="padding: 0; margin: 0;">
                               <!-- definition of the first column and its width -->
                                   <table  width="100%"  align="left" border="0" cellpadding="0" cellspacing="0">
                                       <tr>
                                           <td  align="left" valign="top" style="padding: 0; margin: 0;">
                                               <!-- Module -->
                                           </td>
                                       </tr>
                                       <tr>
                                           <td  align="left" valign="top" style="padding: 0; margin: 0;">
                                               <!-- Module -->
                                           </td>
                                       </tr>
                                       <tr>
                                           <td  align="left" valign="top" style="padding: 0; margin: 0;">
                                               <!-- Module -->
                                           </td>
                                       </tr>
                                   </table>
                               </td>
                               <td  width="300"  align="left" valign="top" style="padding: 0; margin: 0;">
                               <!-- definition of the second column and its width -->
                                   <table  width="100%"  align="left" border="0" cellpadding="0" cellspacing="0">
                                       <tr>
                                           <td  align="left" valign="top" style="padding: 0; margin: 0;">
                                               <!-- Module -->
                                           </td>
                                       </tr>
                                       <tr>
                                           <td  align="left" valign="top" style="padding: 0; margin: 0;">
                                               <!-- Module -->
                                           </td>
                                       </tr>
                                       <tr>
                                           <td  align="left" valign="top" style="padding: 0; margin: 0;">
                                               <!-- Module -->
                                           </td>
                                       </tr>
                                   </table>
                               </td>
                           </tr>
                       </table>
                   </td>
               </tr>
           </table>
       </td>
   </tr>
</table>

Edytor GetResponse

Moduły

Szablony obsługiwane przez edytor GetResponse mają budowę modułową (np. preheader, grafika, tekst, etc.). Moduły te można powielać i umieszczać w dowolnej kolejności tak, aby były zgodne z projektem graficznym Twojej wiadomości

Istnieje kilka zasad dotyczących modułów, których należy się trzymać:

Każdy moduł ma przyporządkowany zestaw narzędzi wyświetlany w trakcie edycji w Kreatorze Wiadomości.
Można je dowolnie pozycjonować w obrębie ustalonego schematu.
Identyfikator modułu zapisujemy zawsze na końcu. Komórki tabeli <td> w modułach mogą mieć edytowane wyłącznie właściwości padding i border.
Wszystkie tabele z width="100%", tworzące moduły powinny mieć zdefiniowany align="center".

Preheader

Moduł zawierający pierwsze zdanie newslettera widoczne obok tematu wiadomości w kliencie pocztowym. Umieszcza się w nim najczęściej link do podglądu szablonu w przeglądarce internetowej.

Formatowanie tekstu powinno być wykonywane wyłącznie za pomocą tagu <span>.

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" data-editable="preheader">
    <tr>
        <td align="center" valign="top" style="margin: 0; padding: 0;">
            <span style="font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 12px">
                View this email <a href="[[view_this_message]]">online</a>
            </span>
        </td>
    </tr>
</table>

Grafika (ang. Image)

Moduł przechowujący grafikę np. przedstawiającą Twój produkt czy logo firmy.

W głównej tabeli tworzącej moduł nie stosujemy width="100%".
Parametr data-mobile-width określa sposób prezentacji grafiki w urządzeniach mobilnych i przyjmuje dwie wartości:
1 → rozciągnij grafikę, wykorzystując całą dostępną szerokość ekranu
0 → zachowaj oryginalną szerokość grafiki w urządzeniu mobilnym

<a href="[[remove]]">Rezygnacja z subskrypcji</a>

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" data-editable="text">
   <tr>
       <td align="left" valign="top" style="margin: 0; padding: 10px;">
           <span style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 14px">
               Scelerisque facilisis a rhoncus sed! Non in duis dictumst natoque <a href="#">nec mus diam</a>
           </span>
       </td>
   </tr>
</table>

Grafika-tekst (ang. Image-Text)

Moduł przechowujący grafikę i tekst jednocześnie. Możesz wykorzystać ten moduł, aby np. zaprezentować swój produkt i stworzyć jego opis.

Formatowanie tekstu wyłącznie w tagu <span>.
W głównej tabeli modułu Image zagnieżdżonego w module Text nie stosujemy width="100%".

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" data-editable="text">
    <tr>
        <td valign="top" align="left" style="padding: 10px; margin: 0;">
            <table border="0" cellpadding="0" cellspacing="0" align="left" width="190" style="margin: 0; padding: 0;" data-mobile-width="1" data-editable="image">
                <tr>
                    <td valign="top" align="left" style="margin: 0px; padding: 10px;">
                        <img src="http://path/to/img.jpg" width="180" height="242" alt="Lorem Ipsum" style="display:block;">
                    </td>
                </tr>
            </table>
            <span style="font-family: Arial, Helvetica, sans-serif; color: #262626; font-size: 14px;">
                Scelerisque facilisis a rhoncus sed! Non in duis dictumst natoque adipiscing, odio nec mus diam?
            </span>
        </td>
    </tr>
</table>

Przycisk (ang. Button)

Moduł służący do prezentacji przycisku wzywającego do działania (ang. Call To Action).

Formatowanie tekstu powinno odbywać się wyłącznie w tagu <a>.
W głównej tabeli modułu nie stosujemy width="100%".
Szerokość buttona ustalamy za pomocą właściwości width definiowanej w pierwszej komórce <td>.

<table border="0" cellpadding="0" cellspacing="0" align="center" data-editable="button">
    <tr>
        <td valign="top" align="center" style="padding: 10px;" bgcolor="#ff0000" width="200">
            <a href="" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 18px; text-decoration:none; font-weight: bold;">
                Lorem ipsum ›
            </a>
        </td>
    </tr>
</table>

Linia (ang. Line)

Moduł służący do prezentacji poziomej linii.

Z uwagi na konieczność wyświetlenia kontrolki Edytora, moduł powinien mieć zdefiniowaną wartość górnego i dolnego paddingu nie mniejszą niż 10px.

<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" data-editable="line">
    <tr>
        <td valign="top" align="center" style="padding: 10px 0px; margin: 0;">
            <div style="height: 1px; line-height: 1px; border-top-width: 5px; border-top-style: solid; border-top-color:#dedede;">
                <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" width="1" height="1" style="display: block;">
            </div>
        </td>
    </tr>
</table>