Why Didn't I Convert this Raw HTML Template to Canvas in Vertical Response Before Now?!

For the past several years (yes years), I've been editing our Vertical Response emails directly in html. Originally, a web dev helped us create the template and then I'd just update with new content when we'd launch new email campaigns.

Why was this a problem?

There were nested tables 3-layers deep to maintain the layout. It looks great on the front, but behind the scenes, I was really struggling to make text and layout modifications quickly.

Vertical Response has several modes for email drafting - you can use their wizard, design in canvas mode (a little WYSIWYG editor), import raw html or do plain text.

Once you choose raw html, it doesn't allow you to toggle to the WYSIWYG side. I was stuck reusing the same template and spending hours modifying the raw html.

I know the basics of html but it was so labor intensive to make a small change and then double check - and if I made a mistake, I had to start from scratch because I'd saved it to preview, unless I copied and pasted a backup each time. Ugh.

BEFORE: I created each email campaign by manually editing an html template for years.

How I Made it Better

I meticulously recreated the template from scratch in canvas mode. I did this all visually, with the help of this tool for toggling between html and WYSIWYG to make sure I was on the right track.

I opened up the existing html template on one side of my screen, and a new email template in Canvas Editor mode in Vertical Response on the other side.

[Left] Recreating my template in the VR canvas editor. [Right] My original VR html template, open in a WYSIWYG editor.

I manually recreated each cell in every table and formatted the background and content, making a few slight modifications to give the template a more modern look. It was rather labor intensive, but now when I want to make changes, I've got a converted email template to easily manipulate.

AFTER: An canvas email template that is easy to update in the VR graphical editor!

I don't know why I didn't do this sooner!

Templates for Sending Custom HTML-Formated Emails

In my last post, I shared a link to a tool that lets you design or send HTML-formatted emails.

When I was first experimenting with it, I used Vertical Response's templates as a starting point.

But, I found a few other great template sources that you can use. They are free and a great way to get started, especially if you aren't adept at manually crafting layouts in HTML. Or, if you're like me and you can never remember all of the attributes for a table.

I prefer to use a template to start, then switch to HTML-mode and make changes as necessary to spacing, alignment, etc.

Without further ado:

• 36 basic templates from MailChip
  These are a perfect starting point for customizing to create your own template. Basic layouts with sidebars, mobile-friendly versions, etc. I'll be using these often!
• 100+ free templates from Campaign Monitor
  Some of these look really nice! I wanted a more basic layout (white background, no extra graphics) but these were rather appealing. I might use them for personal email campaigns.
• 20 free templates from Benchmark Email
  Some outdated colors/styling, but still could be customized.

Tips: 

• When editing HTML, Ctrl + F becomes your friend. Use it to find specific code snippets or to locate the formatting properties for a particular text block.
• Once you have the main template customized as you'd like, you can copy/paste it into a new Salesforce email template. Fancy!

Jenna Baze is a rather geeky girl with average social skills and an affinity for: Google Apps, Salesforce.com, Pinterest, natural light photography and finding creative ways to avoid doing dishes (which includes updating a handful of blogs).
Email: rathergeeky@gmail.com | Twitter: @RatherGeeky | Facebook: Rather Geeky Tips

How to: Send HTML-formatted Emails with Gmail

I love Gmail. But sometimes, there's a feature that I *really* miss from desktop email applications.

Html-formatted emails is one of them. I'm not talking about bolded text or selecting my font. I want tables sometimes... and columns...

And so I was excited when I discovered a tool for designing and sending html-formatted emails with Gmail.

You can use the editor to design your email and then paste the html code to send or you can write the html manually. I used a template from Vertical Response to get started and customized it in their editor. Then, I pasted the code into the Google Docs sheet tool and sent.

It worked exactly as I expected! I used it to transform a bland text email to new users into a more professional welcome email.

It turned out like this:

Potential uses:

• Company bulletins
• Tip emails
• Personal newsletters (no need to buy credits and use an email service!)
• Pretty much anything...

Here's the link to the tutorial. Give it a try!



Jenna Baze is a rather geeky girl with average social skills and an affinity for: Google Apps, Salesforce.com, Pinterest, natural light photography and finding creative ways to avoid doing dishes (which includes updating a handful of blogs).
Email: rathergeeky@gmail.com | Twitter: @RatherGeeky | Facebook: Rather Geeky Tips