Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Tworzymy prosty responsywny email w formacie HTML

by
Length:LongLanguages:

Polish (Polski) translation by Katarzyna Kapusta (you can also view the original English article)

W tym tutorialu pokażę, jak stworzyć prosty responsywny email w HTML, który zadziała w każdym kliencie poczty, również w aplikacjach na smartfony. Korzystając z minimal media queries oraz płynnych ustawień szerokości, zapewnimy mu pełną kompatybilność.

Media queries (zapytanie o rozmiar urządzenia): to dopiero połowa drogi

Kiedyś media queries wystarczyły w zupełności, by upewnić się, że tworzony przez nas responsywny email sprawdzi się w aplikacjach na iOS i Androida - oba systemy obsługują takie zapytania.

Od tego czasu pojawiło się jednak wiele nowych aplikacji pocztowych zarówno dla iOS, jak i dla Androida, które w różnym stopniu wspierają narzędzia responsywnego projektowania.

Do najważniejszych należy ostatnia aktualizacja aplikacji Gmail dla Androida, która dwukrotnie przebija popularnością standardowego klienta poczty (z tego ostatniego pochodzi dziś około 11% wszystkich pobrań). Aplikacja Gmaila nigdy nie wspierała media queries i nadal ich nie wspiera, zamiast tego jednak ogranicza rozmiar maili, ścieśniając zewnętrzne pola tabeli w taki sposób, by całość zmieściła się na ekranie. Niełatwo to opanować, a gdy cała nasza koncepcja przystosowania dla urządzeń mobilnych opiera się na media queries, nie unikniemy nieprzyjemnych efektów.

Dlaczego bez fluidu ani rusz

Mam jednak i dobrą wiadomość - da się zaprojektować email w taki sposób, by wyglądał świetnie w każdej aplikacji pocztowej, nawet w takiej, która nie wspiera media queries. Wystarczy posługiwać się płynnym układem (fluid layout).

W kilku kwestiach trzeba będzie jednak pójść na kompromis. Nie sprawdzi się chociażby tak lubiany układ kilku kolumn o równej szerokości, które na wąskim ekranie zlewają się w jedną. Jeśli potrafisz się bez nich obejść, masz do wyboru parę innych bardzo praktycznych układów, które poradzą tu sobie znakomicie.

Oto nad czym będziemy dziś pracować:

Final-Product-Both

Zaczynamy

Ok, zacznijmy od zagruntowania płótna,

Utworzyliśmy właśnie prostą stronę z nagłówkiem (header), oznaczeniem doctype i tabelą-pojemnikiem (container table) z zadanym tłem (które obejmie zarówno treść - body - jak i całą tabelę zewnętrzną, ponieważ aplikowanie stylu do tagu body nie jest wciąż powszechnie wspierane). Żeby dowiedzieć się więcej o tym, jak powstaje taki podstawowy układ, odwiedź tutorial Build an HTML Email Template from Scratch.

Umieściłam naszą główną tabelę pośrodku i nadałam jej klasę 'content'.

Uwaga!

Zauważ: w tym tutorialu reguły CSS wpisywać będę w nagłówku dokumentu. Na ogół umieszczam w nagłówku te style, których użyję wiele razy, a w poszczególnych liniach tylko te, z których skorzystam raz.

Ważne: kiedy wpisujemy reguły CSS w nagłówku dokumentu, musimy użyć odpowiedniego narzędzia, by na koniec przenieść je do właściwych linii. Jeśli używasz serwisów takich jak MailChimp czy Campaign Monitor, będziesz mógł skorzystać z opcji automatycznego przepisania stylów przy imporcie projektu. Musimy to zrobić, ponieważ niektóre klienty poczty, jak choćby Gmail, pomijają lub wycinają całą zawartość tagu <style>. Do przeniesienia CSS do poszczególnych linii możesz użyć również narzędzia Premailer. Zanim skorzystasz z Premailera lub któregoś z podobnych narzędzi, pamiętaj, by wyciąć z projektu media queries (których nie chcemy nigdzie przenosić) i wkleić je ponownie w to samo miejsce po zakończeniu edycji. MailChimp i Campaign Monitor zatroszczą się o to automatycznie.

Ukrywanie reguł dla urządzeń przenośnych Yahoo!

Zauważ, że tag body ma dodatkowy atrybut. Yahoo Mail traktuje media queries jak świętość, dlatego, by to obejść, musimy skorzystać z selektorów z atrybutem. Moim zdaniem (i zgodnie z radami Email on Acid) najprościej będzie dopisać atrybut do tagu body. Nazwałam go 'yahoo', tak jak radzili autorzy, można jednak użyć dowolnej nazwy.

