Het kiezen van een Responsive e-Mail Kader: MJML vs. Stichting voor e-Mails

0
23

De uitvoering van responsive e-mail design kan een beetje van een sleep. Gebouw responsive e-mails is niet eenvoudig, het is als het nemen van een time machine terug naar 2001 toen waren we allemaal codering website lay-outs in tabellen met behulp van Dreamweaver en Fireworks.

Maar er is hoop! We hebben instrumenten beschikbaar die kunnen maken dat het bouwen van e-mail veel gemakkelijker en meer als het coderen van een moderne website. Laten we een kijkje nemen op een paar van de verschillende kaders, die om dingen te vereenvoudigen voor ons.

Ten eerste, de Situatie

Je moet compatibel met veel van de oude e-mail clients, waarvan velen niet eens de meest elementaire web standaarden (drijvers, iemand?). Heb je ook te maken met allerlei webmail clients die, om technische en veiligheidsredenen, hebben hun eigen eigenzinnige keuzes te maken over hoe u uw kostbare e-mail.

Bovendien, nu e-mails lezen van verschillende apparaten, met zeer verschillende viewports en eisen.

De beste oplossing is, zoals vaak het geval is, zou zijn om dingen eenvoudig te houden en vasthouden aan de basis van één kolom ontwerpen, het gebruik van meerdere kolommen alleen voor menu ‘ s of de eenvoudige interface-elementen van bekend breedte. Kunt u produceren grote, effectieve ontwerpen met behulp van slechts één kolom, na alle.

Echter eind-gebruikers en klanten, die zijn gebruikt voor de “normale” browser-gebaseerde web, kunnen hun e-mail-kijkervaring naar dezelfde hoge normen die zij doen voor het bekijken van webpagina ‘ s in termen van graphics en responsiviteit. Daarom, complexe ontwerpen worden verwacht: meerdere kolommen, verschillende vormen van gedrag op mobiele apparaten, in tegenstelling tot desktops, veel afbeeldingen, etc., die allemaal moeten worden consequent toegepast en pixel-perfect in alle e-mailclients. Welke opties zijn beschikbaar voor het maken van al dat gebeuren?

Optie 1: Bouwen Van Scratch

Een optie die je kan kiezen is de codering van elke e-mail met de hand, om de dingen eenvoudig houden, en te testen terwijl u gaan. Dit is een haalbare optie is alleen als:

  1. Je hebt een zeer eenvoudig ontwerp uit te voeren.
  2. Heeft u directe controle van het ontwerp, zodat u eventueel kunt vereenvoudigen dingen als je niet kan komen met een consistente oplossing voor wat u bedoeld zijn om te doen.
  3. U kunt het accepteren van een zekere mate van degradatie op sommige oudere cliënten: je vind het niet erg als uw e-mail niet precies hetzelfde (of zelfs gewoon slecht) in de oude Outlook-clients, bijvoorbeeld.
  4. Heb je veel tijd op uw handen.

Uiteraard moet u test uw ontwerp zwaar. Campaign Monitor is een geweldige CSS handleiding die u kunt raadplegen tijdens het build-proces en is een soort van als het Kan Gebruik ik, maar voor e-mail. Na dat, adviseer ik met behulp van geautomatiseerde test suites als Lakmoes of e-Mail op Zuur. Beide bieden u een volledige test suite en voorbeelden van hoe uw e-mail eruit zal zien op een grote verscheidenheid van e-mail clients. Verwachten dat een aantal verrassingen, want vaak hetzelfde ontwerp niet correct is, zelfs op hetzelfde e-mail client, als weergegeven op de verschillende browsers, of verschillende besturingssystemen. Fonts renderen anders, marges zal veranderen, enzovoort.

Screenshot van hetzelfde e-mail ontwerp getest op verschillende apparaten op de e-Mail op Zuur.

Optie 2: Gebruik een Standaard Sjabloon

