Dynamiczne kolumny w responsywnych wiadomościach – krok po kroku cz.3

responsive-dental-website-design1-500x285

Źródło: www.pbhs.com

Świetnie wyglądająca na urządzeniach mobilnych wiadomość nie zawsze musi mieć postać jednokolumnowego szablonu. Istnieje sposób, który pozwala na łatwe tworzenie dwukolumnowych responsywnych wiadomości, które na urzadzeniach mobilnych posiadać będą tylko jedną kolumnę. A to wszystko bez niesamowicie długich arkuszy stylów.

Dwie kolumny zazwyczaj pozwalają zawrzeć więcej informacji już na samym początku wiadomości niż w przypadku szablonu jednokolumnowego. O ile łatwo je odczytać na desktop-owych klientach poczty, takich jak Outlook, o tyle nawigacja na innych urządzeniach może okazać się dość trudna. Z pomocą przychodzi tutaj stara szkoła kodowania wiadomości, której zwolennicy często powarzają, że wszędzie gdzie to tylko możliwe powinno używać się atrybutów HTML zamiast CSS. Wynika to z faktu, że CSS nie jest interpretowany jednakowo we wszystkich klientach poczty, podczas gdy HTML jest. Przykładowo, atrybuty align=”left” i cellpadding=”10” są dużo bardziej niezawodne niż ich pokrewne atrybuty CSS float: left; i padding: 10px;. To właśnie z tego niezawodnego rozwiązania będziemy korzystać budując naszą wiadomośc ze zmienną liczbą kolumn. Spójrzmy więc na przykład dwukolumnowej wiadomości wyświetlonej w Outlooku:

obrazek-1-499x344

Powyższa wiadomość składa się z tabeli o jednej komórce o szerokości 640px, w której znajdują się dwie mniejsze tabele o pojedynczych komórkach, po 320px każda. Komórki te w całości wypełniają obszar głównej tabeli. Aby tekst nie przylegał ściśle do ich krawędzi zastosowany został atrybut cellpadding=”20”.

Gdybyśmy podczas tworzenia strony internetowej chcieli, aby komórki ustawione były przylegająco obok siebie, w większości przypadków wykorzystalibyśmy float:left. W naszym przypadku użyjemy jednak podstawowego align=”left”. O ile szerokość komórki tabeli głównej jest większa, bądź równa szerokości dwóch komórek tabel tworzących nasze kolumny, o tyle obie będą wyświetlać się prawidłowo. Do tej pory utworzyliśmy zatem następujący kod:

<table width=”640” border=”0“ cellpadding=”0“ cellspacing=”0“>

<tr>
<td>
<table width=”320” border=”0” cellspacing=”0” cellpadding=”20” align=”left“>
<tr>
<td><p><!– LEWA STRONA TABELI –></p></td>
</tr>
</table>
<table width=”320” border=”0” cellspacing=”0” cellpadding=”20” align=”right“>
<tr>
<td><p><!– PRAWA STRONA TABELI –></p></td>
</tr>
</table>
</td>
</tr>

</table>

Podgląd wiadomości w kliencie poczty systemu iOS:

expedia-iphone-render-261x500

Gdyby główna tabela miała szerokość 640 bądź więcej pikseli, otrzymalibyśmy dwukolumnową wiadomość. Kiedy jednak rozmiar ekranu wymusza na tej komórce mniejszy rozmiar, kolumna z prawej strony przechodzi na dół ekranu. Korzystając z media queries możemy określić szerokość komórki tabeli głównej jako 320 pikseli, dzięki czemu otrzymamy klarowny, jednokolumnowy szablon, który będzie doskonale wyglądał w każdym mobilnym kliencie poczty.

<code><style type=”text/css“>

@media only screen and (max-device-width: 480px) {

table[class=contenttable] {

width:320px !important;

}

}

</style>

<table width=”640” border=”0” cellpadding=”0” cellspacing=”0” class=”contenttable“></code>

Użycie media queries przy tworzeniu responsywnych wiadomości w dużej mierze ograniczone jest tylko wyobraźnią projektanta. Zaprezentowane przez nas techniki stanowią tylko podstawy, które umożliwią Wam tworzenie świetnie wyglądających wiadomości. Mamy nadzieję, że pozwolą wam one na zwiększenie wskaźników otwieralności, kliknięć i sprzedaży, niezależnie od klientów poczty używanych przez Waszych odbiorców. Powodzenia!