9 sztuczek do zaprojektowania biuletynu Perfect HTML

Biuletyn e-mail to doskonały sposób na pozostawanie w kontakcie ze swoimi klientami lub obserwatorami. Często Twoja firma lub witryna będzie miała wiele aktualizacji produktów lub nadchodzących wydarzeń, które chcesz udostępnić. Zawsze można publikować nowe informacje na swoim blogu lub w mediach społecznościowych, ale twoja publiczność może dotrzeć do ciebie tylko tak daleko. W tym przypadku poczta elektroniczna z pewnością nie jest martwą technologią, a jedynie niewykorzystanym potencjałem.

Proces tworzenia i wysyłania biuletynu jest dużo łatwiejszy niż można by pomyśleć, ale zaprojektowanie niestandardowego szablonu i zbudowanie własnego kodu - może to potrwać nieco dłużej.

Zebraliśmy kilka fantastycznych wskazówek, aby projektować biuletyny HTML o wysokiej jakości, jak nigdy dotąd. Nawet jeśli jesteś nowicjuszem w tym temacie, na pewno znajdziesz kilka cennych informacji, które pomogą Ci rozpocząć proces e-mail marketingu.

Cele biuletynu

Zanim przejdziemy do aspektów projektowych, powinniśmy wyjaśnić, w jakim celu budujemy biuletyn. W zależności od typu witryny, którą uruchamiasz, informacje zawarte w biuletynie mogą się znacznie różnić od innych, ale głównym celem biuletynu jest dostarczanie wygodnych aktualizacji bezpośrednio do skrzynki odbiorczej czytnika.

Ciężcy użytkownicy Internetu prawdopodobnie będą sprawdzać pocztę więcej niż dwa razy dziennie. Nawet ci, którzy są stale zajęci, poświęcą trochę czasu, aby przejrzeć swoje wiadomości przynajmniej raz dziennie. To idealny czas na przyciągnąć uwagę nawet bez konieczności odwiedzania Twojej witryny. Nawet jeśli nikt nie kliknie twoich linków, informacje są wciąż otrzymany, co świetnie nadaje się do budowania marki.

Zastanów się nad niektórymi tematami, które musisz zaoferować w swoim projekcie. Czy zawierasz linki do rejestracji w usłudze; ewentualnie linki do blogów lub ostatnio opublikowane artykuły w witrynie? Układ biuletynu będzie odzwierciedlał to, w jaki sposób chcesz, aby twoi czytelnicy odpowiadali, ale ostatecznie chcesz zwiększyć zainteresowanie i przekazać masę ciekawych informacji dla mas.

1. Wykorzystaj tabele w swoich układach

Może to wydawać się nieco sprzeczne z dzisiejszymi standardami internetowymi, ale e-maile są nadal archaiczne w swoich silnikach renderujących, dlatego trzeba budować w kierunku starszych modeli. Niestety stoły są najprostszy sposób aby wszystko działało poprawnie wśród różnych klientów poczty e-mail. W zależności od wiedzy na temat tworzenia układów opartych na tabelach może to być dobra wiadomość!

Możesz się też zastanawiać, dlaczego div a inne elementy bloku nie są dobrym pomysłem. Większość klientów poczty elektronicznej to zbudowany, aby usunąć wszelkie obce CSS zawartość. Oznacza to, że nie będziesz w stanie używać niczego z wyjątkiem wbudowany CSS (a nawet pełne wsparcie jest tandetne). Klienci tacy jak Microsoft Outlook 2007 i Google Gmail mają bardzo słabą obsługę elementów pływających i pozycjonowania bezpośredniego.

Najlepszym rozwiązaniem byłoby zagnieździć wiele tabel wewnątrz siebie. Dopełnienie i marginesy nie są ustawione na określoną skalę między wieloma klientami poczty e-mail. To jest powód, aby trzymać się width = "value" na wszystkich elementach komórki tabeli. Będą one zawsze wyświetlane w tej samej szerokości bez względu na to, jakiego klienta poczty używają twoi czytelnicy, więc to dużo bezpieczniejszy i bardziej spójny ustawić dopełnienie i marginesy za pomocą pustych komórek tabeli.

2. Pozycjonowanie o stałej szerokości

Podczas tworzenia szkiców układu biuletynu masz kilka opcji, jednak najlepszą opcją jest śledzenie aby ustawić stałą szerokość dla tabeli zawierającej. Istnieje wiele różnych rozdzielczości monitora - nie będziesz w stanie zadowolić wszystkich. Jeśli nie masz określonych elementów o szerokości statycznej, zawsze możesz użyć width = "100%" na twojej tabeli zawierającej. Pozwoli to na wypełnienie całej treści wszystkich klientów poczty e-mail.

