Projektowanie szablonów email dla urządzeń dotykowych – 6 wskazówek dla początkujących
autor: GetResponse ostatnia aktualizacja 0

Projektowanie szablonów email dla urządzeń dotykowych – 6 wskazówek dla początkujących

Projektując szablony wiadomości email, warto pamiętać, że palce dłoni są mniej dokładne niż kursor myszki.

Należy więc dołożyć większej staranności i uwagi na etapie projektowania szczególnie takich elementów jak: przyciski wezwania do działania (ang. Call To Action – CTA), zawartość nad nagłówkiem (ang. Pre-header) oraz elementy nawigacji.

1. Rozstaw pionowy

Brak odstępów pionowych pomiędzy głównymi elementami wzywającymi do działania (ang. CTA) w wiadomości otrzymanej od Brooks Brothers, może spowodować problemy w stuknięciu w odpowiedni element, pomimo dobrze wyglądającego projektu. Nadawca drugiej wiadomości REI, jak widać na zdjęciu, śmiało korzysta z przywilejów przestrzeni, gospodarując ją w bardziej dostępny sposób, niezależnie od urządzenia na jakim będzie wyświetlana. W wytycznych interfejsów użytkownika urządzeń mobilnych producenta Apple zalecane jest, aby minimalna powierzchnia stuknięcia wynosiła 44 x 44 punktów (jest to wysokość niebieskiej belki tytułowej „Inbox”)

{ Brooks Brothers and REI }

2. Justowanie do lewej w urządzeniach Android

W przeciwieństwie do urządzeń działających na platformie iOS, urządzenia bazujące na platformie Android nie skalują zawartości do szerokości ekranu. Oznacza to, że zawartość wiadomości email zostanie przycięta na etapie 320 pikseli w przypadku smartfonów lub na 600 pikselach w przypadku urządzeń z rodziny Kindle Fire. Oczywiście odbiorca może przesunąć pozycję ekranu, aby zobaczyć dalszą część zawartości. Aczkolwiek kluczowe informacje, takie jak przyciski wezwania do działania (ang. CTA) – zaleca się wyrównywać do lewej krawędzi lub jeszcze lepiej, umieszczać przyciski, które obejmują rozmiarem szerokość ekranu urządzenia.

{ Bonobos and Groupon }

 

3. Zdjęcia produktu jako łącza

Przyciski o wysokości 44 pikseli stanowczo zajmują dużo miejsca na ekranie, a dodatkowo ich rozmieszczenie może być różnie interpretowane względem pozostałej zawartości. Łączenie zawartość ogólnej z odnośnikami sprawi, że dostępna przestrzeń zostanie wykorzystana w najlepszy możliwy sposób. Nie bój się eksperymentować z takimi efektami jak cienie, aby zdjęcia produktów sprawiały wrażenie prezencji na pierwszym planie oraz zachęcały do ich dotknięcia. Na urządzeniach mobilnych nie ma stanu najechania na dany odnośnik jak jest to powszechnie znane z witryn internetowych, więc odbiorcy Twoich wiadomości na urządzeniach mobilnych będą potrzebowali dodatkowych wskazówek wizualnych.

{ Diesel and Park & Bond }

4. Nie lekceważ stopki

Ukłony dla marki Filson, za projekt ich stopki wiadomości, którą każdy odbiorca będzie w stanie odczytać bez trudu również na urządzeniach mobilnych. UP również wykazują wiele szacunku dla sekcji stopki poprzez duże ikony wielkości kciuka. Ilość w tym wypadku jest ważna. 5 ikon to optymalna ilość w tym przypadku, gdyż wszystko powyżej tej ilości sprawiałoby trudności w precyzyjnym dotyku określonego elementu. Niebieski pasek na dole jest dobrym, wizualnym punktem wyjścia przy projektowaniu nawigacji email.

{ Urban Outfitters and C.C. Filson }

 

5. Podrasuj kontrast i rozmiar czcionki

Podwyższenie kontrastu wyżej niż dla standardowych ekranów komputera jest dobrym rozwiązaniem, gdyż zawartość wiadomości w standardowym wydaniu traci na jakości i przejrzystości w momencie skalowania do innej rozdzielczości. Dobrym testem będzie przeprowadzenie testu rozkładu kolorów i przejść tonalnych w odcieniach szarości. Kontrast to nie wszystko, zalecane jest również zwiększenie rozmiaru czcionek ręcznie, aby uniknąć automatycznego skalowania przez inteligentne systemy jak w przypadku urządzeń iPhone, gdzie często cały projekt i jego układ ulega łamaniu w wyniku czego wyświetlany jest zepsuty widok szablonu. Dla urządzeń z systemem WP7 zaleca się rozmiar czcionki nie mniejszy niż 15 punktów, natomiast w urządzeniach Apple optymalny rozmiar czcionki to pomiędzy 17 a 22 punktami.

{ Skinny Cahoona email with high contrast + large text }

 

6. Lżejsza i przejrzysta zawartość

Podczas upraszczania ostatniego projektu myślałem, że przy kontynuacji aż tak radykalnych uproszczeń jedyne co zostanie w projekcie to zielony przycisk wezwania do działania (ang. CTA). Youzee umocniło mnie w tym przekonaniu. Poniżej przedstawiony ich całkowity projekt wiadomości, z jedynym dodatkiem w postaci przyciętego logotypu widocznego na górze. Nie w każdym projekcie konieczne są aż tak dalekie uproszczenia, gdyż usilne kondensowanie całej zawartości oraz ograniczenie szerokości każdej umieszczonej grafiki nie jest najważniejsze.

{ Simple fluid email from Youzee}

Wprowadzenie którejkolwiek z tych porad nie wymaga specjalnych zdolności programowania pod urządzenia mobilne, a jedynie lekkiej zmiany sposobu myślenia i koncepcji. Obecnie nadeszły czasy, w których projektowanie osobnego układu dla urządzeń mobilnych stało się konieczne ze względu na szeroki udział tych urządzeń na rynku internetowym. To nie musi być idealne, można wprowadzać zmiany i przystosowania w szerszym okresie czasu bazując na eksperymentach, aczkolwiek każdy email marketer powinien zrobić swój pierwszy krok w tym kierunku. A czy Ty zrobiłeś już ten krok?

Jest to gościnny wpis Anny Yeaman w przekładzie Macieja Górskiego na język Polski.

Subskrybuj, aby otrzymywać top artykuły, wskazówki i porady marketingowe.

GetResponse Sp. z o.o. potrzebuje danych zawartych w tym formularzu w celu dostarczenia Ci materiałów, o które wnioskujesz. Więcej informacji znajdziesz w Polityce Prywatności.

Dziękujemy za rejestrację!

Niedługo wyślemy Ci wiadomość email z potwierdzeniem zapisu.