Att välja en Responsiv E-Ram: MJML vs. Grunden för E-post

0
24

Att genomföra lyhörd e-design kan vara lite jobbigt. Att bygga responsiva e-post är inte enkelt alls, det är som att ta en tidsmaskin tillbaka till 2001 när vi alla var kodning webbplats layouter i tabeller med hjälp av Dreamweaver och Fireworks.

Men det finns hopp! Vi har verktyg som kan göra byggnaden e-post mycket lättare och mer som att koda en modern webbplats. Låt oss ta en titt på ett par olika ramar som anges för att förenkla saker och ting för oss.

Första Situationen

Du måste vara förenliga med massor av gamla e-post klienter, av vilka många inte ens stödja de mest grundläggande web standards (flöten, någon?). Du har också att ta itu med alla typer av webbaserade e-postklienter som för säkerhets-eller tekniska skäl, har gjort sin egen påstridig val om hur du vill visa din dyrbara e-post.

Dessutom, nu e-post läses från olika enheter, med mycket olika viewport och krav.

Den bästa lösningen, som så ofta är fallet, skulle vara att hålla det enkelt och hålla sig till grundläggande i en kolumn mönster, med hjälp av flera kolumner bara för menyer och enkla gränssnitt delar av kända bredd. Du kan producera bra, effektivt mönster med hjälp av endast en kolumn, trots allt.

Men slutanvändare och kunder, som används till den “normala” browser-baserade web, kan hålla sina e-post-upplevelse till samma höga standard som de gör för att visa webbsidor i form av grafik och lyhördhet. Därför, komplexa mönster som förväntas av flera kolumner, olika beteenden på mobila enheter som motsats till stationära datorer, massor av bilder, etc., alla som måste genomföras konsekvent och pixel-perfekt över alla e-postklienter. Vilka alternativ som finns tillgängliga för att göra allt som händer?

Alternativ 1: Att Bygga Från Grunden

Ett alternativ du kan välja kodning för varje e-postmeddelande med handen, hålla det enkelt, och testa det när du går. Detta är ett alternativ endast om:

  1. Du har en mycket enkel konstruktion att genomföra.
  2. Du har direkt kontroll av design, så att du så småningom kan förenkla saker och ting om du inte kan komma ut med en konsekvent lösning för vad du är avsedda att göra.
  3. Kan du acceptera en viss grad av nedbrytning på en del äldre kunder: att du inte misstycker om din e-post kommer inte att se ut exakt samma (eller ens vanligt dåligt) i gamla Outlook-klienter, till exempel.
  4. Du har en hel del tid på dina händer.

Självklart måste du testa din design kraftigt. Campaign Monitor har en bra CSS-guide du kan referera till under byggprocessen och är ungefär som jag Kan Använda, men för e-post. Efter att jag rekommenderar att du använder det automatiska testsviter som Avgörande eller E-post på Syra. Båda erbjuder dig ett komplett test-suite och förhandsgranskning av hur din e-post kommer att se ut på ett stort utbud av e-postklienter. Räkna med några överraskningar, men, eftersom det ofta samma design inte ser korrekt även på samma e-postklient, om den visas på olika webbläsare, eller olika operativsystem. Teckensnitt kommer att göra annorlunda, marginaler kommer att förändras, och så vidare.

Skärmdump av samma e-design testas på olika enheter på E-post på Syra.

Alternativ 2: Använd en Standardtext Mall

Ett annat alternativ är att använda en av de olika boilerplates tillgängliga, som Sean Powelll s, som du kan hitta här. Boilerplates redan itu med många av de egenheter i olika e-postklienter och plattformar. Detta är förnuftigt om:

  1. Du arbetar ensam eller i en liten grupp.
  2. Du har massor av erfarenhet, så du vet redan de flesta av de påhitt av e-formatering eftersom du har träffat dem innan.
  3. Du har satt upp dina egna verktyg för att hantera komponenter (för olika nyhetsbrev som dela några bitar av design), inlining stilar (och ja, du bör hålla inlining dina stilar om din e-post målet för en internationell publik), och har någon form av utveckling verktygslåda på plats (Gulp, Soldat eller något liknande) som kommer att automatisera allt som för dig.
  4. Du har den typ av strategi där du vill styra allt i koden du producerar och gillar inte att förlita sig på externa verktyg.
  5. Du föredrar att lösa dina egna fel istället för att behöva lösa eventuella fel som orsakas av det verktyg du använder.

