Tag Archive | "image"

Add personalized images to email campaigns with Daisy

Add personalized images to email campaigns with Daisy

Looking for a sweet way to personalize your email campaigns? Our friends at Motobias have very cleverly applied themselves to the task with Daisy, a dynamic image generator that pulls personalization data from your subscriber list and uses it to generate unique images for each of your subscribers. The results are really eye-catching campaigns and great opportunities for designers to get creative with their own custom images.

Personalized campaign using Daisy
While it’s still early days for Daisy, designers are welcome to generate images for their live email campaigns, for free. As any custom field can be used when personalizing an image using Daisy, its applications go beyond the gimmicky. For example, you can use it to generate personalized tickets to an event using ‘Name’ and ‘Ticket number’ custom fields in your subscriber list. In a similar manner, you can also create truly bespoke reminders and email invitations. Before we launch into the details, here’s an overview:

Powerful personalization for designers

Editable text layerIf you’re a confident Photoshop user, then you’ll find that creating an image for use with Daisy is a snap. Simply create a PSD featuring an editable text layer and enter the name of your custom field (pictured).

You can convert this text layer into a smart object to apply effects like blur – Daisy will still be able to detect it as long as it remains editable.

With your masterpiece ready and at hand, it’s time to upload your PSD file to Daisy. Upon import, you will be issued an AppID (like an API key), which you will need to access your images. You’ll also get a chance to verify that your text layers have been detected.

At this point, it’s time to use your newly-minted AppID, plus Campaign Monitor API key and Client ID to create magic. Swing over to Daisy’s Campaign Monitor page and go through the prompts to create a new custom field in your Campaign Monitor account and a unique image for each subscriber in a list. The latter may take some time if you’ve got a large subscriber list, so Daisy helpfully sends you an email once this is complete.

New custom field

Once your images are ready, you can go to your subscriber list and subscriber snapshot to see the new custom field you created earlier. For each subscriber, this custom field includes a URL which, as you’ve probably guessed, you’ll use to source your images.

From here, it’s all fairly straightforward. In the email above, we simply added <img src=”[chocolate-pic]”> to our HTML email code and sent a personalized email test. You can also set a fallback image URL, pointing to a non-personalized image – recommended, if you plan on sharing your campaigns.

Pretty as a Daisy?

To be honest, the Daisy interface may not be the prettiest in its ‘Experimental’ state, but it’s thorough, stable and full of possibility. Toying around with your own images brings a renewed wonderment towards email marketing – “How can I make my campaigns more exciting? Will my subscribers react to personalized campaigns?” – which I’m sure you’ll feel the moment you start sending wedding invitations for “*|firstname|* ♥ Justin Bieber” to your entire office. Either that, or you’ll be mobbed and killed quickly.

Not wanting to stop there, Motobias have also rolled out a well-documented API for dynamically generating images for both email and the web.

Down the track, Daisy will probably get rolled into their Visage service. But in the interim, try it for free and if you have any feedback, get in touch with the Daisy team. They’re keen to hear how they can make it even awesomer for designers… And Justin Bieber fans.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

What goes into designing the perfect mobile email?

What goes into designing the perfect mobile email?

So, what makes a perfect, mobile-optimized email campaign? Is it using a massive @media query to rework your layout? Clever image re-sizing? Some new device hack?

When getting caught up in the code, it’s really easy to forget that good mobile email design means providing a great experience for recipients. A lot of this flows from usability decisions like ensuring that links are large and spaced out enough to be tapped by big fingers, or the call to action is immediately obvious and requires no scrolling to see.

Our friends at Litmus summarized these mobile design guidelines and more in their recent post on the ‘Anatomy of a Perfect Mobile Email‘, featuring an infographic that you can cherish for all time. Also listed are common mobile email pitfalls like choosing a color palette with poor contrast – admittedly a trap that we all fall into from time to time.

Anatomy of the Perfect Mobile Email

Litmus email campaign on the iPhone

What really grabbed us by the coattails was how Litmus put their lessons into practice with this especially fetching email campaign.

We usually pop top-notch email newsletters into our email design gallery. This time however, we really wanted to highlight how they translated the aesthetics of their infographic into email form, while never relying too heavily on images to do so. The code is definitely worth a look, as instead of using a @media query, they’ve paired a simple, one-column layout with large fonts to produce a design that is near-bulletproof on any device. At the top of the email, the “Email client market share and mobile design infographs” summary text also ensures that the email’s purpose is made clear in Gmail’s inbox, on the iPhone and on other mobile clients.

