There are plenty of marketing tools that enable you to create responsive email designs with ease. The thing is, you might prefer to have more control over how your emails look, and the best way to do so is to design them from scratch. Using a framework such as Foundation for Emails provides you with a superb compromise. You won’t need to design every single component from scratch, but you do get full control over how, when, and where to use them.
In this article, we’ll firstly explain what email frameworks are and how they can help you. Then, we’ll move on to discussing Foundation for Emails, and how you can use it to create your own custom, responsive email campaigns. Let’s get to work!
What Email Frameworks Are (And How They Can Help You Create Better Emails)
Frameworks still require you to do some coding, but the process is very simple for emails.
In general, a framework is a compilation of practices, files, and code designed to aid in the development of specific types of products. Think of them as building blocks of code that can help you create complex projects faster, by enabling you to not reinvent the wheel each time.
There are frameworks for email too, and that’s what we’re going to be talking about in this article. Let’s explore some of the benefits:
- Pre-built elements help you design emails faster. Nowadays, most emails include elements beyond images and text, such as buttons and menus. Including these elements can be time-consuming, but a framework enables you to insert and customize them instantly.
- Responsive out of the box. As more and more people turn to mobile devices, you need to ensure your emails display well on their screens. Most modern frameworks are responsive by default, which means you have one less thing to worry about.
- Templates can help you kickstart your designs. A lot of modern email frameworks include a variety of templates to help you create campaigns quickly.
As you can see, the common theme here is that frameworks enable you to save time. There are a lot of cases where you’ll want to code your projects from scratch, but a framework that can enable you to get things done faster at a higher quality is worth using.
An Introduction to the Foundation for Emails Framework
Before going any further, it’s important to note there are two Foundation frameworks available online – Foundation for Sites and Foundation for Emails – and we’re going to focus on the latter throughout this article. The main selling point is its responsive grid. This type of system isn’t revolutionary, but Foundation’s popularity is based on its ease of use.
Picking up the framework is fairly straightforward (even if you don’t have any coding experience), and you can choose between two versions – one based on Cascading Stylesheets (CSS) and the other on Sass. Naturally, the Sass version enables you to save even more time by eliminating the need to repeat CSS stylings, but it does require some familiarity with Node.js.
Finally, Foundation for Email also provides you with plenty of ‘patterns’ such as buttons and menus to make your job even simpler. To save more time, you can even use a template instead of designing a layout from scratch.
- Uses a responsive grid to create modern email campaigns.
- Offers either a CSS or Sass version of the framework.
- Lets you take advantage of patterns to add common elements to your emails quickly.
- Uses layouts to streamline the email creation process even further.
Price: Free | More Information
How to Use Foundation for Emails to Create Modern Designs (In 4 Steps)
As we mentioned, there are two versions of Foundation for Emails. For this section, we’re going to use the CSS variation since it requires less work to set up. Plus, the end results should look the same – all that changes is how you get there.
If you want to see the Sass version in action or learn more about how to use it, you can start with this great tutorial.
Step #1: Download the Foundation for Email Files
First of all, head to the Foundation for Email Getting Started page, and click on the Download Starter Kit button under the CSS Version subheading:
Once you’ve got the file, unzip it and extract its contents into a new folder. At this stage, your folder should contain an index.html file and two subfolders – one for your CSS and another for your templates.
For now, run your favorite text editor and open the index.html file with it. It should be pretty bare, but we’ll fix that in a moment.
Step #2: Familiarize Yourself With the Grid System
Foundation for Email’s responsiveness is based on its flexible grid system. If you’re putting together an email from scratch, you’ll want to create your own grid to segment your email’s sections. To do that, we’re going to use three different components: containers, rows, and columns.
Open your Foundation’s index.html file within your text editor, and scroll down to the body section: