{"id":787,"date":"2025-08-11T14:31:34","date_gmt":"2025-08-11T14:31:34","guid":{"rendered":"https:\/\/rs.quarticon.com\/dobre-praktyki-przy-projektowaniu-wiadomosci-e-mail-w-formacie-html\/"},"modified":"2025-08-12T15:38:15","modified_gmt":"2025-08-12T15:38:15","slug":"dobre-praktyki-przy-projektowaniu-wiadomosci-e-mail-w-formacie-html","status":"publish","type":"post","link":"https:\/\/help.quarticon.com\/pl\/dobre-praktyki-przy-projektowaniu-wiadomosci-e-mail-w-formacie-html\/","title":{"rendered":"Dobre praktyki przy projektowaniu wiadomo\u015bci e-mail w formacie HTML"},"content":{"rendered":"
\n
\n

Platforma CDXP od Quarticon umo\u017cliwia Ci tworzenie wiadomo\u015bci e-mail w ramach kampanii lub automatyzacji w formacie standardowym (czyli za pomoc\u0105 kreatora drag&drop<\/a>) lub HTML. W tym artykule dostarczamy Ci gar\u015b\u0107 dobrych praktyk, kt\u00f3re u\u0142atwi\u0105 Ci tworzenie wiadomo\u015bci HTML i pozwol\u0105 unikn\u0105\u0107 problem\u00f3w.<\/b><\/p>\n<\/div>\n

\n\n\n\n
\n
\n

Pami\u0119taj, \u017ce projektowanie wiadomo\u015bci e-mail to nie to samo, co projektowanie stron internetowych. Je\u015bli zale\u017cy Ci na standardach W3C lub te\u017c korzystasz z najnowszych styl\u00f3w CSS, to c\u00f3\u017c… w tym wypadku mo\u017cesz o tym wszystkim zapomnie\u0107. W zasadzie cofnij si\u0119 w czasie i pomy\u015bl, \u017ce mamy rok 2000 \ud83d\ude42<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

\n<\/div>\n
\n

Uk\u0142ad wiadomo\u015bci<\/h2>\n<\/div>\n
\n

Szeroko\u015b\u0107 projektu powinna wynosi\u0107 650 pikseli lub mniej<\/h3>\n<\/div>\n
\n

Og\u00f3lna zasada dotycz\u0105ca rozmiaru wiadomo\u015bci e-mail to zachowanie szeroko\u015bci 650 pikseli lub mniejszej. Zastosowanie si\u0119 do tej zasady pozwala na prawid\u0142owe wy\u015bwietlanie wiadomo\u015bci e-mail w wi\u0119kszo\u015bci klient\u00f3w poczty e-mail.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Najlepszy uk\u0142ad to najprostszy uk\u0142ad<\/h3>\n<\/div>\n
\n

W przypadku projektowania e-maili HTML prostota to najlepszy doradca. Je\u015bli Tw\u00f3j projekt b\u0119dzie zbyt skomplikowany, napotkasz wiele problem\u00f3w podczas testowania i debugowania klienta poczty e-mail. Je\u015bli jednak chcesz zaryzykowa\u0107, przygotuj si\u0119 na korzystanie z wielu tabel i wygospodaruj odpowiedni\u0105 ilo\u015b\u0107 czasu na testowanie.<\/p>\n<\/div>\n

\n<\/div>\n
\n

U\u017cyj podstawowych tabel HTML<\/h3>\n<\/div>\n
\n

Aby stworzy\u0107 og\u00f3lny uk\u0142ad wiadomo\u015bci, u\u017cyj standardowych tabel HTML. Techniki p\u0142ywaj\u0105ce i uk\u0142adowe CSS nie b\u0119d\u0105 poprawnie renderowane we wszystkich klientach poczty e-mail.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Uwa\u017caj na padding kom\u00f3rek tabeli<\/h3>\n<\/div>\n
\n

Program Outlook pobierze padding z dowolnej kom\u00f3rki w rz\u0119dzie i zastosuje je do wszystkich kom\u00f3rek w rz\u0119dzie. Mo\u017ce to spowodowa\u0107 zmiany wizualne, kt\u00f3rych nie chcesz. Spr\u00f3buj zastosowa\u0107 ten sam padding dla wszystkich kom\u00f3rek w rz\u0119dzie lub umie\u015b\u0107 wewn\u0119trzny div lub tabel\u0119 (z paddingiem) w kom\u00f3rce, w kt\u00f3rej chcesz mie\u0107 padding.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Unikaj u\u017cywania colspans=\u201d\u201d w swoich tabelach<\/h3>\n<\/div>\n
\n

Niekt\u00f3re programy poczty e-mail nie obs\u0142uguj\u0105 ich w pe\u0142ni, a inne, przy u\u017cyciu colspans, mog\u0105 mie\u0107 problemy z wy\u015bwietlaniem innych kom\u00f3rek.<\/p>\n<\/div>\n

\n<\/div>\n
\n<\/div>\n
\n

CSS<\/h2>\n<\/div>\n
\n

Nie u\u017cywaj zewn\u0119trznych arkuszy styl\u00f3w<\/h3>\n<\/div>\n
\n

Zewn\u0119trzne arkusze styl\u00f3w nie b\u0119d\u0105 dzia\u0142a\u0107 w wielu klientach poczty e-mail \u2013 uwzgl\u0119dnij wszystkie CSS za pomoc\u0105 wbudowanego CSS w swoim HTML.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Nie u\u017cywaj klas CSS, a wbudowanego CSS<\/h3>\n<\/div>\n
\n

Wiele klient\u00f3w poczty e-mail nie obs\u0142uguje klas CSS. Zamiast nich, u\u017cyj wbudowanego CSS, np. <div style=’color:#cccccc;’>tre\u015b\u0107<\/div><\/i> zamiast <div class=’cssclassa’>tre\u015b\u0107<\/div>.<\/i><\/p>\n<\/div>\n

\n<\/div>\n
\n

Nie u\u017cywaj skr\u00f3t\u00f3w CSS<\/h3>\n<\/div>\n
\n

CSS pozwala na ustawianie w\u0142a\u015bciwo\u015bci w grupach. Przyk\u0142adowo, zamiast grupowa\u0107 takie atrybuty, jak style=’font: 12px, Arial’<\/i> ustaw ka\u017cd\u0105 cz\u0119\u015b\u0107 indywidualnie tj. style=’font-size:12px; font-family:Arial’.<\/i><\/p>\n<\/div>\n

\n<\/div>\n
\n

Unikaj u\u017cywania opcji CSS float lub position<\/h3>\n<\/div>\n
\n

Niekt\u00f3rzy klienci poczty elektronicznej zignoruj\u0105 zar\u00f3wno opcje CSS float jak i position. Zamiast tego spr\u00f3buj u\u017cy\u0107 tabel.<\/p>\n<\/div>\n

\n<\/div>\n
\n<\/div>\n
\n

Obrazy i wideo<\/h2>\n<\/div>\n
\n

U\u017cywaj adres\u00f3w URL \u017ar\u00f3d\u0142a obrazu<\/h3>\n<\/div>\n
\n

Zamiast do\u0142\u0105cza\u0107 obrazek taki jak (<img src=’img.gif’>)<\/i> do\u0142\u0105cz adres URL do pliku (<img src=’http:\/\/site.com\/img.gif<\/a>’>)<\/i>.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Zawsze u\u017cywaj atrybut\u00f3w alt (<img src=’http:\/\/site.com\/img.gif<\/a>’ alt=’Firma ABC’>)<\/i> <\/h3>\n<\/div>\n
\n

Wi\u0119kszo\u015b\u0107 klient\u00f3w poczty elektronicznej domy\u015blnie wy\u0142\u0105cza obrazki. Je\u015bli nie dodasz atrybut\u00f3w alt, Twoi odbiorcy w miejscu obrazka zobacz\u0105 tylko puste pole. Dzi\u0119ki atrybutom alt zobacz\u0105 opis obrazka, czyli tekst, kt\u00f3ry zosta\u0142 w nim umieszczony.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Nie osadzaj film\u00f3w i\/lub flash<\/h3>\n<\/div>\n
\n

Nie dodawaj bezpo\u015brednio do wiadomo\u015bci e-mail film\u00f3w wideo i\/lub flash. Wielu klent\u00f3w poczty e-mail nie obs\u0142uguje takiego kodu, a programy wykrywaj\u0105ce spam i wirusy oznacz\u0105 Twoj\u0105 wiadomo\u015b\u0107 jako niepo\u017c\u0105dan\u0105. Rozwi\u0105zaniem w tej sytuacji b\u0119dzie dodanie samej ok\u0142adki filmu (np. zrzut ekranu), a nast\u0119pnie dodanie do niego linka, kt\u00f3ry po klikni\u0119ciu przekieruje odbiorc\u0119 do filmu, otwieraj\u0105c go w nowym oknie w przegl\u0105darce. <\/p>\n<\/div>\n

\n<\/div>\n
\n

Animowane pliki GIF nie s\u0105 w pe\u0142ni obs\u0142ugiwane<\/h3>\n<\/div>\n
\n

Chocia\u017c dodawanie GIF\u00f3w jest bardzo przydatne w e-mail marketingu, przy tworzeniu wiadomo\u015bci HTML odradzamy t\u0119 opcj\u0119. Podczas gdy wi\u0119kszo\u015b\u0107 klient\u00f3w poczty e-mail obs\u0142uguje animowane pliki GIF, program Outlook 2007 tego nie robi. Programy poczty e-mail, kt\u00f3re nie obs\u0142uguj\u0105 animowanych plik\u00f3w GIF, prawdopodobnie poka\u017c\u0105 tylko pierwsz\u0105 klatk\u0119 sekwencji animacji.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Post\u0119puj ostro\u017cnie z \u0142\u0105czonymi obrazkami<\/h3>\n<\/div>\n
\n

Je\u015bli u\u017cywasz wi\u0119kszego obrazu, kt\u00f3ry jest \u0142\u0105czony i umieszczony w kodzie HTML za pomoc\u0105 kom\u00f3rek tabeli lub tag\u00f3w img tu\u017c obok siebie, musisz dok\u0142adnie przetestowa\u0107 jego wy\u015bwietlanie. Niekt\u00f3re programy poczty e-mail mog\u0105 dodawa\u0107 dodatkowe odst\u0119py mi\u0119dzy obrazami i powodowa\u0107, \u017ce wiadomo\u015b\u0107 b\u0119dzie \u017ale wygl\u0105da\u0107.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Unikaj u\u017cywania obraz\u00f3w w celu poprawy uk\u0142adu wiadomo\u015bci<\/h3>\n<\/div>\n
\n

Niekt\u00f3rzy u\u017cytkownicy stosuj\u0105 obrazy 1- lub 2-pikselowe, aby wyr\u00f3wna\u0107 elementy w uk\u0142adzie wiadomo\u015bci. Istnieje jednak ryzyko, \u017ce programy\/filtry poczty e-mail uznaj\u0105, \u017ce jest to obraz, kt\u00f3ry s\u0142u\u017cy \u015bledzeniu odczytu\/otwarcia wiadomo\u015bci i, w efekcie, zablokuj\u0105 Twoj\u0105 wiadomo\u015b\u0107.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Przetestuj sw\u00f3j e-mail z wy\u0142\u0105czonymi obrazami<\/h3>\n<\/div>\n
\n

Poniewa\u017c wi\u0119kszo\u015b\u0107 klient\u00f3w poczty e-mail domy\u015blnie wy\u015bwietla wiadomo\u015bci e-mail z wy\u0142\u0105czonymi obrazami, bardzo wa\u017cne jest sprawdzenie, jak wygl\u0105da wiadomo\u015b\u0107 e-mail w\u0142a\u015bnie z opcj\u0105 wy\u0142\u0105czonych obraz\u00f3w.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Uwa\u017caj na rozmiar plik\u00f3w<\/h3>\n<\/div>\n
\n

Podobnie jak w przypadku projektowania stron internetowych, zwr\u00f3\u0107 uwag\u0119 na rozmiary plik\u00f3w graficznych w swoich e-mailach. Staraj si\u0119 utrzymywa\u0107 je na niskim poziomie, aby zapewni\u0107 swoim subskrybentom szybkie pobieranie tre\u015bci.<\/p>\n<\/div>\n

\n<\/div>\n
\n<\/div>\n
\n

T\u0142o<\/h2>\n<\/div>\n
\n

Obrazki w tle nie s\u0105 w pe\u0142ni obs\u0142ugiwane<\/h3>\n<\/div>\n
\n

Je\u015bli u\u017cywasz obrazk\u00f3w w tle pami\u0119taj, \u017ce niekt\u00f3re programy poczty e-mail nie b\u0119d\u0105 ich wy\u015bwietla\u0107. Je\u015bli jednak nadal chcesz ich u\u017cy\u0107, skorzystaj z opcji t\u0142a HTML zamiast CSS.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Kolor t\u0142a w ca\u0142ym szablonie wiadomo\u015bci e-mail<\/h3>\n<\/div>\n
\n

Wiele program\u00f3w poczty e-mail (takich jak Gmail) nie pokazuje koloru t\u0142a, kt\u00f3ry ustawiasz dla g\u0142\u00f3wnego widoku (tag <body><\/i>). Je\u015bli wi\u0119c ustawiasz kolor t\u0142a w tagu <body><\/i> u\u017cyj tak\u017ce div wrapping<\/i> z kolorem t\u0142a, kt\u00f3ry otoczy ca\u0142\u0105 zawarto\u015b\u0107 wiadomo\u015bci.<\/p>\n<\/div>\n

\n<\/div>\n
\n<\/div>\n
\n

Inne<\/h2>\n<\/div>\n
\n

Nie umieszczaj niczego powy\u017cej otwieraj\u0105cego tagu <body><\/i>
\n<\/h3>\n<\/div>\n
\n

Wszystko, co umie\u015bcisz nad tagiem <body><\/i>, prawdopodobnie b\u0119dzie usuni\u0119te i nie zostanie wy\u015bwietlone.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Nie do\u0142\u0105czaj javascript<\/h3>\n<\/div>\n
\n

Javascript prawdopodobnie zosta\u0142by usuni\u0119ty w wi\u0119kszo\u015bci klient\u00f3w poczty e-mail, a niekt\u00f3re filtry spamu mog\u0142yby wykry\u0107 go jako kod z\u0142o\u015bliwy i niepo\u017c\u0105dany.<\/p>\n<\/div>\n

\n<\/div>\n
\n

Unikaj Microsoft Office<\/h3>\n<\/div>\n
\n

Wygenerowany kod HTML prawie zawsze oznacza problemy. Dodatkowo, gdy kopiujesz i wklejasz kod z pakietu Office wkleisz jednocze\u015bnie jego formatowanie, a to spowoduje problemy z dalszym projektowaniem wiadomo\u015bci.<\/p>\n<\/div>\n

\n<\/div>\n
\n
\n<\/div>\n
\n

Zobacz tak\u017ce:<\/b><\/p>\n<\/div>\n

\n