Alternativ 3: Använd en Ram

Men om någon av följande punkter gäller för dig:

  1. Du måste producera en hel del e-post mallar med delade komponenter.
  2. Jobbet måste utföras av ett team av utvecklare, som kan ändras och/eller har en varierande grad av kunskaper och erfarenheter med e-post genomförande.
  3. Du har liten eller ingen kontroll på den ursprungliga designen.

…då kommer du troligen att ha stor nytta av att använda en ram.

För närvarande är två av de mest intressanta och populära ramar som finns tillgängliga är MJML och Stiftelsen för E-post. De största fördelarna med att använda antingen ramverk är att de redan har löst för dig mest av påhitt av e-postklienter. De ger dig också en etablerad arbetsflöde kan du följa, både ensam och som en grupp. De hanterar också responsiv design mycket bra, om än på olika sätt från varandra.

Låt oss titta på en översikt av både ramar och jämför bästa fall för alla innan man drar några slutsatser.

MJML

MJML är ett projekt som skapats internt av Mailjet, ett företag som specialiserat sig på e-marknadsföring. Det var då öppen källkod. Det fungerar med sina egna, HTML-liknande templating-språk, med hjälp av sina egna taggar. Till exempel:

<mj-text>Din text här</mj-text>

När du kompilerar den slutliga koden, MJML kommer att konvertera sina taggar i HTML-koden för allt från bord till anpassade komponenter som de har skapat för dig, alla med sin inre motor. Det tar ut den tunga lyft för att skapa komplexa markeringar och alla har testats.

MJML har en uppsättning av standard komponenter. De avsnitt, kolumner, grupper, knappar, bilder, sociala band (som är mycket lätt att skapa), tabeller, dragspel, etc. De är även inkluderar en pre-stil karusellen, som ska fungera i de flesta kunder. Alla dessa komponenter översätta bra till responsiv e-post, bortsett från “faktura” komponent som jag inte kunde komma till jobbet i mina tester. Alla dessa komponenter har parametrar som du kan skicka in din kod för att anpassa deras utseende.

För exempel, har de sociala länkar komponent gör att du kan stapla ikoner vertikalt och horisontellt, och att välja bakgrundsfärger för relaterade ikoner. Det finns faktiskt en hel del fler parametrar som du kan spela med, allt med avsikt att tillåta större flexibilitet. Även logotypen för bildfiler som redan ingår i paketet, vilket är ett stort plus.

Här är en förhandsvisning av en enkel konfiguration av sociala länkar komponent:

Skärmdump från MJML webbplats.

Du kan också skapa dina egna komponenter, eller använda komponenter som har skapats av samhället. Det är bara ett samhälle komponent som finns just nu dock.

MJML hanterar lyhördhet automatiskt, vilket innebär att komponenter kommer att byta från multi-column (fler artiklar i samma rad) till en enda kolumn (artiklarna läggs under varandra istället för side-by-side) utan någon aktiv inblandning från utvecklaren. Detta är en mycket flexibel lösning, och fungerar bra i de flesta fall, men det ger utvecklaren en lite mindre kontroll över vad som exakt händer i mallen. Som dokument nämna, det är värt att hålla minnet att:

För estetiska ändamål, MJML för närvarande stöder högst 4 kolumner per avsnitt.

Detta är sannolikt inte bara en estetisk preferens, men också om att begränsa möjliga nackdelarna med att ha för många kolumner. Fler kolumner du har, desto mer oförutsägbar utgång, antar jag.

Hur man Arbetar Med MJML

MJML kan fungera som ett kommandoradsverktyg som du kan installera med npm, och produktionen dina filer lokalt, med kommandon som:

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

Detta kan integreras i din bygger förfarande via Klunk eller liknande, och i ditt utvecklingsarbete med hjälp av en klocka-kommandot, som kommer att uppdatera din förhandsgranska varje gång du sparar:

$ mjml –titta på index.mjml -o index.html

MJML har plugins för Atom-och Sublime Text. I Atom, den levererar även en förhandsgranskning i realtid för din layout, som kan återskapas på alla spara. Jag har inte provat det själv, men det verkar mycket intressant:

Bild från Atom.io

