Generator stopki mailowej — gotowy kod HTML
Wypełniasz dane, wybierasz układ i kopiujesz gotowy kod HTML. Stopka jest zbudowana na tabelach i na tekście, a nie na jednym obrazku — bo klienci pocztowe blokują grafiki domyślnie, a klasyczny Outlook renderuje maile silnikiem Worda.
Znasz to z odpowiedzi „nie widzę”
Pętla ładnej stopki, której nikt nie widzi
Stopka mailowa to jedyny element firmowej komunikacji, który wysyłasz dziesiątki razy dziennie — i najczęściej ten, którego nikt nie sprawdził poza własną skrzynką.
Projektujesz ładną stopkę
Grafik przygotowuje obrazek z logo, danymi i ikonkami. W podglądzie wygląda znakomicie.
U Ciebie działa
Wysyłasz do siebie, wszystko się wyświetla. Sprawa wydaje się zamknięta.
U odbiorcy pusta ramka
Gmail i Outlook blokują obrazki domyślnie. Zamiast stopki jest prostokąt z nazwą pliku.
Więc dopisujesz dane pod stopką
Zwykłym tekstem, żeby dało się je skopiować. I masz dwie stopki zamiast jednej.
Nikt nie może skopiować numeru
Telefon i mail są narysowane, więc odbiorca musi je przepisać ręcznie. Zwykle po prostu tego nie robi.
A w Outlooku układ się rozjeżdża
Klasyczny Outlook renderuje wiadomości silnikiem Worda i ignoruje większość CSS. Stopka zbudowana na divach rozpada się.
Najładniejsza stopka to ta, której odbiorca nie zobaczy — bo jego klient pocztowy zablokował obrazki, zanim zdążyła się wyświetlić. zablokował obrazki
Co robi z tym generator
Stopka, która działa też wtedy, gdy nie działa nic
Wszystkie decyzje w tym narzędziu wynikają z jednej rzeczy: z tego, jak maile faktycznie renderują się u odbiorcy, a nie z tego, jak wyglądają w podglądzie.
Klasyczny Outlook renderuje wiadomości silnikiem HTML Worda i ignoruje większość CSS. Stopka zbudowana na tabelach trzyma się tam, gdzie układ na divach się sypie.
Telefon, mail i adres są tekstem, nie obrazkiem. Odbiorca może je skopiować, a wyszukiwarka w skrzynce je znajdzie.
Gdy klient zablokuje grafikę, zostaje czytelna stopka tekstowa, a nie pusta ramka. To jest wersja, którą zobaczy spora część odbiorców.
Każdy obrazek ma opis. Czytnik ekranu odczyta go zamiast nazwy pliku, a przy zablokowanych grafikach to on jest pierwszą rzeczą, którą widzi odbiorca.
Zanim klikniesz
Komu ten generator się przyda, a komu nie
- Prowadzisz jednoosobową firmę i chcesz mieć porządną stopkę bez zamawiania jej u kogokolwiek.
- Twoja obecna stopka jest obrazkiem i część odbiorców jej nie widzi.
- Ustawiasz stopki dla małego zespołu i potrzebujesz spójnego wzoru.
- Chcesz kodu, który da się wkleić i który przetrwa Outlooka.
- Potrzebujesz centralnego zarządzania stopkami w dużej organizacji — do tego służą osobne systemy.
- Zależy Ci na rozbudowanej grafice i banerach kampanijnych w stopce.
- Szukasz narzędzia do śledzenia kliknięć w stopce.
Wygenerowany kod wklejasz w ustawieniach swojego klienta pocztowego. Instrukcja jest przy wyniku.
Jak to wygląda
Dwie rzeczy, które się wydarzą
Wypełniasz dane, podgląd zmienia się od razu
Imię, stanowisko, telefon, adres i linki. Podgląd po prawej pokazuje efekt na bieżąco, więc widzisz, co się dzieje przy dłuższym stanowisku albo długim adresie.
- Podgląd na żywo
- Cztery układy do porównania
Kopiujesz gotowy kod
Na końcu dostajesz kod HTML do wklejenia w ustawieniach poczty. Bez zależności zewnętrznych i bez odwołań do plików, które kiedyś przestaną istnieć.
- Kod do wklejenia jednym ruchem
- Bez zewnętrznych zależności
Różnica, którą widać dopiero u odbiorcy
Stopka jako obrazek kontra stopka jako tekst
To ta sama decyzja, którą podejmuje się przy CV: czy dokument jest obrazkiem, czy treścią. Skutki są równie konkretne, tylko widać je po drugiej stronie skrzynki.
Stopka jako obrazek
- Przy zablokowanych grafikach odbiorca widzi pustą ramkę zamiast danych.
- Numeru telefonu nie da się skopiować ani kliknąć.
- Wyszukiwarka w skrzynce nie znajdzie Twojej firmy po nazwie.
- Czytnik ekranu odczyta nazwę pliku albo pominie stopkę w całości.
Stopka jako tekst w tabeli
- Przy zablokowanych grafikach zostaje czytelna stopka tekstowa.
- Telefon i mail da się kliknąć i skopiować.
- Dane są przeszukiwalne w skrzynce odbiorcy.
- Czytnik ekranu odczyta sensowną treść zamiast nazwy pliku.
Trzy kroki
Wypełnij dane
Imię, stanowisko, firma, telefon, adres i linki. Wpisuj docelowe treści, nie przykładowe — od razu zobaczysz, jak zachowuje się układ przy Twoich długościach.
Wybierz układ
Cztery warianty różnią się kolejnością i wagą elementów. Sprawdź każdy — przy długiej nazwie stanowiska różnice bywają wyraźne.
Wklej kod i sprawdź u siebie
Skopiuj kod do ustawień poczty i wyślij próbną wiadomość do innej skrzynki niż własna. Najlepiej takiej, która blokuje obrazki — to jedyny prawdziwy test.
To możesz być Ty
Ta sama wiadomość, dwa różne odbiory
Stopka to najczęściej wysyłany element Twojej komunikacji. Warto, żeby działał także w gorszych warunkach.
- Część odbiorców widzi pustą ramkę zamiast Twoich danych.
- Klient prosi o numer telefonu, który masz w stopce od roku.
- W Outlooku układ rozjeżdża się i nie wiadomo dlaczego.
- Pod stopką dopisujesz dane zwykłym tekstem, żeby dało się je skopiować.
- Przy zablokowanych obrazkach zostaje czytelna stopka tekstowa.
- Numer da się kliknąć z telefonu i skopiować z komputera.
- Układ trzyma się także tam, gdzie renderuje silnik Worda.
- Jedna stopka zamiast stopki i dopisku pod nią.
Skąd te zasady
Dlaczego maile buduje się inaczej niż strony
Kod stopki wygląda archaicznie i jest to celowe. Klienci pocztowe renderują wiadomości zupełnie inaczej niż przeglądarki, a najpopularniejszy z nich robi to silnikiem edytora tekstu.
Klasyczny Outlook renderuje wiadomości przez silnik HTML Microsoft Worda i ignoruje większość reguł CSS, na których stoi współczesny layout. Stopka zbudowana na tabelach — nawet jednowierszowa — trzyma się tam, gdzie układ oparty na divach się rozpada. Dobre praktyki dla stopek.
Gmail i Outlook blokują obrazki domyślnie ze względów bezpieczeństwa — użytkownik musi kliknąć, żeby je wyświetlić. Stopka będąca jednym obrazkiem znika wtedy w całości. Dane wpisane jako tekst są widoczne zawsze, dają się kliknąć i skopiować, a wyszukiwarka w skrzynce odbiorcy je znajdzie.
Czytnik ekranu odczytuje opis każdego obrazka, więc logo bez opisu zostaje pominięte albo przeczytane jako nazwa pliku. Przy zablokowanych grafikach opis alternatywny bywa pierwszą rzeczą, którą odbiorca w ogóle zobaczy — to nie jest dodatek dla nielicznych, tylko zwykła ścieżka wyświetlania.
Duże obrazki spowalniają otwieranie wiadomości, a bywa, że utrudniają jej dostarczenie. Przyjmuje się, że grafiki w stopce powinny mieścić się poniżej stu kilobajtów i mieć podane wprost wymiary — bez nich część klientów rezerwuje złą przestrzeń i układ skacze.
Najczęstsze pytania
W ustawieniach stopki swojego klienta pocztowego — w Gmailu w ustawieniach podpisu, w Outlooku w sekcji podpisów. Instrukcja pojawia się razem z wynikiem.
Bo Gmail i Outlook blokują obrazki domyślnie. Stopka będąca obrazkiem znika wtedy w całości, a odbiorca widzi pustą ramkę. Dane wpisane jako tekst są widoczne zawsze i dają się skopiować.
Tak i to jest główny powód, dla którego kod wygląda archaicznie. Klasyczny Outlook renderuje wiadomości silnikiem HTML Worda, ignorując większość CSS — dlatego układ opiera się na tabelach, a nie na nowoczesnym layoucie.
Tak, ale traktuj je jako dodatek, nie jako nośnik informacji. Logo powinno mieć opis alternatywny i rozmiar poniżej stu kilobajtów, a wszystkie dane kontaktowe muszą pozostać tekstem, żeby stopka działała także przy zablokowanych grafikach.
Wyślij próbną wiadomość na skrzynkę inną niż własna i obejrzyj ją z zablokowanymi obrazkami. To jedyny test, który coś znaczy — podgląd we własnym kliencie pokazuje wersję najbardziej przyjazną, a nie tę, którą zobaczy większość odbiorców.
Tak. Kod skopiujesz od razu na stronie.
Zrób stopkę, która dojdzie w całości
Formularz jest wyżej na tej stronie. Kilka pól i gotowy kod do wklejenia.
Przejdź do generatora