WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.096 --> 00:00:05.006 align:middle
To get this email looking really sharp,
we need to improve the HTML and CSS.

00:00:05.006 --> 00:00:07.116 align:middle
Let's start with CSS.

00:00:07.526 --> 00:00:10.766 align:middle
With standard website CSS, you've
likely used a CSS framework

00:00:10.766 --> 00:00:14.196 align:middle
like Tailwind (which our app
uses), Bootstrap, or Foundation.

00:00:14.596 --> 00:00:16.466 align:middle
Does something like this exist for emails?

00:00:16.856 --> 00:00:20.116 align:middle
Yes! And it's even more important to
use one for emails because there are

00:00:20.116 --> 00:00:22.596 align:middle
so many email clients that render differently.

00:00:22.596 --> 00:00:27.456 align:middle
For emails, we recommend using Foundation
as it has a specific framework for emails.

00:00:27.846 --> 00:00:30.936 align:middle
Google "Foundation CSS" and
you should find this page.

00:00:31.586 --> 00:00:33.736 align:middle
Download the starter kit for the "CSS Version".

00:00:34.306 --> 00:00:39.606 align:middle
This zip file includes a foundation-emails.css
file that's the actual "framework".

00:00:40.036 --> 00:00:42.266 align:middle
I already included this in
the tutorials/ directory.

00:00:42.596 --> 00:00:44.416 align:middle
Copy it to assets/styles/.

00:00:48.166 --> 00:00:54.086 align:middle
In our booking_confirmation.html.twig, the
inline_css filter can take multiple arguments.

00:00:54.446 --> 00:01:01.426 align:middle
Make the first argument
source('@styles/foundation-emails.css')

00:01:01.726 --> 00:01:07.306 align:middle
and use email.css for the second argument:
This will contain custom styles and overrides.

00:01:07.776 --> 00:01:16.136 align:middle
I'll open email.css and paste in some custom CSS
for our email: Now we need to improve our HTML.

00:01:16.386 --> 00:01:17.406 align:middle
But weird news!

00:01:17.626 --> 00:01:21.076 align:middle
Most of the things we use for styling
websites don't work in emails.

00:01:21.076 --> 00:01:24.036 align:middle
For example, we can't use Flexbox or Grid.

00:01:24.486 --> 00:01:26.676 align:middle
Instead, we need to use tables for layout.

00:01:26.996 --> 00:01:30.676 align:middle
Tables! Tables, inside tables, inside tables.

00:01:30.816 --> 00:01:35.166 align:middle
Gross! Luckily, there's a templating
language we can use to make this easier.

00:01:35.166 --> 00:01:38.586 align:middle
Search for "inky templating
language" to find this page.

00:01:39.036 --> 00:01:41.396 align:middle
Inky is developed by this Zurb Foundation.

00:01:41.746 --> 00:01:43.366 align:middle
Zurb, Inky, Foundation...

00:01:43.686 --> 00:01:45.806 align:middle
these names fit in perfectly
with our space theme!

00:01:45.806 --> 00:01:47.436 align:middle
And they all work together!

00:01:47.916 --> 00:01:50.206 align:middle
You can get an idea of how
it works on the overview.

00:01:50.726 --> 00:01:53.236 align:middle
This is the HTML needed for a simple email.

00:01:53.456 --> 00:01:54.676 align:middle
It's table-hell!

00:01:55.156 --> 00:01:56.616 align:middle
Click the "Switch to Inky" tab.

00:01:57.586 --> 00:01:59.206 align:middle
Wow! This is much cleaner!

00:01:59.556 --> 00:02:04.636 align:middle
We write in a more readable format and Inky
converts it to the table-hell needed for emails.

00:02:05.026 --> 00:02:11.026 align:middle
There are even "inky components": buttons,
callouts, grids, etc. In your terminal,

00:02:11.026 --> 00:02:15.266 align:middle
install an Inky Twig filter that
will convert our Inky markup to HTML.

00:02:15.656 --> 00:02:23.736 align:middle
composer require twig/inky-extra
In booking_confirmation.html.twig,

00:02:24.006 --> 00:02:29.736 align:middle
add the inky_to_html filter to apply,
piping inline_css after: First,

00:02:29.736 --> 00:02:32.896 align:middle
we apply the Inky filter, then inline the CSS.

00:02:33.616 --> 00:02:35.836 align:middle
I'll copy in some inky markup for our email.

00:02:36.406 --> 00:02:38.856 align:middle
We have a <container>, with
<rows> and <columns>.

00:02:39.166 --> 00:02:42.946 align:middle
This will be a single column email, but
you can have as many columns as you need.

00:02:43.406 --> 00:02:45.826 align:middle
This <spacer> adds vertical
space for breathing room.

00:02:46.486 --> 00:02:47.966 align:middle
Let's see this email in action!

00:02:48.296 --> 00:02:56.586 align:middle
Book a new trip for Steve, oops, must
be a date in the future, and book!

00:02:58.146 --> 00:02:59.766 align:middle
Check Mailtrap and find the email.

00:03:00.956 --> 00:03:02.656 align:middle
Wow! This looks much better!

00:03:03.086 --> 00:03:07.536 align:middle
We can use this little widget Mailtrap provides
to see how it'll look on mobile and tablets.

00:03:08.476 --> 00:03:12.136 align:middle
Looking at the "HTML Check", seems
like we have some issues, but,

00:03:12.136 --> 00:03:16.106 align:middle
I think as long we're using Foundation
and Inky as intended, we should be good.

00:03:16.696 --> 00:03:17.516 align:middle
Check the buttons.

00:03:17.986 --> 00:03:20.506 align:middle
"Manage Booking", yep, that works.

00:03:21.016 --> 00:03:23.556 align:middle
"My Account", yep, that works too.

00:03:24.056 --> 00:03:26.796 align:middle
That was a lot of quick success
thanks to Foundation and Inky!

00:03:27.416 --> 00:03:31.206 align:middle
Next, let's improve our email
further by embedding the trip image

00:03:31.206 --> 00:03:35.276 align:middle
and making the lawyers happy by adding
a "terms of service" PDF attachment.