Litmus Builder Essentials: Twórz w naszym kreatorze poczty e-mail

W ostatnim poście z naszej serii Litmus Builder Essentials omówiliśmy interfejs Buildera, poznając wszystkie różne sekcje Buildera, niektóre opcje menu i ustawień oraz czym dokładnie są te małe ikony w prawym górnym rogu . Teraz, gdy już wiesz, co dzieje się w Builderze, nadszedł czas, aby zagłębić się w niektóre funkcje, dzięki którym tworzenie wiadomości e-mail w Builderze jest wspaniałym doświadczeniem.

W drugiej części Litmus Builder Essentials przyjrzymy się dokładniej kodowi i edytorom wizualnym Buildera, niektórym funkcjom zaprojektowanym specjalnie do tworzenia wiadomości e-mail oraz sposobom korzystania z Buildera, aby przyspieszyć przepływ pracy programistycznej.

Poznaj naszych redaktorów e-maili

Litmus Builder jest podzielony na trzy główne sekcje: edytor kodu, edytor wizualny i panel podglądu.

W większości przypadków główna praca w programie Builder będzie wykonywana w kodzie lub edytorze wizualnym.

Edytor kodu

Edytor kodu to miejsce, w którym piszesz kod HTML i CSS do wiadomości e-mail.

O ile nie zacząłeś od nowego szablonu lub nie skopiuj i wklej własnego kodu do projektu Builder, edytor kodu będzie domyślnie pusty.

Jeśli masz doświadczenie w kodowaniu wiadomości e-mail, możesz zacząć pisać kod bezpośrednio w edytorze — lub skopiować i wkleić wiadomość e-mail z pliku lokalnego lub wybranego edytora tekstu.

Jeśli zaczynasz nowy pusty dokument, ale później zdecydujesz, że potrzebujesz szablonu, na którym chcesz budować, przejdź do paska menu i kliknij Wstaw , a następnie . Spowoduje to otwarcie Galerii szablonów, w której możesz wybrać jeden z własnych zapisanych szablonów lub z biblioteki eleganckich, wstępnie przetestowanych szablonów do różnych zastosowań, które możesz dostosować do następnej kampanii. Wybierz nowy szablon, a Builder załaduje ten szablon — obrazy i wszystko — do edytora kodu.

Edytor wizualny

Edytor wizualny pozwala zarówno programistom, jak i nie-programistom, szybko i łatwo tworzyć e-maile z marką przy użyciu szablonów i modułów. Tworzenie ich dla edytora wizualnego działa z dowolnym kodem HTML — i nie wymaga długiej konfiguracji ani skomplikowanej, zastrzeżonej składni do nauki. Nie dodaje też niczego do twojego kodu.

Aby rozpocząć, otwórz istniejącą wiadomość e-mail na swoim koncie Litmus lub rozpocznij nową wiadomość, korzystając z szablonu. Możesz to zrobić podczas tworzenia nowego e-maila lub przechodząc do istniejącego e-maila i klikając przycisk Szablony w menu Edytor wizualny.

Następnie wystarczy wybrać element z wiadomości e-mail w okienku podglądu do edycji w Edytorze wizualnym po lewej stronie.

Aby uzyskać więcej informacji na temat tworzenia wiadomości e-mail za pomocą edytora wizualnego, zapoznaj się z tym wpisem na blogu: Twórz więcej wysokiej jakości wiadomości e-mail, szybciej dzięki edytorowi wizualnemu Litmusa.

A jeśli jesteś klientem Litmus Enterprise, możesz również elastycznie przeciągać i upuszczać moduły lub bloki treści, aby każdy e-mail był inny bez poświęcania jakości.

Widoki kodowania: HTML i CSS

Builder umożliwia edycję zarówno w HTML, jak i CSS. Domyślnie edytor kodu w programie Builder otwiera dokument w widoku HTML , ponieważ jest to znane większości projektantów i programistów poczty e-mail. W widoku HTML możesz pisać HTML i CSS, aby zbudować swoją pocztę e-mail. Wszystkie zmiany wprowadzone w kodzie są wyświetlane po prawej stronie w okienku podglądu w czasie rzeczywistym.

Edytor kodu Buildera ma jednak drugi widok. Widok CSS umożliwia rozdzielenie kodu HTML i CSS, dzięki czemu można nad nimi pracować osobno.

Chociaż oddzielenie HTML i CSS znacznie ułatwia proces kodowania, wiele klientów poczty e-mail nie obsługuje zewnętrznych arkuszy stylów — ani nawet CSS — w nagłówku wiadomości e-mail. Zamiast tego wymagają, aby style były stosowane bezpośrednio do elementów HTML w każdym wierszu HTML.

Ręczne wstawianie kodu CSS jest uciążliwym procesem: za każdym razem, gdy wprowadzasz zmianę w tagu stylu, musisz zaktualizować go w każdym wierszu kodu. Litmus Builder automatyzuje ten krok za Ciebie. Utrzymuj kod HTML i CSS oddzielnie podczas tworzenia wiadomości e-mail i pozostaw proces wstawiania kodu CSS do automatycznego narzędzia do tworzenia wstawek CSS w Kreatorze.

Możesz włączyć wstawianie CSS w Konstruktorze w menu Ustawienia dostępnym za pomocą ikony koła zębatego w panelu edytora kodu. Po włączeniu Kreator automatycznie doda kod CSS do dokumentu HTML — zarówno podczas projektowania, jak i testowania kampanii za pomocą podglądu e-maili.

Po zakończeniu kampanii e-mailowej Builder skompiluje kod HTML i CSS w celu skopiowania i wklejenia do ESP. Pobierz skompilowany kod, klikając Eksportuj , a następnie wybierając Kopiuj HTML lub Pobierz HTML, co spowoduje pobranie e-maila i wszystkich przesłanych zasobów bezpośrednio na Twój komputer.

Podczas kopiowania kodu HTML zobaczysz skompilowany rozmiar wiadomości e-mail. Dzięki temu uzyskasz wgląd w to, jaki wpływ na całkowitą wagę znaczników mają podszablony, wstawianie CSS i inne funkcje. Skorzystaj z tej opcji, aby sprawdzić, czy waga wiadomości e-mail może wpłynąć na szybkość ładowania — i upewnij się, że nie przekraczasz limitu wyświetlania Gmaila wynoszącego 102 KB, aby zapobiec przycinaniu lub przycinaniu wiadomości e-mail.

Podczas gdy poleganie na inlinerze CSS Buildera jest jednym ze sposobów na przyspieszenie tworzenia wiadomości e-mail, Builder ma w zanadrzu kilka dodatkowych sztuczek.

Możesz pamiętać z części 1, że menu Ustawienia ma dwa inne przełączniki oprócz wbudowanego CSS: Autouzupełnianie i Zamknij tagi . Te dwie opcje, gdy są włączone, pozwalają szybciej kodować bardziej niezawodne kampanie.

Autouzupełnianie umożliwia przeglądanie listy opcji elementów HTML podczas pisania w edytorze kodu. Może to być pomocne w sytuacjach, gdy zapomnisz o określonym elemencie HTML. Po prostu zacznij pisać, a Builder pokaże Ci listę elementów, które możesz wybrać do wstawienia do kodu.

Masz dość ciągłego pisania tych samych wierszy kodu? Przyspiesz swój proces programowania, dodając obsługę autouzupełniania dla istniejących wcześniej kodów CSS i obrazów. W przypadku dowolnego istniejącego kodu CSS (osadzonego w bloku stylów, na karcie CSS lub w częściach) wartości będą dostępne jako opcja autouzupełniania podczas korzystania z atrybutów class lub id.

Dodatkowo, wszystkie obrazy przesłane do Builder będą miały nazwę pliku obrazu dostępną jako opcja autouzupełniania dla atrybutu źródłowego, wraz z jego wymiarami szerokość/wysokość dla atrybutów szerokość/wysokość i właściwości CSS.

Opcja Zamknij znaczniki automatycznie zamyka znaczniki HTML podczas kodowania. Brakujące zamykające tagi HTML mogą powodować różne problemy w wiadomościach e-mail, więc Zamknij tagi to dobry sposób, aby upewnić się, że nie napotkasz żadnych problemów z renderowaniem z powodu nieuczciwego, otwartego tagu.

Jedną z moich ulubionych funkcji edytora kodu Buildera jest jego wbudowana integracja z Emmetem . Emmet umożliwia wpisywanie skrótów, które są następnie rozwijane do pełnych fragmentów kodu. Chociaż Emmet został pierwotnie zbudowany jako wtyczka do edytorów tekstu na komputery stacjonarne, wbudowaliśmy go bezpośrednio do edytora kodu, co pozwala wykorzystać moc Emmeta bez konieczności samodzielnego pobierania lub instalowania czegokolwiek.

Przygotowaliśmy krótki przewodnik, który pomoże Ci rozpocząć korzystanie z Emmeta we własnych e-mailach.

Dostępnych jest jeszcze kilka funkcji Kreatora, które umożliwiają przyspieszenie pracy programistycznej, w tym korzystanie z fragmentów i części oraz Menedżera śledzenia . Przyjrzymy się im dokładniej w naszym ostatnim poście z serii Litmus Builder Essentials.

Przetestuj swoje e-maile

Po rozpoczęciu tworzenia wiadomości e-mail w kodzie lub edytorze wizualnym Buildera zechcesz wyświetlić podgląd i przetestować ją w rzeczywistych klientach poczty e-mail. Właśnie tam pojawia się okienko podglądu. Okienko podglądu programu Builder umożliwia podgląd, nawigację i testowanie kampanii w ponad 90 różnych klientach poczty e-mail, urządzeniach i przeglądarkach za pomocą podglądu poczty e-mail.

Domyślnie okienko podglądu ładuje widok przeglądarki wiadomości e-mail. Ten widok używa mechanizmu renderowania przeglądarki internetowej do wyświetlania wiadomości e-mail i umożliwia szybkie wyświetlanie zmian w wiadomości e-mail podczas tworzenia. Możesz nawet testować takie rzeczy, jak linki i interaktywność w wiadomości e-mail.

Widok przeglądarki w edytorze kodu umożliwia również korzystanie z niektórych narzędzi na pasku narzędzi panelu podglądu.

Na pasku narzędzi okienka podglądu zobaczysz ikonę koła zębatego. Po kliknięciu koła zębatego pojawia się menu rozwijane z następującymi opcjami:

• Popout: otwiera cały panel podglądu w osobnym oknie, co jest przydatne, jeśli chcesz zobaczyć więcej kodu w edytorze kodu lub skorzystać z wielu ekranów.
• Przełącz obrazy: włączaj i wyłączaj obrazy w wiadomości e-mail, co jest przydatne do symulowania klientów poczty e-mail, które domyślnie blokują obrazy. Potraktuj to jako przyjazne przypomnienie, aby używać tekstu ALT dla wszelkich obrazów, których brak może odwrócić uwagę od Twojej wiadomości.
• Przełącz linie siatki: Przełącza niebieską siatkę wokół wszystkich poszczególnych elementów wiadomości e-mail, umożliwiając ich kliknięcie i przejście bezpośrednio do tego fragmentu kodu w edytorze kodu. Oto patrzymy na was, użytkownicy Dreamweaver.
• Urządzenia mobilne: szybko zmienia szerokość okienka podglądu, aby naśladować węższy rozmiar ekranu urządzenia mobilnego.
• Pulpit: szybko zmienia szerokość okienka podglądu, aby naśladować szerszy rozmiar ekranu urządzenia stacjonarnego.

Potrzebujesz wymiarów elementów w e-mailu? Łatwo wyświetlaj wymiary określonych elementów, takich jak komórka tabeli lub obraz, za pomocą prostego najechania kursorem.

Drugi widok w okienku podglądu to Podglądy wiadomości e-mail . Ten widok pozwala zobaczyć, jak wygląda Twoja kampania e-mailowa w ponad 90 różnych klientach poczty e-mail, urządzeniach i przeglądarkach. Kliknij Podglądy e-mail na pasku narzędzi okienka podglądu, aby uzyskać dostęp.

W widoku Podglądy wiadomości e-mail zobaczysz, że ikony na pasku narzędzi okienka podglądu zostały zastąpione przyciskiem Wybierz klientów . Spowoduje to otwarcie modu, w którym możesz wybrać dokładnie klientów poczty e-mail, których chcesz przetestować. Zwróć uwagę, że istnieją opcje wyboru wszystkich klientów w oparciu o platformę (komputer stacjonarny, Internet, tablet/telefon komórkowy) lub wybór wszystkich klientów w oparciu o dostawcę lub urządzenie (Microsoft Outlook, Gmail, klienci iOS itp.). Pozwala to szybko wybrać określone grupy klientów do testowania zamiast domyślnie testować na wszystkich klientach.