Een andere optie is om gebruik te maken van een van de verschillende boilerplates beschikbaar, zoals Sean Powelll ‘ s, die je hier kunt vinden. Boilerplates al veel van de eigenaardigheden van de verschillende e-mail clients en platforms. Dit is verstandig als:

  1. U werkt alleen of in een klein team.
  2. Je hebt veel ervaring, dus weet je al de meeste van de grillen van het e-opmaak, want je hebt ontmoet.
  3. U hebt uw eigen tools voor het beheren van onderdelen (voor de verschillende nieuwsbrieven die delen een aantal stukken van het ontwerp), inline styles (en ja, je moet houden inlining uw stijlen als uw e-mails te richten op een internationaal publiek), en een soort van ontwikkeling van de toolkit in de plaats (van de Gulp, Grunt of iets dergelijks) die zal automatiseren.
  4. U hebt de aard van de aanpak waar je graag controle over alles in de code die u produceert en niet afhankelijk is van externe hulpmiddelen.
  5. U de voorkeur geeft aan de oplossing van je eigen fouten in plaats van het oplossen van eventuele fouten, veroorzaakt door het programma dat u gebruikt.

Optie 3: Gebruik van een Kader

Echter, als een van de volgende punten gelden voor u:

  1. U hebt een heleboel van e-mail templates met gedeelde componenten.
  2. De opdracht dient te worden uitgevoerd door een team van ontwikkelaars, die kan veranderen en/of hebben een variabele mate van deskundigheid en ervaring met e-uitvoering.
  3. Heb je weinig of geen controle op het oorspronkelijke ontwerp.

…dan zult u waarschijnlijk veel profiteren van het gebruik van een framework.

Momenteel zijn twee van de meest interessante en populaire frameworks beschikbaar zijn MJML en de Stichting e-Mails. De grootste voordelen in het gebruik van beide kader is dat ze al een oplossing voor u het meest van de grillen van e-mail clients. Ze bieden u ook met een gevestigde workflow die u kunt volgen, zowel alleen als in teamverband. Ze behandelen ook responsive design zeer goed, zij het verschillend van elkaar.

Laten we kijken naar een overzicht van beide kaders en vergelijk de beste gebruik van de zaken voor elke voor het tekenen van een aantal conclusies.

MJML

MJML is een project dat gemaakt werd intern door Mailjet, een bedrijf gespecialiseerd in e-mail marketing tools. Het was dan open-source. Het werkt met zijn eigen custom HTML-achtige template taal, met behulp van haar eigen tags. Bijvoorbeeld:

<mj-tekst – >tekst hier</mj-tekst>

Bij het samenstellen van de definitieve code, MJML zal zetten hun tags in HTML voor alles van tabellen aangepaste onderdelen die ze hebben gemaakt voor u, alle met behulp van de interne motor. Het gaat uit van het tillen van zware lasten voor het maken van complexe opmaak en het is allemaal getest.

MJML is een set van standaard componenten. Ze zijn voorzien van profielen, kolommen, groepen, knoppen, afbeeldingen, sociale banden (die zijn erg makkelijk om te maken), tabellen, accordeons, enz. Ze hebben zelfs een pre-stijl carrousel, die moeten werken in de meeste klanten. Al deze onderdelen goed te vertalen in responsive e-mails, afgezien van de “factuur” component die ik niet kon aan de slag in mijn tests. Al deze componenten hebben parameters die u kunt geven in uw code voor het aanpassen van hun uiterlijk.

Bijvoorbeeld, de sociale banden component kunt u stack pictogrammen verticaal en horizontaal, en te kiezen voor achtergrond kleuren voor de verwante pictogrammen. Er zijn eigenlijk een veel meer parameters die je kunt spelen, en dit alles met de bedoeling van het toestaan van een grotere flexibiliteit. Zelfs het logo image bestanden zijn al inbegrepen in het pakket, dat is een grote plus.