W ten sposób, korzystając w regułach CSS z atrybutu przy body, możesz wyodrębnić poszczególne klasy.

Dwie sztuczki, które pomogą okiełznać układ płynny

Jak widać, nasza tabela 'content' ma szerokość 100%, będzie więc płynna i zajmie cały wymiar poziomy ekranu. Ustawimy zarazem maksymalną szerokość na 600 px, aby na większych urządzeniach mail nie zajął całego ekranu.

Aby upewnić się, że wszystko zadziała zgodnie z planem w każdym kliencie poczty, musisz opanować dwie, nie całkiem proste, sztuczki. Obie pochodzą z kapitalnego tutorialu Tiny Ye, który opublikowano na blogu FogCreek.

1. Obejście braku wsparcia dla max-width (szerokości maksymalnej)

Niestety nie wszystkie aplikacje pocztowe wspierają właściwość max-width. Aby nasz email wyświetlał się prawidłowo się w Outlooku i Lotus Notes 8 i 8.5, musimy każdą z tabel, poprzez kod warunkowy,  ująć w dodatkową tabelę o ustalonej szerokości. Regułą tą obejmujemy IE (to silnik renderujący w Lotus Notes) oraz Microsoft Outlook.

Oto nasza tabela ujęta w kod warunkowy:

2. Łatka dla Apple Mail

Nie wiadomo czemu, właściwości max-width nie wspiera również i Apple Mail (który na ogół bywa klientem poczty bardzo na czasie). Możemy tu za to używać media queries. Stworzymy zatem zapytanie, które ustali szerokość naszej tabelki o klasie 'content' dla ekranów, które mogą objąć pełne 600 px.

Tworzenie nagłówka

Dodamy teraz pierwszy wiersz naszej tabeli - nagłówek. Dopisz następujący kod przy utworzonym właśnie wierszu:

Teraz przejdź do CSS i dodaj nagłówkowi nieco przestrzeni (padding).

Pierwszy wiersz responsywny

Teraz powstanie nasz pierwszy wiersz responsywny. Utworzymy dwie tabele, które 'przepłyną' na sąsiednie pozycje, korzystając z właściwości HTML 'allign'.

Lewa kolumna

Zastąp teraz pozdrowienie "Hello!" następującym kodem:

Utworzymy tabelę o szerokości 70 px i dodamy nieco wewnętrznego marginesu (padding), który posłuży za rynnę między dwoma kolumnami. Margines na dole zapewni pionowy odstęp na urządzeniach mobilnych, gdzie kolumny złożą się jedna pod drugą.

Prawa kolumna

Prawą kolumnę utworzymy tak jak poprzednio, wyrównując tabelkę do lewej. Ta tabelka będzie miała szerokość 445 px - w ten sposób pozostanie nam 25 px wolnego miejsca po prawej stronie. To bardzo ważne, bo Outlook automatycznie złoży tabelki jeśli w wierszu nie pozostawimy co najmniej 25 px przestrzeni.

Responsive-AlignedTables

Jeśli tylko zachowamy co najmniej 25 px wolnego miejsca, tabelki zachowają sie tak, jak chcieliśmy.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Aby Outlook nie złożył tabelek, pozostaw co najmniej 25 px wolnej przestrzeni.

Stop! Inny sposób, by przechytrzyć Outlooka

Z tym Outlookowym dziwactwem poradzić sobie można również korzystając ze skryptu warunkowego, który przekona aplikację, że właśnie zamknęliśmy jedną  komórkę i otwieramy nową. Pod tagiem zamykającym pierwszą tabelkę i przed otwarciem kolejnej, dopisz po prostu:


Jeszcze trochę...

W szerszej tabelce po prawej stronie skorzystamy z tego samego podejścia, co przy tabeli-pojemniku, a więc utworzymy nową klasę i obejmiemy tabelę nowym kodem warunkowym. Chcemy nadać tej tabeli szerokość 100% na urządzeniach mobilnych, by schowała się pod tabelą z lewej strony.

Jak widzisz, nadałam tej tabeli nową klasę 'col425' - zrobimy z niej kolumnę o szerokości 425 px. Ujęłam tabelę w kod warunkowy, który zamknie ją w kolejnej tabeli o szerokości 425 px.  Również tę klase dorzucimy do media query, który napisaliśmy specjalnie dla Apple Mail.

Teraz wewnątrz naszej komórki dorzucimy nagłówek wraz z formatowaniem.

W każdej z komórek umieściłam osobną klasę dla formatowania, dopisałam też kilka reguł stylu, których użyję później dla innego typu tekstu.

