Rare.io Email Builder
Written by Rob Lane.
We take great pride in our template designer. It’s a critical part of Rare that lets designers turn their creative concepts into marketing brilliance.
This update to the Rare visual template designer introduces new features you’ve asked for, a few small changes, and improved compatibility with more mobile and desktop readers (especially the fussy ones).
We aim to create email that displays well on pretty much any device, big or small, with content that moves and selectively changes layout on mobile or desktop readers. That’s a pretty tall order, so you can bet that we add features carefully and test extensively.
Fortunately, we have this visual design thing figured out. Our clients tell us that with Rare, their creative teams waste NO coding the tangled mess that is email HTML—which means that they get to spend that time actually being creative. A nifty side effect is that our clients are trying more varied designs for their mailouts, rather than being forced to use the same old templates with different images and text over and over.
Email generated by Rare has been tested extensively with readers (both archaic and modern) using Litmus. These include Apple Mail 7 and 8; Lotus Notes 8 and 8.5; Outlook 2000, 2002, 2003, 2007, 2010, 2011, 2013, and 2016; Thunderbird; Android 2.3 and 4.2 (default reader); Gmail App; Google Inbox; iPad Retina and Mini; iPhone 5s (iOS 7 and 8); iPhone 6 and 6 plus; Windows Phone 8; AOL Mail (Explorer, Firefox, and Chrome); Gmail (Explorer, Firefox, and Chrome); Outlook.com (previously Hotmail, on Explorer, Firefox, and Chrome); and Yahoo! Mail (Explorer, Firefox, and Chrome).
2. Interface Changes
We’ve made a few small tweaks to the designer interface that are worth mentioning:
- We’ve introduced new icons that are easier to see on different background colours.
- We’ve changed the layout of container icons. The gear and the dragger were stacked; now they’re side by side, which makes them easier to use on short containers.
- The garbage can is now always displayed to the right of the design area. When you drag content or containers to the garbage can, it will “grow” and turn green and open its lid.
- We’ve moved the design area closer to the options panel. On larger displays, these were inconveniently far apart. As an added bonus, this layout allows for a slightly narrower browser window on smaller display.
2. Interface Changes
The boxed text has been brought up to date with new features such as platform visibility (all, desktop, mobile), minimum height, line spacing (more on this later), and control over the desktop margins and mobile margins for both the text and the bounding box. Control of mobile margins is the big feature here because when an email is shown on a much narrower mobile device, you may want to have wider, narrower, or hidden margins around your text, and perhaps shrink away the bounding box altogether, as shown in the example below (right).
3. Line Spacing In Text Content
Sometimes your design needs tighter control over line spacing. Some designs call for more open space between lines of text, others need less. The line spacing feature allows you to control spacing in steps from 100% (no extra spacing) to 200% (double spacing). The default spacing is 140%. Note that line spacing works on all mail clients except Microsoft Outlook 2007 and 2010, where it will use their default (131%). Microsoft seems to hate pretty email—but how much so depends on the version of Outlook. Line spacing does work in all other tested readers including Outlook 2000, 2002, 2003, 2011, 2013, 2016, and Outlook.com, with a small exception in Outlook 2013, where spacing will be slightly taller.
Dividers now support platform visibility (all, desktop, mobile), as well as margins. You can set desktop margins and override on mobile using the mobile margins feature. If you are going to use margins on your dividers, be sure to use the preview button to see how they look on both desktop and mobile and make any adjustments you need to fulfill your vision.
A note about Outlook—Most older versions of outlook will limit the height of the divider to 8px. Some may also display round or “fuzzy” dots instead of the more normal square dots modern email clients display.
5. Link Styling
Yes, we apologize for not getting this one to you sooner. Blue/purple (blurple?) underlined links probably shouldn’t have a place in today’s designs—they didn’t look good back in the ’90s, and they don’t look good today. Fortunately, we’ve fixed this. You can set the default link colour and link style (underlined or just text) for any text content regions in your design.
Buttons just got more fun! Rare uses HTML/CSS buttons (and VML in Outlook, but that’s another story) to ensure that they display even when customers have images turned off in their reader. HTML buttons always show up—and right away—because they are part of the email body and not something that needs downloading. You can now create trendy buttons like ghost buttons (buttons with a stroke and a background that matches the page around them), rounded buttons, or just plain old buttons in nearly any colour or text configuration you like.
Buttons now support platform visibility (all, desktop, mobile). Another important feature is mobile height, which lets you override the height of the button to 44px, or 50px when displayed on mobile. Apple suggests a minimum of 44px height for anything you can poke at, and for whatever reason, the fatter buttons usually look better on a narrow display.
A note about Outlook—some older versions of outlook will display the rounded corners as square corners. Everything else about the button will be as expected.
7. Auto JPEG
OK, this one isn’t so much exciting as it is convenient. Many designers like to keep their images in formats like PNG instead of JPEG. The problem with JPEGs is that they lose a little bit of quality every time you load them and save them again. This means that making small changes over time to an important image can limit its usability in the long run. Image formats like PNG don’t have this problem—you can load, edit, and save all you want. But PNG files can be really big, and that’s never a good thing in email, especially on mobile devices, where the Internet can be slow (and expensive).
Rare now lets you choose whether to convert large PNG files into JPEGs automatically. Small PNG images, such as icons, won’t provide the option and will display as PNG files. Because Rare maintains all your email and product images in a CMS (Content Management System) we can change formats, and dimensions as required to deliver an efficient email.
PNG files are excellent for two things other than being lossless: non-photographic images, and transparent images. The locomotive in the example above is a transparent PNG. When it’s displayed as a JPEG, which does not support transparency, the background becomes white, and that looks pretty bad on a coloured background. In the scenario above, the PNG format is the better choice because the locomotive is transparent, this way you can adjust the background colour in the container until you find the one you like.
8. Other Changes
- Changed ‒ The default font size for text content is 16px. The old default was 14px, which was hard to see on phones and netbooks. You can set the font size to other sizes in the text content editor.
- Added ‒ 4-column containers support the “no-flow” option, useful when you’re making menus, for example, and you don’t want them to reflow automatically into a 2 x 2 layout.
- Fixed ‒ 4-column containers with reflow will now flow into 2 x 2 columns properly even if the columns are different heights.
- Fixed ‒ Long links will now automatically wrap across lines and will not break the layout.
- Fixed ‒ Dividers display correctly in older versions of MS Outlook.
- Fixed ‒ The Android App (and Google Inbox App) were not responsive; trying to resize content breaks layouts and made email hard to read. This mechanism has been overridden to allow the desktop version of the email to show without issue.
- Fixed ‒ Lotus 8.0 and 8.5 render properly.
- Fixed ‒ Windows Phone 8 and 8.1 now display the responsive mobile version of an email rather than the desktop version.
- Added ‒ Image widths can be limited by percent (%) or pixels (px).
- Improved ‒ Smaller and better email HTML code is generated.
If you’re an ecommerce merchant and don’t have automated email marketing campaigns setup for your store, you’re losing money. Right now.
Rare.io makes it easy to start using automated email campaigns for common challenges like: Welcome Series, Abandoned Carts, Order Follow-up emails and more! You can learn more about our powerful email marketing automation features here or go ahead and get started right away by using Rare.io for FREE.
And if you’re one of the thousands of merchants who are already using Rare’s Smart Email Marketing software and want to see how our Customer Success Team can work with your brand to grow your revenue – feel free to book a call at your convenience here.