Responsive E-mail Design – 10 wskazówek

SPLIO 10 WSKAZÓWEK: 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 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ę". Grupa "Mobile" to mikroskopijna cześć moich odbiorców, wiec. PO CO SIE PRZEJMOWAĆ? Kilka statystyk: RUCH ONLINE NA URZĄDZENIACH MOBILNYCH I 2010 I 2013 Ruch online według lokalizacji na urz. mobilnych vs. PC Afryka Azja Europa Ameryka Pin. Ameryka Pid. Świat Australia i Oceania WSKAŹNIK OTWARĆ E-MAILI Na podstawie danych za czwarty kwartał 2013 roku. Zrádło: EmailForge ad Splia -Windows Phone (4%) Android Tablet 20,48 % (6%) iPad IPhane 36 % 24 % 79,52 % 29 % IInne urządzenia Urządzenia mobilne Android Phone ios 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. 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. USUÑ: ( bez litościl ] Jeżeli zawartość wyświetla się prawidłowo, to znaczy, że jesteś na dobrej drodze do optymalne- go kodowania, • Zbędne, wielokrotnie natoż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 nowocze- • 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...) snym sztuczkom takim jak efekty przejść CSS3 lub zmienne JS, przy tworzeniu strategicznych elemen- tów layoutu. A teraz, magiczna sztuczka! 12 STOSUJ Magia! MEDIA QUERIES Media Queries pozwalają na tworzenie wyjątkowo przydatnych warunków jeżeli Kilka przykładów „rozmiar=x, pokaż styl=y". 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) 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 pionowa (portret), mniej niż 380 px: @media screen and (max-width: 380px) and (orientation:portrait)