Skończyliśmy też z nagłówkiem, a dwie kolumny na urządzeniach mobilny powinny złożyć się jak na ilustracji poniżej. Aby przekonać się, jak to działa, musisz tymczasowo "wykomentować" zapytanie min-device-width, ponieważ wymuszają one sztywno ustaloną szerokość na desktopie).

01-header

Tworzenie wiersza pojedynczej kolumny tekstu

Aby utworzyć wiersz pojedynczej kolumny tekstu, po prostu dodaj do klasy '.content' nowy wiersz. Nadamy tym rzędom osobna klasę 'innerpadding', ustalając wielkości marginesu, które jeszcze nam się przydadzą. Dorzucimy jeszcze klasę 'borderbottom', aby każdemu wierszowi nadać krawędź.

Reguły CSS dla tej sekcji:

Tworzenie wycinka tekstu w dwóch kolumnach

Teraz utworzymy responsywny wiersz dokładnie w ten sam sposób, co przy nagłówku, jednak nadamy mu nieco inne wymiary, by móc umieścić tam większy obrazek.

Umieściliśmy tu przycisk, opisany klasą 'buttonwrapper'. Zawiera on komórkę z wyściółką o zadanym kolorze tła oraz tekst z linkiem. Lubię stosować tę metodę, bo pozwala ona uzyskać przycisk o płynnie ustalanej szerokości, co bardzo się przydaje w przypadku szablonu wielokrotnego użytku, gdzie szerokość każdego przycisku przy każdym zastosowaniu będzie inna. Jeśli masz dla przycisków ustaloną szerokość, być może wygodniej bedzie skorzystać z Bulletproof Button Generator pod Campaign Monitor.

Reguły dla przycisku:

Ustalimy również szerokość dla naszej nowej klasy 'col380', a potem dorzucimy ten rozmiar również do listy reguł dla Apple Mail. Teraz wygląda to tak:

Email-TwoCol

Tworzenie pojedynczej kolumny z obrazkiem

Ten wiersz będzie bardzo prosty: wstawimy tylko obrazek o szerokości 100% szerokości maila i upewnimy się, że wysokość zostanie ustalona automatycznie za pomocą CSS.

A w CSS:

Tworzenie ostatniego wiersza ze zwykłym tekstem

Na koniec dodamy wiersz tekstowy bez obramowania na dole.

Tworzenie stopki

Aby utworzyć stopkę, dodamy nowy wiersz z zagnieżdżoną tabelą. W jednym z wierszy znajdzie się kolejna tabela z ikonkami mediów spolecznościowych.

Dodamy wymagane style dla naszej stopki do CSS:

Optymalizowanie przycisków dla urządzeń mobilnych

Na telefonie najlepiej, gdy cały przycisk stanowi link, nie tylko sam tekst, bo wówczas trudno jest utrafić w niego palcem. Ponieważ nie możemy wprowadzić takiego rozwiązania dla komputerów typu desktop (brakuje pełnego wsparcia dla wyściółki w obrębie tagów <a>), skorzystamy z media queries wprowadzimy to ulepszenie dla urządzeń mobilnych.

Musimy wyciąć ustawienie koloru z <td>, gdzie je umieściliśmy, i przenieść je z powrotem na <a>, wraz z hojną wyściółką.

Określę w tym zapytaniu zarówno max-width, jak i max-device-width, aby uniknąć błędów w usłudze Outlook.com na IE9.

Teraz możemy już kliknąć w którymkolwiek miejscu przycisku - cały stanowi link!

Dodatkowe usprawnienia w media queries

Jeśli chcesz, możesz teraz wprowadzać poprawki do całego układu, nadając nazwy klas elementom, które chcesz przystosować, a następnie tworząc dla nich reguły w obrębie zapytania, które właśnie utworzyliśmy.

Dla przykładu, możemy zamienić link do anulowania subskrypcji w przycisk, przypisując mu klasę:

i dodając następującą regułę CSS pod media query:

Email-Footer-MQs

Możesz zmienić również .innerpadding (wewnętrzna wyściółka), .header (nagłówek) czy .footer (stópkę), zmniejszając wielkość wyściółki na klientach, które wspierają media queries.


Wypróbuj - i gotowe!

Na koniec przeprowadź, jak zawsze, walidację (przy użyciu walidatora W3C - powinien się pojawić tylko jeden błąd związany z prywatnym atrybutem 'yahoo' przy tagu body), a potem solidny test na rzeczywistych urządzeniach, a także w jednym z serwisów do podglądów w sieci, takich jak Litmus czy Email on Acid.

Miłego tworzenia responsywnych maili, które w każdym kliencie poczty wyglądają wspaniale!

Jeśli chciałbyś przeskoczyć na kolejny poziom, odwiedź kolejne tutoriale:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.