Jak zaprojektować responsywny e-mail HTML
W ciągu ostatnich kilku lat rosnące wykorzystanie urządzeń przenośnych wywołało ewolucję, a może rewolucję w sposobie dostarczania treści użytkownikom online. Ostatecznym celem jest płynna, mobilna i agnostyczna sieć WWW, a jedna szkoła myślenia stała się powszechnie stosowanym środkiem w tym celu: responsywnym projektowaniem. Jednak mimo, że reagujący zeitgeist zebrał się, e-mail projekt i rozwój walczył, aby nadążyć.
Wynika to po części z faktu, że wiadomości w formacie HTML są bardzo trudnym medium, z którym programiści mogą pracować. Archaiczna technologia poczty e-mail i brak standardów sprawiły, że wiele zasad współczesnego, semantycznego kodu jest bezużytecznych. Jednak e-mail nadal jest kluczowym kanałem marketingowym, który jest zbyt ważny, aby go przeoczyć: w ciągu sześciu miesięcy w 2012 roku Litmus odnotował 80-procentowy wzrost liczby wiadomości e-mail otwieranych na urządzeniach mobilnych. W tym samym roku program Campaign Monitor ujawnił, że po raz pierwszy wskaźnik otwartych wiadomości e-mail na telefony komórkowe znacznie przewyższył pulpit i pocztę internetową.
Oczywiście ważne jest przeprowadzenie właściwej analizy odbiorców przed podjęciem decyzji o zainwestowaniu w optymalizację mobilną. Ale dobrze opracowany responsywny projekt e-mail może zapewnić doskonałą obsługę zarówno użytkownikom komputerów stacjonarnych, jak i mobilnych - a przy szeroko rozpowszechnionym 4G tuż za rogiem trend w telefonii komórkowej jest nieubłagany, więc dlaczego nie mieć przyszłości?
Kołek kwadratowy, okrągły otwór
Jeśli kiedykolwiek miałeś nieszczęście otworzyć wiadomość e-mail o stałej szerokości na urządzeniu mobilnym, zrozumiesz potrzebę elastycznego projektowania e-maili. Rozrywane na wielu ekranach układy wielokolumnowe mogą być pomniejszane, dzięki czemu rozmiary czcionek są zredukowane do poziomu nieczytelności. Użytkownicy mogą powiększać obraz, ale są stale i wściekle potrzebni do przewijania w poziomie od lewej do prawej iz powrotem w celu odczytania treści. Łącza wydają się małe i zatłoczone, bez względu na grubsze palce na ekranach dotykowych. Projekty o niskim kontraście na małych rzutniach, przyciemnione w celu oszczędzania energii, często stają się nieczytelne. Oczywiście, optymalizacja mobilna jest ważna, ale jaki jest najlepszy sposób, aby to osiągnąć?
Najlepsza praktyka mobilna
Przed napisaniem pojedynczej linii kodu, uwzględnienie funkcji projektowych może znacznie poprawić komfort użytkowania dla użytkowników urządzeń mobilnych, chociaż prawdopodobnie są to wskazane ustępstwa niezależnie od rozmiaru ekranu.
- Jasna i zwięzła treść: małe ekrany oznaczają, że teraz bardziej niż kiedykolwiek konieczne jest jak najskuteczniejsze zaangażowanie użytkownika.
- Układ jednokolumnowy: kluczowa jest prostota. Układy nie szersze niż 640 pikseli ulegają zniszczeniu z wdziękiem. Jedna kolumna zapewnia, że podczas powiększania zawartość nie zostanie całkowicie utracona poza rzutnią.
- Wciągająca linia tematyczna: jest to jedna z najbardziej skutecznych broni e-mailowych w przepełnionej skrzynce odbiorczej. Bądź krótki i zgryźliwy.
- Duże wezwanie do działania (CTA): nie karaj grubych palców! Wytyczne dla interfejsu ludzkiego iOS firmy Apple zalecają minimalny obszar docelowy z możliwością przyciśnięcia 44 × 44 punktów.
- Duże rozmiary czcionek: upewnij się, że twoja wiadomość może być łatwo odczytana.
- Pre-header: inny kluczowy obszar, jeśli chodzi o widoczność w skrzynce odbiorczej. Staraj się nie wyświetlać po prostu tekstu "przeglądaj w przeglądarce".
- Tekst wyrównany do lewej: istnieje wiele powodów, aby dopasować ważne elementy do lewej strony obszaru zawartości. (Badanie Eye tracking sugeruje, że użytkownicy zachodni koncentrują większość swojej uwagi na treściach po lewej stronie, co nie jest zaskakujące, ponieważ czytamy tekst od lewej do prawej. Niektóre systemy operacyjne, w szczególności Android, nie będą skalować treści do rozmiaru na ekranie, wyświetlając w ten sposób tylko lewą połowę wiadomości e-mail. Z ergonomicznego punktu widzenia większość użytkowników będzie miała najłatwiejszą interakcję z elementami w lewym dolnym / środkowym rogu ekranu podręcznego).
- Hierarchia wertykalna: osłabiony ekran nieruchomości bardziej niż kiedykolwiek uzasadnia ideę "owczarni". Znaczące wezwania do działania należy umieścić możliwie blisko blatu; jeśli nie zostaną natychmiast zauważone, być może nie zostaną użyte.
- Używaj uważnie obrazów: nie zakładaj, że obrazy będą widoczne. Oryginalna aplikacja e-mail na telefonie iPhone wyświetla domyślnie obrazy, ale wielu klientów tego nie robi.
Te wskazówki mogą poprawić komfort użytkowników mobilnych, ale możesz i prawdopodobnie należy jeszcze bardziej zoptymalizować. Dzięki rosnącej obsłudze CSS3 wśród mobilnych klientów poczty e-mail, projektowanie responsywnych wiadomości e-mail jest teraz możliwe.
Pierwsze kroki
Jak wspomniałem wcześniej, e-maile HTML mają fatalny brak standardów - dla niewtajemniczonych wiele z nich będzie podróżą wstecz w czasie do początków rozwoju sieci. Układy muszą być ułożone w tabele ze względu na przestarzałe silniki renderowania HTML niektórych klientów poczty e-mail, a kod CSS musi być zastosowany w linii. Wielu klientów poczty e-mail zignoruje wszelkie deklaracje stylu dokonane w
sekcja dokumentu.Dostępnych jest kilka fantastycznych zestawów do e-maili, polecam Sean Powell's excellent HTML Email Boilerplate jako punkt wyjścia, ale ze względu na demonstrację, zacznijmy od zera.
Dla tych z was, którzy lubią śledzić kod, można pobierz szablon tego artykułu z tego miejsca.
Doctype
Usługa Hotmail i Gmail automatycznie wstawiają typ dokumentu XHTML 1.0 Strictpe. Dlatego nie jest to zły pomysł, aby go używać, ale ważne jest, aby dokładnie przetestować swój e-mail z i bez doctype, ponieważ wielu klientów e-mail po prostu go rozłączy.
Email on Acid przeprowadził szeroko zakrojone badania nad dokumentami email tutaj.
Zapytania o media
Możemy teraz wstawić metatag widocznego obszaru, aby upewnić się, że nasz e-mail jest poprawnie wyświetlany na urządzeniach mobilnych. Dobrym pomysłem jest również określenie typu zawartości i tagu tytułu. Zostaną one zignorowane przez wielu klientów poczty e-mail, ale są dobrym pomysłem, jeśli planujesz udostępnienie łącza do "wersji przeglądarki" wiadomości e-mail.
Ponieważ typ zawartości zostanie najprawdopodobniej zignorowany, zaleca się kodowanie wszystkich znaków specjalnych w wiadomości e-mail jako elementów HTML.
Ponadto uwzględnimy kilka rozsądnych resetów stylów, aby upewnić się, że nasz e-mail jest renderowany w taki sposób, w jaki chcemy, aby był on obsługiwany na różnych platformach.
Email subject or title Zauważ, że metatag widoku ma negatywne konsekwencje dla Blackberry.
Teraz możemy wstawić zapytania o media; ile zależy od poziomu specyficzności, jaką chcesz dostarczyć do każdego urządzenia. W tym przykładzie użyjemy tylko jednego - przyjmując rozsądne założenie, że większość urządzeń o rozmiarze ekranu nie większym niż 600 pikseli to urządzenia nowoczesne, mobilne i ekrany dotykowe, które będą czerpać korzyści ze stylizacji zoptymalizowanej pod kątem urządzeń mobilnych. Ponadto zakładamy, że postępując zgodnie z opisanymi wcześniej, powszechnymi technikami najlepszych praktyk mobilnych, użytkownicy urządzeń przenośnych na większych urządzeniach otrzymujących układ pulpitu nie napotkają żadnych poważniejszych problemów związanych z użytecznością.
Używamy zapytań o media w taki sam sposób, jak przy tworzeniu strony internetowej; jeśli rozmiar obszaru roboczego znajduje się w zestawie ograniczeń w zapytaniu o media, zastosuj ten styl.
@media only screen and (max-width: 600px) {table[class="hide"], img[class="hide"], td[class="hide"] {display:none!important;}}W powyższym przykładzie mówimy o elementach z klasą "hide" do wyświetlenia: brak na ekranach węższych niż 600px. Ważna właściwość zapewnia, że każdy styl wbudowany zostanie nadpisany. Jest to podstawowa zasada responsywnego projektowania e-maili: nadpisywanie deklaracji stylu inline w treści dokumentu HTML za pomocą! Ważnych deklaracji stylu wykonanych w
sekcji i kierowania tych nadpisań stylu do określonych rozmiarów ekranu za pomocą zapytań o media. Wyjątek rażący to aplikacja Gmail, która zignoruje deklaracje stylu w pliku Sekcja. Jednak sumienne wyodrębnianie treści powinno zapewnić satysfakcjonujące wrażenia użytkownika dla fanów Gmaila na twojej liście mailingowej. Oczywiście nie jest to idealne rozwiązanie, ale obecnie responsywny projekt e-mail to tyle samo, co rozważane kompromisy, co technika nowatorska.Warto zauważyć, że kierujemy nasze elementy HTML za pomocą selektorów atrybutów CSS do pokonania renderowanie dziwactwa Yahoo! Poczta.
Widzimy więc, że zapytania o media są przydatnym narzędziem do selektywnego wyświetlania treści, ale możemy również użyć ich do manipulowania innymi funkcjami naszego układu. Być może najważniejsze, możemy ograniczyć szerokość kolumny naszego e-maila - klucz do doskonałej mobilnej rozrywki.
@media only screen and (max-width: 600px) {table[class="content_block"] {width: 92%!important;}}W zapytaniu dotyczącym mediów stwierdziliśmy, że wszystkie tabele z klasą "content_block" powinny być skalowane do szerokości 92% na urządzeniach o rozmiarze ekranu do 600 pikseli. Teraz wszystko co musimy zrobić, to określić atrybut width inline (600px) dla dowolnej tabeli z klasą content_block i mamy kontener o stałej szerokości, który następnie skaluje się proporcjonalnie na ekranach o określonym rozmiarze. Pod warunkiem, że atrybuty szerokości elementów podrzędnych tego kontenera są określone jako procenty, jest to podstawowy responsywny szablon wiadomości e-mail.
Zachowaj ostrożność podczas wyłączania automatycznego dopasowywania rozmiarów tekstu w tekście na ciele, starając się zachować rozmiary czcionek powyżej 12 pikseli.
guziki
Wezwania do działania to zazwyczaj najważniejsza część marketingowej wiadomości e-mail. Powinny one przyciągać uwagę, dobrze rozmieszczone i przede wszystkim użyteczne. Kryteria dużego CTA różnią się w zależności od tego, czy ma zostać wybrany kursorem czy palcem. Jest to potężna funkcja elastycznej poczty e-mail; aby zapewnić użytkownikom na mniejszych urządzeniach z ekranem dotykowym przyjazne dla palców przyciski, na które nie działają blokery obrazów.
Niestety takie przyciski nie mogą być wyświetlane uniwersalnie, ponieważ polegają na właściwościach wypełnienia, które nie są obsługiwane w niektórych klientach poczty e-mail na komputerach.
@media only screen and (max-width:600) {a[class="button"]{display: block;padding: 7px 8px 6px 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff!important;background: #f46f62;text-align: center;text-decoration: none!important;}}Powyższe deklaracje stylu przekształcą znaczniki z klasą "przycisku", podobnego do poniższego, w duże, angażujące, kolorowe przyciski obejmujące całą szerokość obszaru zawartości, o ile szerokość ekranu urządzenia nie będzie większa niż 600 pikseli. Obsługa CSS3 nie powinna stanowić problemu, ponieważ możemy założyć, że technologia mobilna, którą kierujemy, jest dość nowoczesna.