Po wybraniu klientów poczty e-mail testowanie zmian w kodzie jest łatwe. Podglądy wiadomości e-mail są uruchamiane za każdym razem, gdy zapisujesz zmiany w wiadomości e-mail w Kreatorze. Po prostu zaktualizuj kod, naciśnij Command ⌘ + S (na Macu) lub CTRL + S (na PC) i zobacz, jak Litmus zwraca zaktualizowane zrzuty ekranu Twojej kampanii e-mailowej w wybranych klientach poczty e-mail.

W widoku Podglądy wiadomości e-mail możesz wybrać poszczególnych klientów poczty e-mail, aby je rozwinąć, umożliwiając wyświetlenie pełnego zrzutu ekranu wiadomości e-mail w tym kliencie.

W przypadku niektórych klientów poczty e-mail możesz włączać i wyłączać obrazy w podglądach. Możesz również wyświetlić analizę kodu dla niektórych klientów. Analiza kodu wyświetla informacje o potencjalnych problemach w kodzie dla niektórych klientów, zwykle podkreślając kod HTML i CSS, które nie są w pełni obsługiwane w tych klientach. Dostęp do opcji przełączania obrazów i analizy kodu można uzyskać za pośrednictwem paska narzędzi panelu podglądu.

Dodatkowo możesz przełączać widoki urządzeń mobilnych na 40 klientach mobilnych, co pozwala dokładnie zobaczyć, jak Twoja wiadomość e-mail renderuje się na rzeczywistym urządzeniu.

Mówiąc o tym, jak klienci renderują Twoją pocztę e-mail, możesz również zobaczyć przetworzoną wersję swojego kodu HTML. Wielu klientów poczty e-mail będzie manipulować wysyłanym kodem, tworząc problematyczne zmiany w HTML i CSS. Możesz dokładnie zobaczyć, jak zmienia się Twój kod, patrząc na przetworzony przycisk HTML, który można znaleźć, klikając ikonę w wyskakującym okienku podglądu (patrz poniżej). Twój edytor kodu wyświetli przetworzony kod HTML, dzięki czemu wyszukiwanie trudnych błędów będzie łatwiejsze niż kiedykolwiek.

Wiele klientów poczty e-mail ma również wbudowaną pomoc kontekstową. Jeśli to możliwe, zobaczysz alert nad podglądem wiadomości e-mail. Kliknij Więcej informacji, aby wyświetlić wyjaśnienia typowych problemów w tych klientach poczty e-mail — wraz z łączami do artykułów wyjaśniających, jak je naprawić.

Na koniec możesz szybko przełączać się między klientami za pomocą ikon strzałek po obu stronach nazwy klienta poczty e-mail na pasku narzędzi okienka podglądu. Możesz także użyć strzałek na klawiaturze.

Po zakończeniu przeglądania wiadomości e-mail w określonym kliencie zamknij ten pełny podgląd, co spowoduje powrót do siatki Podglądy wiadomości e-mail.

Zacznij kodować z Builderem już dziś

Teraz, gdy znasz już program Builder, dlaczego nie wziąć go na przejażdżkę? Bez względu na to, jakich technik kodowania używasz, Litmus Builder może pomóc Ci opracować bardziej niezawodne kampanie szybciej niż kiedykolwiek wcześniej. A jeśli jesteś częścią zespołu, zapoznaj się z następną częścią Litmus Builder Essentials, aby zobaczyć, jak Builder może poprawić przepływy pracy w zespołach i organizacjach.

Jesteś już klientem Litmusa? Wskocz od razu. W przeciwnym razie wypróbuj Litmus bezpłatnie przez 7 dni i zobacz, jak Builder może dziś ulepszyć Twój proces rozwoju.

Litmus Builder to coś więcej niż budowanie e-maili Szybko twórz i testuj kontrolę jakości na klientach poczty e-mail, które mają największe znaczenie dla Twoich odbiorców, oraz korzystaj z modułów i szablonów wiadomości e-mail wielokrotnego użytku, aby zmniejszyć liczbę błędów i zachować spójność marki. Zobacz wszystkie korzyści →

Dowiedz się więcej z naszej serii Litmus Builder Essentials

• Litmus Builder Essentials, część 1: Poznaj nasz kreator poczty e-mail
• Jesteś tutaj: Litmus Builder Essentials, część 2: Twórz w naszym narzędziu do tworzenia wiadomości e-mail
• Litmus Builder Essentials, część 3: Jak zespoły mogą używać Litmus Buildera
• Litmus Builder Essentials, część 4: Najlepsze praktyki tworzenia szablonów wiadomości e-mail w formacie HTML w programie Builder