{"id":6715,"date":"2019-08-27T10:53:00","date_gmt":"2019-08-27T10:53:00","guid":{"rendered":"https:\/\/messageflow.com\/?p=6715"},"modified":"2025-08-20T07:39:01","modified_gmt":"2025-08-20T07:39:01","slug":"e-mail-mobile-friendly-czyli-jaki-5-kluczowych-elementow-przy-tworzeniu-responsywnych-e-maili","status":"publish","type":"post","link":"https:\/\/kopia.messageflow.com\/pl\/blog\/e-mail-mobile-friendly-czyli-jaki-5-kluczowych-elementow-przy-tworzeniu-responsywnych-e-maili\/","title":{"rendered":"E-mail mobile-friendly, czyli jaki? – 5 kluczowych element\u00f3w przy tworzeniu responsywnych e-maili"},"content":{"rendered":"

Polscy internauci zwracaj\u0105 si\u0119 ku rozwi\u0105zaniom mobilnym. Transmisja danych w sieciach mobilnych jest od kilku lat najdynamiczniej rozwijaj\u0105c\u0105 si\u0119 us\u0142ug\u0105. W 2020 roku przes\u0142ano \u0142\u0105cznie 5082 PB danych. By\u0142 to wynik o prawie 40,7% lepszy od odnotowanego rok wcze\u015bniej. Na jednego Polaka przypada\u0142o \u015brednio 133 GB.<\/p>

  • 72%<\/em><\/strong> Polak\u00f3w u\u017cywa smartfon\u00f3w<\/li>
  • 49% <\/em><\/strong>posiadaczy smartfon\u00f3w u\u017cywa ich do sprawdzania poczty e-mail<\/li>
  • 25%<\/em><\/strong> transakcji online dokonywanych jest na telefonie<\/li><\/ul>

    Ju\u017c ponad 60% Polak\u00f3w wysy\u0142a i odbiera maile przede wszystkim za po\u015brednictwem smartfona, co \u2013 bior\u0105c pod uwag\u0119 rosn\u0105ce wska\u017aniki korzystania z urz\u0105dze\u0144 mobilnych prowadzi do prostego wniosku \u2013 ten odsetek tak\u017ce b\u0119dzie rosn\u0105\u0107, dlatego marketerzy musz\u0105 dostosowa\u0107 swoje narz\u0119dzia, w tym mailingi i newslettery do wersji mobile. Na co zwraca\u0107 uwag\u0119, projektuj\u0105c e-maile mobile friendly, czyli przede wszystkim responsywne? Oto 5 podstawowych patent\u00f3w na e-mail mobile-friendly<\/strong>.<\/p>

    *raport IAB Polska Mobile 2018<\/p>

    E-mail mobile-friendly – jak skonstruowa\u0107?<\/h2>

    1. Chwytliwy tytu\u0142 i preheader<\/h3>

    Chwytliwy tytu\u0142 to kr\u00f3tki tytu\u0142. Ta dewiza sprawdza si\u0119 nie tylko w mediach, ale te\u017c w e-mail marketingu. I nie chodzi wy\u0142\u0105cznie o to, \u017ce kr\u00f3tki tytu\u0142 \u201esam wpada w oko\u201d, ale przede wszystkim o kwestie techniczne. Najch\u0119tniej wykorzystywan\u0105 aplikacj\u0105 pocztow\u0105 mobile jest aplikacja Gmaila, standardowo instalowana na urz\u0105dzeniach z Androidem (ok. 47% u\u017cytkownik\u00f3w). Programy pocztowe w telefonach koncentruj\u0105 si\u0119 przede wszystkim na eksponowaniu nadawcy. Taki zabieg pozwala u\u017cytkownikom od razu przesiewa\u0107 maile i skupia\u0107 si\u0119 na wiadomo\u015bciach od konkretnych nadawc\u00f3w.<\/p>

    Jednak\u017ce ta forma wy\u015bwietlania wiadomo\u015bci sprawia, \u017ce warto po\u015bwi\u0119ci\u0107 chwil\u0119 na takie skonstruowanie tematu i preheadera, aby przyci\u0105gn\u0105\u0107 uwag\u0119 u\u017cytkownika. O czym pami\u0119ta\u0107?<\/p>

    1. W aplikacji Gmail wy\u015bwietla si\u0119 do 33 znak\u00f3w (w zale\u017cno\u015bci od szeroko\u015bci telefonu). Pami\u0119tajmy, \u017ce nieodebrane wiadomo\u015bci maj\u0105 temat wyt\u0142uszczony, a bold<\/em> zabiera wi\u0119cej miejsca ni\u017c wersja regular<\/em> (wi\u0119c 33 znaki to ju\u017c ryzyko uci\u0119cia tematu).<\/li>
    2. Temat powinien by\u0107 kr\u00f3tki, na maksymalnie 5 s\u0142\u00f3w.<\/li>
    3. Przyci\u0105gajmy uwag\u0119, np. poprzez bezpo\u015bredni zwrot i wykorzystanie piktogram\u00f3w.<\/li>
    4. Preheader powinien by\u0107 skonstruowany tak, aby nie przekracza\u0142 33 znak\u00f3w (font o rozmiarze mniejszym ni\u017c ten u\u017cyty w temacie).<\/li>
    5. Tre\u015b\u0107 preheadera musi by\u0107 skorelowana z tematem, a przekaz by\u0107 konkretny (preheader ma wp\u0142yw na otwieralno\u015b\u0107 mailingu).<\/li><\/ol>

      2. Prosty uk\u0142ad<\/h3>

      \u015awietny tytu\u0142 i chwytliwy preheader to nasz or\u0119\u017c do tego, by sk\u0142oni\u0107 u\u017cytkownika do otwarcia maila. Kolejna bitwa toczy\u0107 si\u0119 b\u0119dzie ju\u017c na polu wiadomo\u015bci, kt\u00f3rej podstawow\u0105 cech\u0105 musi by\u0107 przejrzysto\u015b\u0107.<\/p>

      Projektuj\u0105c e-mail w wersji mobile, musimy wzi\u0105\u0107 pod uwag\u0119 zasad\u0119, \u017ce im mniej scrollowania, tym lepiej. A zatem tworzymy uk\u0142ad jednokolumnowy (lub dwukolumnowy, ale w\u00f3wczas warto dok\u0142adnie przeanalizowa\u0107 spos\u00f3b prze\u0142amania tabeli, co dzieje si\u0119 najcz\u0119\u015bciej przy szeroko\u015bci 480 px).<\/p>

      Budowanie mailingu na tabelach to zalecana forma, gdy\u017c gwarantuje utrzymanie optymalnej szeroko\u015bci maila u r\u00f3\u017cnych klient\u00f3w poczty. Najlepiej na urz\u0105dzeniach mobilnych skaluj\u0105 si\u0119 mailingi opracowane dla szeroko\u015bci 600 px. Warto pami\u0119ta\u0107 o zastosowaniu w kodzie media queries<\/strong>, kt\u00f3re pozwalaj\u0105 m.in. na zastosowanie odpowiedniego pliku lub kodu CSS w zale\u017cno\u015bci od wskazanej rozdzielczo\u015bci ekranu, na kt\u00f3rym u\u017cytkownik otwiera e-mail.<\/p>

      3. Klasyczne fonty<\/h3>

      Cho\u0107 dla wielu projektant\u00f3w zastosowanie oryginalnego fontu mo\u017ce wyda\u0107 si\u0119 kusz\u0105ce, standardowe rodzaje s\u0105 o wiele bezpieczniejsze (Arial, Verdana, Tahoma, Times New Roman)<\/strong> \u2013 dzi\u0119ki temu mamy gwarancj\u0119, \u017ce tre\u015b\u0107 wy\u015bwietli si\u0119 prawid\u0142owo w r\u00f3\u017cnych aplikacjach. Optymalny rozmiar fontu to 14 \u2013 22 pkt., ale \u2013 uwaga \u2013 warto przetestowa\u0107 wszystkie rodzaje font\u00f3w, gdy\u017c 14 pkt. zapisane Verdan\u0105 i Times New Roman maj\u0105 r\u00f3\u017cn\u0105 wysoko\u015b\u0107.<\/p>

      4. Wa\u017cny pierwszy widok<\/h3>

      E-mail w za\u0142o\u017ceniu ma u u\u017cytkownika wywo\u0142a\u0107 jak\u0105\u015b reakcj\u0119, wzywaj\u0105c go do wykonania konkretnego dzia\u0142ania. Pami\u0119taj\u0105c o zasadzie, \u017ce im mniej scrollowania, tym lepiej, przyciski CTA nale\u017cy zamie\u015bci\u0107 w pierwszym widoku.<\/p>

      Wa\u017cne, aby zachowa\u0107 po\u017c\u0105dan\u0105 wielko\u015b\u0107 (minimum 44 x 44 px). Pami\u0119tajmy, \u017ce w wersjach mobilnych przyciski nie zmieni\u0105 koloru po najechaniu, wi\u0119c powinny by\u0107 zaprojektowane tak, aby u\u017cytkownik od razu wiedzia\u0142, \u017ce ma w nie klikn\u0105\u0107. Podobnie rzecz si\u0119 ma z wszystkimi innymi klikalnymi elementami, np. linkami \u2013 warto je wi\u0119c wyr\u00f3\u017cni\u0107 (kolorystycznie, poprzez podkre\u015blenie itp.).<\/p>

      5. Prosta grafika<\/h3>

      W responsywnym mailingu zdj\u0119cia s\u0105 skalowane, dlatego wybierajmy grafiki bez nadmiernych detali, tak, aby dostosowane do wersji mobilnej nadal by\u0142y czytelne. T\u0142o powinno mie\u0107 jednolity kolor, a zastosowane grafiki rozszerzenie JPG, PNG lub GIF oraz opis za pomoc\u0105 parametru ALT<\/strong>.<\/p>

      Tekst alternatywny pozwala u\u017cytkownikom zidentyfikowa\u0107 fragmenty mailingu z obrazem w sytuacji, gdy klient pocztowy nie pobiera automatycznie obrazk\u00f3w. Widz\u0105c odpowiedni tekst alternatywny, u\u017cytkownik mo\u017ce podj\u0105\u0107 dalsz\u0105 akcj\u0119, a wi\u0119c pobra\u0107 obrazki. Jednak je\u015bli tego nie zrobi \u2013 dzi\u0119ki odpowiednim opisom mailing pod wzgl\u0119dem merytorycznym b\u0119dzie r\u00f3wnie warto\u015bciowy.<\/p>

      Pami\u0119tajmy te\u017c, aby nie projektowa\u0107 struktury wiadomo\u015bci za pomoc\u0105 obrazk\u00f3w. Dobrze, aby pliki graficzne zastosowane w mailingu mia\u0142y prost\u0105, numeryczn\u0105 struktur\u0119 nazewnictwa: 01, 02, 03 itd. I jeszcze jedno \u2013 Java Scriptu nie kocha \u017caden klient pocztowy \u2013 zatem go nie stosujmy.<\/p>

      E-mail mobile-friendly: podsumowanie<\/h2>

      W marketingowej rzeczywisto\u015bci zmienn\u0105, kt\u00f3ra ma niebagatelne znaczenie dla powodzenia kampanii czy wysy\u0142ki newsletter\u00f3w jest czas. Z tego powodu to w\u0142a\u015bnie marketerzy najch\u0119tniej korzystaj\u0105 z gotowych rozwi\u0105za\u0144 i sprawdzonych szablon\u00f3w, kt\u00f3re od pocz\u0105tku s\u0105 konstruowane tak, aby realizowa\u0107 konkretne marketingowe za\u0142o\u017cenia. Oczywi\u015bcie mo\u017cna samodzielnie (je\u015bli kto\u015b potrafi) kodowa\u0107 mailingi w HTML. Mo\u017cna to te\u017c zleci\u0107. Mo\u017cna jednak skorzysta\u0107 ze skutecznych narz\u0119dzi np. kreatora Drag & Drop w MessageFlow, kt\u00f3re s\u0105: gotowe do u\u017cycia, przetestowane na wielu klientach pocztowych (konieczne przy ka\u017cdym mailingu), proste, intuicyjne w obs\u0142udze i oczywi\u015bcie responsywne. <\/p>

      <\/p><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":13516,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[91],"tags":[],"class_list":["post-6715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-pl"],"acf":[],"_links":{"self":[{"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/posts\/6715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/comments?post=6715"}],"version-history":[{"count":3,"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/posts\/6715\/revisions"}],"predecessor-version":[{"id":13520,"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/posts\/6715\/revisions\/13520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/media\/13516"}],"wp:attachment":[{"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/media?parent=6715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/categories?post=6715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kopia.messageflow.com\/pl\/wp-json\/wp\/v2\/tags?post=6715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}