Ved å velge en Forståelsesfull E-Framework: MJML vs. Grunnlaget for e-Post

0
24

Implementering av responsive e-design kan være litt av en dra. Bygningen responsive e-post er ikke enkel i det hele tatt, det er som å ta en tidsmaskin tilbake til 2001 da vi var alle koding nettside oppsett i tabeller ved hjelp av Dreamweaver og Fireworks.

Men det finnes håp! Vi har verktøy som kan gjøre bygning e-mye enklere og mer som koder for et moderne nettsted. La oss ta en titt på et par forskjellige rammer som er satt ut for å forenkle ting for oss.

Første Situasjonen

Du har til å være kompatibel med mange gamle e-postklienter, er mange som ikke engang støtter mest grunnleggende web-standarder (flyter, noen?). Du har også å håndtere alle slags webmail kunder som av sikkerhetsmessige eller tekniske grunner, har laget sin egen sta valg om hvordan du kan vise dine dyrebare e-post.

Videre, nå på e-post er lest fra ulike enheter, med svært ulike viewports og krav.

Den beste løsningen, slik tilfellet ofte er, ville være å holde ting enkelt og hold deg til grunnleggende én kolonne design, ved hjelp av flere kolonner bare for menyer eller enkle grensesnitt elementer av kjente bredde. Du kan produsere gode, effektive design med bare én kolonne, tross alt.

Men ende-brukere og kunder, og som er vant til “vanlige” nettleser-basert web, kan holde sine e-seeropplevelse av samme høye standard som de gjør for visning av web-sider i form av grafikk og reaksjonsevne. Derfor, komplekse design er forventet: flere kolonner, ulike virkemåter på mobile enheter, i motsetning til stasjonære pc-er, massevis av bilder, osv., alle som må gjennomføres konsekvent og pixel-perfekte tvers av alle e-postklienter. Hvilke alternativer som er tilgjengelig til å gjøre alt som skjer?

Alternativ 1: Bygge Fra Scratch

Ett alternativ du kan velge koding er hver e-post for hånd, å holde det enkelt, og teste det mens du går. Dette er et levedyktig alternativ bare hvis:

  1. Du har en veldig enkel design, for å implementere.
  2. Du har direkte kontroll over design, slik at du kan til slutt forenkle ting hvis du ikke kan komme ut med en konsistent løsning for hva du skal gjøre.
  3. Du kan akseptere en viss grad av nedbrytning på noen eldre klienter: du ikke tankene hvis din e-post vil ikke se ut akkurat det samme (eller til og med vanlig dårlig) i gamle Outlook-klienter, for eksempel.
  4. Har du mye tid på hendene.

Selvfølgelig, du trenger for å teste dine design tungt. Kampanje-Skjerm har en stor CSS guide du kan bruke under byggeprosessen og er liksom som jeg Kan Bruke, men for e-post. Etter det, jeg anbefaler å bruke automatisert test suiter som Lakmus eller E-post på Syre. Begge tilbyr deg en komplett testing suite og forhåndsvisninger av hvordan e-posten vil se ut på et stort utvalg av e-postklienter. Forventer noen overraskelser, skjønt, fordi ofte er de samme design som ikke ser riktig ut selv på samme e-postklient, hvis sett på forskjellige nettlesere og operativsystemer. Skrifter vil gjøre annerledes, marginer vil endre, og så videre.

Screenshot av den samme e-design testet på forskjellige enheter på E-post på Syre.

Alternativ 2: Bruk en Standardtekst Mal

Et annet alternativ er å bruke en av de ulike boilerplates tilgjengelig, som Sean Powelll er, som du kan finne her. Boilerplates allerede adressen mange av quirks av ulike e-postklienter og plattformer. Dette er fornuftig hvis:

  1. Du arbeider alene, eller på et lite team.
  2. Du har massevis av erfaring, så vet du allerede at mest mulig av quirks av e-formatering, fordi du har møtt dem før.
  3. Du har satt opp dine egne verktøy for å administrere komponenter (for ulike nyhetsbrev som deler noen biter av design), inlining stiler (og ja, du bør holde inlining din stiler hvis din e-post målrette mot et internasjonalt publikum), og har noen form for utvikling toolkit på plass (det være seg Jafs, Grynt eller noe lignende) som vil automatisere alt dette for deg.
  4. Du har den type tilnærming der du ønsker å kontrollere alt i koden som du produserer og liker ikke å stole på eksterne verktøy.
  5. Du foretrekker å løse din egen feil, i stedet for å måtte løse mulige feil forårsaket av verktøy du bruker.