Of course, if you’re after a quick and code-less way to optimize your email campaigns for mobile, give our template builder a try. Come on, I had to sneak in a cheeky plug!

A huge thanks to Litmus for sharing their expertise. If you’re into mobile email design, we recommend visiting the Litmus blog, which is a goldmine of clever nuggets like these.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

What goes into designing the perfect mobile email?

What goes into designing the perfect mobile email?

So, what makes a perfect, mobile-optimized email campaign? Is it using a massive @media query to rework your layout? Clever image re-sizing? Some new device hack?

When getting caught up in the code, it’s really easy to forget that good mobile email design means providing a great experience for recipients. A lot of this flows from usability decisions like ensuring that links are large and spaced out enough to be tapped by big fingers, or the call to action is immediately obvious and requires no scrolling to see.

Our friends at Litmus summarized these mobile design guidelines and more in their recent post on the ‘Anatomy of a Perfect Mobile Email‘, featuring an infographic that you can cherish for all time. Also listed are common mobile email pitfalls like choosing a color palette with poor contrast – admittedly a trap that we all fall into from time to time.

Anatomy of the Perfect Mobile Email

Litmus email campaign on the iPhone

What really grabbed us by the coattails was how Litmus put their lessons into practice with this especially fetching email campaign.

We usually pop top-notch email newsletters into our email design gallery. This time however, we really wanted to highlight how they translated the aesthetics of their infographic into email form, while never relying too heavily on images to do so. The code is definitely worth a look, as instead of using a @media query, they’ve paired a simple, one-column layout with large fonts to produce a design that is near-bulletproof on any device. At the top of the email, the “Email client market share and mobile design infographs” summary text also ensures that the email’s purpose is made clear in Gmail’s inbox, on the iPhone and on other mobile clients.

Of course, if you’re after a quick and code-less way to optimize your email campaigns for mobile, give our template builder a try. Come on, I had to sneak in a cheeky plug!

A huge thanks to Litmus for sharing their expertise. If you’re into mobile email design, we recommend visiting the Litmus blog, which is a goldmine of clever nuggets like these.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

When it comes to HTML email, anticipate the worst

When it comes to HTML email, anticipate the worst

Outlook's Trust Center

Our recent blog post on image blocking in email received an awesome response. I generally gauge this by the quality of questions, rebuttals and comments that wash in, many of which are genuinely good food for thought. Like:

This statement “only 48% of email recipients see images automatically.” does not actually result in “(the email being not read) by over half of its intended recipients.” because presumably… some have changed the default settings. I would like to see some stats on how many users have changed their default settings to show images.

As it turns out, most folks don’t tinker with their apps. According to this experiment by Jarrod Spool, less than 5% of users change their default settings, even when prompted. Jarrod’s study required that users turn on autosaving of documents in Microsoft Word – a simple, beneficial change – and was just as surprised at the low uptake then as we are now. He explains:

When we interviewed a sample of (our users), they all told us the same thing: They assumed Microsoft had it turned off for a reason, therefore who were they to set it otherwise. “Microsoft must know what they are doing,” several participants told us.

Now think about Outlook 2007. The first time I attempted to turn off image blocking in this email client, I had to Google around to find out where this setting could be (it’s in their Trust Center). Do you think most Outlook users (excluding coders, designers or tech folk) would have the time, inclination or know-how to fool around and do the same?

Would most Yahoo! Mail users be bothered to change their similarly tucked-away spam settings, so images are displayed for trusted senders?

What this tells me is that email designers have to anticipate the worst. Images will be blocked in email clients. Just because .wmv videos do play in the inbox when Outlook’s security settings are turned right down, doesn’t mean that they will play. To take it a step further, if some of your subscribers are using CSS-unfriendly email clients like Gmail, you have to design like they all are. This doesn’t mean that you can’t use cool CSS effects and nice formatting – you just have to make sure the message is still very much readable, even under less-than-desirable conditions.

So test your emails with default settings on, even if it results in the worst-case rendering scenario. Chances are, that’s what many of your subscribers are stuck with.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

When it comes to HTML email, anticipate the worst

When it comes to HTML email, anticipate the worst

Outlook's Trust Center

Our recent blog post on image blocking in email received an awesome response. I generally gauge this by the quality of questions, rebuttals and comments that wash in, many of which are genuinely good food for thought. Like:

This statement “only 48% of email recipients see images automatically.” does not actually result in “(the email being not read) by over half of its intended recipients.” because presumably… some have changed the default settings. I would like to see some stats on how many users have changed their default settings to show images.

As it turns out, most folks don’t tinker with their apps. According to this experiment by Jarrod Spool, less than 5% of users change their default settings, even when prompted. Jarrod’s study required that users turn on autosaving of documents in Microsoft Word – a simple, beneficial change – and was just as surprised at the low uptake then as we are now. He explains:

When we interviewed a sample of (our users), they all told us the same thing: They assumed Microsoft had it turned off for a reason, therefore who were they to set it otherwise. “Microsoft must know what they are doing,” several participants told us.

Now think about Outlook 2007. The first time I attempted to turn off image blocking in this email client, I had to Google around to find out where this setting could be (it’s in their Trust Center). Do you think most Outlook users (excluding coders, designers or tech folk) would have the time, inclination or know-how to fool around and do the same?

Would most Yahoo! Mail users be bothered to change their similarly tucked-away spam settings, so images are displayed for trusted senders?

What this tells me is that email designers have to anticipate the worst. Images will be blocked in email clients. Just because .wmv videos do play in the inbox when Outlook’s security settings are turned right down, doesn’t mean that they will play. To take it a step further, if some of your subscribers are using CSS-unfriendly email clients like Gmail, you have to design like they all are. This doesn’t mean that you can’t use cool CSS effects and nice formatting – you just have to make sure the message is still very much readable, even under less-than-desirable conditions.

So test your emails with default settings on, even if it results in the worst-case rendering scenario. Chances are, that’s what many of your subscribers are stuck with.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Easily share videos via your email campaigns with Wistia

Easily share videos via your email campaigns with Wistia

Just the other week, we highlighted a simple email featuring a ‘Play video’ image, which became a bit of a success story for our cool customers at Graphite. To recap the results:

“46% of recipients opened the email and from this group, 41% clicked through on the send day. We’ll probably see an additional 10% on both figures through the week. More importantly however, is the high number of replies we received…”

Not bad. So, if you’re wondering how you too can efficiently upload and share videos via HTML email, you’ll be glad to know that our friends at Wistia, a premium video hosting service for businesses, have made it a snap to add similar ‘Play video’ images to your email campaigns. What tops this off nicely are Wistia’s detailed reports, which allow you to determine who is viewing your videos and from where they’re being played.

Linking to your videos made easy

Once you’ve got a Deluxe or Super Wistia account up and running, importing videos is a breeze. Included in these plans are oodles of ways to share and embed your video files, including email marketing integration.

Lets say you’ve imported a video into a new Wistia project (which can contain one or more videos). The first thing you can do is set a ‘thumbnail’, which will be the static image displayed before the play button is clicked. You can either select a frame from your video, or upload your own. In this case, we’ve done the former:

Thumbnail image

Once you’ve set this first frame, click the ‘Embed’ link beneath the video, then the ‘For email marketing’ tab. Select ‘Campaign Monitor’ as your email provider, then customize the thumbnail as you see fit, by setting the dimensions of the image and/or the URL you wish to link to. Finally, copy the resulting video merge tags for use in your HTML email.

Copying the merge tags

Note that Wistia provides a dynamically-generated thumbnail image – if you select a new thumbnail, you will need to generate new video merge tags.

Now, it’s simply a matter of adding these merge tags to your HTML email code. If all goes to plan, you should see the thumbnail/play button image when you preview your email:

Adding video merge tags to code

Once you send your email campaign out, each click-through and video play is tracked by Wistia using our [email] template tag. You can then export Wistia’s personalized reports and match email recipients with video plays:

Personalized report

Naturally, you’ll be able to view all clicks on the video link in your Campaign Monitor campaign reports, too.

A video hosting solution for businesses

Apart from great analytics, Wistia also provides loads of options when it comes to distributing and collaborating on hosted videos. There’s lots to appeal to business users – from granting viewers permission to edit and share projects, to providing embed code and the ability to add comments to the video’s timeline. Email marketing integration comes included in their Deluxe and Super plans, alongside goodies like exportable reports and Salesforce integration.