MJML har också en egen enkel desktop-app, och det är gratis. Du kan ställa in din kod och komponenter, måste det bygga upp din design för dig, och få en förhandsgranskning i realtid av resultaten, både för mobila och stationära. Jag tycker att det fungerar ganska bra på Ubuntu, men den enda nackdelen jag hittat är att du ska aldrig, aldrig, aldrig öppna dina filer med en annan editor medan de är öppna på app eftersom appen kraschar och innehållet i filen försvinner.

Här är några skärmdumpar av smakprov på jobbet:

Skrivbordet förhandsgranskning av e-post
Mobil förhandsgranskning av e-post

Appen kan även integreras med en gratis Mailjet konto, vilket gör att du kan skicka testa e-post direkt till dig. Detta är mycket praktiskt för att snabbt kontrollera problematiska kunder, om du har dem tillgängliga direkt. (Jag skulle föreslå att du tar ut den gamla Windows-maskin som du har i förrådet för att kontrollera saker i Outlook, och för att göra det så ofta som möjligt.) Men jag skulle ändå rekommendera att använda antingen Avgörande eller E-post på Syra för att testa din e-post cross-klienten innan du distribuerar dem eftersom du kan aldrig vara alltför försiktig och e-post standarder kan ändra precis som de gör i webbläsare.

Generellt, jag har hittat MJML mycket lätt att använda. Men när jag försökte göra en pixel-perfekta mallen som var identisk med den design vår kund begärt, jag hade vissa svårigheter att hantera anpassade marginaler för vissa bilder. Inte alla ingående parametrar tillgängliga arbetat som förväntas av beskrivningen i dokumentationen. I synnerhet hade jag vissa problem med att anpassa bilden marginaler och utfyllnad mellan stationära och mobila.

Fördelar

  • Inbyggda komponenter
  • Integration med Mailjet
  • Lätt att använda, med omedelbar förhandsvisning av ditt arbete (på Atom-och Desktop-App)

Nackdelar

  • Lite mindre tillförlitliga än Grunden för E-post om du har att göra pixel-perfekt design
  • Vissa komponenter har parametrar som inte fungerar som förväntat
  • Desktop App inte helt stabila
  • Inte komma med en strukturerad uppsättning mappar för ditt innehåll (se Stiftelsen nedan)

Grunden för E-post

Grunden för E-post (tidigare känd som Ink — infoga obligatoriska Prins citat här) är en ram av Zurb, samma folk som förde oss lyhörda front-end ramverk, Stiftelsen för Webbplatser.

När du laddar ner det Startpaket du får en full utveckling-miljö, komplett med Node.js kommandon för att köra ditt projekt. Det kommer installera en Node rutin och även öppna din webbläsare för att ge dig en omedelbar förhandsvisning av ditt arbete.

De filer du har att använda är redan organiserade i mappar och undermappar, med en tydlig indikation på var du ska lägga dina saker. Det har till exempel kataloger speciellt för deltonerna, mallar och bilder. Jag hitta denna funktion är mycket viktig, eftersom det är mycket lätt att sluta med olika mappar när du arbetar i en grupp, och detta leder till en hel del förlorad tid på att leta efter saker som inte finns där du förväntar dig att det ska vara. Tillämpa konventioner är inte en begränsning, när du arbetar i ett team är det oumbärligt.

TFFKAI — Ramen Tidigare Känd Som Bläck

Stiftelsen för E-post som kommer med en standardtext mall, som är utgångspunkten för din kod. Det är fullt kommenterad, så att du vet hur att förlänga det med din kod. Det kommer med SASS/SCSS-stöd, vilket är mycket praktiskt för komplexa projekt. Det kommer också med sin egen inliner, så du behöver inte oroa dig för att konvertera alla dina CSS (eller SASS/SCSS) i inline styles.

Det är en mall som motorn bakom denna ram som kallas Inky. Och, precis som MJML, det har egna taggar som kommer att automatiskt konvertera till HTML när det är sammanställt. Det finns taggar som <behållare>, <rad>, <kolumn>, som kommer att användas för att bygga ditt rutnät. Nätet är baserat på ett 12-kolumn system, som tillåter dig att dela upp din layout på ett mycket exakt sätt. Varför 12? Eftersom det är delbart med 2, 3, 4 och 6, vilket gör det mycket enkelt att göra en 2 kolumn 3 kolumn 4 kolumn, eller 6-kolumn layout.

