Rozmiary e-maili: idealne wymiary dla Twoich szablonów [2022]

Czy kiedykolwiek zastanawiałeś się, jakie są idealne rozmiary wiadomości e-mail dla szablonów biuletynów? Potrzebujesz dobrać dla nich konkretną szerokość i wysokość?

Cóż, krótka odpowiedź brzmi: tak. Długa odpowiedź jest nieco bardziej złożona. Nie martw się jednak, ponieważ zbadamy wszystko, co musisz wiedzieć o idealnych wymiarach i liczbie pikseli (px), które muszą być, aby renderować się poprawnie.

Aby dać Ci wyobrażenie, dzisiaj przyjrzymy się podstawowym rozmiarom, w tym:

• Szerokość i wysokość szablonu
• Rozmiar pliku kampanii
• Nagłówek e-maila
• Bloki treści i stopka

Bez zbędnych ceregieli, zobaczmy je!

Wymiary szablonu wiadomości e-mail: przegląd

Jeśli spieszysz się, aby znaleźć najlepsze rozmiary swoich biuletynów , możesz sprawdzić poniższą tabelę:

Teraz przyjrzyjmy się im dokładniej!

Rozmiar wiadomości e-mail — anatomia elementu

Oto przykład biuletynu e-mailowego i elementy, które przeanalizujemy:

Ta kampania ma szerokość 664 px i wysokość 2549 px. Projekt e-maila wyświetla się dobrze zarówno w skrzynkach odbiorczych Gmaila, jak i Outlooka oraz poprawnie renderuje się na urządzeniach mobilnych. Jeśli chodzi o rozmiar pliku, jest to 57,8 KB, co mieści się w idealnych granicach rozmiaru.

Zanim przejdziemy dalej, pamiętaj, że Twój projekt może wyglądać inaczej w zależności od rozdzielczości i rozmiaru ekranu Twoich subskrybentów . Więc teraz, gdy wiemy, co będziemy badać, zacznijmy odkrywać te „idealne” rozmiary jeden po drugim!

Najlepsze rozmiary e-maili: szerokość, wysokość i waga

Zaczynając od kluczowych wymiarów szablonu wiadomości e-mail w formacie HTML , znajdźmy najlepszą szerokość, wysokość i „wagę”, aby uniknąć problemów z popularnymi klientami poczty e-mail, takimi jak Gmail, Outlook.com, Yahoo Mail i nie tylko.

Szerokość e-maili

Większość wskazówek marketingowych podkreśla, że ​​idealna szerokość powinna wynosić 600 pikseli . Więc co to oznacza? Czy wszystkie Twoje szablony nie muszą być więcej, aby były wydajne?

Więc nie. Podczas gdy standardowa szerokość szablonu wiadomości e-mail wynosi 600 pikseli, możesz mieć szersze szablony. Powodem tego jest to, że dzisiejsi klienci poczty e-mail są znacznie bardziej zaawansowani niż w przeszłości. Tak więc wyświetlanie szerszych szablonów nie jest już takim problemem.

Niemniej jednak, chociaż możesz eksperymentować z szerokością, powinieneś wiedzieć, że Gmail może nie wyświetlać kolorów tła w przypadku projektów większych niż 640 pikseli. Może to być kłopotliwe dla Twoich kampanii, więc najłatwiej tego uniknąć, korzystając z układów o maksymalnej szerokości 640 pikseli .

Poniżej możesz zobaczyć wiadomość e-mail od Apple o szerokości 736 px:

Jeśli chcesz używać szerszych szablonów, skorzystaj z różnych narzędzi podglądu wiadomości e-mail, aby upewnić się, że wybrana szerokość nie spowoduje żadnych problemów.

Warto również wiedzieć, że większość kreatorów szablonów wiadomości e-mail, takich jak Moosend i Mailchimp, oferuje projekty, które mają domyślnie szerokość 600 pikseli, więc nie musisz się martwić rozmiarami szablonów wiadomości e-mail.

Wysokość e-maila

Porozmawiajmy teraz o wysokości szablonu wiadomości e-mail . Tutaj możesz uzyskać nawet 1500 pikseli lub więcej , w zależności od treści, którą chcesz zaprezentować.

Możesz zwariować z tym rozmiarem wiadomości e-mail, ale pamiętaj, że subskrybent powinien być w stanie przetrawić wiadomość bez przewijania w nieskończoność, aby przejść do sedna!

Idealnie szablon powinien mieć od 1500 do 3000 pikseli . Jeśli myślisz, że 3000 px to niewiele, spójrzmy na przykład z życia wzięty autorstwa The Citizenry:

Powyższy przykład ma wysokość 2230 px, co subskrybenci mogą sprawdzić w kilku scrollach.

Oczywiście wielu e-mail marketerów wybierze wyższe poziomy dla swoich kampanii. Pokazując swoim odbiorcom wszystko, co masz do zaoferowania, nie zapominaj, że nasz czas uwagi jest bardzo krótki, ponieważ w ciągu ostatnich 15 lat znacznie się skrócił!

Tak więc wysokość 2000-25000 px jest lepsza niż to, że odbiorca przewija przez niekończący się szablon, aby dostać się do swojego CTA!

Waga e-maila

Teraz, gdy znasz już szerokość i wysokość swojej kampanii, porozmawiajmy o najlepszym rozmiarze pliku dla Twojego szablonu .

Ogólnie rzecz biorąc, chcesz tworzyć wiadomości, które bez problemu trafią do skrzynki odbiorczej Twoich subskrybentów. Spamowy wiersz tematu jest zwykle przyczyną uruchamiania filtrów spamu. Ale czy wiesz, że rozmiar pliku wiadomości e-mail może być również przyczyną słabej dostarczalności wiadomości e-mail?

Aby tego uniknąć, powinieneś zachować niewielką wagę swojego e-maila. Oznacza to, że musisz mieć kampanie e-mailowe o treści od 20 do 102 KB .

Oto trzy szybkie sposoby uniknięcia problemów z renderowaniem:

• Postaraj się o maksymalny rozmiar pliku wiadomości e-mail 102 KB
• Mądrze używaj elementów wizualnych (GIF-ów, obrazów)
• Pomiń duże załączniki

Przycinanie skrzynki odbiorczej

Ale co się stanie, gdy Twój adres e-mail ma więcej niż 102 KB? Cóż, jeśli wyślesz go na adres Gmail, klient poczty skróci Twoją wiadomość .

Obcinanie wiadomości e-mail następuje, gdy kampanie przekraczają maksymalny rozmiar pliku. W rezultacie Gmail ukryje lub „przytnie” Twoją kampanię, a subskrybenci będą musieli wybrać opcję „Wyświetl całą wiadomość”, aby ją sprawdzić.

Chociaż Gmail ostatecznie pokaże im Twoją wiadomość, przycinanie kampanii nie jest idealne dla wygody użytkownika. Dodanie dodatkowego kroku do procesu może frustrować Twoje kontakty i skutkować niższymi współczynnikami klikalności i zaangażowania .

Rozwiązanie jest proste: zachowaj rozmiar e-maili poniżej 102 KB (75 KB to po prostu idealne)!

Wymiary elementów kampanii e-mailowej

Teraz, gdy omówiliśmy najważniejsze rozmiary wiadomości e-mail, które musisz znać, zastanówmy się, jakie są właściwe wymiary składników wiadomości e-mail , zaczynając od nagłówka wiadomości e-mail.

Nagłówek wiadomości e-mail

Przede wszystkim preheader wiadomości e-mail to dodatkowa linia tekstu po linii tematu. Możesz to szybko sprawdzić, patrząc na swoją skrzynkę odbiorczą. Zwykle wyglądają tak:

Jednak tekst preheadera jest również widoczny jako krótka wiadomość na górze biuletynu e-mail. Te wiersze kopii mogą dostarczyć czytelnikom cennych informacji, a nawet umożliwić im przeglądanie wiadomości e-mail w przeglądarce.

Oto przykład Sigma Beauty:

A więc, jak duży powinien być Twój preheader e-maili?

Jeśli chodzi o szerokość, Twój preheader będzie tak szeroki, jak reszta Twojej kampanii. Jednak pod względem wysokości powinien wynosić od 20 do 60 pikseli .

Nagłówek e-maila

Przechodzimy do jednego z najważniejszych elementów Twojej kampanii, nagłówka e-maila! Jak być może zauważyłeś, kampanie mogą mieć różne rozmiary nagłówków e-maili. Zobaczmy kilka przykładów.

Oto jeden autorstwa Wendella Augusta Forge:

(600×98 pikseli)

I jeden autorstwa The Blonde Abroad:

(600×255 pikseli)

Oba nagłówki mają taką samą szerokość 600 px. Jednak jeśli chodzi o wysokość, drugi ma 255 pikseli wysokości.

Podczas gdy mniejszy nagłówek, taki jak Wendell August Forge, jest idealny zarówno dla komputerów stacjonarnych, jak i urządzeń mobilnych, posiadanie nieco wyższego nagłówka nie będzie problemem (o ile najpierw go przetestujesz!). Z reguły nagłówek Twojej kampanii e-mailowej powinien mieć wysokość około 60-70 pikseli . Jeśli jednak Twoje logo zawiera dodatkowe elementy lub menu, może mieć nawet 200 pikseli .