All Wistia plans come with a minimum 100Gb bandwidth a month, plus awesome app support. Did I mention that their team are super-nice and have challenged us to a ping-pong tournament? What’s not to love.

To find out more about Wistia and view their pricing plans, visit their site.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Add an avatar, make your email newsletters stand out in Sparrow

Add an avatar, make your email newsletters stand out in Sparrow

As part of my support duties, I often get to respond to curly customer questions. Like this one from yesterday in regards to Sparrow, an up-and-coming email client for Mac OS X:

“How can I add an avatar image to the email campaigns I send out with Campaign Monitor, that shows up in Sparrow like your emails do?”

Here’s what this image looks like when you receive our monthly newsletter, or an email from support (in our case, it’s our logo):

Campaign Monitor email in Sparrow

Gowalla email in Sparrow

Here’s another example from our friends at Gowalla (pictured).

Despite the fact that we display email client usage stats for Sparrow in your reports (and indeed, a lot of folks are now using it instead of Apple Mail), I’d never really thought about how Sparrow sources this little image. It sure adds to the credibility and branding of an email newsletter viewed within the app, so I decided to look into how email senders can set their image of choice.

It turns out that Sparrow uses Gravatar and Facebook to source the avatars of email senders in the message list. This means that Sparrow runs each sender’s email address against Gravatar’s database of email addresses and images and the email recipient’s Facebook friends list (if enabled). If a match is found, then an avatar is displayed next to the sender’s name.

If you or your clients have been in business for a while now, chances are that you already have a Gravatar set up, as well as a Facebook page. If not, it takes only a moment to sign up for a Gravatar account and upload an image to link to the email address you send from. From there on in, your campaigns will be instantly recognizable in Sparrow inboxes.

Gravatar is widely used on blogs and social sites – not to mention, in worldview and the recently-updated subscriber snapshot that can be found in your account.

Many thanks to Max Lielje for sending in this curious question – we’re glad we could help! After this prompt to check our reports, it turns out that more folks now use Sparrow to read our monthly newsletter than Yahoo! Mail or Android (when we can detect it, of course). So, if you have a lot of Mac-loving email subscribers like us, it may be worth your time to make sure you have an appropriate avatar linked to your sending address.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Add an avatar, make your email newsletters stand out in Sparrow

Add an avatar, make your email newsletters stand out in Sparrow

As part of my support duties, I often get to respond to curly customer questions. Like this one from yesterday in regards to Sparrow, an up-and-coming email client for Mac OS X:

“How can I add an avatar image to the email campaigns I send out with Campaign Monitor, that shows up in Sparrow like your emails do?”

Here’s what this image looks like when you receive our monthly newsletter, or an email from support (in our case, it’s our logo):

Campaign Monitor email in Sparrow

Gowalla email in Sparrow

Here’s another example from our friends at Gowalla (pictured).

Despite the fact that we display email client usage stats for Sparrow in your reports (and indeed, a lot of folks are now using it instead of Apple Mail), I’d never really thought about how Sparrow sources this little image. It sure adds to the credibility and branding of an email newsletter viewed within the app, so I decided to look into how email senders can set their image of choice.

It turns out that Sparrow uses Gravatar and Facebook to source the avatars of email senders in the message list. This means that Sparrow runs each sender’s email address against Gravatar’s database of email addresses and images and the email recipient’s Facebook friends list (if enabled). If a match is found, then an avatar is displayed next to the sender’s name.

If you or your clients have been in business for a while now, chances are that you already have a Gravatar set up, as well as a Facebook page. If not, it takes only a moment to sign up for a Gravatar account and upload an image to link to the email address you send from. From there on in, your campaigns will be instantly recognizable in Sparrow inboxes.

Gravatar is widely used on blogs and social sites – not to mention, in worldview and the recently-updated subscriber snapshot that can be found in your account.

Many thanks to Max Lielje for sending in this curious question – we’re glad we could help! After this prompt to check our reports, it turns out that more folks now use Sparrow to read our monthly newsletter than Yahoo! Mail or Android (when we can detect it, of course). So, if you have a lot of Mac-loving email subscribers like us, it may be worth your time to make sure you have an appropriate avatar linked to your sending address.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

HTML5 video in email: An update on client support for 2011

HTML5 video in email: An update on client support for 2011

Last week, there was a whole lotta shakin’ in regards to Hotmail introducing partial support for HTML5 video in email. While the results weren’t promising, it soon became pretty clear Hotmail wasn’t the only client that had undergone changes since we published our popular ‘Video in email‘ feature in 2009. So, I figured it was high time that we refreshed our results and provided some recommendations for good measure.

Video and HTML5: One step forward, three formats back

While a lot of the fundamentals covered in our earlier post on HTML5 video in email have remained the same, the rise of multiple containers (or loosely, file formats like .mp4 or .wmv) and codecs has made embedding video a hairier task than ever on the web. However, as Hotmail is the only webmail client showing any promise in regards to video playback, you could probably get away with using mp4 only for the benefit of iOS devices.

If you do want to try your luck with Hotmail, ‘Dive into HTML5‘ recommends that you link to 3 video files/containers from within HTML5′s <video> tags for maximum compatibility across multiple platforms. These containers are:

  • MP4 (H.264 baseline video and AAC “low complexity” audio) – for Android, Chrome and iOS
  • Ogg (Theora video and Vorbis audio) – for Chrome and Firefox
  • WebM (VP8 + Vorbis) – For Chrome and Opera

Note that Safari will play any format that Quicktime supports, being all of the above. The dubiously good news is that as Flash and <object> tags still aren’t supported in email clients, they’re not a concern to us here.

So, if you’ve got the 3 versions of the same video ready, then you can embed them into an HTML email using the following code, courtesy of the ‘Video for Everybody Generator‘. Note the inclusion of a fallback image, which displays if HTML5 is not supported:


<video width="600" poster="fallbackimage.png" controls autoplay>
   <
source src="http://mydomain.com/video.mp4" type="video/mp4" />
   <
source src="http://mydomain.com/video.webm" type="video/webm" />
   <
source src="http://mydomain.com/video.ogv" type="video/ogg" />

   <!-- Fallback if HTML5 video is not supported -->
   <
a href="http://mydomain.com"><img border="0" src="fallbackimage.png" label="Fallback Image" width="600"></a>
</
video

Now, I’m certain this looks like a highly pedantic approach to getting video to play in email. But it will ensure playback in Apple Mail and iOS devices (which are well on the rise) and potentially in Hotmail, if our early attempts are anything to go by. Again, you can choose to only use mp4 for video display in Apple Mail/iOS only.

Current email client support for HTML5 video

As before, video plays beautifully on iOS devices and in Apple Mail, which is excellent news. While on the topic of mobile clients, we were successful in getting the fallback image to display in most, except the default email client on Android phones. Strangely enough, the video controls display, but the video never loads. This is a pretty bad outcome in an otherwise solid mobile email client – we’re still looking into whether trickiness with codecs could be at fault here.

Webmail clients also displayed the clickable fallback image in place of the playable video, which is an advantage that embedding video using HTML5 has over previous methods. The notable exception is of course, Hotmail – which despite the lack of video controls, does play HTML5 video in some instances when prompted, or the autoplay attribute is used.

Finally, all the desktop clients we tested either played the video, or displayed a clickable fallback image in its place. So without further hesitation, lets get to the results:

Desktop email clients Result
Apple Mail Yes  Video plays
Lotus Notes 6, 7 and 8.5 No  Fallback content displayed
Outlook 2003, 2007, 2010 No  Fallback content displayed
Outlook for Mac 2011 Yes  Video plays
Windows Live Mail 2011 No  Fallback content displayed
Web-based email clients Result
AOL Web No  Fallback content displayed
Gmail No  Fallback content displayed
Hotmail Yes  Video plays when prompted – see details
Yahoo! Mail Beta No  Fallback content displayed
Mobile email clients Result
Android (default) Not  Controls display, but video does not play*
Android (Gmail) No  Fallback content displayed
Blackberry No  Fallback content displayed
iPhone Yes  Video plays
Windows Mobile 7 No  Fallback content displayed

* This could be an video encoding issue on our part – if you have better luck with Android video playback, please let us know.

HTML5 video in action

Using the updated code, I ran a test email through a variety of popular email clients. Note that I couldn’t get the video to resize using a mobile stylesheet, so this layout may look a little wonky on mobile devices.

