Jak projektować wiadomości e-mail pod kątem mobilnego podejścia?

Opublikowany: 2015-05-21

Toczymy dobrą walkę, która jest niekończącą się bitwą nieustannego strumienia e-maili. Bez względu na to, dokąd idziemy i jakie urządzenie mamy przy sobie, e-maile mogą nas znaleźć wszędzie. Jest szansa, że ​​po przeczytaniu tego artykułu otrzymasz jeszcze dziesięć e-maili. A jako projektanci jesteśmy po obu stronach skrzynki odbiorczej: stale otrzymujemy e-maile, ale jesteśmy również odpowiedzialni za projektowanie i tworzenie rzeczywistych projektów e-maili.

Bez względu na to, do kogo kierujesz swoją pocztę e-mail, celem jest zapewnienie najlepszego doświadczenia użytkownika podczas wysyłania wiadomości e-mail do subskrybentów, klientów i potencjalnych klientów. A ponieważ większość e-maili jest otwierana na urządzeniach mobilnych, musimy zaprojektować e-maile tak, aby były dostosowane do każdego urządzenia, na którym mogą być otwierane.

Tak bardzo przyzwyczailiśmy się do responsywnego projektowania stron internetowych i najwyższej klasy aplikacji mobilnych, że często przyjmujemy za pewnik, że możemy po prostu wybrać dowolne urządzenie i zaprojektować doświadczenie szyte na miarę. W przypadku poczty e-mail rzeczy nie są tak cięte i suche. Pod względem technologicznym jest o lata świetlne za nowoczesnym projektowaniem stron internetowych. Musimy projektować z atrybutami HTML, układami opartymi na tabelach i stylami wbudowanymi, które nie gwarantują takiego samego zachowania w każdym kliencie poczty e-mail.

Jakie mam opcje, projektując pocztę e-mail dla wszystkich urządzeń?

Zanim odkurzysz swoją kolekcję płyt CD-ROM, pamiętaj, że istnieje nadzieja na zaprojektowanie udanej „responsywnej” wiadomości e-mail, nawet z ograniczeniami. Stworzenie naprawdę responsywnego e-maila jest z pewnością opcją, ale ważne jest, aby wziąć pod uwagę wszystkie trzy z tych podejść podczas tworzenia udanego projektu mobile first:

  • Skalowalny projekt
  • Projekt płynny
  • Elastyczny projekt

Aby wybrać podejście, które najlepiej odpowiada Twoim potrzebom, ważne jest zrozumienie różnic i ograniczeń między tymi trzema formami projektowania. Podjęcie decyzji wymaga wiedzy o Twoich odbiorcach oraz z jakich urządzeń i klientów poczty e-mail korzystają. Ponieważ nie wszyscy klienci poczty e-mail oferują taką samą obsługę CSS, pomoże to określić, które podejście najlepiej będzie służyć Twoim użytkownikom.

Skalowalny projekt

skalowalny projekt

Skalowalne układy wiadomości e-mail są wszechstronne, ponieważ są czytelne i można je klikać na wszystkich rozmiarach ekranu. To świetna opcja, jeśli Twoi odbiorcy mają tendencję do otwierania e-maili na różnych urządzeniach: telefonie komórkowym, tablecie i komputerze.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

Ta opcja jest zazwyczaj najłatwiejsza do zaimplementowania, ponieważ nie używa zapytań o media i nie ma konieczności dostosowywania szerokości tabel. Jedną z zalet jest to, że przy projektowaniu tego typu wiadomości e-mail nie trzeba się wiele uczyć. W większości przypadków telefony komórkowe są najczęstszym urządzeniem do czytania wiadomości e-mail, co ułatwia zapewnienie, że kwestie mobilne są uwzględniane w pierwszej kolejności. Większe przyciski, czytelny tekst i wyraźne wezwania do działania sprawiają, że telefon komórkowy ma najwyższy priorytet, aby zaspokoić potrzeby mniejszego ekranu.

Skalowalny projekt wiadomości e-mail może ograniczać fakt, że musi to być jedna kolumna, aby działała dobrze na wszystkich urządzeniach. Powodem jest to, że gdyby projekt miał wiele kolumn, stałyby się one bardzo małe na urządzeniach mobilnych, co miałoby wpływ na czytelność. Jeśli jednak przewiniesz skrzynkę odbiorczą, zobaczysz wiele układów jednokolumnowych, ponieważ są one bardzo powszechne.

Treść jest kluczem do każdego e-maila, więc rozmiar tekstu powinien być odpowiedni dla urządzeń mobilnych, a także na większych ekranach. W przypadku większości klientów poczty e-mail cała wiadomość wypełni ekran, dzięki czemu użytkownik nie będzie musiał przewijać w pionie. Jednak nadal zaleca się, aby kluczowe informacje i wezwanie do działania były umieszczane w lewym górnym rogu wiadomości e-mail, na wypadek, gdyby wiadomość e-mail nie wypełniła ekranu zgodnie z zamierzeniami.

