To jest przyszłość projektowania e-maili

Wiele powiedziano o utknięciu w projektowaniu e-maili w przeszłości. Projektanci zajmujący się swoimi pierwszymi projektami ubolewają nad wykorzystaniem tabel i stylów inline. Marketerzy planujący swoje pierwsze kampanie nie chcą wychodzić poza mentalność partii i wybuchu.

Jednak kilku nieustraszonych nadawców nie pozwala, by (czasem) przestarzałe technologie i mentalność otaczająca projektowanie wiadomości e-mail ich powstrzymywały. Przesuwają granice projektowania e-maili, używając technik powszechnie stosowanych w zaawansowanym projektowaniu stron internetowych, aby zaskakiwać, zachwycać i nawiązywać kontakt z subskrybentami.

Przyjrzyjmy się wyzwaniom związanym z eksperymentalnym projektowaniem e-maili i podsumujmy niektóre z naszych ulubionych futurystycznych kampanii e-mailowych.

Email Marketing w 2020 roku Przygotuj się na przyszłość marketingu e-mailowego, korzystając ze spostrzeżeń 20 wiodących ekspertów oraz wyników ankiet od tysięcy marketerów i konsumentów. Pobierz teraz

Projekt e-maila nie musi być ograniczający

Kiedy większość ludzi myśli o e-mail marketingu, mają na myśli nudne, nudne biuletyny wysyłane przez firmy, które chcą coś sprzedać. A jeśli masz za zadanie stworzyć kampanię e-mailową, prawdopodobnie patrzysz na stos tabel HTML i wbudowany CSS i liczysz minuty, aż skończysz zhakować wiadomość, która wszędzie działa dobrze.

Chociaż to prawda, że ​​podstawy projektowania wiadomości e-mail są nieco stare, to naprawdę nie ma ograniczeń co do tego, co można z nimi zrobić, biorąc pod uwagę odrobinę kreatywności, planowania i wiele testów. Tak, projektanci poczty e-mail muszą korzystać z projektów opartych na tabelach (dzięki, Outlook!), wbudowanego CSS i pływać przez morze hacków, ale jak pokazują poniższe przykłady, nadal możesz uzyskać niesamowite rzeczy w skrzynce odbiorczej.

Aby to udowodnić, oto kilka naszych ulubionych przykładów e-maili, które łamią zasady i przekraczają granice projektowania e-maili.

Karuzela w e-mailu?

Jakiś czas temu brytyjska firma B&Q wysłała wiadomość e-mail, która rozpaliła branżę.

W tej kampanii użytkownicy mogą najechać kursorem na lub dotknąć przycisków i obserwować, jak różne sekcje treści płynnie wsuwają się i wysuwają z wiadomości e-mail. Powszechnie nazywana karuzelą, technika ta jest szeroko stosowana w świecie internetowym, ale jest rzadka w kampaniach e-mailowych. Niektórzy mogą narzekać, że karuzele są nieskuteczne i służą tylko na pokaz, ale kampania B&Q jest doskonałym przykładem tego, jak wykorzystać najnowocześniejsze techniki do zaskakiwania subskrybentów e-maili.

Wiadomość e-mail wykorzystuje szereg właściwości CSS3, a także sprytne targetowanie, aby wykonać swoją magię. Korzystając z przejść CSS, animacji, z-index i właściwości overflow, projektanci stworzyli sprytny e-mail, który aż prosi się o podsłuchiwanie.

Jeszcze bardziej imponujące jest to, że wszystko pięknie wraca do klientów poczty e-mail, które nie obsługują tych bardziej zaawansowanych technik.

Szalone kolory i Gwiezdne Wojny

Brytyjska agencja e-mailowa Action Rocket od jakiegoś czasu jest liderem w projektowaniu e-maili. Dzięki sprytnie zatytułowanemu tygodniowemu podsumowaniu wiadomości e-mail, Email Weekly, testują oni kilka kreatywnych technik, które mogą ostatecznie znaleźć drogę do kampanii klientów.

Jednym z naszych ulubionych przykładów jest ich e-mail z pytaniem „Jakiego koloru jest ten e-mail?”.

Wykorzystując animacje klatek kluczowych CSS, animują kolory tła sekcji nagłówka, co tworzy hipnotyzujący, halucynacyjny efekt. Na początku jest to subtelne, ale gdy subskrybent złapie animację, nie może się odwrócić.

Innym świetnym przykładem z Action Rocket jest ich niedawny skrót inspirowany Gwiezdnymi Wojnami, w którym wykorzystano eksperymentalną właściwość -webkit-perspective wraz z transformacjami CSS, aby odtworzyć kultowe indeksowanie początkowe ulubionego filmu science-fiction.

Infografika w e-mailu?

Podczas gdy blok wyświetlania agencji e-mail stale wysyła świetne e-maile, to ich ostatnia infografika e-mail naprawdę przykuła naszą uwagę.

Podobnie jak w przypadku kolorów tła w przykładzie „E-mail Weekly”, blok wyświetlania wykorzystuje animacje klatek kluczowych CSS, aby dodać trochę życia do dobrze zaprojektowanej kampanii. Naprawdę wspaniałe jest to, że wiadomość e-mail jest pięknie responsywna, ładnie układając każdą sekcję na urządzeniach mobilnych. Responsywny projekt i animowane ikony służą do wzbogacenia wspaniałych danych na temat korzystania z mobilnej poczty e-mail.

Nie widzieliśmy wielu takich infografik w wiadomości e-mail, co czyni ją jeszcze bardziej imponującą i przełomową. Chcielibyśmy zobaczyć więcej przykładów infografik, dlatego organizujemy poświęcony im Konkurs Społecznościowy!

Wideo i interaktywne wycieczki HTML5

Lubimy ćwiczyć to, co głosimy, dlatego sprawiamy, że nasze e-maile są przyjemne i responsywne, mimo że mamy głównie odbiorców na komputerach stacjonarnych. To również uzasadnienie niektórych naszych własnych, nowatorskich kampanii e-mailowych, takich jak tło wideo HTML5 z zeszłorocznej konferencji Email Design Conference (którą ponownie organizujemy tego lata…).

Nasz projektant, Kevin, wykorzystał zaawansowane kierowanie klientów poczty e-mail, aby stopniowo ulepszać prosty projekt. Jeśli jesteś ciekawy, jak dokładnie to zrobił, napisał post na blogu szczegółowo opisujący ten proces.

Aby uczcić uruchomienie naszego edytora kodu e-mail, Builder, poszedł jeszcze dalej, tworząc interaktywną prezentację bezpośrednio w wiadomości e-mail.

Wykorzystując animacje CSS, checkbox hack i swobodnie korzystając z właściwości CSS content, prezentuje niektóre funkcje Buildera bezpośrednio w skrzynce odbiorczej — dając subskrybentom przedsmak produktu bez konieczności logowania. kodu, który go napędza, ale możesz to sprawdzić bezpośrednio w programie Builder (coś w rodzaju e-mail Incepcja).

Smaczniejsze menu e-mail

Podobnie jak w przypadku e-maila z karuzeli, projektant Jerry Martinez zainspirował się Internetem, aby zaimplementować menu hamburgerów dla subskrybentów telefonów komórkowych.

Elementy nawigacyjne to zawsze sztuczka dla projektantów poczty e-mail — zwłaszcza na urządzeniach mobilnych. Ponieważ po ułożeniu zajmują dużo miejsca, mogą odwracać uwagę od głównego wezwania do działania w kampanii. Aby rozwiązać ten problem, Jerry stworzył eleganckie menu hamburgerów, które pozwala użytkownikom mobilnym na selektywne wyświetlanie elementów nawigacyjnych.

Byliśmy pod takim wrażeniem rozwiązania Jerry'ego, że zaprosiliśmy ludzi do zaprezentowania innych kreatywnych wzorców nawigacji w jednym z naszych konkursów społecznościowych…

Konkursy społecznościowe: Prawdziwie nowatorskie podejście

Nasze Konkursy Społeczności to miejsce, w którym naprawdę rzucamy ludziom wyzwanie, aby wymyślili szalone pomysły. Co miesiąc dajemy im motyw przewodni i pozwalamy rozwijać swoje umiejętności. Nasz pierwszy konkurs, dotyczący kreatywnego wykorzystania tekstu ALT, przyniósł niesamowite wyniki, takie jak Space Invaders w e-mailu:

W naszym drugim konkursie ludzie wymyślili ciekawe wzorce nawigacji. Byliśmy zachwyceni niektórymi wynikami, takimi jak lepka koncepcja nawigacji Remiego Parmentiera:

Próbujesz czegoś nowego?

Chociaż wypróbowywanie nowych rzeczy w wiadomości e-mail jest ekscytujące, wiele może się nie udać, jeśli nie przetestujesz dokładnie swoich kampanii. Podglądy poczty e-mail ułatwiają testowanie dowolnej techniki w klientach poczty e-mail na komputery, w sieci Web i na urządzeniach mobilnych.

Wypróbuj Litmus za darmo →