Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email

Co powinieneś wiedzieć o e-mailu HTML

by
Difficulty:BeginnerLength:LongLanguages:

Polish (Polski) translation by Władysław Łucyszyn (you can also view the original English article)

Email to niesamowite medium. Przechodzi bezpośrednio do skrzynki odbiorczej, a jej zwrot z inwestycji jest szeroko oceniany jako wynoszący 4000%. Jest również nieustannie niezrozumiany i zbyt często robi się źle. Wraz z ostatnią eksplozją smartfonów, częściej czytamy naszą pocztę na naszym iPhonie lub Galaxy, ale niestety wiele e-mail marketingu nie nadąża. Widzę w tym ogromną utraconą okazję, ponieważ dobrze napisany e-mail może być przyjemny, aby otworzyć i bardzo udany.

Kodowanie wiadomości e-mail w formacie HTML może być wyzwaniem

Jeśli już wypróbowałeś swoje strony w projektowaniu i tworzeniu e-maili w HTML, prawdopodobnie już wiesz, że może to być trudne. I nie wyobrażasz sobie tego - jest to dość trudne. Dlatego:

Standardy wiadomości e-mail nie istnieją

 [Będziemy] nadal używać programu Word do tworzenia wiadomości e-mail, ponieważ uważamy, że jest to najlepsze narzędzie do tworzenia e-maili.

Kiedy kodujesz sieć, możesz przynajmniej liczyć na to, że wszystkie najważniejsze przeglądarki (Chrome, Firefox, Internet Explorer, Safari i Opera) starają się przestrzegać standardów internetowych dotyczących renderowania HTML i CSS.

Jeśli chodzi o klientów poczty e-mail, testujesz na ogromnej liczbie starych i nowych programów. Są to zarówno nowe telefony z systemem Android i iOS, jak i Lotus Notes lub Microsoft Office 2007 (które haniebnie renderują twój pięknie stworzony kod HTML za pomocą mechanizmu renderującego HTML Worda. Poprzednie wersje programu Outlook używały przeglądarki do renderowania ich kodu HTML - który jest faktycznie logiczne. Dlaczego warto przełączyć się do edytora tekstu, aby renderować HTML, o który prosisz? Cóż, mówią "ze względów bezpieczeństwa".  Żaden z tych programów nie musi być zgodny z żadnymi standardami. W zasadzie wszyscy to wymyślili. Możesz zobaczyć, jak wygląda obsługa standardów dla niektórych najpopularniejszych klientów poczty e-mail w Projekcie standardów e-mail.

Jeśli to nie jes  wystarczająco złe, połącz je z kolejnym faktem: istnieje około miliona różnych kombinacji sposobów renderowania e-maili na komputerach i urządzeniach mobilnych.

demystifying-email-rendering
demistifying-email-rendering Możliwości renderowania są (prawie) nieograniczone.

Oto lista najpopularniejszych klientów poczty e-mail:

Klienci mobilni:

  •  Android 2.3 i 4.0
  • iPhone 5 iOS 6
  • iPhone 4S iOS 6
  • iPhone 3GS iOS 5
  • iPad 2 iOS 6
  • BlackBerry OS 4 i 5
  • Symbian S60
  • Windows Phone 7.5

Klienci pulpitu:

  • Apple Mail 4, 5, 6
  • Lotus Notes 8.5
  • Lotus Notes 8
  • Thunderbird
  • Windows Live Mail
  • Outlook 2013
  • Outlook 2011 dla komputerów Mac
  • Outlook 2010
  • Outlook 2007
  • Outlook 2003
  • Outlook 2002 / XP
  • Outlook 2000

Klienci poczty internetowej:

  • Klienci poczty internetowej:
  • Poczta AOL (w dowolnej przeglądarce)
  • Gmail (w dowolnej przeglądarce)
  • Outlook.com (w dowolnej przeglądarce)

Wieśniak! (w dowolnej przeglądarce)

To dużo urządzeń! Jeśli jesteś już zaznajomiony z tworzeniem stron internetowych, zapomnij o wszystkim, co wiesz o tym.

Aby to wszystko zsumować, warunkowa stylizacja również nie jest opcją. Jest kilka rzeczy, które możesz zrobić za pomocą warunkowych komentarzy, ale ogranicza się to do kierowania na niektóre wersje Outlooka lub wszystkiego oprócz niektórych wersji Outlooka.

Jeśli jesteś już zaznajomiony z tworzeniem stron internetowych, zapomnij o wszystkim, co wiesz o tym. Jedną z największych przeszkód dla ciebie jest oczekiwanie, że rzeczy będą działać jak "normalny" rozwój sieci. To cię frustruje i powstrzymuje cię.  Najgorszą rzeczą, jaką możesz zrobić, to złościć się, że nie możesz używać DIV lub ten margines nie jest w pełni obsługiwany.  Więc zapomnij o wszystkim, co wiesz o semantycznym HTML i najnowszej specyfikacji CSS. Zaufaj mi, to pomoże.

Jak podejść do swojej pracy

Rzućmy okiem na kilka sugestii dotyczących przepływu pracy w e-mailu. 

Najpierw pracuj strukturalnie 

Budowanie struktury wiadomości e-mail w pierwszej kolejności może pomóc w uniknięciu wielu błędów i problemów w dalszej części utworu.  Nigdy nie buduj wszystkiego, a potem sprawdź - często możesz skończyć ze zbyt wieloma błędami, z którymi możesz sobie poradzić, i wszystkie one mogą wpływać na siebie nawzajem. 

Testuj często 

Pracuj, aż osiągniesz niewielki kamień milowy (na przykład po zakończeniu podstawowej struktury), a następnie uruchom test.  Najlepszym sposobem na sprawdzenie jest użycie lakmusa lub e-maila na kwasie.  Zalecam, aby z jednym z tych przedsiębiorstw otrzymać nieograniczony plan, ponieważ bardzo często można testować.

Bardzo lubię też opuszczać wszystkie granice moich stołów, aby móc zobaczyć, co tworzę, a następnie wyłączyć je na końcu.  Możesz także pokolorować tło niektórych komórek, aby zobaczyć, które sekcje są gdzie. Idealny przepływ pracy to tworzenie szkieletu, testowanie, dodawanie zawartości, testowanie, stylizowanie kolorów i czcionek, testowanie i wreszcie usuwanie granic i testowanie ponownie przed wysłaniem. 

Sprawdzaj często 

Waliduj to przy użyciu Walidatora W3C tak często, jak to tylko możliwe.  Istnieje ogromna liczba opcji, jeśli chodzi o wysyłanie wiadomości e-mail.

Wysyłanie wiadomości e-mail 

Istnieje ogromna liczba opcji, jeśli chodzi o wysyłanie wiadomości e-mail.  Dwie usługi, z których korzystam najbardziej, to MailChimp i Monitor kampanii.  Oferują konkurencyjne ceny i są bardzo łatwe w użyciu.  Istnieje również wiele komercyjnych platform - wszystko zależy od Twoich potrzeb.  Załóż darmowe konto z jednym z nich i mieć majsterkowicz w swoich systemach, aby zobaczyć, który z nich chcesz.  Upewnij się, że korzystasz z przydatnych danych, które obie usługi zbierają na temat Twoich wiadomości e-mail, takich jak godziny otwarcia i wykorzystanie klienta poczty e-mail.  Może to naprawdę pomóc w skoncentrowaniu wysiłków na właściwym obszarze przy następnym wysyłaniu. 

Treść, rozwój i wyniki SPAM

Jeśli chodzi o SPAM; treść, projekt i rozwój idą w parze.  Ważne jest, aby unikać typowych spamerskich taktyk, takich jak używanie zakrętek i wiele wykrzykników w temacie.  Istnieją pewne słowa, które prawdopodobnie będą uruchamiały filtry SPAM (np. "Za darmo" i "inwestuj").  Im bardziej czytelny jest Twój kod, tym mniej prawdopodobne jest, że Twój e-mail zostanie oznaczony jako SPAM, a stosunek obrazów do tekstu również będzie miał wpływ.  Wiadomości e-mail zawierające odręczne zdjęcia, bez tekstu, są bardziej prawdopodobnie oznaczone jako SPAM, podobnie jak e-maile z naprawdę długimi nazwami plików obrazów. 

Świat wyników SPAM jest trudny i ważne jest, aby uruchomić test SPAM poprzez swoje konto testowe z Litmus lub E-mail na Acid przed wysłaniem e-maila, aby upewnić się, że cała twoja ciężka praca nie idzie prosto do folderu Junk. 

Nurkowanie w rozwój

Teraz dla rozwoju technologii e-mailowych. 

Narzędzia handlu

Będziesz potrzebował edytora tekstu, który ci się podoba (używam Sublime Text) i konta testowego z Litmus lub Email na Acid.  Gorąco polecam mieć nieograniczone konto testowe z jedną z tych firm, ponieważ znacznie ułatwi ci to życie.  Jeśli nie zapłacisz miesięcznej opłaty, w efekcie zapłacisz od 3 USD do 5 USD za test, który może dość szybko się sumować.

Zaczynając od dobrej bazy

Myślę, że dobrze jest zacząć od pustej planszy.  Ramy takie jak HTML Email Boilerplate są pełne wspaniałych sztuczek i fragmentów, które możesz implementować kawałek po kawałku. Jednakże, jeśli dopiero zaczynasz, nie polecam używania go jako punktu wyjścia, ponieważ zawiera on wiele elementów, których nie potrzebujesz. Płyty boilowe mogą często utrudniać rozwiązywanie wszelkich problemów, jeśli w pliku znajduje się dużo nieużywanego kodu.

Uwaga: ponieważ używanie wszelkiego rodzaju edytorów może być bardzo niebezpieczne (szczególnie, gdy nadszedł czas na rozwiązywanie problemów), nigdy nie powinieneś używać edytora WYSIWYG ani żadnego edytora, który zapragnie wziąć sformatowany projekt i magicznie zamienić go w prawidłowy HTML do wysyłania wiadomości e-mail. Te rzeczy nigdy nie działają. 

! DOCTYPE

Może się to wydawać technicznym szczegółem na początek, ale do rozpoczęcia pracy potrzebny jest pusty szablon, a ten szablon wymaga Doctype.  Doctype to w istocie linia kodu, która informuje program o tym, jakich znaczników HTML należy się spodziewać, oraz o jakich zestawach reguł przestrzegają HTML i CSS.  Dość kilku klientów usuwa twój Doctype, a niektórzy nawet stosują własne.  Wielu klientów honoruje twój typ dokumentu i może to znacznie ułatwić, jeśli możesz ciągle sprawdzać poprawność w stosunku do dokumentu Doctype.

Użycie typowego dokumentu XHTML ma na ogół najmniej luk i niespójności między dokumentami.  Używam XHTML 1.0 Transitional, ponieważ okazało się, że jest to najbardziej niezawodny doctype w moim doświadczeniu.  W poniższym samouczku, podczas którego skonstruujemy kompletny szablon wiadomości e-mail w formacie HTML, użyjemy następującego kodu, aby rozpocząć nasz dokument:

Metatag Content-Type służy do informowania docelowego mechanizmu renderowania, jak przetwarzać tekst i znaki specjalne.  W rzeczywistości, musisz zakodować wszystkie swoje znaki specjalne w każdym razie (np. & Staje się i dla ampersand), aby były bezpieczne, ale warto zachować tę linię w każdym razie. 

Metatag z widocznym oknem informuje urządzenie, aby ustawić widoczny obszar na szerokość ekranu urządzenia.  Ustawia także skalę początkową na "normalną", która nie jest ani powiększana, ani pomniejszana.  Jeśli tego nie określisz, wiele smartfonów może przeskalować zawartość, tak aby zawartość mieściła się w widocznym obszarze, ale nie na jej dopełnieniu ani marginesach.  Może to spowodować, że tekst i obrazy zaczną się kłuć w stronę krawędzi ekranu.

Na koniec należy zawsze wpisywać znaczący tytuł, ponieważ widzą go ludzie przeglądający pocztę e-mail w przeglądarce lub udostępniają je znajomym. 

Email to wszystko o zagnieżdżaniu tabel

Co więcej, musisz używać wielu i wielu tabel zagnieżdżonych, ponieważ ani atrybuty colspan, ani rowspan nie są poprawnie obsługiwane.  Ponadto należy użyć mnóstwo tabele zagnieżdżone, ponieważ atrybuty colspan ani rowspan są prawidłowo obsługiwane.

demystifying-email-nesting

Akapity lub komórki? 

Ponownie, ze względu na brak obsługi standardów, nie jest dobrym pomysłem korzystanie ze standardowych tagów, takich jak h1, h2, h3 lub p. Uważam, że mogą one być naprawdę niespójne dla klientów poczty e-mail i mogą wywoływać dość duże bóle głowy.

Najlepiej jest umieścić każdy blok tekstu we własnej komórce i zastosować do tej komórki styl liniowy, na przykład: 

Wewnętrzne style lub arkusze stylów?

Ta jest bardziej osobistym wyborem.  Wolę zachować wszystkie moje style inline (tj. W obrębie samych znaczników HTML), ponieważ lubię dokładnie wiedzieć, gdzie wszystko jest i co wpływa na co.  Możesz kodować za pomocą stylów, a następnie przeciągać je wszystkie w linii na końcu (Monitor kampanii i MailChimp może to zrobić automatycznie, możesz również użyć Premailera lub coś podobnego), ale powodem, dla którego nie podoba mi się to, jest fakt, że wiesz Twój kod, przeprowadź go przez inliner, a następnie Twój kod może stać się nierozpoznawalny.  Uważam, że to utrudnia rozwiązywanie problemów. Mówiąc to, jeśli to jest sposób, w jaki chcesz pracować, to jest w porządku; nie ma żadnego technicznego powodu, dla którego nie powinieneś tego robić.

Nie zapomnij: nie można zastosować wielu klas do elementów w wiadomościach e-mail w formacie HTML, ponieważ nie jest to obsługiwane.  Każdy element może mieć maksymalnie jedną klasę. 

Nie zapomnij także: nie możesz używać skrótu do takich rzeczy, jak rozmiar czcionki (np. Style = "font: 8px / 14px Arial, sans-serif;"), ponieważ nie jest on obsługiwany. 

Nazwy zdjęć i wyniki SPAM 

Podczas zapisywania zdjęć pamiętaj, że dobrze jest nadawać zdjęciom nazwy, które są krótkie i znaczące, ponieważ poprawią Twój wynik spamu.  Nazwy takie jak "campaign_054_design_0x0_v6_email-link.gif" mogą mieć znacznie wyższy wynik spamu niż "email.gif". 

Rozmiar obrazu

Jest to również świetny pomysł, aby zachować cały adres e-mail tak mały, jak to tylko możliwe: poniżej 100 kb jest idealny, ale nie zawsze jest to możliwe, poniżej 250 kb jest dość standardowy.  Użyj aplikacji kompresującej, takiej jak JPEGmini lub tinyPNG, aby wyciąć wszystkie zdjęcia w jak największym rozmiarze przed wysłaniem.  Wolniejsze czasy ładowania, zwłaszcza na urządzeniach mobilnych, mogą spowodować lub zepsuć pocztę, jeśli ogólny rozmiar pliku jest zbyt duży. 

Inni Gotchowie

Nie zostawiaj niczego do klienta poczty e-mail.  Określ wszystkie swoje szerokości, ponieważ w przeciwnym razie możesz otrzymać nieoczekiwane wyniki.  Dla głównych elementów kontenera zawsze ustaw rozmiar w pikselach. Możesz wtedy użyć procentów w swoim elemencie zawierającym, jeśli chcesz.

Wniosek

Podczas projektowania i tworzenia wiadomości e-mail w formacie HTML należy wziąć pod uwagę wiele aspektów, z których większość obejmuje standardy "nieuczenia się", których od lat zachęcano do praktykowania projektowania stron internetowych. Jednak ten samouczek powinien dać ci solidną podstawę do pracy, a teraz możesz przejść do rzeczywistego procesu budowania.  Dalej!

Przydatne linki

Podczas tego tutoriala odwoływałem się do kilku rzeczy - więc tutaj znowu są, wszystko w jednym miejscu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.