Differences

This shows you the differences between two versions of the page.

--- wiki:sandbox [2014-11-12 17:12] – 31.11.173.240
+++ wiki:sandbox [2016-01-22 19:19] (current) – removed Aleksandr
@@ Line 1: / Line 1: @@
-====== Specyfikacja budowy szablonów email wedle standardu CQN ======
-===== Design — najlepsze praktyki =====
-  * Email powinien mieć szerokość maksymalnie 600-800 px. Ta szerokość zazwyczaj najlepiej wpasowuje się w szerokość panelu podglądu klientów pocztowych.
-  * Projektuj prosto. Używaj projektów opartych o siatkę oraz unikaj skomplikowanych konstrukcji, które wymagają pozycjonowania absolutnego oraz deklaracji float.
-  * Zakładaj, że obrazki oraz tła nie załadują się w ogóle i zostaną zablokowane przez klientów pocztowych.
-  * Nie projektuj kreacji która opiera się na jednym pociętym obrazku. Efekt jest bardzo przystępny ale nie w przypadku kiedy obrazki się nie wyświetlą.
-  * Używaj podstawowych wieloplatformowych czcionek np. Arial, Verdana, Georgia i Times New Roman.
-  * Unikaj używania elementów wymagających użycia Flasha oraz JavaScriptu. Jeśli potrzebujesz animacji format .gif to najlepszy wybór.
-  * Nie zapomnij o zasadzie "Mobile first". Czy twoja treść będzie czytelna na czytniku wielkości dłoni. Czy obrazki są wystarczająco zoptymalizowane aby ładować się na wolnym łączu. Czy linki są wystarczająco duże aby kliknąć w nie kciukiem?
-===== Dewelopment — najlepsze praktyki =====
-  * Chociaż trwają prace konsorcjum W3C nad ustandaryzowaniem szablonów email nadal uniwersalną metodą na budowę szablonu pozostają tabele.
-  * Utrzymuj kaskadowe arkusze stylów (CSS) w najprostszej formie. Deklaracja  “font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF;“ jest równoważna z “font:#FFF 12px Arial, Helvetica, sans-serif”), unikaj właściwości (slot, position, clear, visibility, etc.), oraz skomplikowanych selektorów ( poprzednik, dziecko, rodzeństwo i pseudo elementów)
-  * Trzymaj cały kod CSS inline.
-  * Używaj linków absolutnych dla zasobów takich jak obrazki.
-  * Nie zaprzątaj sobie głowy technologią Flash oraz JavaScript.
-  * Używaj "@media-queries" aby zwiększyć przyjazność swojej kreacji na urządzeniach mobilnych.
-  * Testuj swoje kreacje!
-===== CSS i wsparcie klientów poczty =====
-|!  Orange    |   Apple   |   more
-|!   !Bread    |   Pie     |   more
-|!   Butter   | Ice cream |  and more