Last week, we took a look at customizing your email templates – and started off with the “easy” template editor.
Well, today we’re stepping it up a notch, so buckle up, as we venture into the ATE – the Advanced Template Editor.
The ATE gives you complete control over the layout of your emails, by allowing you complete access to the HTML source of the template.
This is both its killer advantage, and greatest risk: You can really mess up badly if you're not careful.
Flexibility Comes With Responsibility
Yes, you get complete flexibility, but with that flexibility also comes the responsibility to test what you've built to make sure that it works.
The ATE controls the layout using custom "tags" that tell FeedBlitz where to insert the relevant content from your site into the mailing. They all have the form <$…$>.
Most insert content; some however are control elements that must be present for the template to be valid and work properly. All the tags are defined and documented below the template editor window in the tag legend; you can insert them as you see fit. The two most common and critical control tags are <$BlogPosting$> and <$BlogNoLandingPage$>.
These MUST appear in matched pairs for the template to be valid. Elements between <$BlogPosting$> tags are repeated for each post included in the mailing; elements between each <$BlogNoLandingPage$> pair are ONLY included in mailings, and not on landing pages or the online subscription form.
If these tags aren't properly paired up, FeedBlitz will interpret the template as being broken and default to its standard, FeedBlitz-branded template. This is obviously not what you will want to have happen, so once you save a template, use the list's troubleshooting section to send yourself some test emails.
Other things to note about the ATE are:
The ATE is currently the only location where you can define a template to be the master template.
There are no guarantees a template produced or modified via the ATE will be mobile-friendly; you should test the results on your reference portable platforms yourself. Desktop versions of Safari (for iOS devices) and Chrome (for Android) can give you something of an idea how your email will look on mobile: Preview it in these browsers, then narrow the browser width significantly.
Template Design Tips
Use dark fonts on a light background. Not only is that easier to read, but not all email apps will be configured to show background colors. Most apps use white as a background color, so a light font on a dark background risks being light on white – or practically invisible.
Background images may not display as you expect. They might not be shown at all, or some systems might ignore CSS settings, and repeat the image endlessly. Best avoided unless you want them to tile. Also note that systems with images off by default won't show the background either, so make sure your template makes the mailing visible with images and backgrounds missing.
Mix serif and sans-serif fonts. It's more pleasing to the eye if your headline fonts are the opposite of your post's text. If your post text is sans-serif, try a serif font for the headlines; and vice versa.
Avoid non-standard web fonts. They use script to download themselves into your browser. Great for the web, but they won't work in email since the required scripts won't run.
Test, Test, Test!
- This methodology works well for getting the kinks out of your templates:
- Preview the template, save when you're happy with it.
- Use the trouble-shooting button on the list's main page for the online preview.
- Check rendering is OK in IE, FF, Chrome and Safari.
- Send test emails and check rendering in email in gmail – if that works you're good.
Advanced: Use inline CSS. The easy template editor generates style sections (<style> </style> tags) but also generates inline CSS (the style attribute in the HTML tags) which will work better across a wider range of webmail clients (notably gmail). Use inline CSS wherever possible; you cannot rely on the <style> tag or externally loaded style sheets to work.
Advanced: Mobile-friendly responsive design. The easy template editor generates mobile-friendly mailings; if you work within the framework created by the easy template editor you have much better chance of remaining mobile-friendly. Avoid adding HTML tables in your markup. Smart phones and tablets will obey @media CSS directives in stylesheets, and you can adjust font sizes, display attributes and other CSS elements as you wish. Make sure to mark them !important to override inline styles. FeedBlitz will automatically add @media directives as part of mailing, so test and preview your template on a mobile device once saved.
Advanced: Don't use invisible images to control spacing. Use inline CSS padding and / or margin attributes. The mobile-friendly @media descriptors will scale photos down, but invisible spacing images UP – and that could ruin the layout of your mailings. Again, test!
So, if you hadn’t gathered by now, testing is KEY when using the Advanced Template Editor for emails. Resist the urge to think “I’ve got it! It’s perfect!” and risk sending out botched updates to your community.
Next week, we’ll go over the Auto Template Generator, Master Templates, and more. See you then!
ليست هناك تعليقات:
إرسال تعليق