Alternativ 3: Bruk et Rammeverk

Men hvis noen av de følgende punktene gjelder for deg:

  1. Du har til å produsere mye av e-post maler med felles komponenter.
  2. Jobben må utføres av et team av utviklere, som kan endre og/eller har en variabel grad av kompetanse og erfaringer med e-implementering.
  3. Du har liten eller ingen kontroll på den opprinnelige design.

…så vil du sannsynligvis ha nytte mye fra ved hjelp av et rammeverk.

I dag, to av de mest interessante og populære rammer er tilgjengelig MJML og Grunnlaget for e-Post. De største fordelene ved å bruke enten rammeverket er at de har allerede løst for deg, de fleste av quirks av e-postklienter. De har også gi deg en etablert arbeidsflyt kan du følge med på, både alene og i team. De håndterer også responsive design veldig godt, om enn forskjellig fra en annen.

La oss se på en oversikt over både rammer og sammenligne de beste bruksområdene for hver før du trekker noen konklusjoner.

MJML

MJML er et prosjekt som ble opprettet internt ved Mailjet, et selskap som spesialiserer seg på verktøy for e-markedsføring. Det var da åpen kildekode. Det fungerer med sine egne, HTML-lignende templating språk, ved hjelp av sine egne koder. For eksempel:

<mj-tekst>Din tekst her</mj-tekst>

Når du kompilerer den endelige koden, MJML vil konvertere sine koder i HTML-koden for alt fra bord til tilpassede komponenter de har opprettet for deg, alle med sin indre motor. Det tar ut de tunge løftene for å lage komplekse markup og det er alle blitt testet.

MJML har et sett med standard komponenter. De inkluderer deler, kolonner, grupper, knapper, bilder, sosiale lenker (som er veldig enkelt å lage), tabeller, trekkspill, etc. De har en pre-stil karusellen, som skal fungere i de fleste kunder. Alle disse komponentene passer bra til responsiv, e-poster, bortsett fra “faktura” komponent som jeg ikke kunne få til å fungere i mine tester. Alle disse komponentene har parametre du kan legge inn koden for å tilpasse deres utseende.

For eksempel, har de sosiale koblinger komponent gjør at du kan stable ikoner vertikalt og horisontalt, og for å velge bakgrunnsfarge for den relaterte ikoner. Det er faktisk mange flere parametere du kan spille med, alle med den hensikt som åpner for større fleksibilitet. Selv logo, bilde-filer er allerede inkludert i pakken, som er et stort pluss.

Her er en forhåndsvisning av en enkel konfigurasjon av sosiale koblinger komponent:

Skjermbilde fra MJML nettstedet.

Du kan også lage dine egne tilpassede komponenter, eller bruke komponenter skapt av samfunnet. Det er bare ett samfunn komponent er tilgjengelig i øyeblikket, men.

MJML håndterer respons automatisk, noe som betyr at komponentene vil bytte fra multi-kolonne (flere elementer i samme rad) til én enkelt kolonne (elementer er satt under den andre i stedet for side-by-side) uten noen aktiv intervensjon fra utvikleren. Dette er en meget fleksibel løsning, og fungerer fint i de fleste tilfeller, men det gir utvikleren litt mindre kontroll over hva som skjer akkurat i malen. Som de dokumenter omtale, er det verdt å huske at:

For estetikk formål, MJML støtter maksimalt 4 kolonner per avsnitt.

Dette er mest sannsynlig ikke bare en estetisk preferanse, men også om å begrense mulige ulemper med å ha for mange kolonner. Jo flere kolonner du har, jo mer uforutsigbart output, antar jeg.

Hvordan Arbeide Med MJML

MJML kan fungere som en kommando linje verktøy, som du kan installere med npm, og output-filene dine lokalt, med kommandoer som:

$ mjml -r-indeksen.mjml -o index.html

Dette kan være integrert i bygg-prosedyre via Svelge eller lignende, og i utviklingsarbeidet ved hjelp av et se-kommandoen, som vil oppdatere din forhåndsvisning hver gang du lagrer:

$ mjml –se på indeksen.mjml -o index.html

MJML har plugins for Atom-og Sublime Tekst. I et Atom, er det enda leverer en real-time forhåndsvisning av din layout, som kan regenereres på hver spare. Jeg har ikke prøvd det selv, men det virker veldig interessant:

Bilde fra Atom.io