Hier is een voorbeeld van een eenvoudige configuratie van de sociale banden onderdeel:

Screenshot van de MJML website.

U kunt ook uw eigen aangepaste onderdelen, of gebruik van onderdelen die door de gemeenschap. Er is slechts één gemeenschap component beschikbaar op het moment, echter.

MJML handgrepen responsiviteit automatisch, wat betekent dat onderdelen van de switch van de multi-kolom (meer items in dezelfde rij) naar één kolom (items worden één onder de ander, in plaats van de side-by-side), zonder actieve tussenkomst van de ontwikkelaar. Dit is een zeer flexibele oplossing, en werkt prima in de meeste gevallen, maar het geeft de ontwikkelaar een beetje minder controle over wat er precies gebeurd in de sjabloon. Als de documenten vermelden, het is de moeite waard om rekening mee dat:

Voor esthetiek doeleinden, MJML ondersteunt momenteel een maximum van 4 kolommen per sectie.

Dit is waarschijnlijk niet alleen een esthetische voorkeur, maar ook over het beperken van de mogelijke nadelen van het hebben van te veel kolommen. Hoe meer kolommen je hebt, hoe meer onvoorspelbare de uitgang, denk ik.

Hoe te Werken Met MJML

MJML kan werken als een command line tool, die u kunt installeren met npm, en de output van uw bestanden lokaal, met commando ‘ s zoals:

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

Dit kan geïntegreerd worden in uw bouw procedure via de Gulp en dergelijke, en in uw ontwikkeling door het gebruik van een controle-opdracht, die zal het bijwerken van uw voorbeeld elke keer dat u bespaart:

$ mjml –kijk index.mjml -o index.html

MJML heeft plugins voor Atoom-en Sublieme Tekst. In Atom, het levert zelfs een real-time preview van uw lay-out, die kan worden geregenereerd op elk opslaan. Ik heb niet geprobeerd het persoonlijk, maar het lijkt zeer interessant:

Beeld van het Atoom.io

MJML heeft ook haar eigen, eenvoudige desktop app, het is gratis. U kunt uw code en componenten, het bouwen van uw ontwerpen voor u, en een real-time preview van de resultaten, voor zowel mobiele en desktop. Ik vind dat het werkt vrij goed op Ubuntu, maar het enige nadeel dat ik heb gevonden is dat je moet nooit, nooit, nooit meer je bestanden openen met een editor, terwijl ze openen van de app, omdat de crashes van de app en de inhoud van het bestand verloren is gegaan.

Hier zijn een aantal screenshots van de voorbeelden op het werk:

Desktop voorbeeld van e-mail
Mobiele voorbeeld van e-mail

De app kan ook worden geïntegreerd met een gratis Mailjet account, waarmee u het verzenden van test-e-mails direct naar jezelf. Dit is erg handig om snel te controleren problematische klanten als je ze hebt direct beschikbaar. (Ik stel het nemen van die oude Windows machine die u in de berging dingen te controleren in Outlook, en doe het zo vaak mogelijk.) Echter, ik zou nog steeds aanbevelen met behulp van ofwel Lakmoes of e-Mail op Zuur voor het testen van uw e-mails cross-client voor het implementeren van hen, want u kunt nooit te voorzichtig en e-mail normen kunnen veranderen net zoals ze doen in browsers.

Kortom, ik heb gevonden MJML zeer makkelijk te gebruiken. Echter, toen ik probeerde om een pixel-perfecte sjabloon die identiek is aan het ontwerp van onze klant, had ik wat problemen omgaan met aangepaste marges voor bepaalde afbeeldingen. Niet alle van de component parameters beschikbaar werkte zoals verwacht op basis van hun beschrijving in de documentatie. In het bijzonder, ik had wat problemen met het aanpassen van het beeld van de marges en opvulling tussen desktop en mobiel.