Projekt płynny

płynny-e-mail-projekt

Być może znasz „płynne” układy z projektowania stron internetowych. Komponenty projektu mają procentowe szerokości i dostosowują się do rozdzielczości ekranu użytkownika, zachowując te same szerokości. Płynny projekt e-maili wykorzystuje ten sam pomysł.

Ta opcja poczty e-mail wypełnia lukę między skalowalną a prawdziwie odpowiedzialną opcją. Należy wykonać bardziej wstępne projektowanie niż w przypadku opcji skalowalnej. Powodem tego jest to, że rozmiar oparty na procentach sprawia, że ​​szerokość tabel i obrazów dostosowuje się do dowolnego rozmiaru ekranu, na którym wyświetlana jest wiadomość e-mail. Tabele nie zmieniają układu w różnych rozmiarach, ale zawartość przepływa i wypełnia przestrzeń. Jest to świetna opcja w przypadku e-maili, w których jest dużo tekstu, ponieważ istnieje mniejsza kontrola nad tym, jak kopia i obrazy są ze sobą powiązane. Nadal dobrym pomysłem jest zachowanie prostego układu, najlepiej z pojedynczą tabelą, aby zachować czytelność wiadomości e-mail jako priorytet.

Pamiętasz, jak powiedzieliśmy, że to wypełnia lukę między stałymi a responsywnymi? Powodem jest to, że rozmiar musi być ograniczony w przypadku większych ekranów. Jeśli e-mail staje się zbyt szeroki, linie tekstu stają się wizualnie zbyt długie i chcemy mieć pewność, że nasi czytelnicy mogą łatwo przeczytać nasz e-mail. Zawijanie treści wiadomości e-mail w tabelę kontenerów o stałej szerokości pomoże w wyświetlaniu treści na większych ekranach. Następnie pomocne zapytanie o media będzie skierowane do mniejszych rozmiarów ekranu.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

Przykład zapytania o media dla urządzeń mobilnych:

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

E-mail responsywny

elastyczny projekt

Weźmy to, co wiemy ze skalowalnych i płynnych wiadomości e-mail i dodajmy więcej reguł. Responsywność zapewnia większą kontrolę nad tym, co jest prezentowane w różnych punktach przerwania za pomocą zapytań o media CSS. Dzięki tej opcji układy można zmieniać, a inne elementy można również dostosowywać za pomocą stylów warunkowych dla określonych punktów przerwania.

Oto przykład zapytania o media dla układu responsywnego:

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

Podobnie jak w przypadku innych opcji, nie ograniczasz się do jednej kolumny ani prostych projektów. Wiadomości e-mail mogą być bardziej złożone, z mniejszymi ograniczeniami dotyczącymi układu i ilości obrazów. Na przykład projekty wiadomości e-mail mogą składać się z wielu kolumn na większych urządzeniach, ale z pojedynczą kolumną na urządzeniach mobilnych. Rozmiar tekstu, obrazy i prawie wszystko inne można zoptymalizować, aby uzyskać jak najlepsze wrażenia.

Zanim stworzymy złożone projekty z wieloma zapytaniami o media, ważne jest, aby porozmawiać o niektórych kompromisach. Zapytania o media nie działają we wszystkich klientach poczty e-mail. W rzeczywistości wsparcie jest dość ograniczone. Zgodnie z listą obsługi zapytań o media Litmus, obecnie obsługują je aplikacja Outlook.com dla systemu Android, klient natywny dla systemu Android 4.x oraz system iOS (iPhone/iPad). Można je w pełni wykorzystać, jeśli większość Twoich widzów to użytkownicy telefonów komórkowych i tabletów.

Inne względy projektowe

Zanim zaczniesz tworzyć projekt swojego e-maila, ważne jest, aby przyjrzeć się analityce, aby określić, którzy klienci poczty e-mail i urządzenia Twoich użytkowników. Zaleca się częste sprawdzanie tego i pozwalanie, aby podejście projektowe ewoluowało wraz ze zmianami. Nawet przy ograniczeniach poczta e-mail ewoluuje, dlatego ważne jest, aby być na bieżąco z tym, co jest obecnie obsługiwane.

Oto kilka świetnych zasobów do dalszego czytania:

  • CSS dla komórek
  • Przyszłość poczty e-mail
  • Wiadomości e-mail na iPhone'a i Androida

Dobrą wiadomością jest to, że podejście mobile first jest możliwe przy obecnych ograniczeniach e-maili. Nawet jeśli projekt nie jest najprawdziwszą formą „responsywności”, z zaledwie kilkoma określonymi wartościami procentowymi i kilkoma zapytaniami o media, stworzysz projekt wiadomości e-mail, który z pewnością zrobi wrażenie, bez względu na urządzenie. W większości przypadków większość użytkowników sprawdza pocztę e-mail na urządzeniach mobilnych, więc przyjęcie podejścia mobile first staje się mocną podstawą do projektowania poczty e-mail.