LISTRAK COMPOSER WEBINAR AND FAQS
Click below to view the Listrak Composer hands-on-style webinar conducted by our training and design experts. We took your questions from the webinar and posted answers below.
Q: What image dimensions should I use for these emails. What's the maximum/ideal width?
The width of a Composer message is 600 pixels, which we deem the ideal email width, so an image wouldn't need to be any larger than that.
Keep the file size down to an appropriate size and quality. Images will automatically resize to fit into Composer, so it's not required that you place an image that's the exact dimensions. You can also easily resize if necessary.
Make sure to optimize your images using a photo editing tool like Photoshop. There are dozens of image optimization tools online.
Q: Do you still recommend putting a 1200-width image in the 600-width space for retina? Or just keep the image at 600px for upload?
Retina images take a long time to master. It's partly getting the math right, and partly deciding when it's necessary. See the tips below.
Q: What is retina? When should images be retina optimized?
Retina screens generally have double the pixel density than regular screens, causing some images and graphics to appear blurry, while make text and other HTML elements more crisp.
If you have an image with text, especially if the text is small, it may be appropriate to make it retina optimized.
If you have an image that is a flat graphic with minimal colors, like a logo, it's worth-while to make it retina so that it's crisp.
If you have an image that's mostly photo-realistic, like a lifestyle shot, it will generally have a lot of colors and detail, and therefore the file size will be much higher. For an image like this, we suggest not optimizing for retina. You won't notice slight blurriness with a detailed photo, and therefore the size to quality ratio isn't worth it.
If you would like to retina optimize your images, we usually suggest doubling the display size of the image on mobile. So, if you have a graphic that will display at 100 pixels on mobile, save the image as 200 pixels and scale it down to 100 pixels on screen, making the pixel density double.
Q: What's a safe width when preparing images to display both desktop and mobile? 640 pixels
600 – 640 pixels would be fine. The more important size to consider is file size. Remember that your readers have to download these images when opening your emails. If they are on a 3G connection, it will take time and data to download. You may only have 3-4 seconds to engage them. You're asking your subscribers to "pay" to read your emails, both in time and money, however small. Smaller file sizes and less overall file size of the email will help make a smoother experience for openers.
Q: I saw that you had background images in one of your designs. Is that something that is supported now by most email platforms?
Yes, background images are supported by most email platforms. A background image can be added to a given structure in Listrak Composer. You may want to apply a background color to the structure in addition to the image to provide a fallback if a contact is using an inbox that does not support background images.
Q: Is there a maximum file size recommended for animated GIFs?
The most important thing to keep in mind is how file size will impact email subscribers. Asking your readers to download images could impact their experience if images aren't optimized or sized correctly. Generally below 1MB (1000KB) will download quickly on any connection. Also, consider the number of image requests you're asking someone to download. This will affect both load time and cost data for anyone not on a WiFi connection if they're opening on mobile.
Q: What is the risk of using text as images instead of typing them directly and the email client thinking that it is spam because of the ratio text-image?
Using text as images is not a very high concern for spam filters. What's more important is the readability for your subscribers. With mobile being the preferred method for most email opens, text as images doesn't allow text to wrap. The image will scale down to fit the screen, so the size of text on the image is key to make sure that it's still legible on smaller screens. Retina optimization also comes into play, because text as images could appear blurry if not optimized correctly, especially if the text is small.
Q: Is there any way to "strikethrough" text?
Yes, using the control in the text toolbar.
Q: In Composer, when using a text block, if the text is on more than one line, either forced or wrapped, I find often there is too much space between lines. Any tricks to recommend?
You can adjust the line-height between lines of text using the control in the toolbar.
Q: Do I have to specify font sizes for both desktop and mobile?
Currently there is no option to change font size from desktop to mobile. This is something we hope to offer in the future.
Q: How can I add "click here if you can't view images"? How do I add an unsubscribe link?
Select Dynamic Tags > System Links to add links for "Browser Link" and "Unsubscribe Link".
Q: Using Composer, is there a way to add a link to a phone number that will open in mobile (as a direct phone call)?
There is not a shortcut method to do this currently in Composer, but there are helper links that exist that can be pasted into the link input:
Telephone Call: tel:555-555-5555
For Example: mailto:email@example.com?subject=Email body
For Example: sms:555-555-5555?body=Hello message
Q: How can I use personalization control panel tags?
The personalization dropdown in the text toolbar allows you to search all available tags on your current list.
Q: Can I add Recommendations using Composer? If so, how?
Yes. Check out the instructions in Adding Recommendation in Listrak Composer.
Q: Is there a way to have the plain text for an email auto-generated based on layout from Composer?
If you navigate to the Plain Text tab, there is a button to "Create Plain Text Version", which will automatically generate plain text.
Q: Any plans to give us access to the HTML code in Composer?
We would like Composer to deliver the most up-to-date rendering for the vast number of email clients out there. By giving access to the HTML, a message could potentially be broken by user error. At this time, we're still not planning on giving HTML access.
Q: Once you are finished with a Composer email can you generate the HTML from Listrak?
At this time there is no way to do this within the application. If you need to modify the HTML, you can send a test and view the source. We recommend not doing this, because Composer will automatically update your code in the future when new support is added for inboxes and rendering.
Q: Will there be an option within Composer to hide a particular element on desktop?
Our stance has always been; if an element is being displayed on mobile and is important enough to be information delivered to a mobile reader, then it’s probably important enough to be delivered to a desktop reader, and should therefore be displayed on desktop. The same could be said from desktop to mobile. Hiding content is discouraged, because it’s an incomplete experience that segments readers based on the device they're reading on, which isn’t really fair. That being said, there are certainly use cases when we have suggested hiding content on either desktop or mobile.
Hide the preheader on desktop and mobile. The only thing it’s useful for is supporting the subject line in the inbox and enticing the reader to open.
Hide the top navigation on mobile, because it takes up valuable real estate. Subscribers are opening your emails to view the content. That’s why they clicked. Navigation is a secondary call-to-action that should be thought of as a fallback. I would even suggest everyone put their navigation at the bottom to begin with. If a reader has looked at the content and decided it’s not for them, but they’re interested enough to click to the site, they’ll find the navigation and click. If it’s already at the bottom, then we no longer have to worry about hiding the navigation at the top and showing the bottom one.
Understanding this and thinking about the design with a mobile first approach is key when designed mobile optimized emails.
NOTE: The navigation component is the only content component that can be hidden on desktop and mobile.
Q: Our company has a custom template that we had your designers create. Are we able to use Composer with our custom template or do we need to start from scratch?
Composer uses a different code-base than our current custom templates. We currently are not allowing old templates to be used in order to ensure the rendering of Composer is up to standards.
Q: Gmail was clipping off the message when I tried out composer vs. the regular email we use.
Gmail has a limit of 102KB per message. The longer a message is, the more likely it is that you will reach this cutoff. Keep your messages brief to deliver clear content and calls to action, reduce download time, and avoid this Gmail limit.
Composer code is optimized to try to prevent reaching this limit as often as possible, however the longer the message, the more likely it will be capped.