Ponownie, nie zapomnij sprawdzić okienka podglądu Gmaila lub Outlooka lub trybu podglądu narzędzia do marketingu e-mailowego! Na przykład Moosend ma funkcję na komputery i urządzenia mobilne, która pozwala sprawdzić, jak wygląda Twoja kampania przed wysłaniem jej na listę e-mail. Możesz łatwo założyć konto i wypróbować je za darmo!

Bloki treści e-mail

Przyjrzyjmy się teraz rozmiarom e-maili w blokach treści. Te bloki mogą mieć wszystko, od kopii wiadomości e-mail i obrazów po GIF-y, filmy i CTA!

Jeśli chodzi o szerokość, bloki treści powinny być zgodne z wybranym rozmiarem szablonu wiadomości e-mail . Jednak jeśli chodzi o wysokość, jest kilka rzeczy, o których musisz pamiętać.

Przede wszystkim, aby zapewnić odbiorcom jak najlepsze wrażenia, musisz sprawić, by bloki treści były wartościowe i krótkie. Długie bloki treści spowodują porzucenie wiadomości e-mail i krótki czas odczytu wiadomości e-mail! I nie potrzebujesz tego.

Poniżej znajdziesz kampanię e-mail marketingową Julie Blanner z trzema blokami treści:

Każdy blok ma wysokość 344 pikseli i zawiera obraz, kopię oraz proste wezwanie do działania. Wizualnie każdy blok kontynentu jest łatwy do odczytania i interakcji. Minimalistyczny projekt wiadomości e-mail pomaga również w osiągnięciu celu blogera.

W sumie zawartość wiadomości e-mail Julie Blanner ma wysokość 1032 pikseli, z wyłączeniem bloku podpisu blogerki. Jeśli weźmiemy pod uwagę wszystkie powyższe, można śmiało powiedzieć, że bloki treści muszą być wystarczająco krótkie, aby subskrybenci mogli je sprawdzić w kilku zwojach.

Możemy więc teraz stwierdzić, że:

• Każdy blok treści powinien mieć około 200-300 pikseli wysokości .
• Całkowita wysokość bloków treści powinna wynosić 800–1200 pikseli .

Rozmiar stopki wiadomości e-mail

Na koniec mamy stopki Twojej kampanii e-mailowej , w których możesz znaleźć przyciski mediów społecznościowych i anulować subskrypcję, linki do stron internetowych i nie tylko.

Podobnie jak w przypadku nagłówków, stopki mogą mieć różną długość w zależności od celów. Na przykład rozmiar stopki Modcloth to 600 px szerokości i 361 px wysokości:

Powyższa stopka dobrze współpracuje z projektem wiadomości e-mail, ponieważ zapewnia subskrybentom wszystkie niezbędne informacje, które muszą zobaczyć przed zamknięciem wiadomości e-mail. Jeśli chodzi o wzrost, może to być długie, biorąc pod uwagę, że stopki e-maili muszą być sprytną ostatecznością, aby przyciągnąć uwagę subskrybenta bez denerwowania go.

Mając to na uwadze, idealny rozmiar e-maila w stopce powinien wynosić około 100 pikseli . Jeśli chcesz dołączyć więcej elementów, takich jak linki do witryn, upewnij się, że ich łączna długość nie przekracza 300 pikseli .

Dodatkowe rozmiary komponentów poczty e-mail

Oprócz preheadera, nagłówka, bloków treści i stopki należy wziąć pod uwagę banery, przyciski CTA i rozmiary obrazów. Zobaczmy!

Baner e-mail

Porozmawiajmy przez chwilę o banerach. Po pierwsze, baner e-mail to zwykle obraz z kopią, który można znaleźć na górze kampanii e-mail marketingowej. Świetny projekt banera e-mail może wzbudzić zainteresowanie odbiorców i dać im więcej powodów do zaangażowania się w Twoją wiadomość.

Na przykład, oto przykład banera autorstwa Velasca:

Baner marki zawiera wszystkie niezbędne informacje, aby przyciągnąć uwagę subskrybenta . Posiada swoje logo, czytelną kopię, grafikę oraz przycisk CTA. Ponadto, jeśli chodzi o rozmiar, powyższy przykład ma szerokość 600 pikseli i wysokość 612 pikseli, co jest całkiem idealne na podstawie poniższych danych.