Jednak dla wielu ta metoda jest trochę zbyt luźna. Konstruktywne biuletyny będzie wymagać stałej szerokości w większości przypadków, zwłaszcza jeśli będziesz używać banerów i obrazów ustawionych na określony rozmiar. Polecam pracę z 500px - 600px maksymalna szerokość dokumentu. Poziomy rozmiar ekranu iPhone'a i niektórych modeli BlackBerry jest ograniczony do 320px, więc nawet przy 500px szablon wiadomości e-mail będzie skalowane w dół, aby pasowały prawidłowo.

Biorąc pod uwagę, że wielu użytkowników telefonów komórkowych i tak wybiera przeglądanie wiadomości e-mail bez HTML, nie powinno to stanowić dużego problemu. Użytkownicy komputerów stacjonarnych i poczty internetowej prawdopodobnie będą mieli podobną konfigurację niezależnie od używanego systemu operacyjnego. Kiedy masz wątpliwość stwórz kilka wzorów szablonów i wybierz te, które lubisz najbardziej!

3. Jednostki pikseli

Dopóki nie użyjesz płynnych elementów w swoim biuletynie, prawdopodobnie będziesz musiał dobrać kilka rzeczy. Spróbuj to utrzymać pikseli (px) zamiast w innym typie jednostki. Odsetki mogą łatwo mieszać się z wieloma klientami poczty internetowej i oknami oprogramowania. Przy mniejszej liczbie elementów strony, układy płynów mogą wyjść bez szwanku, choć z kilkoma błędami.

Ale piksele są zawsze pewne. Pracując w ramach limitu maksymalnej szerokości 600 pikseli, możesz w rzeczywistości zmieścić wiele treści wewnątrz. Ekspozycja jest łatwiejsza, jeśli dzielisz układy na dwie lub trzy kolumny i zawsze zapisujesz swoje rozmiary w pikselach. Jedynym wyjątkiem może być rozmiary czcionek gdzie ems może lepiej wspierać twoich czytelników, ale em Rozmiar będzie się różnił w podobny sposób, jak procenty - tak dla uproszczenia trzymaj się linii trasowania opartych na pikselach.

4. Możliwości z CSS

Wygląda na to, że projektowanie e-maili ma zniszczyć użycie stylów CSS. Chociaż istnieje wiele nieobsługiwanych funkcji, CSS jest nadal doskonale akceptowalny w wielu przypadkach. Monitor kampanii ma piękną tabelę obsługiwanych właściwości CSS wymienionych przez klienta poczty e-mail. Wszyscy będą wspierać podstawy takie jak rodzina czcionek i styl czcionki, więc możesz przeskoczyć znacznik, jeśli chcesz.

Uważaj na swoje style czcionek, aby nie przesuwać granic zbyt daleko. Jeśli czujesz się niekomfortowo w przypadku stylów wbudowanych, zawsze możesz użyć znacznika czcionki HTML, nawet jeśli jest on przestarzały. Jeśli jesteś projektantem CSS, nie musisz wychodzić z systemu, ale każde skrócone kodowanie CSS może spowodować błędy. Jako przykład czcionka: 12px / 14px Arial, bezszeryfowy; skrót może pomóc zaoszczędzić dużo miejsca, ale nie jest w pełni akceptowany w projektowaniu poczty e-mail, nawet jeśli jest używany ze stylami wbudowanymi.

Nawet wybór kolorów powinno być napisane odręcznie. Kolory szesnastkowe, takie jak #ccc lub # e3f musi być napisane w całości jako #cccccc lub # ee33ff, odpowiednio. Jeśli możesz zbudować to, czego potrzebujesz bez CSS, poleciłbym tę ścieżkę, ale nie wstydz się CSS w projektach e-mail, ponieważ wbrew powszechnemu przekonaniu jest ona obsługiwana w większości przypadków.

5. Najlepsze praktyki w Anchor Links

Z pewnością będziesz chciał dodać kilka linków do swojego biuletynu. Mogą to być linki wychodzące do innych stron w Internecie lub linki prowadzące do najpopularniejszych stron w witrynie. Ponadto większość stopek będzie zawierała link do rezygnacji z subskrypcji, dzięki któremu czytelnicy będą mogli zrezygnować z procesu wysyłania wiadomości e-mail, ale jak należy postępować ze wszystkimi tymi linkami w projekcie??

Należy zauważyć, że klienci poczty elektronicznej są bardzo wybredni w swoich projektach. Wielu zdecyduje się nadpisać style linków, nawet z wbudowanym CSS. Niezła sztuczka to zawierają zarówno kolor wewnętrzny, jak i dodatkowy znacznik zakresu w elemencie zakotwiczenia. Jeśli kolor i styl Twoich linków są ważne dla ogólnego projektu, powinieneś podjąć dodatkowe środki ostrożności. Dodałem poniższy przykład małego kodu:

jakiś tekst linku

Efekty najechania są nieobsługiwane w programach Outlook 2007/2010, Gmail, iOS lub Android. Nadal możesz chcieć dołączyć a: hover styl dla wszystkich wspierających klientów: Outlook 2000/2003, Hotmail, Apple Mail i Yahoo! mail, ale osobiście nie widzę wiele korzyści w częściowym doświadczeniu użytkownika, ponieważ selektory kotwic nie są mocno obsługiwane po prostu oferuje 2-3 kolory łącza używać w całym projekcie.

Jako domniemanie użytkownicy oczekują również, że Twoje linki zostaną otwarte w nowej karcie lub oknie. Idealnie target = "_ blank" atrybut powinien być wystarczający dla wszystkich przeglądarek, aby rozpoznać tę funkcjonalność, a włączenie tego atrybutu do linków do kotwicy nie powinno negatywnie wpływać na oprogramowanie poczty elektronicznej, takie jak Lotus Notes lub Outlook..

6. Testuj u wszystkich głównych klientów

Ostatnie badanie najpopularniejszych klientów poczty e-mail (wykonane przez Campaign Monitor) pokazuje dziesięć najpopularniejszych klientów poczty e-mail w ciągu ostatniego roku. Może wydawać się nieco nużący, ale projektanci powinien mieć zwyczaj sprawdzania swoich biuletynów na wszystkich głównych klientach poczty e-mail, przynajmniej na niektórych bardziej popularnych klientach, takich jak Gmail, Hotmail lub Yahoo! Poczta.

Nie obejmuje to wyłącznie poczty internetowej, ale także oprogramowania na Mac OS X i Windows. Również zgodnie z ich diagramem Poczta iOS i Android w ciągu ostatnich kilku lat obaj znaleźli się na liście 10 najlepszych. W rzeczywistości iPhone, iPod Touch i iPad Mail plasują się na 2 miejscu wśród najpopularniejszych w programie Outlook! Niestety nie ma sposobu, aby je przetestować bez posiadania jednego z urządzeń - musisz więc rozstrzygnąć inne opcje.

Jeden błąd związany ze wsparciem dla urządzeń mobilnych jest dostępny w wielu modelach iPhone'a i Androida. Często renderowanie wiadomości e-mail przez telefon komórkowy zmień rozmiar tekstu wewnątrz szablonu. To może nie mieć większego wpływu na projekt, ale może być denerwujące dla niektórych czytelników. Korzystanie z CSS -webkit-text-size-adjust: brak;, będzie zapewnić równomierny domyślny rozmiar tekstu we wszystkich silnikach analizujących bez potrzeby testowania.

Jeśli znasz znajomych lub współpracowników korzystających z alternatywnego oprogramowania, możesz chcieć poproś o pomoc w testowaniu biuletynu. Możesz albo wyślij im kopię e-maila sprawdzić na swoim urządzeniu lub pożycz urządzenie aktywnie usuwać błędy kodowania. Na szczęście program Outlook oferuje wersję instalacyjną dla komputerów Mac, dzięki czemu nie musisz wyszukiwać użytkowników systemu Windows dla tych optymalizacji, ale jeśli chodzi o Lotus Notes lub Windows Mail, możesz nie mieć szczęścia.

Alternatywą jest zapłacić za rozwiązanie takie jak Podgląd mojej wiadomości e-mail, niestety nie zapewniają żadnych darmowych kont demo, ale ich usługa jest dobrze znana z oferowania wspaniałych podglądów twojego projektu. E-mail na Acid jest podobną usługą, która oferuje darmowe konto, ale nie pozwala na testowanie na wszystkich klientach, co w pewnym sensie pokonuje cel. Usługi renderowania online powinny być przydatne, jeśli trzeba przetestować wiele szablonów biuletynu na dłuższą metę bez użycia alternatywnych komputerów, jednak nie są one fundamentalne, więc nie stresuj się jeśli nie możesz ich wszystkich przetestować!

7. Zawsze oferuj widoki internetowe

Czytelnicy nie zawsze będą mogli (lub będą chcieli) przeglądać wiadomości e-mail w sposób natywny. Oferowanie innej wersji gdzieś w sieci da poczucie łatwości i kompatybilności. Proces ten nie może być całkowicie zautomatyzowany, chyba że chcesz dołączyć zwykły tekst wersja.

