Hoe een aangepaste e-mail met Stichting voor e-mails te bouwen
Het bouwen van e-mailsjablonen is helemaal goed. Het bouwen van responsieve e-mails is nog moeilijker.
Gelukkig hebben de vriendelijke mensen bij Zurb een fantastisch raamwerk ontwikkeld dat het proces van het bouwen van responsieve e-mails eenvoudiger maakt dan ooit tevoren.
Stichting voor e-mails (voorheen Ink) is een framework dat geschikt is voor een moderne ontwerper / ontwikkelaar die op zoek is naar de tools en technologieën van vandaag om responsieve e-mailsjablonen voor morgen te bouwen.
De nummers liegen niet
Volgens Zurb wordt 54% van de e-mails geopend op een mobiel apparaat en dit aantal zal waarschijnlijk stijgen. Met dat cijfer op zijn plaats, is de behoefte aan een responsieve e-mailsjabloon een must. Zurb verklaart ook dat 75% van de Gmail-gebruikers hun account openen vanaf hun mobiele apparaat.
Ongeacht het type e-mail dat wordt verzonden, Foundation for Emails heeft er voor gezorgd. Zodra u hun handige projectbuilder start, wordt u namelijk begroet met voorbeeldsjablonen om naar hartenlust te verwijzen of aan te passen.
Ermee beginnen
In dit artikel zal ik u laten zien hoe u aan de slag kunt met Stichting voor e-mails met behulp van een aangepaste sjabloon die ik heb ontworpen voor mijn eigen kleine merkbureau. Zoals met elk raamwerk, is het noodzakelijk dat u verwijst naar de documentatie . Ik zal niet over elk detail gaan als Zurb heeft al maar deze gids zal genoeg zijn om de grond te laten rennen.
Broncode
U kunt de definitieve broncode van dit project vinden op GitHub .
Installatie
Om te beginnen kunt u zich aanmelden om traditioneel te gebruiken CSS of Sass . Ik zal gebruik maken van Sass .
Er zijn veel redenen waarom ik deze route ga aanbevelen in tegenstelling tot traditioneel CSS . Deze redenen omvatten:
- Meer controle over de visuele stijlen van het framework
- Een volledig gebouwd proces inclusief Sass-compilatie en beeldcompressie
- Een gewoonte
HTMLtaal die bekend staat als inktzwart, wat betekent dat u geen tabelgebaseerde lay-outs met de hand hoeft te schrijven. - Een ingebouwde inliner voor het distribueren van uw CSS als inline CSS
- Live herladen
- Stuur sjabloneren
Opmerking - De Sass versie vereist Node.js rennen. Zorg dat je het installeert voordat je verder gaat.
Installeer de Foundation CLI en maak een nieuw project
Het installatieproces maakt gebruik van de Stichting CLI. Om gebruik te maken, open je het gewenste commandoregelprogramma en typ je het volgende:
Bash $ npm install --global foundation-cliAls u machtigingsfouten tegenkomt, kunt u dezelfde opdracht voor sudo gebruiken . U wordt gevraagd om uw systeemwachtwoord in te voeren.
Als de Foundation CLI is geïnstalleerd, kunt u nu een leeg Foundation for Emails-project maken. Ga naar ( cdinto ) de map waarin u het project wilt installeren en voer de volgende opdracht uit:
Bash $ foundation new --framework emailsDe CLI zou je om een projectnaam moeten vragen (ik heb mijn nieuwsbrief gebeld). Deze naam is de map waarin het hele project wordt vermeld als. Nadat dat is ingesteld, worden een aantal afhankelijkheden geïnstalleerd. (Dit kan enige tijd duren om te downloaden.)
Zodra het downloaden is voltooid, ziet u het volgende:
Bash You’re all set!✓ New project folder created.✓ Node modules installed.✓ Bower components installed.Now run foundation watch while inside the folder. cd in je projectmap door cd-nieuwsbrief te typen. Uw projectnaam kan variëren in vergelijking met de mijne, maar als u meegaat, zou u klaar moeten zijn om te gaan.
De server runnen en activa samenstellen
Voer vanuit de terminal het commando uit:
bash $ npm startDit zal het bouwproces dat ik eerder noemde afvuren. Het bouwproces zal HTML analyseren, Sass compileren, afbeeldingen comprimeren en een server starten. Je standaardbrowser opent een nieuw tabblad met je index.html bestand van het adres van localhost: 3000 . Vanaf deze pagina kunt u de voorbeeldsjablonen Foundation for Emails bezoeken die bij de installatie zijn meegeleverd.
Beoordeling van het ontwerp
Met Foundation for Emails geïnstalleerd en ons project draait op de server die door het framework wordt geboden, zijn we klaar om een beetje dieper in te gaan op het hanteren van het onderstaande ontwerp.
Het grootste deel van het ontwerp is minimaal met plaatsaanduiding voor een e-mail met een nieuwsbriefstijl. In de toekomst zullen we elementen binnen de sjabloon aanpassen om wijzigingen aan te brengen. Het is een beetje handiger dan een WYSIWYG-e-mailbouwer zoals de standaard MailChimp-sjablonen bijvoorbeeld, maar omwille van aangepaste branding is het de moeite waard. Ik denk dat de meeste gebruikers het ermee eens zijn. Je zou dit zeker kunnen uitbreiden om de editor binnen Mailchimp te gebruiken, maar dat is een onderwerp voor een andere keer.
Fresh starten
Ervan uitgaande dat u de Sass- versie gebruikt, wordt Foundation for Email geleverd met Inky HTML, wat hun eigen creatie is. Deze HTML is verantwoordelijk voor het snel maken van schrijftabellen en geavanceerde tabellay-outs.
De documentatie voor Stichting fro Emails is de beste plaats om alles te weten te komen over de aangepaste Inky HTML die u kunt gebruiken in uw eigen projecten. Vergeet niet om er vaak naar te verwijzen.
We zullen binnen de. Werken src map in onze projectmap. Deze bestanden worden bekeken via gulp.js en een aantal ingesloten plug-ins. Wanneer er wijzigingen worden aangebracht in onze sjablooncode en / of stijlen, worden alle bestanden in de dist- map dienovereenkomstig bijgewerkt. Ik zal niet diep ingaan op hoe dit allemaal werkt, maar ik herinner me dat toen ik nieuw was, het allemaal magie leek!
Inhoudsopgave
De indexpagina die u ziet, bevindt zich in src / layouts / index-layout.html . Stichting voor e-mails maakt gebruik van Sturen waarmee je templating binnen basic kunt maken HTML pagina's. U kunt bijvoorbeeld een deel maken HTML bestand dat dynamisch in een ander bestand wordt opgenomen.
Let op de tag {{> body}} . Alle inhoud wordt hier uiteindelijk uiteindelijk geïmporteerd, dankzij de HTML-paring die beschikbaar is in het kader.
Pages
Elke pagina die u ziet in src / pages / is wat in eerste instantie wordt weergegeven wanneer u $ npm start voor de eerste keer. Elke pagina is een voorbeeldsjabloon van Zurb.
Kopieer de inhoud van newsletter.html en maak een nieuw bestand aan met de naam branded-newsletter.html . Plak de inhoud erin. In dit bestand zullen we de merksjabloon bouwen die ik eerder heb gedeeld.
In het bestand zou u veel buitenlandse HTML-tags moeten zien. Deze maken deel uit van Inky HTML. In wezen kunt u ermee wegkomen door nooit fysiek tabellen te hoeven coderen. (Je kunt divs niet gebruiken in e-mails zoals webpagina's, hetzelfde geldt voor velen CSS eigenschappen.)
Hieronder volgt een kort overzicht van tags waar we het meeste gebruik van maken:
- Een wikkelelement met een ingestelde breedte. - noodzakelijk voor het inpakken van kolommen met inhoud die lijkt op een drijvend raster op websites.
- waar het grootste deel van uw inhoud zal leven. Deze kunnen worden aangepast met behulp van een lay-out met 12 kolommen. Ze gedragen zich als een zwevende of gebogen div, maar hebben tafels. - verticale spatiëring voor e-mailsjablonen. Veel e-mailclients houden geen rekening met marge of opvulling via CSS. Dit is een geweldige oplossing. Stel elke grootte in door het attribuut als volgt zo toe te voegen: . - - maak een knop met tabellen.
Bovenop deze tags staan aanvullende CSS-klassen die u via Sass kunt toevoegen, aanpassen en uitbreiden.
Steunt de nieuwsbriefsjabloon
Kortheidshalve, ik vat het coderingsproces samen en laat je alle HTML zien voordat ik het ontwerp. Hierdoor kan ik een soort skelet voor de sjabloon maken en me later zorgen maken over stijlen. Hieronder staat de HTML Ik eindigde met voor het ontwerp. Deze sjabloon leeft samen met de map pages en wordt opgenomen in het bestand indelingen / index-layout.html waar u de tag {{> body}} ziet .
html
Email not displaying correctly? https://coupleofcreatives.com" class=logo>
|
Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.
Recente casestudy
Wildwood Family Dentistry
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod sempre. Fusce dapibus, tellus ac cursus commodo, tortor mauris specimentum nibh, ut fermentum massa justo sit amet risus.
Van de blog
Dit is een koppeling naar een externe link Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod sempre. Fusce dapibus, tellus ac cursus commodo, tortor mauris specimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod sempre. Fusce dapibus, tellus ac cursus commodo, tortor mauris specimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod sempre. Fusce dapibus, tellus ac cursus commodo, tortor mauris specimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Bekijk onze nieuwste video
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod sempre. Fusce dapibus, tellus ac cursus commodo, tortor mauris specimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Volg ons op Instagram
|
Marketing nodig? Huur dit creatieve duo in
U heeft deze e-mail ontvangen omdat u bent aangemeld om updates van ons te ontvangen. Klik hier om je uit te schrijven.
Binnen in de HTML je ziet veel van de eerder genoemde aangepaste tags. De spacer element, bijvoorbeeld, ik gebruik veel om verticale spaties te maken. Ik doe dit simpelweg omdat niet alle e-mailclients marge en opvulling eren. Om het gedoe te redden, helpt het spacer-element enorm.
De stijlen toevoegen
Omdat ik de Sass-versie van Foundation voor e-mails gebruik, kan ik partities maken en deze in het hoofdbestand app.scss importeren. Dit bestand wordt in compilatie gecompileerd naar de map dist als app.css .
Ik maak gebruik van een lettertype genaamd Ideal Sans . Helaas kan ik het alleen op mijn gespecificeerde domein gebruiken, wat betekent dat je het niet zult kunnen gebruiken voor de kopjes aan je kant. Als u de kopjes volgt, heeft Arial de terugval voor het basislettertype.
De meeste aanpassingen die u kunt aanbrengen in de stijlen die zijn gebundeld in het kader, vindt u in de assets/scss/_settings.scss . Dit bestand heeft een verscheidenheid aan variabelen die klaar zijn om te worden aangepast aan uw eigen merk.
Naast het aanpassen van deze instellingen, heb ik een aantal eigen gedeelten gemaakt. Ik heb deze bestanden geïmporteerd in het bestand app.scss .
Responsieve e-mails
Foundation for Emails biedt ondersteuning voor snel reagerende e-mails. Gebundeld gebruiken
html Column 1 Column 2
Op basis van de schermgrootte van de gebruiker verschijnen deze kolommen op 50% breedte op grotere schermen en 100% breedte op kleinere schermen. Als u bekend bent met populaire CSS-frameworks zoals Bootstrap of Foundation, zou dit vrij gemakkelijk te begrijpen moeten zijn.
Afbeeldingen in e-mails gebruiken
Afbeeldingen moeten worden geladen vanaf een webserver met behulp van absolute URL-paden en bij voorkeur van hetzelfde domein als het e-mailadres van de persoon die het verzendt. Dus als ik een e-mail zou sturen van [e-mail beveiligd] {$lang_domain} voor mijn abonnees zouden de afbeeldingen onder hetzelfde moeten leven {$lang_domain} domeinnaam.
Als u dit doet, wordt de kans uitgesloten dat uw e-mail verkeerd wordt doorgestuurd naar een map met ongewenste e-mail en wordt deze ook professioneler weergegeven.
Alt-tags zijn een must
Als u normaal geen alt-tags gebruikt (ik weet niet waarom u dat niet zou doen), moet u dit doen in e-mails. Veel e-mailclients laden standaard geen afbeeldingen en het is aan de gebruiker. Met Alt-tags kan de afbeelding worden beschreven voordat de gebruiker deze ziet. Dit is zowel geweldig voor de toegankelijkheid als een sierlijke terugval voor diegenen die niet geïnteresseerd zijn in het laden van afbeeldingen in de e-mails die ze ontvangen.
Productiebestanden en testen bouwen
Op productie gebaseerde e-mails moeten hun CSS inline hebben. Inlining is het proces waarbij de stijlen op het element zelf worden gedefinieerd in plaats van een koppeling vanuit een extern stylesheet. Foundation for Emails heeft een handige build-functie die dit voor u doet. De laatste bestanden worden gecompileerd en verkleind in de map dist .
Als u productiebestanden wilt maken, moet u alle servers die al actief zijn, doden door ctrl + c in uw terminalprogramma te typen. Vanaf daar type:
Bash $ npm run buildWanneer de e-mail in de browser wordt geopend, zou u hetzelfde moeten zien als voorheen. Maar als u goed naar de bron van de pagina kijkt, ziet u een puinhoop van code. Dit is het resultaat van het bouwproces en ervan uitgaande dat alles er goed uitziet, is het klaar voor gebruik in het wild.
testen
Ik kan niet genoeg benadrukken hoe belangrijk het is om op zoveel mogelijk e-mailplatformen te testen. Uw ontwerp zal er waarschijnlijk allemaal anders uitzien, maar het doel is om een oplossing te creëren die op zijn minst consistent en leesbaar lijkt op de meeste platforms.
U kunt een tool gebruiken genaamd Lakmoes voor deze test. Er is een gratis versie van de tool waarmee u uw code kunt kopiëren en plakken en een e-mail kunt sturen naar uzelf of collega. Zorg ervoor dat je deze stap doet. E-mails die worden verzonden, kunnen uiteraard niet worden bewerkt.