To see HTML5 video in action on the iPhone and in Windows Outlook, please refer to our previous blog post, as the behaviors in these clients have not changed. On the Hotmail front, here’s an example courtesy of Andy T’s ‘Get in the Inbox’ blog:

As for fallback images, these displayed in a consistent manner across the majority of email clients that don’t support HTML5 email, which make them perfect for featuring a ‘View video’ -style call to action, a play button, or something similar to prompt the recipient to view the video it’s linked to.

Finally, we were confident enough in this technique that we recently used it to announce the arrival of our updated template editortake a look at the video email.

Using Hotmail and Gmail previews to view YouTube clips

Now, I promised that I’d mention another technique for embedding video – or at least getting it to display in Hotmail and Gmail. By uploading the video first to YouTube, then adding the URL to your HTML or plain-text email as text, you can get an inbox-playable preview to display. Here’s an example of this in Gmail:

YouTube video in Gmail

The downside of this is that adding URLs as text can trip off phishing warnings in some email clients, so this should be applied with care. That said, we didn’t have any deliverability issues getting our test emails into Hotmail and Gmail inboxes, so this may be a handy technique if sending primarily to these clients.

You can read more about this technique in our earlier blog post on ‘Using YouTube Previews to display video in Gmail‘. The same technique works in Hotmail, with very similar results.

Should I be using any of these techniques?

HTML5 remains the best option for embedding video in email. Being able to reliably provide a fallback image is most certainly advantageous in non-Apple email clients – then for Apple users, the option of watching video in the inbox can potentially make for a unique and engaging experience.

Our recommendation remains that you should decide if it’s worthwhile to send video email by referring to your email client reports first. If a high percentage of your subscribers are using Apple devices, then it could be a neat move. Other recipients will see the fallback image, which you can use to prompt click-throughs to a version of your video hosted online.

Hotmail and Gmail video previews have dubious value, unless you’re sending plain-text email (and have to expose your links, anyway). However, I’d be curious to hear if any of you have used it with success.

Regardless of whether or not you believe that email is an appropriate medium for email, I have no doubt that at some point, your clients will ask about whether it can be done. Keeping in mind that you’re not actually sending the video file (it only streams in supported email clients), it could prove to be a solid way to bring a demo video or pitch that one step closer to subscribers – if done tastefully, of course. If you’ve had success with this approach, or any alternate approaches for that matter, we’d be delighted to hear from you in the comments below.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

The new Campaign Monitor template language

The new Campaign Monitor template language

With the release of our much improved new email editor this morning, I wanted to share the details of our new template language that takes advantage of all the exciting new features. Before I dig into the details though, you’ll be pleased to know these changes are much more evolutionary than revolutionary. Much of the language remains unchanged, some has been tweaked and we have a couple of new tags on the block.

To recap last week’s announcement, the new editor lets you put anything in a repeater, design multiple layouts within the same repeater and includes a much nicer WYSIWYG editor for your clients to work with. I’ll walk through the changes we’ve made to support this, but you can also jump to the full template language documentation to see it all at once.

One important thing to note is that we’ve automatically converted all your templates to the updated language for you behind the scenes. There’s no need for you to do any extra work, and all of your existing templates will continue to work in the new editor. Of course, if you do spot a problem with one of your existing templates, please let us know and we’ll get to the bottom of it for you right away.

Goodbye <$title$> and <$description$>

Now that you can have any combo of elements in a repeater, the old <$title$> and <$description$> tags were a little confusing. These have been replaced with the more generic <singleline> and <multiline> tags. Like their predecessors, singlelines are great for simple text that doesn’t need any special formatting like image captions, titles, dates, etc. Multilines expose our new WYSIWYG editor and are for much longer passages of text that might require formatting.

We’ve also moved towards a more HTML-like opening and closing tag structure. here’s how the tags look:


<singleline>Headline goes here</singleline

This code would create an editable text input with the default text of “Headline goes here”.


<multiline>Story goes here</multiline

This code would create a WYSIWYG field with the default text of “Story goes here”.

A cleaner way to handle images

We’ve done away with the awkward <$imagesrc$> tag and added a simple attribute you can add to any image in your template. Just by including editable="true" in any image, it can be changed by a client. If you want to include a default image, just reference it in the src attribute like any regular image. Here’s the code:


<img src="this_is_a_fallback.jpg" width="300" editable="true"

As always, the width of the image is required so we can automatically resize an image your clients add if it’s larger. You can also provide alt text for any images, which will be used by default when the image is replaced and can be updated easily by your client within the editor.

The all new label attribute

Now that we’ve thrown out the single title and description limitation, we needed a simple way for you to label each editable field in a template. The new label attribute does just that.

For example <singleline label="Image caption">Describe the photo</singleline> would create an editable single line field with the label “Image caption” and the default text “Describe the photo”.

By combining the new label attribute and adding your own default text for all fields, you can set simple guidelines for your clients right in the template code that makes it extremely easy for them to work with. Here’s an example for a photography email template that clearly explains what goes where. Just place this code inside a repeater:


<image src="" width="300" editable="true" label="The Photo">
<
singleline label="Image caption">Describe the photo</singleline>
<
multiline label="Photographer bio">Introduce this photographer and share the story behind this particular shot</multiline

This will appear in the editor like so:

image

Introducing the <layout> tag

This tag is awesome. It’s a simple idea, but gives you complete flexibility in the types of template designs you can build. In a nutshell, the <layout> tag lets you build multiple layouts inside a single repeater.

For example, you might want the first item in a repeater to have an image aligned to the right, and in the next item aligned to the left. Or, you might want to have two repeating items that are just simple text, then throw in a gallery of images, then switch back to text again.

This is done by wrapping each alternate design in its own <layout> tag within a <repeater>. Here’s an example where the first layout has an image floated right, and the second has it floated left.


<repeater>
    <
layout>
        <
h1><singleline label="Headline"></singleline></h1>
        <
image src="image.jpg" editable="true" align="right">
        <
multiline label="Story"></multiline>
    </
layout>
    <
layout>
        <
h1><singleline label="Headline"></singleline></h1>
        <
image src="image.jpg" editable="true" align="left">
        <
multiline label="Story"></multiline>
    </
layout>
</
repeater

Each time your client adds a new item to this repeater, it will simply cycle through the layouts you have set in the template. You can add as many layouts as you like, and each layout can include any combo of elements.

Give each layout a label

The layout tag with a label

You can go one step further with your layouts by throwing in a label attribute. By labelling each layout in the same repeater, we’ll show your client a handy drop down each time they add a new item that lets them choose which layout they want to use. Here’s the code:

<layout label="New feature">

So, if you don’t include a label we just cycle through each layout in the order they appear in your template. Throw in a label and we let your client choose what they want to use and when. It’s your call.

Populating a table of contents

Previously, you had to add the toc="true" attribute to a repeater, and we’d just use the title in that repeater to populate a table of contents. Now we’ve moved away from title tags, you’ll need to tell us which <singleline> in a repeater should be used to build your table of contents. This is done with the new repeatertitle="true" attribute.

For example, you have a table of contents set up in your template, and you want the main headline in each repeating item to populate it automatically. Here’s how this would look:


<repeater>
    <
singleline label="Headline" repeatertitle="true"></singleline>
    <
multiline label="Story"></multiline
</
repeater

In keeping with the HTML-like structure of our template language, the old <$repeatertitle$> tag, which tells us where to place each item in your table of contents layout has been updated to <repeatertitle></repeatertitle>.

This also means you can populate a table of contents from multiple repeaters, which is something we’ve had a lot of requests for. These will appear in the order they appear in your template code.

Date tags tweaked

For consistency, date tags have also been tweaked by removing the dollar symbol. For example, the old <$currentday$> tag has been simplified to <currentday>. Check the full documentation for examples of all date fields.

Get coding…

To dive straight into the new language, you can check out the full documentation, or get your hands dirty with the sample template below. This is the same template used in last week’s video demo, is mobile optimized and includes a lot of the new tags such as layout and label.

Download the templateDownload the sample template (zip file, 688kb)

One of the biggest aims of this update to the editor and template language was to try and make the migration as simple as possible. Hopefully we’ve struck a balance between giving you all loads more flexibility in how you design templates, whilst still retaining the simple template language to make it all happen.

This is step one of something that we’ll continue to evolve, but in the mean time we can’t wait for you guys to start importing designs that were never previously possible.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Photobucket
Powered by WordPress Lab