Responsive E-mail Design - 10 wskazówek [Infografika od Splio]

[ bez litości! ]

viewportsprawdź meta

Odwiedź mediaqueri.es !Setki świetnych projektów w Responsive design

#10

Naw

Głównaoferta

Action

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 two-rzenie e-maili w Responsive Design.

Dbaj o rzeczywisty rozmiarProsty zabieg na ,,przekonanie” przeglą-darki do pokazywania rzeczywistego rozmiaru ekranu, kryje się w tagu meta viewport.

Jeżeli użyjemy device-width, przeglądarka przestawia się na używanie rzeczywi-stych rozmiarów ekranu.

Vs

<meta name="viewport" content="width=device-width">

W sekcji <head> użyj:

To wszystko!Szukasz inspiracji dla Twojego kodu?

Dzięki za uwagę!

Ta odrobinę za długa infografika została przygotowana przez Splio.

SocialMedia

Kon-takt

Naw

Głównaoferta

Akcje

Inne

kolumnieUkład w jednej

Organizuj zawartość w jednej kolumnie, aby urządzenia o niskiej rozdzielczości nie miały problemu z jej wyświetleniem.

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.).

Kon-takt

Nawigacja

Główna oferta

Akcje

InneSocialMedia

#8

SocialMedia

Kon-takt

Naw

Głównaoferta

Akcje

Inne

Kon-takt

Nawigacja

Główna oferta

Akcje

InneSocialMedia

WzględneWszystko jest

#7 Kolejny krok do przodu!Brzmi poważnie!

Niestandardowe kostki domina

Świetnie, ale teraz wszystko nadal jest ściśnięte na moim telefonie z niską rozdzielczością

O niee! Mój layout jest za długi!

Layout przystosowany do ekranu komputera

75% 50%

Idea: zdefiniuj na początku jeden element, a następnie użyj go jako bazy do tworze-nia następnych.

Metoda kaskadowa wg % :Określ główny blok ze zmiennym lub ela-stycznym rozmiarem, a następnie wyliczaj procentowo rozmiary pozostałych (rozmiar, margines, padding, itp.).

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.

W przypadku, gdy główny font-size = 16px;

• width: 46.25em -> 46.25x16 = 740px• border-width: 0.063em -> 0.063x16 = 1px• font-size: 1.125em -> 1.125x16 = 18px• padding: 0.325em -> 0.325x16 = 5px

Trzy miejsca po przecinku w jed-nostce em pozwa-lają uzyskać taką ilość części dzie-siętnych.

x(em)

Kilka przykładów użycia jednostek em:

Layoutw styluninja!

#5

max&min

Pamiętaj oMax

Min

#6

Elastyczna szerokość, ale nie poniżej 768px szerokości, oraz nie powyżej 1024px:

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; }}

Kilka przykładówStosuj max-* oraz min-*, aby zaznaczyć granice Twoich elastycznych elementów.

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. .

GRAFIKĘUjarzmij

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 rozmiarDopasuj szerokość:

• Szerokość 100%: img { width: 100%; }• Szerokość 100% width, ogranicze- nie maksymalnej szerokości: img { max-width: 100%; }

Punkty zmiany styluAtrybut SRC obrazka nie może być mo-dyfikowany 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?Niektóre przeglądarki nie pobierają obrazków opisanych display:block;. W ten sposób możemy zaoszczędzić transfer!

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.

Dobrze, szerokość wszystkich elementów jest ustawiona na 100%, ale nie wygląda to dobrze na moim monitorze 2560px.

Mieszanie płynnej szerokości + padding + bordery = totalny bordelo?

Dobrze, layout jest już responsywny, ale co z obrazkami?

*{box-sizing: border-box;}Zobacz!

