- Overview
- Transcript
Emails are the bread and butter of today’s online marketing strategies, and ensuring your potential customers receive the intended message can be a tricky task, especially with the sheer number of email clients out there.
Foundation for Emails makes your job easier by ensuring the HTML emails you create work in any email client.
In this course you’ll learn the basics of working with Foundation for Emails, creating four sample emails that you can use in your projects today.
We've built a comprehensive guide to help you learn Foundation, whether you're just getting started or you want to explore more advanced topics check out Learn Foundation.
1.Introduction
1.1Introduction00:37
1.2What Is Foundation for Emails?02:53
2.Getting Started with Foundation for Emails
2.1The (Vanilla) CSS Version04:59
2.2The Sass Version10:05
2.3Email Templates02:49
2.4Media Queries02:47
2.5Components14:44
3.Let’s Create Some Emails
3.1Basic Email08:48
3.2Welcome Email03:48
3.3Marketing Email04:15
3.4Newsletter Email09:02
4.Conclusion
4.1What’s Next?00:56
1. Introduction
1.1 Introduction
If you ever wanted to code HTML emails you might know that it's not an easy task. And if you have been using divs to do that, then I hate to say it but you've been doing it wrong. Fortunately, the guys at Zurb developed a framework called Foundation for Emails. And this will help you create responsive HTML emails that work in an email client. In this course I'm going to show you how to get started with the framework and also build a couple of sample emails. I'm Adi Purdila, let's begin.
1.2 What Is Foundation for Emails?
So what is Foundation for Emails? Well, like I said in the course introduction, it's a framework. A framework that comes with prebuilt components that are tested and that are guaranteed to work in pretty much any email client. It also comes with a fancy build system that's gonna speed up the whole process. It's based on Gulp and uses BrowserSync for reloading and synchronized testing. More about that in a future lesson. For now just remember that it's awesome. Now, why should you use such a framework, and why not code these emails from scratch? Well, the number one reason is client compatibility. And let me just quote Foundation on this. Your email is not going to look identical in every client. That's true. There are tons of email clients out there from mobile to desktop, from Mac OS to Windows to Linux to the web. And while most of these are based on the same rendering engines, some of them just don't wanna play nice. And the result is inconsistent email design, which is bad. Now, trying to accommodate all of these email clients by yourself can be a really daunting task. The second reason is this. Tables are the only things that are universally supported when it comes to coding emails. And, let me tell you, coding with tables is time-consuming, boring and, most of the time, a really big headache. Now, Foundation for Emails gives us all the tools we need to work really easily with tables and create compatible emails. Now, reason number three is adaptability because not everyone is an experienced developer. So Foundation gives you two options when you get started, a Sass version and a CSS version. The Sass version is for the more advanced users. It uses something called a ZURB Email Stack which includes Gulp, BrowserSync, and this automated workflow that's gonna get you up and running really fast. But you need to know how to use certain things like node and the command line. The other one, the CSS version, is for the less experienced users. And it just provides you with static CSS, and it's really easy to you to get started. So let's see how we can work with these tools I mentioned. And we'll get started with the CSS version, which is the easiest one. That's coming up in the next lesson.
