Share
Wat je gaat creërenDeze 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 deze zelfstudie zal ik de responsieve HTML-e-mailsjablonen verfijnen die Meeting Planner gebruikt om uitnodigingen, meldingen, herinneringen en accountgerelateerde berichten te verzenden.
Tijdens de eerste fase van de ontwikkeling van Meeting Planner heb ik me voornamelijk gericht op functionaliteit en nog niet aanzienlijk geïnvesteerd in ontwerp of een ontwerper ingehuurd. Het doel van vandaag is om het uiterlijk van de bestaande HTML-sjablonen op te schonen zodat de standaard e-mails leesbaarder en bruikbaarder voor mensen zijn.
Waarschijnlijk is de helft van de eerste ervaring van mensen met Meeting Planner via een e-mail met een vergaderverzoek.
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.
In eerste instantie gebruikte ik basiskaders die ik op het web vond om vroege e-mails voor Meeting Planner te maken. Ze werkten acceptabel voor de vroege ontwikkelingsfase.
Hier is een voorbeeld van onze bestaande HTML-e-mails; ze zijn functioneel, maar niet erg aantrekkelijk. En over het algemeen heb ik besloten dat mensen niet zoveel opties en links nodig hebben binnen hun uitnodigingen. Het was tijd om de overvloed aan opties te verminderen voor een eenvoudiger ervaring.
Zelfs met de sjablonen die ik had gebruikt, bleken e-maillijsten vaak corrupt zonder gemakkelijke uitleg:
Ik was me aan het voorbereiden om te migreren naar professioneler e-mailsjablonen, maar het was absoluut te laat.
Hier volgt een samenvatting van de berichten die Meeting Planner vandaag regelmatig verzendt:
Voor de alfatest hoop ik dat ik een redelijke esthetische basislijn kan bereiken door open-source-sjablonen toe te passen die op internet te vinden zijn. Op een later tijdstip huren we een ontwerper in om de sjablonen, het thema en het merk samen te stimuleren.
Ik ben op internet gaan zoeken naar de beste e-mailsjablonen.
Er zijn een aantal handige gidsen zoals deze:
En een aantal providers bieden hun eigen open source-sjablonen:
Aanvankelijk werd ik aangetrokken door de sjablonen van Mailgun, omdat ik vond dat ze grondig werden getest en ik daarop kon voortbouwen, maar uiteindelijk besloot ik om met Sendwithus's Oxygen-e-mailsjablonen te gaan. Sendwithus is een synergetisch marketingplatform voor Mailgun (of mogelijk andere e-mailproviders), maar ik heb geen ervaring met hun algehele service.
Oxygen bood een complete reeks sjablonen voor bruikbare scenario's. Het leek eenvoudig, georganiseerd en gemakkelijk uitbreidbaar:
Het is een soort van hen om hun open-source e-mailsjablonen aan te bieden zonder dat je een betalende gebruiker hoeft te zijn. Ga open source!
Als een MVC-raamwerk scheidt Yii lay-outs van de inhoud van het lichaam. Dus moest ik de sjablonen splitsen en de verschillen tussen variaties binnen een groep bewaken.
Je kunt de Oxygen-reeks sjablonen downloaden van de Sendwithus GitHub, maar ze hebben de standaardstijlelementen die bij elke sjabloon horen niet duidelijk verdeeld, dus je moet dat zelf doen.
Het duurde enige tijd om te kiezen welke sjablonen ik verkoos, welke elementen ik leuk vond in elke template en welke CSS in de lay-out moest worden geïntegreerd.
Uiteindelijk is hier de nieuwe HTML-indeling (ik heb de stijlen hier ingekort voor de leesbaarheid):
BeginPageprocedures (); ?><?php echo Html::encode($this->titel); ?> hoofd(); ?> ... beginBody (); ?>
|
Binnen de sjablonen moest ik een aantal elementen vervangen:
Ik heb een logobestand gemaakt dat voor nu zou werken, en ik host het statisch en de hulpfoto's, bijvoorbeeld voor Twitter, op de server van Meeting Planner.
Ik heb ook de standaardkoppelingen in de e-mail vervangen door code voor onze sitekoppelingen.
Om hergebruik in de hele applicatie te vereenvoudigen, heb ik de code voor de voettekst gescheiden:
Seattle, Washington
|
Om de sjablonen te integreren, wilde ik beginnen met de gemakkelijkste. Zich verplaatsen in complexe, onbekende CSS en HTML is nooit eenvoudig.
Ik begon met onze e-mailsjabloon voor wachtwoordherstel.
Ik koos Oxygen's welkomstsjabloon hieronder getoond:
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 het bekijken van hun Litmus-previews liet me zien dat ze er in Gmail zo uitzagen:
Ik heb later geleerd dat Gmail meer CSS-omkadering vereist dan andere services. Ik zal u helpen bij het repareren van dit in een toekomstige zelfstudie.
Hier is de code passwordRequestToken.php die heeft geholpen het bovenstaande te genereren:
urlManager-> createAbsoluteUrl (['site / reset-wachtwoord', 'token' => $ user-> password_reet_token]); ?>
Stel je wachtwoord opnieuw in Hallo ID kaart)); ?>, Klik op de onderstaande knop om uw Meeting Planner-wachtwoord opnieuw in te stellen: view-> renderFile ('@ common / mail / section-footer-static.php')?>
De uitnodiging die mensen ontvangen als een verzoek om elkaar te ontmoeten, is onze meest complexe sjabloon. Het deelt een korte inleiding, mogelijke plaatsen, mogelijke tijden en soms een notitie.
Hiervoor heb ik de Oxygen Confirm-sjabloon gebruikt:
Ik dacht dat de verzend- en datumverzonden dozen konden worden gebruikt voor het delen van plaats- en datumtijdopties, en het werkte redelijk goed.
Hier ziet de uitnodiging er nu uit:
Zeker, de basis esthetische uitstraling is veel beter. In de toekomst kan ik wat werk doen om de verticale hoogten van de vakken plaatsen en datumtijden te nivelleren en gelijk te maken.
Hier is de code-instantie invitation-html.php die heeft geholpen het bovenstaande te genereren:
view-> renderFile ('@ common / mail / sectie-footer-dynamic.php', ['links' => $ links])?>
Uw vergaderverzoek Hoi, nodigt u uit voor een evenement met een nieuwe service genaamd . De service maakt het gemakkelijk om vergaderingen te plannen zonder de slopende discussies van herhaalde e-mails. Probeer het hieronder eens.
Mogelijke tijden
begin); ?>
participant_add_date_time) ?>
Mogelijke plaatsen
plaats-> naam. ";?> plaats-> omgeving; ?> id, $ user_id, $ auth_key)); ?>
participant_add_place) ?>
Telefoon of video
view-> renderFile ('@ common / mail / section-notes.php', ['notes' => $ notes, 'links' => $ links])?> participant_finalize && count ($ places) == 1 && count ($ times) == 1) echo HTML :: a (Yii :: t ('frontend', 'Finalize meeting'), $ links ['finalize']) .' | '; ?>
Nu de basissjablonen zijn bijgewerkt, begin ik eraan hun uiterlijk in Gmail te herstellen. En binnenkort implementeren we meldingen en herinneringen die ze gebruiken.
Terwijl u wacht op afleveringen van deze functies, plant u uw eerste vergadering en test u de nieuwe sjablonen. 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.
Ik begin ook te experimenteren met WeFunder op basis van de implementatie van de nieuwe crowdfundingregels van de SEC. Overweeg om ons profiel te volgen. Ik kan hierover meer schrijven als onderdeel van onze serie.
Kijk uit voor komende tutorials in de Building Your Startup With PHP-serie. Er komen nog een paar grote functies aan.
Accentsconagua