Tuesday, May 6, 2014

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!

No comments:

Post a Comment