Wykonanie 20 szablonów e-mail według Figma

Potrzebna jest szata graficzna 20 szablonów e-mailowych.
Projekt zostanie dostarczony w Figma (zobacz zrzut ekranu jednego szablonu poniżej), wymagane jest stworzenie HTML e-maila w perfekcyjnej jakości pikselowej, z uwzględnieniem wszystkich zasad tworzenia e-maili.

Szablony będą używane do marketingowych kampanii e-mailowych i muszą poprawnie wyświetlać się we wszystkich popularnych klientach pocztowych: Gmail, Yahoo, Outlook (w tym starsze wersje), Apple Mail, mobilne aplikacje pocztowe.

Wymagania i zasady tworzenia szablonów

1. Źródło projektu

   • Wszystkie makiety będą dostarczone w Figma.

   • Szablony muszą być zrealizowane jak najdokładniej według projektu.

2. Kompatybilność między klientami

   • Wsparcie dla Outlook (w tym wersje desktopowe), Gmail, Yahoo, Apple Mail.

   • Poprawne wyświetlanie na urządzeniach mobilnych (iOS, Android).

3. Responsywność

   • Tworzenie z myślą o urządzeniach mobilnych z użyciem tabel (table-layout).

   • Media queries dla ekranów mobilnych ≤480px.

   • Wszystkie obrazy muszą być skalowalne, tekst dostosowywany.

4. Style i struktura kodu

   • Główne style — tylko inline.

   • Tagi <style> — tylko dla media queries.

   • Używać tylko systemowych czcionek (Arial, Helvetica, sans-serif).

5. Obrazy

   • Absolutne linki lub osobny folder z obrazkami.

   • alt, stałe rozmiary i display:block są obowiązkowe.

6. Przyciski

   • Tylko "bulletproof buttons" (stworzony za pomocą <a>).

   • Kolory i zaokrąglenia muszą działać nawet przy wyłączonych obrazach.

7. Treść

   • Nagłówki przez <h1>-<h3>, teksty przez <p>.

   • Struktura: logo + nagłówek, główna treść, przycisk CTA, stopka.

8. Stopka

   • Obowiązkowy link "Wypisz się".

   • Dane kontaktowe (zostaną dostarczone).

9. Testowanie i jakość

   • Sprawdzenie w głównych klientach pocztowych.

   • Czysty kod bez zbędnych klas i komentarzy.

   • Preferowane — wsparcie dla trybu ciemnego.

10. Format dostarczenia

• 20 oddzielnych plików HTML.

• Folder z obrazami (jeśli potrzebne są niestandardowe ikony).

• Archiwum z finalnymi szablonami.