* {-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

Mamy div: 67% width, z 15px padding i 3px border...

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%

Zapomnij o problemach, związanych z podstępnym obliczaniem bloków, dzięki tej jednej banalnie prostej linijce CSS.

wtf?!co ja pacze?

ELASTYCZNY

STWÓRZ LAYOUT boing

boing

boingboing

boing

#4

Elastyczny layout to klucz do dopasowania zawartości do każdego rozmiaru i / lub orien-tacji wyświetlacza. Jeszcze tylko odpowiednie media queries i możesz podbić swoim layoutem każde urządzenie mobilne!

Polecane systemy siatek:• 960 Grid System 960.gs• Gridset gridsetapp.com• Columnal columnal.com• Golden GS goldengridsystem.com• 1140 CSS Grid cssgrid.net

Elastyczne layouty używają kolumn, które organizują ich zawar-tość. Zamiast ustalonych z góry szerokości, używają wartości re-latywnych, tak, aby dopasować swój rozmiar do wielkości okna roboczego urządzenia, na którym wiadomość jest wyświetlana.

200px

300px

800px

15.38%

23.07%

61.5384615384...%

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ń!

Dopasuj do orientacjipoziomej i pionowej.

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30CM

0123456789101112INCH

Zmiany styluOkreŚL PUNKTY

#3

Tworząc Responsive E-mail Design, możesz wziąć pod uwagę 6, najczęściej spotykanych, punktów zmiany stylu.

<480

<768

>768

<320

768-1024

>1024

Dopasuj wiadomość do smartfonów pierwszej generacji dzięki warunkowi <480px.

Użyj warunku <768px dla smartfonów najnow-szej generacji i iPadów (Portret).

Dla wszystkich urządzeń o większej rozdzielczo-ści (duże tablety), zastosuj arkusz stylu >768px.

Dodaj arkusz stylu <320px dla niskiej rozdziel-czości.

Celuj w duże tablety, iPady (Pejzaż) dzięki warun-kowi >768px ORAZ <1024px.

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.

DODATKOWE:

GŁÓWNE:

320 480 720 768 900 1024 1200

niskaroz-dziel-czość

1 gene-racja

rozdziel-czości

Strefa,,Smartfonów"

Tablet -portret

Tablet - pejzaż

StrefaPCipad

NAJczĘŚCIEJ UŻYWANE

RozdzielczOŚCI

Zrozumiałe, a teraz...

Zmiana stylów jest fajna, ale rozciąganie rządzi

Wszystko jasne, tylko które rozdzielczości wybrać?

Niska rozdzielczośćPopularne smarfonyUrządzenia AppleTablety, netbookiRóżne

mediaqueries

Stosuj Magia!#2

Media Queries pozwalają na tworzenie wyjątkowo przydatnych warunków jeżeli ,,rozmiar=x, pokaż styl=y”.

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.

<style> @import url(tiny.css) (min-width:300px); @import url(small.css) (min-width:600px); @import url(big.css) (min-width:900px); /style>

@media screen and (max-width: 300px) { /* Style dla małych urządzeń */}@media screen and (max-width: 600px) { /* Style dla smartfonów */}

Od 200 do 640 px:@media screen and (min-width: 200px) and (max-width: 640px)

Orientacja pozioma (pejzaż), więcej niż 600 px:@media screen and (min-width: 600px) and (orientation:landscape)

Orientacja pionowa (portret), mniej niż 380 px:@media screen and (max-width: 380px) and (orientation:portrait)

Kilka przykładów

• 3 główne punkty zmiany stylu: 480 / 768 / 1024• 3 dodatkowe punkty zmiany: 320 / 720 / 900• Granica rozdzielczości PC: - około 1024px

Media Queries rządzą! A do tego, są banalnie proste!

Rzućmy okiem na:

LayoutTwórz Prosty

A quick test !Remove every styling CSS and styling information in your email or website design, and display it in your favorite browser.

If content is easy to read and well ordered, you’re probably good.

Szybki test!Usuń z projektu new-slettera wszystkie style CSS i wewnętrzne style, a następnie sprawdź swój pro-jekt w ulubionej przeglądarce.

Jeżeli zawartość wyświetla się prawidłowo, to znaczy, że jesteś na dobrej drodze do optymalne-go kodowania.

#1

Pomimo tego, że brzmi to banalnie, musisz zacząć od zbudowania jak najprostszego layoutu i kodu HTML.

USUń:• 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:• 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!

Dbaj o prostotę i czystość Twojego kodu HTML. Nie ufaj nowocze-snym sztuczkom takim jak efekty przejść CSS3 lub zmienne JS, przy tworzeniu strategicznych elemen-tów layoutu.

Zaczynajmy!

10wskaZOwek:

,

responsive

E-mailDesign

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 pozio-ma 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ę”.

PO CO Sie PRZEJMOWać?

trochę uczucia

Okaż użytkownikom mobilnym

Ruch online według lokalizacji na urz. mobilnych vs. PC

Ruch online na urządzeniach mobilnych

Afryka Azja Europa Ameryka Płn. Australia i Oceania

Ameryka Płd. Świat

16,6 %

22,9 %

12,7 %

12,8 %

14,2 %

5,3 %8,1 %

2010

2013

Grupa "Mobile" to mikroskopijna część moich odbiorców, więc...

Kilka statystyk:

Na podstawie danych za czwarty kwartał 2013 roku. Źródło: EmailForge od SplioWskaźnik otwarć e-maili

Inne urządzenia

Urządzenia mobilne

• 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ń

20,48 %

79,52 %24 %

29 %

36 %

iOS

Android

AndroidTablet(6%)

Windows Phone(4%)

iPad

AndroidPhone

iPhone

Bądźmy w kontakcie:@SplioPolskafacebook.com/pl.spliolinkedin.com/company/spliosplio.pl

Naw

Głównaoferta

Akcje

ZaWartośĆusuń zbędną

#9

Niektóre elementy zawartości Twojej wiadomości nigdy nie zostaną wyko-rzystane w kontekście urządzeń mobil-nych: po prostu je usuń!

Klasa .not_mobilePrzypisz klasę .not_mobile do wszystkich ele-mentów, które mogą zostać pominięte w wersji mobilnej Twojej wiadomości, a następnie użyj następującej formuły:

Jak wybrać najważniejsze elementy?Czytelny wygląd = łatwy odbiórWybierz 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.).

Jeśli jest to konieczne, pomyśl o dodaniu przycisku

,,Pokaż więcej”, aby odkryć pozostałe informacje.

@media screen and (max-width: 300px) { .not_mobile { display: none; }}

Eh... Wszystko zrobione, a na ekranie mojego urządzenia nadal nie widzę żadnych zmian..

Responsive jest do kitu :(

Rozmiartekstu:0.5px

Media queries

nie działają

Layout widoczny wResponsiveDesign

<3

480px szerokości udające 1280px prawdziwe 480px

Fałszywa imitacjapełnej rozdzielczości

Rzeczywista szerokość urządzenia

Responsive E-mail Design - 10 wskazówek [Infografika od Splio]

Marketing

Transcript of Responsive E-mail Design - 10 wskazówek [Infografika od Splio]