Nawet dla doświadczonych projektantów stworzenie dobrego newslettera nie jest łatwe. Wygląd wiadomości e-mail powinien być atrakcyjny oraz poprawnie wyświetlany we wszystkich  klientach pocztowych. Często zdarza się że style CSS nie działają obrazki się nie pokazują itp.

Poniżej kilka zasad, które pomogą stworzyć dobry newsletter.

  1. Należy używać tabel. Klienty pocztowe żyją przeszłością, tak więc e-maile muszą być zbudowane na tabelach.
    <table>
      <tr>
        <td>Header 1</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet.</td>
      </tr>
      <tr>
        <td>Sign off and footer</td>
      </tr>
    </table>
    
  2. Sprawdź wiadomość we wszystkich przeglądarkach internetowych, aby mieć pewność, że każdy użytkownik, który otrzyma twój newsletter będzie mógł go poprawnie wyświetlić.
  3. Używaj liniowych styli CSS. Klienty pocztowe usuwają classy CSS więc nie należy ich stosować. Właściwości  takie jak font-type i font-size mogą być używane w tagach <table>, ale indywidualne style muszą być umieszczone w <td> lub innych tagach.
  4. Używaj atrybutu ALT dla obrazków. Jest to bardzo ważne. Ostylowanie <td> w których są obrazki kolorem, rozmiarem i krojem czcionki sprawi, że e-mail będzie dobrze wyglądał również z wyłączonymi obrazkami.
  5. Nie ustawiaj wysokości i szerokości dla obrazków. Pozwoli to uniknąć białej, pustej przestrzeni w wiadomości e-mail.
  6. Opakuj e-mail w tabelę o szerokości 100%. Klienty pocztowe pobierają kod HTML bez tagu <body>. Aby użyć np.  background color należy stworzyć tabelę o szerokości 100%, która będzie udawała body.
  7. Maksymalnie 600px szerokości. Wielu ludzi nie otwiera e-maila, lecz ogldąda go w panelu podglądu. Najmniejsze z nich mają około 600px szerokości, tak wieć jeśli chcesz aby cała wiadomość była widoczna nie przekraczaj tej szerokości.
  8. Styluj linki. Nie zapominaj o ostylowaniu linków, ponieważ zostaną one nadpisane standardowym stylem klienta pocztowego, najczęściej
    <a href="#" style="color:#000000; text-decoration:none;">Link</a>
  9. Staraj się nie zagnieżdżać tabel. Oprócz tabeli o szerokości 100%, nie zagnieżdżaj tabel. Pozwoli o łatwiej kontrolować e-mail.
    <table>
      <tr>
        <td>Lorem ipsum dolor sit amet.</td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Lorem ipsum dolor sit amet.</td>
      </tr>
    </table>
    
  10. Unikaj obrazkowego tła. Stosuj jednolite kolory, a nie obrazki jako tło swoich tekstów. Czyni to wiadomość e-mail czytajniejszą.
  11. Ramki nie działają. Aby uzyskać efekt odzielenia od siebie treść użyj dwóch dodatkowych <td> z ustawionym kolorem tła.
    <td width="600" style="border-right:1px solid #000000; border-left:1px solid #000000;">
        Lorem ipsum
    </td>
    

    zamiast

    	<td width="1"></td>
    	<td width="598">Lorem ipsum dolor sit amet.</td>
    	<td width="1"></td>
    
  12. Enkoduj wszystkie znaki. Podczas przeglądania wiadomości e-mail w różnych klientach pocztowych, nie możemy zagwarantować właściwego kodowania, więc enkodowanie znaków pozwala nam mieć pewność, że wszystkie znaki są wyświetlane tak, jak powinny.
    "Some sample code &#45; with special characters"