Uw startproces opbouwen responsieve e-mail voor Gmail

Deze tutorial maakt deel uit van de Build Your Startup With PHP-serie op Envato Tuts +. In deze serie begeleid ik je door een opstart van concept naar realiteit te starten met behulp van mijn Meeting Planner-app als een realistisch voorbeeld. Elke stap die ik doe, zal ik de Meeting Planner-code vrijgeven als open-source voorbeelden waar je van kunt leren. Ik zal ook opstartgerelateerde zakelijke problemen aanpakken zodra deze zich voordoen.

In onze eerdere aflevering Invullende uitnodigingen introduceerde ik responsieve HTML-e-mailsjablonen die we hebben gebouwd op enkele open-source MailChimp-sjablonen. In onze vorige aflevering Refining Email Templates migreerden we naar de Sendwithus Oxygen-sjablonen. De nieuwe sjablonen zagen er fantastisch uit:

Maar er waren grote problemen met de sjablonen in Gmail. Hier is de Oxygen-verwijzingssjabloon in Gmail:

In deze zelfstudie vertel ik het verhaal over hoe ik de weergave van de nieuwe HTML-sjablonen in Gmail heb opgeruimd. Het heeft te maken met het inline plaatsen van de CSS omdat de genieën bij Google geen stijldefinities ondersteunen zoals iedereen. 

Aangezien waarschijnlijk de helft van de eerste ervaringen van mensen met Meeting Planner via een e-mail met vergaderverzoeken zal zijn en waarschijnlijk 10 tot 25 procent van die met Gmail is, was dit belangrijk om te verhelpen.

Als u Meeting Planner nog niet hebt uitgeprobeerd, kunt u uw eerste vergadering plannen. Ik neem wel deel aan de opmerkingen hieronder, dus vertel me wat je denkt! Je kunt me ook bereiken via Twitter @reifman. Ik ben vooral geïnteresseerd als u nieuwe functies of onderwerpen voor toekomstige zelfstudies wilt voorstellen.

Ter herinnering: alle code voor Meeting Planner is geschreven in het Yii2 Framework voor PHP. Als je meer wilt weten over Yii2, bekijk dan onze parallelle serie Programming With Yii2.

Een snelle verversing

Voor e-mailsjablonen besloot ik om te gaan met de Oxygen-e-mailsjablonen van Sendwithus. Oxygen bood een complete reeks sjablonen voor bruikbare scenario's. Het leek eenvoudig, georganiseerd en gemakkelijk uitbreidbaar:

Elk van de individuele sjablonen van Sendwithus kan worden bekeken en getest op hun Litmus-account.

Hier is onze reset uw wachtwoord e-mail nu op een iPhone, veel esthetisch comfortabeler dan voorheen:

Ik was een beetje in de war toen de eerste Gmail-pogingen die ik ontving er verkeerd uitzagen:

Maar door hun Litmus-previews te bekijken (die ze sindsdien hebben bijgewerkt en gerepareerd), heb ik laten zien dat ze er in Gmail precies zo uitzagen:

Ik heb later geleerd dat Gmail meer CSS-omkadering vereist dan andere services. Mijn taak was om dit probleem op te lossen voor gebruikers van Meeting Planner.

Het oplossen van het Gmail-probleem oplossen

Aanvankelijk dacht ik dat we de CSS-intekening voor Gmail zelf moesten beheren. Er waren twee paden om te nemen, niet gemakkelijk. 

Ofwel a) Ik had elk uitgaand bericht kunnen verwerken via een self-hosted Python premailer nadat het volledig was geconstrueerd, of, b) ik zou kunnen toepassen op de templates binnen de source tree.

Om het eenvoudig te houden, koos ik ervoor om de sjablonen handmatig in te voegen, omdat ik dacht dat ik in de toekomst zou kunnen kiezen voor live inlining. Ik ben niet zo bekend met het uitvoeren van Python-taken van PHP en het monitoren van hun prestaties op een kritieke functie zoals het e-mailen van uitnodigingen voor vergaderingen, dus ik besloot om deze route aanvankelijk niet te gaan. Evenzo, als ik een e-mail moet sturen naar alle 10.000 gebruikers, is dat 10.000 gebeurtenissen inline, wat de server zou kunnen vertragen.