W ten sposób usuń wszystkie znaczniki HTML z układu newslettera. Nie będziesz w stanie do niczego dołączać linków ani stylów. Cała zawartość byłaby prosta być ułożone jako zwykły plik tekstowy dla czytelników bez możliwości renderowania. Jest to z pewnością dobra alternatywa, ale gdy oferujesz pełną wersję tego samego newslettera w sieci Web usuwa obrażenia zadane przez dowolny błąd renderowania. Większość czytelników będzie uruchamiać aktualną przeglądarkę internetową, w której będziesz mógł stylizować i budować swój biuletyn do perfekcji.

Sposób konfiguracji strony to całkowicie twój wybór. Niektóre strony internetowe będą poświęć cały post na blogu, aby powielić treść wiadomości e-mail, może z niektórymi Dodatkowe informacje. Inni będą utwórz oddzielną stronę poza główną stroną bez żadnych bezpośrednich linków w nawigacji. Ta metoda może być korzystna, ponieważ czytelnicy nie będą rozpraszani przez główny szablon witryny lub zawartość paska bocznego.

8. Dodawanie zawartości obrazu

Obrazy to kolejny powód, aby zaoferować czytelnikom rozwiązanie internetowe. Domyślnie klienci poczty e-mail są ustawione do usuwania obrazów z treści. Jeśli twój adres zostanie dodany do bezpiecznej listy, wszystkie obrazy będą wyświetlane domyślnie, ale użytkownik musi zaakceptować tę konfigurację więc z pewnością nie jest to gwarancja. Właśnie upewnij się, że obrazy nie są wymagane jako część głównej zawartości, ale jako dodatkowa dodatek do estetyki strony.

Po przejściu do eksportowania grafiki istnieje kilka wskazówek dotyczących tworzenia obrazów specjalnie dla poczty e-mail. Zawsze będziesz chciał ustaw atrybuty szerokości i wysokości na swoim img tagi. Bez tych specyfikacji w porządku, niektórzy klienci zniekształcają zawartość obrazu. Na alt znacznik również okaże się przydatny, więc odwiedzający będą wiedzieć, co zawiera zawartość obrazu, zanim zostanie załadowany.

Jak wspomniano wcześniej, pozycjonowanie obrazów w e-mailu może być trudne. Unikaj używania pływaków za wszelką cenę! Obraz align = "left" atrybut będzie działał znacznie lepiej lub alternatywnie wytyczyć dokładne komórki tabeli aby dopasować swoje zdjęcia do górnej, lewej lub prawej strony biuletynu. Nie będziesz w stanie idealnie dopasować się do tak wielu klientów (zwłaszcza klientów mobilnych), ale zoptymalizuj swoje zdjęcia i zachowaj małe rozmiary plików w celu uzyskania najlepszych wyników.

Jeśli chodzi o przechowywanie obrazów, zalecane jest zachowaj wszystkie pliki na własnym serwerze internetowym. Jest to lepsza opcja zamiast używania innego hosta obrazów lub przesyłania plików do usługi biuletynu online. Dodatkowo powinieneś oddziel zawartość dla swoich biuletynów od reszty obrazów w strukturze folderów tak / img / email lub / img / email / 2011.

9. Unikaj folderu spamu!

To może być trudne do usłyszenia, ale nie wszyscy klienci poczty elektronicznej są przyjaźni wobec biuletynów. Każdego dnia wysyłane są miliardy e-maili, a większość zawiera spam lub złośliwą zawartość, dlatego te środki bezpieczeństwa wbudowane w skrzynkę odbiorczą wyraźnie wskazują na środki bezpieczeństwa.

Jeśli jednak chodzi o marketing internetowy, możesz łatwo zniechęcić się do zobaczenia swojego najnowszego biuletynu ze śmieciami. Aby zmniejszyć szanse na to, powinieneś oczyść swój projekt dla uproszczenia. Nie rób denerwujących obrazów lub wysadzaj swój tekst tytułowy za pomocą setek słów kluczowych.

Spróbuj też trzymaj swoje treści krótkie i na temat. Nie musisz dołączać pełnej treści do wszystkich swoich artykułów lub stron. Spróbuj dodać zdanie lub dwa z alternatywnym linkiem do swojej witryny zamiast długiej listy. The Im krótszy jest Twój e-mail, tym bardziej prawdopodobne, że przejdzie kontrolę spamu.

Galeria projektu biuletynu

Jaki byłby fajny artykuł z newslettera bez fantastycznych przykładów? W Google jest mnóstwo projektów biuletynów i szablonów wiadomości e-mail. Galeria wiadomości e-mail HTML jest bardzo popularnym źródłem inspiracji.

Poniżej zamieszczam zrzuty ekranu z wielu biuletynów w galerii Monitora kampanii. Mam nadzieję, że te wspaniałe układy dostarczą Ci wspaniałych pomysłów na własne projekty.

Baw się dobrze projektując swoje idealne biuletyny!

Alertful for Business