Mówiąc dokładniej, według Swift Digital zalecany rozmiar banera powinien wynosić:

• Szerokość 600-700 px (320-385 px dla urządzeń mobilnych)
• Wysokość 1730 pikseli

Przyciski CTA

E-mail marketingu e-commerce zwykle dodają kolorowe przyciski CTA, aby zachęcić potencjalnych klientów do podjęcia działania. Z drugiej strony marketerzy B2B mogą dodać hiperłącze, które przekieruje subskrybentów do ich witryny lub stron docelowych.

Aby upewnić się, że przyciski są dopasowane do projektu wiadomości e-mail, przyjrzyjmy się interesującym danym dotyczącym rozmiaru wiadomości e-mail z przyciskiem CTA:

• Średnia wysokość CTA to 47,9 px
• Apple sugeruje wysokość 44 pikseli
• Średnie CTA ma 14 znaków

Jak widać, wysokość przycisku e-maila jest istotna dla stworzenia skutecznego CTA. Ale co z szerokością? Cóż, marketerzy e-mailowi ​​wybierają różne rozmiary przycisków e-mail w zależności od swoich celów. Rozważ następujące przykłady.

Kings Theatre ma bardzo prosty przycisk o wymiarach 122,4 x 41,51 px:

Z drugiej strony, Czarodziejski Świat wybiera bardziej widoczne CTA o szerokości 300 pikseli i wysokości 60 pikseli:

Idealnie byłoby, gdyby wezwania do działania były w harmonii z wizualizacjami i projektem wiadomości e-mail, aby wyróżniały się bez przesady.

I chociaż nie ma dla nich standardowej szerokości i wysokości , możesz użyć powyższych wyników przycisków CTA jako wskazówek, jak skuteczniej tworzyć własne!

Rozmiar obrazu e-mail

Przede wszystkim najpopularniejszy format plików graficznych odczytywany przez przeglądarki poczty e-mail to stary dobry JPG (lub JPEG), PNG i GIF . Ale co z wymiarami? Cóż, pod względem szerokości Twoje obrazy będą zgodne z ustawionym rozmiarem szablonu. Tak więc, jeśli masz ustawioną szerokość 640 pikseli, twój obraz będzie pasował.

Jednak pod względem długości należy najpierw rozważyć cel swojego wizerunku. Jeśli są używane jako banery, powinny mieć rozmiar 800-1730 px. Podobnie, jeśli używasz ich jako obrazów do newslettera, powinieneś osiągnąć nawet 1200 pikseli. Niemniej jednak nie ma standardowych rozmiarów obrazów w wiadomościach e-mail , których należy przestrzegać.

Jeśli chodzi o jakość, powinieneś używać rozdzielczości 72 dpi , aby zwiększyć ogólną wydajność swoich efektów wizualnych! I nie zapomnij zoptymalizować obrazów pod kątem wyświetlaczy Retina (iPhone, iPad itp.)!

Edytory poczty e-mail, takie jak Moosend, zapewniają odpowiednie opcje, aby zapewnić użytkownikom Apple najlepsze wrażenia pod względem jakości obrazu.

Oprócz prawidłowych wymiarów upewnij się, że Twoje obrazy nie są zbyt duże. Możesz uniknąć przycinania, używając do ich kompresji narzędzi takich jak TinyJPG lub Imagesmaller. Jeśli to możliwe, spróbuj trzymać się formatowania PNG , ponieważ jest to więcej niż idealne dla kampanii e-mailowych.

Na koniec pamiętaj, że większość klientów poczty e-mail nie będzie korzystać z opcji pełnej szerokości. Zachowaj więc ostrożność podczas tworzenia wersji komputerowych wiadomości jako podglądu, a to, co widzą Twoi subskrybenci, może być inne!

Najlepsze rozmiary e-maili do przyklejenia szablonów

Teraz, gdy znasz najlepsze rozmiary szablonów wiadomości e-mail, możesz tworzyć kampanie, które będą się wyświetlać poprawnie za każdym razem.

Chociaż możesz użyć powyższych wymiarów jako odniesienia, nie wahaj się z nimi poeksperymentować, korzystając z szeregu narzędzi testowych. Zwróć także uwagę na użytkowników mobilnych i potrzebę bardziej responsywnych wiadomości e-mail!

Mając to na uwadze, nadszedł czas, aby stworzyć biuletyny e-mail marketingowe o najlepszej wielkości dla Twojej firmy!

A jeśli potrzebujesz zaawansowanego narzędzia, które Ci pomoże, wypróbuj Moosend za darmo, aby tworzyć responsywne e-maile, które oszołomią Twoją publiczność!