Toch was de aanpak die ik koos niet gemakkelijk en veranderde het in een beetje een procedurele nachtmerrie. Er was geen gemakkelijke manier om automatisch HTML te genereren dat gemakkelijk kon worden verwerkt en vervolgens kon worden teruggestuurd naar PHP voor dynamische e-mailgeneratie.

Premailer van Peter Bengtsson inlines CSS voor u via Python. Hij wees me ook behulpzaam op Premailer.io, waardoor het eenvoudiger werd.

Kortom, u kopieert en plakt uw e-mailsjabloon in de textarea tab en klik op de Converteren knop (niet getoond):

Vervolgens kunt u de resulterende e-mailsjabloon kopiëren en plakken met CSS inline:

Hier is een beter overzicht van HTML met CSS-ingesloten ingebedde stijlen met elke HTML-tag, zoals Gmail-ingenieurs het leuk vinden:

  

U kunt het resultaat zelfs zien in de Voorbeeld tab-ik had zojuist de layout-header in deze screenshots verwerkt:

Het moest ook allemaal samen worden gedaan. Ik had een oude en een nieuwe lay-out en gewijzigde sjablooncode één voor één kunnen maken, maar dat zou meer delen van wijzigingen hebben gecreëerd. Uiteindelijk moest ik ongeveer zeven volledige sjablonen en hun delen van gedeelde onderdelen verwerken.

De sjablonen verwerken

Omdat Meeting Planner is gebouwd in de MVC-architectuur van Yii2, hebben e-mails een lay-outsjabloon buiten en een innerlijke sjabloon met veel verweven PHP voor het genereren van gegevens. Ik had ook subsjablonen voor algemene, herbruikbare elementen, zoals notities voor vergaderingen en voetteksten. 

U kunt PHP-beladen weergavecode niet alleen verwerken. Je moet PHP-elementen verwijderen, de sjabloon uitvoeren via Premailer en vervolgens de PHP-code opnieuw integreren. Ik heb het geluk dat de meeste van mijn PHP-code de stijlen niet intensief gebruikt en dat het redelijk eenvoudig was om te knippen en later opnieuw te integreren.

Al met al maakte dit het proces van het genereren van inline-sjablonen behoorlijk moeilijk en tijdrovend. Het maakte ook het idee van het onderhouden en bouwen van nieuwe sjablonen een uitdaging.

In principe moest ik tijdelijke bestanden maken met het volledige stijlblok hierboven en de HTML die ik hieronder inline wilde, de PHP verwijderen, de sjabloon verwerken en vervolgens de PHP herintegreren.

Ik heb de HTML-lay-out van Mail eerst verwerkt. Vervolgens heb ik elke afzonderlijke subsjabloon en sjabloon verwerkt.

Maar het werkte; hier is een screenshot van de Stel je wachtwoord opnieuw in sjabloon in webgebaseerde Gmail:

Nog een veelbelovende oplossing

Op een gegeven moment aan het einde van al dit gruntwerk en het groeiende besef van hoe moeilijk het zou zijn om mijn sjablonen in de nabije toekomst te onderhouden, vroeg ik me af of Mailgun CSS inlining verstrekte en online begon te zoeken. 

Mailgun niet, maar SwiftMailer, dat Yii gebruikt voor het bezorgen van e-mail SMTP, wel. Het duurde nog een half uur om mijn eerdere werk op te ruimen (a.k.a. puinhoop) en alles op te lossen, de CSS Inlining-plugin voor SwiftMailer te installeren.

Ik heb de PHP-gebaseerde Open Buildings CSS Inliner plug-in gebruikt die ik heb toegevoegd aan composer.json:

"minimum-stability": "stable", "require": "php": "> = 5.4.0", "yiisoft / yii2": "> = 2.0.7", "yiisoft / yii2-bootstrap": " * "," yiisoft / yii2-swiftmailer ":" * "," openbuildings / swiftmailer-css-inliner ":" * "," 2 amigos/yii2-google-maps-library ":" * ", 

Dit zijn de resultaten van de composer-update:

$ composer-update Laden van composer-repositories met pakketinformatie Bijwerken van afhankelijkheden (inclusief require-dev) - Installeren van openbuildings / swiftmailer-css-inliner (0.3.0) Downloaden: 100% - Installeren van symfony / css-selector (v3.1.0) Downloaden: 100 % - Tijsverkoyen / css-to-inline-stijlen installeren (1.5.5) Downloaden: 100% Schrijfslotbestand Autoload-bestanden genereren

Ik moest ook de mailerconfiguratie aanpassen om de plug-in te gebruiken in /common/config/main-local.php (in lokaal en productie):

 ], 'mailer' => ['class' => 'yii \ swiftmailer \ Mailer', 'viewPath' => '@ common / mail', // becommentarieer de volgende array om e-mail te verzenden met behulp van de mailfunctie van php 'transport' = > ['class' => 'Swift_SmtpTransport', 'host' => 'smtp.mailgun.org', 'gebruikersnaam' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'wachtwoord' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'port' => '587' , 'encryptie' => 'tls', 'plugins' => [['class' => 'Openbuildings \ Swiftmailer \ CssInlinerPlugin',],],], // verstuur alle mails standaard naar een bestand. Je moet // 'useFileTransport' instellen op false en een transport // configureren voor de mailer om echte e-mails te verzenden. 'useFileTransport' => false,],],

Dingen begonnen behoorlijk snel te werken, hoewel er nog steeds een groot visueel defect was in Gmail:

De CSS inliner van het Open Building geschreven in PHP presteerde niet zo succesvol als de op Python gebaseerde Premailer, althans uit de doos met standaardinstellingen.

In plaats van tijd te besteden aan het debuggen van de PHP-gebaseerde inliner en de sjablonen op dit moment, besloot ik terug te schakelen naar de Premailer-verwerkte sjablonen. Het werkt nu goed.

Op een gegeven moment zal ik opnieuw moeten bekijken of er eenvoudige manieren zijn om dit op te lossen of om de PHP-gebaseerde inlining-plug-in te configureren. Als alternatief moet ik mogelijk overschakelen naar de Python inliner. 

Wanneer je een startup bouwt, moet je je strijd kiezen en alles voorrang geven. Op dit moment heeft dit een lagere prioriteit en is het redelijk gemakkelijk om rond te werken.

In de codestructuur vind je / common / mail / inlining met een boom van verschillende mappen en een bestand mail-readme.txt om uit te leggen wat er is. In principe zijn er kopieën van de zuurstofsjablonen, de werkende PHP-versies, de bewerkte voorbewerkte code en de uiteindelijke verwerkte code.

Wat is het volgende?

Momenteel werk ik aan het voorbereiden van Meeting Planner voor het vrijgeven van alfa's. Ik ben vooral gericht op verbeteringen en functies om de alpha-release soepel te laten verlopen. Ik ben nu alles aan het volgen in Asana, waarover ik in een toekomstige tutorial zal schrijven. Er zijn ook een aantal interessante nieuwe functies die nog steeds onderweg zijn.

Ten slotte begin ik te experimenteren met WeFunder op basis van de implementatie van de nieuwe crowdfundingregels van de SEC. Overweeg om ons profiel te volgen. Ik zal hier ook meer over schrijven in een toekomstige tutorial.

Terwijl u op meer afleveringen wacht, plant u uw eerste vergadering en test u de sjablonen met uw vrienden met Gmail-postvakken. Ik zou het ook op prijs stellen als u uw ervaringen hieronder in de opmerkingen deelt en ik ben altijd geïnteresseerd in uw suggesties. Je kunt me ook rechtstreeks op Twitter @reifman bereiken.

Kijk uit voor komende tutorials in de Building Your Startup With PHP-serie.

Gerelateerde Links

  • Meeting Planner
  • De Funder-pagina van Meeting Planner
  • Programmeren met Yii2: Aan de slag
  • De Yii2 Developer Exchange
  • Premailer.io: Premailer van Peter Bengtsson (gebaseerd op Python)
  • Open Buildings CSS Inliner plugin (PHP-gebaseerd)
Veranderingen in uw vergadering

Hoi , er zijn wijzigingen aangebracht aan uw vergadering.

Klik op de onderstaande knop om de vergaderingpagina te bekijken.