Grunden för E-post använder Panini för att kompilera koden. Panini är ett eget bibliotek som sammanställer HTML-sidor med hjälp av layouter. Det stöder Styret syntax och det finns flera hjälpare du kan använda för att anpassa beteendet av komponenter beroende på var de används. Du kan också skapa dina egna medhjälpare om du behöver och ligger varje mall är anpassade variabler med anpassade uppgifter. Detta är mycket användbart om du har flera mallar som delar samma komponenter.

Det finns flera färdiga e-post mallar som finns tillgängliga kan du hämta, som täcker många av de vanliga användningsfall för e-post, som nyhetsbrev och erbjudanden. Det finns också ett antal färdiga komponenter (med sina egna taggar), inklusive knappar, menyer och bildtexter (vilket jag måste erkänna, jag ser inte ett ändamål i e-post, men strunt samma).

En kod från en Stiftelse för E-post som mall.

Den största skillnaden mellan Grunden för E-post med MJML är att Grunden för E-post standard vyn skrivbord, då vågar för mindre skärmar. Enligt de dokument, detta eftersom många klienter som inte stödjer media queries och tredskande till den stora skärmen layout gör det mer över kompatibla e-postklienter. Som sagt, det bara förvaltar en brytpunkt. Du kan skapa den stationära versionen och den mobila versionen, och den mobila versionen växlar under ett visst antal pixlar, som kan konfigureras.

Du kan bestämma om vissa komponenter kommer att vara synliga på stora eller små skärmar med praktiska fördefinierade klasser .dölja-för-stora-och .visa-för-stor (även om .dölja-för-stora kanske inte stöds av alla kunder). Du kan också bestämma hur mycket utrymme en kolumnen kommer att ta av med hjälp av specifika klasser. Till exempel, en klass av .stor-6 och .små-12 på en div kommer att göra en kolumn som upptar halva skärmen på skrivbordet och hela skärmens bredd på mobilen. Detta gör att för mycket specifika och förutsägbar layout resultat.

En förhandsgranskning av samma e-post som mall, som utvecklats med Stiftelsen för E-post, Outlook 2007 (vänster) och iPhoneX (höger).

Grunden för E-post är lite clunkier att använda än MJML, i min mening, men det gör det möjligt för mycket striktare kontroll på layouten. Det gör den idealisk för projekt där du behöver för att återge pixel-perfekt design, med mycket specifika skillnader mellan mobila och stationära layouter.

Fördelar

  • En mer exakt kontroll över slutresultatet
  • Färdiga mallar
  • Sass stöd
  • Bra dokumentation

Nackdelar

  • Projektet filstorlek är tung och tar mycket diskutrymme
  • Lite mindre intuitivt att använda än MJML är fördefinierade parametrar på komponenter
  • Färre komponenter som finns tillgängliga för anpassade layouter

Slutsatser

Att producera e-postmallar, ännu mindre än front-end utveckling, är inte en exakt vetenskap. Det kräver en hel del trial and error och en HEL del tester. Oavsett vilka verktyg du använder, om du behöver för att stödja gamla kunder, då måste du testa skiten ur dina layouter — särskilt om de har ens den minsta grad av komplexitet. Till exempel, om du har en text som behöver sitta bredvid en bild, jag rekommenderar att du testar med innehåll i olika längder och se vad som händer i alla klienter. Om du har en text som behöver överlappa en bild, det kan vara lite av en mardröm.

Ju mer komplex layout och mindre kontroll man har över layouten, då mer användbart det är att använda en ram över hand-kodning din egen e-postmeddelanden, särskilt om utformning lämnas till dig av en tredje part och bör genomföras som det är.

Jag skulle inte säga att en ram är bättre än den andra och det är inte poängen med detta inlägg. Snarare, jag skulle rekommendera MJML och Stiftelsen för E-postmeddelanden för olika användningsfall:

  • MJML för projekt som har en snabb vändning och det finns flexibilitet i utformningen.
  • Grunden för E-post för projekt som kräver hårdare kontroll över layout och design är super specifika.

Resurser och Länkar

  • Den MJML webbplats
  • Grunden för E-post hemsida
  • Avgörande E-Testning
  • E-post på Acid Test
  • En intressant konversation på det Avgörande forum, som var på vissa sätt är utgångspunkten för denna artikel.
  • En annan artikel av James Luterek som jämför dessa ramar