HTML email rakentaa sähköpostin, joka selviää sähköpostiohjelmista — taulukkorakenteinen, inline-tyylitelty merkintä, jota vanhat renderöijät tarvitsevat, tarkistettuna sähköpostiohjelmien leveyksillä ja vietynä lähetysvalmiina. Se on pohja formaatille, jossa moderni CSS menee kuolemaan.
Mitä sähköpostiajo rakentaa
Briefaa se kuin kampanja — "lanseeraussähköposti uudelle tasolle: otsikko, kolme ominaisuutta, yksi painike, footer" — ja agentti rakentaa sähköpostin: header, body-lohkot, call to action, footer, kaikki client-safe-merkinnässä. Tulos avautuu email vieweriin: viesti sähköpostiohjelman leveydellä, sellaisena kuin se renderöityy.
Sähköpostiohjelmat eivät ole selaimia — Outlook renderöi edelleen Word-HTML:ää, Gmail leikkaa pitkät sähköpostit, dark mode kääntää värejä, joita et asettanut. Pohja rakentaa sille todellisuudelle: taulukoita flexboxin sijaan, inline-tyylejä tyylitaulukoiden sijaan, fallback-eja ominaisuuksien sijaan.
HTML email · Devin · e2e · gate PASS
The Launch Email — The announcement email for this very product — one clear CTA, inlined tables, dark-mode safe.
▸ the prompt that made it▾ the prompt that made it
“Design an HTML email: a launch announcement for a desktop design tool — one clear CTA.”
Client-leveyden tarkistus
Viewer näyttää viestin leveyksillä, joita oikeat clientit käyttävät — kapea inbox-paneeli, mobiilisähköpostisovellus — joten design lukeutuu koossa, jossa sitä oikeasti luetaan. Gate tarkistaa sähköpostisäännöt: kuvien fallbackit, taulukkorakenne, turvalliset fontit.
Sähköpostin ohjaaminen
Sama ohjaus kuin minkä tahansa tuloksen:
- ⌥-klikkaa lohkoa, kommentoi tarkkaa kohtaa ("painikkeen pitäisi tuntua painavammalta")
- Jatkot rakenteelle ("lisää PS footerin alle")
- Tweaks parametreille — korostusväri, tiheys, kuvakoko
- Versiot — yksi ote hero-kuvalla, yksi tekstipainotteinen
Missä se on hyvä
- Lanseeraus- ja kampanjasähköpostit — ilmoitus, jonka täytyy näyttää oikealta
- Uutiskirjeet — toistuva layout, luettavana joka clientissa
- Transaktionaalinen design — kuitit ja tervetulot, jotka kantavat brändiä
- Sähköpostipohjat — perusta kampanjasarjalle
Vieminen
Sähköpostit viedään HTML:nä — client-safe-merkintä valmiina liitettäväksi lähettäjään — ja PNG:nä visuaalista tarkistusta tai design-docia varten. Tiedostot jäävät projektiin seuraavaa kampanjaa tai seuraavaa otetta varten.
Vinkki: Sano "client-safe" briefissä, vaikka pohja pakottaisi sen — se pitää jatkot ajautumasta takaisin kohti modernia CSS:ää, jonka Outlook-renderöija kuorisi joka tapauksessa.