What You'll Be Creating This tutorial is part of the Building Your Startup With PHP series on Envato Tuts+. In this series, I'm guiding you through launching a startup from concept to reality using my Meeting Planner app as a real-life example. Every step along the way, I'll release the Meeting Planner code as open-source examples you can learn from. I'll also address startup-related business issues as they arise.
In this tutorial, I'll be refining the responsive, HTML email templates that Meeting Planner uses to send out invitations, notifications, reminders, and account-related messages.
During the initial stage of Meeting Planner development, I've focused primarily on functionality and have not yet invested significantly in design or hired a designer. Today's goal is to clean up the appearance of the existing HTML templates so that the basic emails are more readable and usable for people.
Likely half of people's first experience with Meeting Planner will be via a Meeting Request email.
If you haven't tried out Meeting Planner yet, go ahead and schedule your first meeting . I do participate in the comment threads below, so tell me what you think! You can also reach me on Twitter @reifman . I'm especially interested if you want to suggest new features or topics for future tutorials.
As a reminder, all of the code for Meeting Planner is written in the Yii2 Framework for PHP. If you'd like to learn more about Yii2, check out our parallel series Programming With Yii2 .
Messages and Templates
The Early Templates
Initially, I used basic frameworks I found on the web to create early emails for Meeting Planner. They worked acceptably for the early development phase.
Here's an example of our existing HTML emails; they're functional but not very appealing. And, overall, I've decided that people don't need this many options and links within their invitations. It was time to reduce the plethora of options for a simpler experience.
Even with the templates I'd used, email tables often appeared corrupted without easy explanation: