Splio przedstawia infografikę, która podpowiada jak tworzyć wiadomości e-mail dopasowane do wyświetlacza, dzięki technice Responsive E-mail Design. 10 wskazówek jest adresowanych zarówno do twórców newsletterów, jak i do wszystkich tych, którzy szukają nowych, skutecznych rozwiązań w dziedzinie e-mail marketingu.

1. 10
,
wskaZOwek:
responsive
E-mail
Design
Responsive Design umożliwia dopasowywanie wiadomości e-mail do
nośnika odbiorcy. Jest to zestaw narzędzi i technik, pozwalający na
zmianę organizacji wyświetlania informacji w zależności od
urządzenia (smartfon, PC, tablet).
Ekran panoramiczny, niska rozdzielczość lub Full HD, orientacja pozioma lub pionowa… przed projektantami newsletterów pojawiają się
nowe, liczne wyzwania.
Rozwiązanie? Responsive E-mail Design, czyli 10 wskazówek od Splio,
które pomogą Wam stworzyć newsletter „skrojony na miarę”.
Grupa "Mobile" to mikroskopijna
część moich odbiorców, więc...
PO CO Sie PRZEJMOWać?
Kilka statystyk:
2013
Ruch online według lokalizacji na
urz. mobilnych vs. PC
Europa
5,3 %
Azja
12,8 %
12,7 %
8,1 %
Afryka
2010
Ameryka Płn.
14,2 %
16,6 %
22,9 %
Ruch online na
urządzeniach mobilnych
Australia
i Oceania
Ameryka Płd.
Świat
Wskaźnik otwarć e-maili
Na podstawie danych za czwarty kwartał 2013 roku. Źródło: EmailForge od Splio
Windows Phone
(4%)
Android
Tablet
(6%)
20,48 %
iPhone
iPad
36 %
24 %
79,52 %
29 %
Inne urządzenia
iOS
Android
Phone
Urządzenia mobilne
Android
• Ruch online na urządzeniach mobilnych
rośnie bardzo szybko
• Coraz więcej osób sprawdza pocztę
najpierw na urządzeniach mobilnych
• Odbiorcy używają coraz szybszych i bardziej
zaawansowanych systemów/urządzeń
Okaż użytkownikom mobilnym
trochę
uczucia
#1
Zaczynajmy!
Twórz Prosty
Layout
Pomimo tego, że brzmi to
banalnie, musisz zacząć od
zbudowania jak najprostszego
layoutu i kodu HTML.
USUń:
Szybki test!
A quick test !
Usuń z pr
ojektu newslemove wszystkie style
Re ttera every
CSS i wewnętrzne styling
CSS and stylin
style,
a następnie spg information
in your email rawdźbs ój proor we sw
jekt w ulubionej przeglite design,
and display it in your arce.
ądfa
vorite
browser.
Jeżeli zawartość wyświe
tla się
prawidłowo, to znaczy,
że
If content is easy to read jesteś
na dobrej drodze do op and well
tymalne
ordered, you’re
go kodowania. probably good. -
[ bez litości! ]
• Zbędne, wielokrotnie nałożone na
siebie znaczniki DIV
• Biblioteki oraz skrypty JS oraz Flash
bez opcji zawartości fallback
• Zbędne pozycjonowanie absolute i float
• Wszystkie nieużyteczne w 100% elementy
Używaj:
Dbaj o prostotę i czystość Twojego
kodu HTML. Nie ufaj nowoczesnym sztuczkom takim jak efekty
przejść CSS3 lub zmienne JS, przy
tworzeniu strategicznych elementów layoutu.
• Znaczników doctype oraz wytycznych
HTML5
• Resetowania arkuszy styli CSS
• Prostej struktury layoutu
• Prostych rozwiązań przy tworzeniu ważnych
elementów (menu, panel nawigacyjny...)
A teraz, magiczna sztuczka!
#2
Stosuj
Magia!
media
queries
Media Queries pozwalają na tworzenie
wyjątkowo przydatnych warunków jeżeli
,,rozmiar=x, pokaż styl=y”.
Kilka przykładów
Od 200 do 640 px:
@media screen and
(min-width: 200px) and
(max-width: 640px)
Chcesz stworzyć Responsive E-mail
Design? Skoncentruj się szczególnie na
warunkach, dotyczących szerokości:
arkusz stylu automatycznie dopasuje
się do odpowiedniej rozdzielczości
ekranu urządzenia.
Orientacja pozioma
(pejzaż), więcej niż 600 px:
@media screen and
(min-width: 600px) and
(orientation:landscape)
<style>
@import url(tiny.css) (min-width:300px);
@import url(small.css) (min-width:600px);
@import url(big.css) (min-width:900px);
/style>
Orientacja pionowa
(portret), mniej niż 380 px:
@media screen and
(max-width: 380px) and
(orientation:portrait)
@media screen and (max-width: 300px) {
/* Style dla małych urządzeń */
}
@media screen and (max-width: 600px) {
/* Style dla smartfonów */
}
Media Queries rządzą!
A do tego, są banalnie
proste!
Wszystko jasne, tylko które rozdzielczości wybrać?
Rzućmy okiem na:
NAJczĘŚCIEJ UŻYWANE
RozdzielczOŚCI
480
320
niska
rozdzielczość
720
768
1 geneStrefa
racja ,,Smartfonów" ipad
rozdzielczości
1024
900
Tablet portret
1200
Tablet pejzaż
Strefa
PC
• 3 główne punkty zmiany stylu:
480 / 768 / 1024
• 3 dodatkowe punkty zmiany:
320 / 720 / 900
• Granica rozdzielczości PC:
- około 1024px
Niska rozdzielczość
Popularne smarfony
Urządzenia Apple
Tablety, netbooki
Różne
Zrozumiałe, a teraz...
#3
OkreŚL PUNKTY
Zmiany stylu
9
10
11
12
13
14
15
7
8
16
17
6
8
7
18
19
20
5
6
21
22
4
5
23
24
25
3
9
4
26
27
28
2
3
29
1
2
30
INCH
10
1
CM
0
11
0
12
Tworząc Responsive E-mail Design, możesz wziąć pod uwagę 6,
najczęściej spotykanych, punktów zmiany stylu.
GŁÓWNE:
<480
Dopasuj wiadomość do smartfonów pierwszej
generacji dzięki warunkowi <480px.
<768
Użyj warunku <768px dla smartfonów najnowszej generacji i iPadów (Portret).
>768
Dla wszystkich urządzeń o większej rozdzielczości (duże tablety), zastosuj arkusz stylu >768px.
<320
Dodaj arkusz stylu <320px dla niskiej rozdzielczości.
DODATKOWE:
768-1024
Celuj w duże tablety, iPady (Pejzaż) dzięki warunkowi >768px ORAZ <1024px.
>1024
Stwórz szeroki design dla ekranów PC z arkuszem
stylu >1024px.
• Skoncentruj się na głównych punktach zmiany stylu.
• Ustal wersję pełnoekranową na rozdzielczość
powyżej 1024 px.
Zmiana stylów jest fajna,
ale rozciąganie rządzi
#4
STWÓRZ LAYOUT
boing
boing
boing
ELASTYCZNY
g
boin
boing
Elastyczne layouty używają kolumn, które organizują ich zawartość. Zamiast ustalonych z góry szerokości, używają wartości relatywnych, tak, aby dopasować swój rozmiar do wielkości okna
roboczego urządzenia, na którym wiadomość jest wyświetlana.
200
px
300
px
Elastyczny layout to klucz do
dopasowania zawartości do
każdego rozmiaru i / lub orientacji wyświetlacza.
800
px
15.38 23.07
%
%
61.5384615384...
%
Jeszcze tylko odpowiednie
media queries i możesz podbić
swoim layoutem każde
urządzenie mobilne!
Uważaj, na dokładne zaokrąglanie!
Aby uniknąć błędów w obliczeniach, nie
zaokrąglaj wielkości procentowych do
kilku miejsc po przecinku, wystarczą same
jednostki. Pozwól przeglądarce wykonać
resztę obliczeń!
Polecane systemy siatek:
• 960 Grid System 960.gs
• Gridset gridsetapp.com
• Columnal columnal.com
• Golden GS goldengridsystem.com
• 1140 CSS Grid cssgrid.net
Dopasuj do orientacji
poziomej i pionowej.
Mieszanie płynnej szerokości + padding + bordery = totalny bordelo?
wtf?!
co ja pacze?
Zobacz!
*{box-sizing: border-box;}
Zapomnij o problemach, związanych z podstępnym obliczaniem
bloków, dzięki tej jednej banalnie prostej linijce CSS.
Mamy div: 67% width, z 15px padding
i 3px border...
*{
;
-webkit-box-sizing: border-box
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Przed:
• Ostateczna szerokość =
67% + 15*2px + 3*2px
• Całkowita szerokość > 100%
• Ból głowy, możliwość rękoczynów
Po:
• Ostateczna szerokość = 67%
Dobrze, layout jest już responsywny,
#5
ale co z obrazkami?
Ujarzmij
GRAFIKĘ
Jedna prosta reguła może sprawić, że Twoje obrazki też będą
elastyczne. Możesz też zastosować punkty zmiany stylu, jeżeli
przepustowość nie stanowi problemu.
Elastyczny rozmiar
Dopasuj szerokość:
• Szerokość 100%:
img { width: 100%; }
• Szerokość 100% width, ograniczenie maksymalnej szerokości:
img { max-width: 100%; }
Punkty zmiany stylu
Atrybut SRC obrazka nie może być modyfikowany przez media query (jeszcze).
Możliwe rozwiązania:
• background-image:
wpisanie atrybutu backgronud-image
do bloku
• pokazanie/ukrycie obrazka:
użycie różnych wersji obrazka oraz pokazanie/ukrycie wyższej warstwy za
pomocą media queries może stworzyć
efekt zmiany obrazka na inny
Dlaczego nie użyć pokaż/ukryj obraz na
każdej grafice?
Baner oraz przyciski, zachęcające do
wykonania akcji przedstawione w wersji
dla dużej rozdzielczości, urządzeń
mobilnych oraz w wersji dla niskiej
rozdzielczości.
Niektóre przeglądarki nie pobierają
obrazków opisanych display:block;. W ten
sposób możemy zaoszczędzić transfer!
Dobrze, szerokość wszystkich elementów jest ustawiona na 100%,
ale nie wygląda to dobrze na moim monitorze 2560px.
#6
Pamiętaj o
Max
max
Min
&min
Stosuj max-* oraz min-* aby
,
zaznaczyć granice Twoich
elastycznych elementów.
Kilka przykładów
Elastyczna szerokość, ale nie
poniżej 768px szerokości, oraz
nie powyżej 1024px:
Typowe użycie:
Zabezpiecz swój layout przed
powiększaniem lub zmniejszaniem
się w dziwny sposób na
urządzeniach o bardzo dużej lub
bardzo małej rozdzielczości.
Łącząc elastyczny layout, mądre
definiowanie granic min/max,
punkty zmiany stylu oraz media
queries, osiągniesz maksymalne
dopasowanie elementów.
.
min-width: 768px;
max-width: 1024px;
Przynajmniej 350px wysokości:
min-height: 350px;
#main nie mniejszy niż 1000px
szerokości, jeśli oglądany na
komputerze:
@media screen and (min-width:
1024px) {
#main { min-width: 1000px; }
}
Kolejny krok do przodu!
#7
Brz
Wszystko jest
mi p
oważ
nie!
Względne
75%
Idea: zdefiniuj na początku jeden element,
a następnie użyj go jako bazy do tworzenia następnych.
50%
Metoda kaskadowa wg % :
Określ główny blok ze zmiennym lub elastycznym rozmiarem, a następnie wyliczaj
procentowo rozmiary pozostałych (rozmiar,
margines, padding, itp.).
Niestandardowe
kostki domina
Layout
w stylu
ninja!
Jednostka miary (em):
Określ rozmiar czcionki w głównym bloku
lub w <body>, a następnie wylicz rozmiary,
opierając się na zdefiniowanej wielkości
jednostki em.
x(em)
Kilka przykładów użycia jednostek em:
W przypadku, gdy główny font-size = 16px;
• width: 46.25em
• border-width: 0.063em
• font-size: 1.125em
• padding: 0.325em
Trzy miejsca po
przecinku w jednostce em pozwalają uzyskać taką
ilość części dziesiętnych.
-> 46.25x16
-> 0.063x16
-> 1.125x16
-> 0.325x16
= 740px
= 1px
= 18px
= 5px
Świetnie, ale teraz wszystko nadal jest ściśnięte
na moim telefonie z niską rozdzielczością
#8
Układ w jednej
kolumnie
Organizuj zawartość w jednej kolumnie, aby urządzenia
o niskiej rozdzielczości nie miały problemu z jej wyświetleniem.
Layout przystosowany do ekranu komputera
Naw
Nawigacja
Kontakt
Kontakt
Akcje
Social
Media
Główna oferta
Social
Media
Inne
Główna
oferta
Proste do wykonania!
Zmień szerokość dla każdej kolumny w Twoim arkuszu
stylu na:
• Width -> 100%
Jeżeli zaistnieje taka potrzeba, zastosuj odpowiednie
reguły, żeby naprawić elementy, które mogą nie reagować
odpowiednio (marginesy, itp.).
#9
Akcje
O niee! Mój layout jest za długi!
Inne
usuń zbędną
ZaWartośĆ
Naw
Niektóre elementy zawartości Twojej
wiadomości nigdy nie zostaną wykorzystane w kontekście urządzeń mobilnych: po prostu je usuń!
Naw
Kontakt
Główna
oferta
Klasa .not_mobile
Przypisz klasę .not_mobile do wszystkich elementów, które mogą zostać pominięte w wersji
mobilnej Twojej wiadomości, a następnie użyj
następującej formuły:
Social
Media
Akcje
@media screen and (max-width: 300px) {
.not_mobile { display: none; }
}
Główna
oferta
Jak wybrać najważniejsze elementy?
Czytelny wygląd = łatwy odbiór
Wybierz te elementy, do których użytkownicy urządzeń mobilnych chcieliby na pewno mieć dostęp i
omiń resztę (przyciski social media, kontakt, mniej
istotne informacje, itp.).
Akcje
Jeśli jest to konieczne, pomyśl o dodaniu przycisku
Inne
,,Pokaż więcej”, aby odkryć pozostałe informacje.
Eh... Wszystko zrobione, a na ekranie mojego
urządzenia nadal nie widzę żadnych zmian..
#10
Responsive jest do kitu :(
sprawdź meta
viewport
Wiele mobilnych przeglądarek naśladuje wersję komputerową,
pokazując wiadomość w pełnej rozdzielczości, ściśniętą na
małym ekranie. Brak właściwej funkcji tagu meta utrudnia tworzenie e-maili w Responsive Design.
F
ałszywa imitacja
pełnej rozdzielczości
Nawigacja
Rozmiar
tekstu:
0.5px
Rzeczywista
szerokość urządzenia
Naw
Kontakt
Akcje
Główna oferta
Social
Media
Inne
Vs
Media
queries
nie
działają
480px szerokości udające 1280px
Dbaj o rzeczywisty rozmiar
Prosty zabieg na ,,przekonanie” przeglądarki do pokazywania rzeczywistego
rozmiaru ekranu, kryje się w tagu meta
viewport.
Główna
oferta
Layout
widoczny w
Responsive
Design
<3
prawdziwe 480px
Action
W sekcji <head> użyj:
<meta name="viewport"
content="width=device-width">
Jeżeli użyjemy device-width, przeglądarka
przestawia się na używanie rzeczywistych rozmiarów ekranu.
To wszystko!
Szukasz inspiracji dla Twojego kodu?
Odwiedź mediaqueri.es !
Setki świetnych projektów w Responsive design
Dzięki za uwagę!
Ta odrobinę za długa infografika została przygotowana przez Splio.
Bądźmy w kontakcie:
@SplioPolska
facebook.com/pl.splio
linkedin.com/company/splio
splio.pl