MJML har også sin egen enkle desktop app, og det er gratis. Du kan sette opp din kode og komponenter, må det bygge din design for deg, og få en real-time forhåndsvisning av resultatene, både for mobil og desktop. Jeg finner at det fungerer ganske bra på Ubuntu, men den eneste ulempen jeg har funnet er at du bør aldri, aldri, aldri åpne dine filer med en annen editor mens de er åpne på app, fordi appen krasjer og innholdet av filen går tapt.

Her er noen skjermbilder av den forhåndsvisninger på jobb:

Skrivebordet forhåndsvisning av e-post
Mobil forhåndsvisning av e-post

Programmet kan også integreres med en gratis Mailjet-konto, som gir deg mulighet til å sende test e-post umiddelbart til deg selv. Dette er veldig praktisk å raskt sjekke problematisk klienter hvis du har dem tilgjengelig direkte. (Jeg ville foreslå at du tar ut det gamle Windows maskin du har i bagasje-rommet for å sjekke ting i Outlook, og å gjøre det så ofte som mulig.) Men, jeg vil likevel anbefale å bruke enten Lakmus eller E-post på Syre for å teste din e-post cross-klient før du distribuerer dem fordi du kan aldri være for forsiktig og e-post standarder kan endre, akkurat som de gjør i nettlesere.

Totalt sett, har jeg funnet MJML svært enkel å bruke. Men, når jeg prøvde å lage en piksel-perfekt mal som var identisk design vår klient bedt om, jeg hadde litt vanskeligheter med å håndtere egendefinerte marger for noen bilder. Ikke alle komponentene parametere tilgjengelig fungerte som forventet fra deres beskrivelse i dokumentasjonen. Særlig, jeg hadde noen problemer med å tilpasse bildet marginer og polstring mellom stasjonære og mobile.

Fordeler

  • Pre-bygget av komponenter
  • Integrasjon med Mailjet
  • Enkel å bruke, med umiddelbar forhåndsvisning av ditt arbeid (på Atom-og Desktop-App)

Ulemper

  • Litt mindre pålitelig enn Grunnlaget for e-Post hvis du har å gjøre piksel-perfekt design
  • Noen komponenter har parametre som ikke fungerer som forventet
  • Desktop App ikke er helt stabil
  • Kommer ikke med et strukturert sett med mapper for innhold (se Foundation nedenfor)

Grunnlaget for e-Post

Grunnlaget for e-Post (tidligere kjent som Blekk — sett inn obligatorisk Prince sitat her) er et rammeverk av Zurb, de samme folkene som brakte oss responsive front-end rammeverk, Grunnlaget for Nettsteder.

Når du laster ned Startpakke får du en full utvikling, miljø, komplett med Node.js kommandoer for å kjøre prosjektet. Det vil sette en Node rutine og til og med åpne din nettleser for å gi deg en umiddelbar forhåndsvisning av ditt arbeid.

Filene du har å bruke, er allerede organisert i mapper og undermapper, med en klar indikasjon på hvor du vil plassere ting. Det har For eksempel kataloger spesielt for partials, maler og bilder. Jeg synes denne funksjonen er svært viktig, fordi det er veldig lett å ende opp med å bruke forskjellige mapper når du arbeider i et team, og dette fører til en mye tapt tid på å lete etter ting som ikke er der du forventer den skal være. Å håndheve konvensjonene er ikke en begrensning; når du jobber i et team er det uunnværlig.

TFFKAI — Rammen Tidligere Kjent Som Blekk

Grunnlaget for e-Poster som kommer med en standardtekst mal, som er utgangspunkt for koden. Det er fullt forklart, slik at du vet hvordan du skal forlenge den med koden din. Det kommer med SASS/SCSS støtte, som er veldig hendig for komplekse prosjekter. Den kommer også med sin egen inliner, så du trenger ikke å bekymre deg konvertere alle dine CSS (eller SASS/SCSS) i inline styles.

Det er en mal motor bak dette rammeverket kalles Inky. Og, akkurat som MJML, det har egendefinerte koder som vil automatisk konvertere til HTML-når den er utarbeidet. Det er koder som <container>, <row>, <kolonne>, som vil bli brukt til å bygge din rutenett. Nettet er basert på et 12-kolonnen system, som lar deg dele layout veldig nøyaktig. Hvorfor 12? Fordi det er delelig med 2, 3, 4 og 6, noe som gjør det svært enkelt å gjøre en 2-kolonne 3-kolonne 4 kolonne, eller 6-kolonne layout.

Grunnlaget for e-Post bruker Panini å kompilere kode. Panini er en tilpasset bibliotek som kompilerer HTML-sider ved hjelp av oppsett. Den støtter Styret syntaks og det er flere hjelpere du kan bruke til å tilpasse virkemåten til komponenter avhengig av hvor de blir brukt. Du kan også lage dine egne hjelpere hvis du trenger til og sette hver malen er tilpasset variabler med tilpasset data. Dette er svært nyttig hvis du har flere maler for deling av de samme komponentene.

Det er flere pre-bygget e-post tilgjengelige maler du kan laste ned, som dekker mange av standarden med bruk saker for e-post som nyhetsbrev og kunngjøringer. Det er også et par pre-bygget komponenter (med sine egne egendefinerte koder), inkludert knapper, menyer og bildetekster (som jeg må innrømme at jeg ikke ser noen hensikt i e-post, men never mind).

En kode fra et Fundament for e-Post mal.

Den viktigste forskjellen mellom Fundament for e-Post med MJML er at Grunnlaget for e-Post som standard til skrivebordsvisning, så skalaer for mindre skjermer. I henhold til dokumenter, dette er fordi mange desktop klienter som ikke støtter media queries og misligholde til store skjerm-layout gjør det mer kompatibel over e-postklienter. Som sagt, det klarer bare et stoppunkt. Du oppretter skrivebordet versjonen, og den mobile versjonen, og den mobile versjonen brytere under et visst antall punkter, som kan være konfigurert.

Du kan bestemme om noen komponenter vil kun være synlig på store og små skjermer ved hjelp av praktiske pre-definerte klasser som .skjul-for store og .vis-for-store (selv .skjul-for-store er kanskje ikke støttes av alle klienter). Du kan også bestemme hvor mye plass en kolonnen vil ta i ved hjelp av bestemte klasser. For eksempel, en klasse av .stor-6 .små-12 på en div vil gjøre en kolonne som opptar halve skjermen på skrivebordet og hele skjermbredden på mobil. Dette gir mulighet for svært spesifikke og forutsigbar utforming resultater.

En forhåndsvisning av den samme e-postmal, utviklet i samarbeid med Stiftelsen for e-Post, Outlook 2007 (til venstre) og iPhoneX (høyre).

Grunnlaget for e-Poster som er litt clunkier å bruke enn MJML, i min mening, men det tillater for mye strammere kontroll på layout. Det gjør den ideell for prosjekter der du trenger å reprodusere piksel-perfekt design, med svært spesifikke forskjeller mellom mobil og desktop oppsett.

Fordeler

  • En mer presis kontroll over sluttresultatet
  • Pre-bygget maler
  • Sass støtte
  • Flott dokumentasjon

Ulemper

  • Prosjektet fil-størrelse er tung og tar mye diskplass
  • Litt mindre intuitiv å bruke enn MJML er pre-definerte parametere på komponenter
  • Færre komponenter tilgjengelig for tilpassede oppsett

Konklusjoner

Produksjon av e-post maler, enda mindre enn front-end utvikling, er ikke en eksakt vitenskap. Det krever mye prøving og feiling og MYE av testing. Uansett hvilket verktøy du bruker, hvis du trenger til å støtte gamle kunder, så du må teste helvete ut av i oppsett — spesielt hvis de har selv den minste grad av kompleksitet. For eksempel, hvis du har tekst som trenger å sitte ved siden av et bilde, anbefaler jeg å teste med innhold i ulike lengder og se hva som skjer i alle klienter. Hvis du har tekst som trenger å overlappe et bilde, det kan være litt av en mareritt.

Jo mer kompleks layout og mindre kontroll har du over layout, deretter mer nyttig det er å bruke et rammeverk over hånd-koding din egen e-post, spesielt hvis design er levert til deg av en tredjepart og vil bli implementert som den er.

Jeg vil ikke si at den ene rammen er bedre enn den andre, og det er ikke poenget med dette innlegget. Rettere sagt, jeg anbefaler MJML og Grunnlaget for e-Post for ulike tilfeller:

  • MJML for prosjekter som har en rask behandlingstid, og det er fleksibilitet i design.
  • Grunnlaget for e-Post for prosjekter som krever større kontroll over layout og hvor design er super bestemt.

Ressurser og Lenker

  • Den MJML nettstedet
  • Grunnlaget for e-Post hjemmeside
  • Lakmus E-Testing
  • E-post på Syre Testing
  • En interessant samtale på Lakmus-forumet, som var på noen måter utgangspunktet for denne artikkelen.
  • En annen artikkel av James Luterek som sammenligner disse rammeverkene