Introducing responsive Layout Starters!

As you may know, our Layouts are separate from email content. This keeps a clean separation between code, structure, and your message. But this separation impacts how you build and customize the look of your emails. This was especially the case due to differences in coding for the web vs. emails.

Though we want to revisit our editor in the long term, we wanted to change up our Layouts to help you get up and running sooner.

What’s changed?

If you’re new to Customer.io and you head to the Email Layouts area, this is what you’ll see:

If you’ve already got layouts, you’ll see them as before. But when you click to create a new one…

We now offer several different (responsive!) Layout Starters, each centered around a particular email type:

• Call to Action
• Newsletter
• Announcement
• Menu

You could also start with Basic: a plain text and/or image email that sets a maximum width and appears consistently across devices. Or, if you want a completely blank slate, start from scratch!

Each Starter is a basic arrangement of building blocks — a logo, a headline, social media links, etc. — that you can then customize more easily. You’ll see these each time you click ‘Create Layout’, so they’re always available to you to start from.

Responsive and customizable out of the box

We used a framework called Foundation for Emails as the backbone. As a result, it’s easy for you to build on them within the Composer. You will need to wield a bit of code, but Foundation makes sure that your emails appear the same across clients.

We’ve also inserted code comments such as:

<!-- To add your logo image, modify the src here. -->
<img src="/YOUR%20LOGO%20URL%20HERE" align="center" class="float-center">

To help you find the code you need to customize for each starter, to make it your own.

By copying and pasting simple pieces of code, you can change your fonts, add columns, buttons, and easily update basic elements while being confident that your email will appear consistently.

Ready to get started?

We’ve got you covered. We’ve written detailed documentation on how to customize these starters.

If you need a refresher for how Customer.io Layouts work, we’ve got that as well!

We’d love to know about how you’re customizing the options we’re shipping with, and if there are any other Layout Starters you might find useful!

As always, if you’ve got questions, feedback, or need a hand, we’re here for you at win@customer.io.!