Voordelen

  • Voorgebouwde componenten
  • Integratie met Mailjet
  • Eenvoudig te gebruiken met instant preview van uw werk (op Atoom-en Desktop-App)

Nadelen

  • Een beetje minder betrouwbaar dan de basis voor e-Mails indien u hoeft te doen, pixel-perfecte ontwerpen
  • Sommige componenten hebben parameters die niet werken zoals verwacht
  • Desktop App niet perfect stabiel
  • Wordt niet geleverd met een gestructureerde set van mappen voor uw inhoud (zie Foundation hieronder)

Stichting e-Mails

Stichting e-Mails (voorheen bekend als Inkt — plaats verplichte Prins uitspraak) is een raamwerk dat door Zurb, dezelfde mensen die ons de responsieve front-end framework, Stichting voor Websites.

Wanneer u het downloaden van de Starter Kit krijgt u een volledige ontwikkelomgeving, compleet met Node.js opdrachten voor het uitvoeren van uw project. Het zal setup een Knooppunt routine en zelfs het openen van uw browser om u onmiddellijk een voorbeeld te zien van je werk.

De bestanden die u moet gebruiken zijn al georganiseerd in mappen en submappen, met een duidelijke indicatie van waar je spullen. Het is bijvoorbeeld mappen specifiek voor partiële protheses, sjablonen en afbeeldingen. Ik vind deze functie erg belangrijk, want het is erg makkelijk om te eindigen met behulp van verschillende mappen wanneer u werkt in een team, en dit leidt tot een veel verloren tijd op zoek naar dingen die niet waar je het verwacht. De handhaving van verdragen is niet een beperking; wanneer u werkt in een team is onmisbaar.

TFFKAI — Het Kader Voorheen Bekend Als Inkt

Stichting e-Mails wordt geleverd met een standaard sjabloon, dat is het uitgangspunt voor de code. Het is volledig voorzien van aantekeningen, zodat je weet hoe het uit te breiden met uw code. Het gaat met SASS/SCSS ondersteuning, dat is heel erg handig voor complexe projecten. Het komt ook met zijn eigen inliner, dus je hoeft je geen zorgen te maken over het omzetten van al uw CSS (of SASS/SCSS) in inline styles.

Er is een template engine achter dit kader genoemd Inktzwarte. En, net als MJML, het heeft custom tags die zal worden automatisch omgezet naar HTML wanneer het is samengesteld. Er zijn tags zoals <container>, <row>, <kolom>, welke zullen worden gebruikt voor de bouw van het raster. Het rooster is gebaseerd op een 12-kolom-systeem, waarmee je de splits van je lay-out heel nauwkeurig. Waarom 12? Omdat het deelbaar is door 2, 3, 4 en 6, waardoor het zeer gemakkelijk om een 2-kolom 3 kolom, 4-kolom-of 6-kolom lay-out.

Stichting e-Mails gebruikt Panini om de code te compileren. Panini is een aangepaste bibliotheek die gecompileerd HTML-pagina ‘ s met behulp van lay-outs. Het ondersteunt Stuur syntaxis en er zijn een aantal helpers die u kunt gebruiken voor het aanpassen van het gedrag van de componenten, afhankelijk van waar ze worden gebruikt. U kunt ook uw eigen helpers als u wilt en elk sjabloon aangepaste variabelen gebruiken met aangepaste gegevens. Dit is erg handig als u verschillende sjablonen voor het delen van dezelfde componenten.

Er zijn verschillende pre-built e-mail sjablonen beschikbaar die je kunt downloaden, die veel van de standaard use cases voor e-mail, zoals nieuwsbrieven en aankondigingen. Er zijn ook een paar voorgebouwde componenten (met hun eigen tags), inclusief knoppen, menu ‘ s en toelichtingen (die, ik moet het toegeven, ik zie daar niet echt een doel voor in e-mails, maar dat is niet erg).

Een voorbeeld code van een Stichting voor e-Mails sjabloon.

Het belangrijkste verschil tussen de basis voor e-Mails met MJML is dat Stichting e-Mails standaard ingesteld op bureaublad weergeven, dan schalen voor kleinere schermen. Volgens de documenten, dit is omdat veel desktop-clients ondersteunen geen media queries en die standaard op het grote scherm lay-out maakt het meer in overeenstemming te brengen over e-mailclients. Dat gezegd hebbende, het beheert alleen een breekpunt. U maakt de desktop-versie en de mobiele versie en de mobiele versie van de schakelaars onder een bepaald aantal pixels, die kunnen worden geconfigureerd.

U kunt zelf beslissen of sommige onderdelen worden alleen zichtbaar op een grote of kleine schermen met behulp van handige, vooraf gedefinieerde klassen willen .verbergen-voor-grote-en .show-voor-grote (hoewel .verbergen-voor-groot mogelijk niet ondersteund door alle klanten). U kunt ook bepalen hoeveel ruimte een kolom zal nemen door het gebruik van specifieke klassen. Bijvoorbeeld, een klasse .groot-6-en .kleine-12 op een div maken een kolom beslaat de helft van het scherm op de desktop en de hele breedte van het scherm op de mobiele telefoon. Dit zorgt voor een zeer specifieke en voorspelbaar lay-out resultaten.

Een voorbeeld van het e-mail template, ontwikkeld met Stichting e-Mails, Outlook 2007 (links) en iPhoneX (rechts).

Stichting e-Mails is een beetje clunkier te gebruiken dan MJML, in mijn mening, maar het staat voor veel strengere controle op de lay-out. Dat maakt het ideaal voor projecten waar je moet reproduceren pixel-perfecte ontwerpen, met een zeer specifieke verschillen tussen mobiele en desktop-outs.

Voordelen

  • Een meer nauwkeurige controle over het eindresultaat
  • Pre-en-klare sjablonen
  • Sass ondersteuning
  • Goede documentatie

Nadelen

  • Het project bestand grootte is zwaar en neemt veel schijfruimte
  • Een beetje minder intuïtief te gebruiken dan MJML de vooraf gedefinieerde parameters op onderdelen
  • Minder componenten beschikbaar voor aangepaste lay-outs

Conclusies

Het produceren van e-mail templates, zelfs minder dan de front-end ontwikkeling, is geen exacte wetenschap. Het vereist een veel trial and error en een HELEBOEL testen. Welk hulpmiddel u gebruikt, als u behoefte aan ondersteuning van het oude klanten, dan moet u voor het testen van de hel uit van uw lay — outs, vooral als ze ook maar het kleinste mate van complexiteit. Als u bijvoorbeeld de tekst in die moet zitten naast een afbeelding, ik beveel het testen met content op verschillende lengtes en zie wat er gebeurt bij alle klanten. Als u tekst die moet overlappen een afbeelding, het kan een beetje een nachtmerrie.

Hoe complexer de lay-out en de minder controle je hebt over de lay-out, dan is het nuttig het is om gebruik te maken van een kader over hand-codering van uw eigen e-mails, vooral als het ontwerp is aan je overhandigd door een derde partij en moet worden uitgevoerd zoals het is.

Ik zou niet zeggen dat een kader is beter dan de andere en dat is niet het punt van deze post. Integendeel, zou ik adviseren MJML en de Stichting e-Mails voor verschillende use cases:

  • MJML voor projecten die een snelle doorlooptijd en is er flexibiliteit in het ontwerp.
  • Stichting e-Mails voor projecten waarvoor een strakkere controle over de lay-out en het design is super specifiek.

Bronnen en Links

  • De MJML website
  • De Stichting e-Mails website
  • Litmus E-Mail Testen
  • E-on Acid Test
  • Een interessant gesprek over de Lakmoes forum, en dat was in sommige opzichten is het uitgangspunt voor dit artikel.
  • Een ander artikel van James Luterek dat vergelijkt deze kaders