Share
Ce que vous allez créerCe tutoriel fait partie de la série Construire votre démarrage avec PHP sur Envato Tuts +. Dans cette série, je vous guide dans le lancement d'une startup du concept à la réalité, en utilisant mon application Meeting Planner comme exemple concret. À chaque étape du processus, je publierai le code de Meeting Planner sous forme d’exemples open source à partir desquels vous pourrez apprendre. Je traiterai également les problèmes liés au démarrage au fur et à mesure qu'ils surviennent.
Dans ce didacticiel, je vais affiner les modèles de courrier électronique HTML réactifs utilisés par Meeting Planner pour envoyer des invitations, des notifications, des rappels et des messages liés à un compte..
Au cours de la phase initiale de développement de Meeting Planner, je me suis principalement concentré sur la fonctionnalité et je n’ai pas encore beaucoup investi dans la conception, ni embauché de designer. L'objectif actuel est de nettoyer l'apparence des modèles HTML existants afin que les courriels de base soient plus lisibles et utilisables par les utilisateurs..
La moitié de la première expérience de Meeting Planner se fera probablement par courrier électronique..
Si vous n'avez pas encore essayé Meeting Planner, planifiez votre première réunion. Je participe aux commentaires ci-dessous, alors dites-moi ce que vous en pensez! Vous pouvez également me joindre sur Twitter @reifman. Je suis particulièrement intéressé si vous souhaitez suggérer de nouvelles fonctionnalités ou de nouveaux sujets pour de futurs tutoriels..
Pour rappel, tout le code pour Meeting Planner est écrit dans le framework Yii2 pour PHP. Si vous souhaitez en savoir plus sur Yii2, consultez notre série parallèle Programmer avec Yii2.
Au départ, j'ai utilisé les infrastructures de base trouvées sur le Web pour créer les premiers e-mails pour Meeting Planner. Ils ont travaillé de manière acceptable pour la phase de développement précoce.
Voici un exemple de nos courriels HTML existants; ils sont fonctionnels mais pas très attrayants. Et, dans l’ensemble, j’ai décidé que les personnes n’avaient pas besoin de autant d’options et de liens dans leurs invitations. Il était temps de réduire la pléthore d'options pour une expérience plus simple.
Même avec les modèles que j'avais utilisés, les tables de messagerie semblaient souvent corrompues sans explication simple:
Je m'étais préparé à migrer vers des modèles de courrier électronique plus professionnels, mais c'était vraiment en retard.
Voici un résumé des messages que Meeting Planner envoie régulièrement aujourd'hui:
Pour le test alpha, j'espère pouvoir atteindre un niveau de référence esthétique raisonnable en appliquant des modèles open-source disponibles sur le Web. Plus tard, nous engagerons un concepteur pour revigorer les modèles, le thème et la marque ensemble..
J'ai commencé à parcourir le Web pour trouver les meilleurs modèles de courrier électronique..
Il existe un certain nombre de guides utiles comme ceux-ci:
Et un certain nombre de fournisseurs proposent leurs propres modèles open-source:
Au départ, les modèles de mailgun m'avaient attirée, car j'estimais qu'ils avaient été testés à fond et que je pouvais me baser dessus, mais finalement, j'ai décidé d'utiliser les modèles de courrier électronique Oxygen de Sendwithus. Sendwithus est une plate-forme marketing synergique pour Mailgun (ou potentiellement d'autres fournisseurs de courrier électronique), mais je n'ai pas l'expérience de leur service global..
Oxygen proposait une famille complète de modèles pour des scénarios utiles. Cela semblait simple, organisé et facilement extensible:
C'est gentil de leur part de proposer leurs modèles de courrier électronique open source sans que vous deviez être un utilisateur payant. Allez open source!
En tant que framework MVC, Yii sépare les présentations du contenu du corps. J'ai donc eu besoin de décomposer les modèles et de surveiller les différences entre les variations au sein d'un groupe.
Vous pouvez télécharger la famille de modèles Oxygen à partir du Sendwithus GitHub, mais ils n'ont pas clairement divisé les éléments de style standard communs à chaque modèle. Vous devez donc le faire vous-même..
Il a fallu un certain temps pour choisir les modèles que je préférais, les éléments qui me plaisaient dans chacun et les CSS à intégrer à la mise en page..
En fin de compte, voici la nouvelle présentation HTML (j'ai tronqué les styles ici pour des raisons de lisibilité):
beginPage (); ?><?php echo Html::encode($this->Titre); ?> tête(); ?> … beginBody (); ?>
|
Dans les modèles, j'ai dû remplacer un certain nombre d'éléments:
J'ai créé un fichier de logo qui fonctionnerait pour le moment et je l'ai hébergé de manière statique avec les images d'assistance, par exemple. pour Twitter, sur le serveur de Meeting Planner.
J'ai également remplacé les liens par défaut dans l'e-mail par le code des liens de notre site.
Pour simplifier la réutilisation dans l’application, j’ai séparé le code du pied de page:
Seattle, Washington
|
Pour intégrer les modèles, je voulais commencer par le plus simple. Parcourir des CSS et HTML complexes et inconnus n'est jamais simple.
J'ai commencé avec notre modèle d'e-mail de réinitialisation de mot de passe.
J'ai choisi le modèle de bienvenue d'Oxygen présenté ci-dessous:
Chaque modèle individuel de SendwithUs peut être prévisualisé et testé sur son compte Litmus.
Voici notre adresse e-mail de réinitialisation de votre mot de passe maintenant sur un iPhone, beaucoup plus esthétique qu'auparavant:
J'étais un peu confus lorsque les premières tentatives Gmail que j'ai reçues m'ont semblé mal formées.
Mais revoir leurs aperçus de Litmus m'a montré que c'est ce à quoi ils ressemblent dans Gmail:
J'ai appris par la suite que Gmail nécessite davantage de CSS en ligne que d'autres services. Je vais vous guider dans la réparation de cela dans un prochain tutoriel.
Voici le code passwordRequestToken.php qui a permis de générer ce qui précède:
urlManager-> createAbsoluteUrl (['site / reset-password', 'token' => $ user-> password_reset_token]); ?>
Réinitialisez votre mot de passe Bonjour id)); ?>, Cliquez sur le bouton ci-dessous pour réinitialiser votre mot de passe pour le planificateur de réunion: view-> renderFile ('@ common / mail / section-footer-static.php')?>
L'invitation que les gens reçoivent comme demande de rencontre est notre modèle le plus complexe. Il partage une brève introduction, des lieux possibles, des horaires possibles et parfois une note..
Pour cela, j'ai utilisé le modèle Oxygen Confirm:
Je pensais que les boîtes d’expédition et de date d’expédition pourraient être utilisées pour partager les options Lieu et date et heure, et cela a assez bien fonctionné.
Voici à quoi ressemble l'invitation maintenant:
Certes, l'aspect esthétique de base est bien meilleur. Dans le futur, je pourrai travailler pour niveler et égaliser les hauteurs verticales des cases Lieux et heures..
Voici le code du corps invitation-html.php qui a permis de générer ce qui précède:
view-> renderFile ('@ common / mail / section-footer-dynamic.php', ['links' => $ links])?>
Votre demande de réunion salut, vous invite à un événement en utilisant un nouveau service appelé . Ce service facilite la planification de réunions sans les fils épuisants de courriers électroniques répétitifs. S'il vous plaît essayer ci-dessous.
Temps possibles
début); ?>
participant_add_date_time) ?>
Lieux possibles
lieu-> nom. ";?> lieu-> voisinage; ?> id, $ user_id, $ auth_key)); ?>
participant_add_place) ?>
Téléphone ou vidéo
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']) ' | '; ?>
Maintenant que les modèles de base ont été mis à jour, je vais commencer à réparer leurs apparences dans Gmail. Et bientôt, nous allons implémenter les notifications et les rappels en les utilisant.
Pendant que vous attendez des épisodes sur ces fonctionnalités, planifiez votre première réunion et essayez les nouveaux modèles. Aussi, je vous serais reconnaissant de partager votre expérience ci-dessous dans les commentaires, et vos suggestions m'intéresseront toujours. Vous pouvez également me joindre directement sur Twitter @reifman.
Je commence également à expérimenter WeFunder à partir de la mise en œuvre des nouvelles règles de la SEC en matière de financement participatif. S'il vous plaît envisager de suivre notre profil. Je peux écrire à ce sujet plus dans le cadre de notre série.
Surveillez les prochains tutoriels dans la série Construire votre démarrage avec PHP. Il y a quelques autres fonctionnalités plus importantes à venir.
Accentsconagua