Mail Designer Archives - equinux blog

Cracking the code behind Apple’s App Store promo card design

By | Company, Mail Designer | No Comments

Apple is known for doing things with more attention to detail than most companies. So it should come as no surprise that even App Store gift cards with their promo codes have a few secret details that help make the experience more Apple-like.

So what powers the simple App Store promo codes? Secret fonts, special dimensions, and many more.

Today, we uncover these secrets.

Read More

How to build email newsletters that look great in all versions of Outlook – with Mail Designer Pro 3.3

By | Mail Designer | No Comments

It’s a big day: today we’re rolling out Mail Designer Pro 3.3 – a big update that includes something we’ve been working on for a while… all-new Outlook support.

Just saying the word “Outlook” to a newsletter designer will send shivers down their spine: it has notoriously poor support for HTML standards and a lot of quirks that make it extremely tricky to design for. If that wasn’t bad enough, all versions since Outlook 2007 use Word’s engine to render HTML, so things have actually gotten worse over the years.

In the past we addressed these issues by adding workarounds to our existing HTML code. Extra style commands and table wrappers were added to the code that we write for all other email clients. However, this could occasionally still cause layout issues (e.g. extra spaces, slight misalignments…) and we were never entirely satisfied with the final result.

A New Hope for Email HTML
Last year we got together our email jedis and looked at different solutions. We decided to adopt an entirely new approach and make a bigger change. We decided to re-write our code to use dedicated code sections for Outlook.

How does it work?

Basically all existing code is hidden from Outlook entirely, so we can write nice clean code for all the other email clients, without extra Outlook hacks.

Then we take the content you’ve added and use it to write a second layout section, that is hidden from all email clients except Outlook. This section is tailored to all of Outlook’s quirks.

We do all of this automatically when you send or export your design – so all your content is included in both the Outlook and non-Outlook sections automatically.

So – does it work? In all our tests, the results were great: Designs are much more accurate, check out a Litmus preview:
https://litmus.com/checklist/public/f584679

With the earlier compatibility code, you’d see slight misalignments or extra padding. All of those issues can be avoided with the new code. This new technique also makes it easier for us to improve the code going forward, in case we run into any other compatibility issues.

Existing Designs are automatically improved
So what do you need to do? Nothing!

Whenever you open a newsletter design in Mail Designer Pro 3.3 or later, it’ll automatically be upgraded to use the new Outlook code with all compatibility improvements.

Detailed Outlook improvements:

  • 3-column layout blocks are always displayed with correct alignment
  • Line-height is correctly adjusted in all Outlook versions
  • A problem that could cause layouts to become misaligned has been fixed
  • An issue that could cause extra padding to surround an element has been fixed

Other Improvements

  • New Plain text export: When you export as a HTML file, the plain text version is now also included as a separate file
  • New If you’re sharing documents with colleagues, Mail Designer Pro now lets you know if a font was used that you don’t have on your Mac
  • When copy & pasting from Microsoft Office documents, we now prevent HTML elements being added inadvertently
  • We’ve fixed an iPad preview issue under macOS Sierra
  • You can now use multiple mailto links with advanced options in your newsletter
  • An issue that could very large newsletters to not upload to MailChimp correctly has been fixed
  • An issue with image quality has been fixed
  • A few minor issues with mobile background editing have been fixed

Want to experience hassle-free email design? Try Mail Designer Pro 3 free today. Mail Designer Pro is available for just $49,99. Owners of previous versions can take advantage of our discounted upgrade offer.

Advanced mailto-links, poster images and more in Mail Designer Pro 3.2.2

By | Mail Designer | No Comments

mdpro_3-2-3

Mail Designer Pro 3.2.3 adds some great new options to your creative email marketing toolkit:

Poster layout blocks – stylish header images for magazine-like layouts

We’ve added new layout blocks for one large poster image plus two or four smaller detail images. These are great for magazine-style layouts, or when you want to split a larger image up into multiple areas. Super flexible and looks stunning.

mdp_layoutblock

Faster footer layouts with social media links

We’ve also added layout blocks that combine a text area with four image areas. These are designed to make it easy to build a footer with contact details alongside your social media links.

Advanced email links for instant feedback

You can now build advanced email links that will pre-fill the subject line and message text when they’re clicked. Add a “RSVP now” link for example and pre-fill a message with fields for the information you’d like people to reply with. Super handy if you’re planning an event, or asking readers for feedback.

feedback_email_mail_designerpro

Other improvements

  • We’ve improved handling of transparent images under macOS Sierra 10.12.2
  • Image optimization is smarter about images with transparency and using JPGs
  • When you use the “Replace Image” feature, you can now dive into sub-folders as well
  • We’ve improved compatibility with email providers that use MD 5 Challenge / Response security

Download Mail Designer Pro 3.2.3 now.

Have fun with the new version and have a great creative start to 2017!
Your Mail Designer Team

Mail Designer Pro 3 brings the power of Touch to email design

By | Mail Designer | No Comments

macbook

Mail Designer Pro 3 is the only email newsletter design app for macOS that lets anyone create mobile-responsive email newsletters. And with the brand-new version 3.2.1, we’re bringing Touch Bar and iPhone 7 support to Mail Designer Pro.

leiste

Mail Designer Pro: Touch Bar Details

We looked at the features email designers most often need while using the keyboard and designed Touch Bar support around those actions:

  • Access text formatting and style options – all without leaving the keyboard
  • Adjust background color and tint, or zoom background images
  • Switch between desktop & mobile layouts, pull up a smartphone preview & toggle guides
  • Customize the Touch Bar with preferred shortcuts and controls

touchbarmdp3

Also new in this release
iPhone 7 and iPhone 7 Plus Device Previews: Check out a real-time preview of your design on the latest iPhones.
macOS Sierra tab-support: Working on two newsletters? Group them into one window and switch between them in a flash.

We’re excited to be bringing mobile-optimized emails to everyone. Mail Designer Pro 3 is available from the equinux Store and Mac App Store.
For a limited time only, we’re offering Mail Designer Pro for just $49.99.

Mail Designer Pro 3.1.1: Leaner, faster-loading email newsletters

By | Company, Mail Designer | No Comments

mdp_blog3-1

Faster loading newsletters with PNG image compression in Mail Designer Pro 3.1.1

Modern eye-catching newsletters tend to use a lot of images and large photos. That can lead to large overall email files sizes that will take longer to load.
The latest Mail Designer Pro update (Download 3.1.1) now offers lossless PNG compression, which decreases the size of your graphics, logos and banners. The result? Leaner, cleaner, faster-loading email newsletters.

Mail Designer Pro automatically compresses images when you export – you’ll find it alongside the other Design Options

 

We’ve also made Mail Designer Pro a bit smarter about images: It now detects whether an image is a photo or a sales graphic and uses that to choose whether to save an image as a PNG or JPG file, while also keeping file-size and quality considerations in mind.

Other Improvements:

  • Animated gifs now loop correctly
  • PDF export: fix for transparencies
  • Web fonts are now loaded over HTTPS
  • We’ve re-structured the Export menu
  • A few formatting bugs have been fixed

Mail Designer Pro 3 is currently available for just $49.99, we also offer a free trial download.

Mail Designer Pro 3.1 Update: Gmail is now 100% mobile optimized

By | Company, Mail Designer | No Comments

mood

Gmail is one of the most popular email providers in the world and the default email app on many Android phones – that’s a lot of customers reading newsletters in the Gmail app. Until today, Gmail has only supported an ‘optimized’ newsletter view, where it would automatically take the desktop version of your email and tried to re-format it for smartphone screens – usually with mixed results.

iphones-vorher-nachher_enNow Gmail users will see your mobile-optimized layout exactly as you intended it: Google has updated Gmail with full support for mobile-optimized emails. So we’ve released Mail Designer Pro 3.1, an update that takes full advantage of the new Gmail features and lets you create newsletters that will look great in Gmail.

Gmail mobile-responsive facts

So what has Gmail changed exactly? Here are the details for fellow email-HTML nerds out there:

  • Gmail now pays attention to media queries, which allow us to show the mobile version of your newsletter to smartphones
  • There’s still no support for web-fonts, but you can configure fallback-fonts in Mail Designer Pro 3, for the best of both worlds
  • Technical fun fact: Attribute selectors aren’t supported, but CSS class definitions are – Mail Designer Pro takes your design and translates it into HTML and CSS styles that Gmail will display correctly
  • Roll-out status: Gmail’s mobile-responsive changes are already available in Gmail for Android, Gmail on the web and in Google Inbox on iOS. The Litmus team has more details on their blog.

bildschirmfoto-2016-10-20-um-11-51-27-2

New mobile design previews: iPhone 7 and Google Pixel

To help you to visualize what your design is going to look like, we’ve added a new smartphone design preview for Google’s new Pixel phone. It gives you an accurate Gmail-preview, complete with the fallback fonts you’ll see.

We’ve also added the new iPhone 7 and 7 Plus (in Black and Jet Black) so you can get a feel for those new models as well.

Time-saving shortcuts

Try out some of the new keyboard shortcuts for a real productivity boost:

  • Command + G groups objects
  • Space + Enter adds a simple line break (instead of starting a new paragraph)
  • Command + N opens a blank design
  • Command + K add a link to the currently selected text

shortcutsmdp31

Version 3.1 also includes further compatibility improvements for Outlook and MailChimp, as well as performance optimizations. And you may have noticed that Mail Designer Pro now displays a notification once your test-email has been sent.

Get early access to upcoming Mail Designer Pro releases

Introducing the Mail Designer Pro Beta program! We love getting feedback from you guys, so experienced users can now activate Beta updates under Preferences > Updates. You’ll get early access to our public betas with new features, fixes and improvements.

mail-designer-pro-beta-updates

 

We’re really stoked to support the new and improved mobile-responsive Gmail right from the get go. If you like the latest update, we’d appreciate a short review on the Mac App Store

Mail Designer Pro 3 is available for $49.99. Download your free trial today.

Tips for creating real “hero” newsletters with wallpaper images and enticing Call-To-Action buttons

By | Mail Designer | No Comments

schreibtisch-macbook

Perfect newsletter design with Mail Designer Pro: more Mail Designer tips can be found on our Mail Designer Pro Tutorial Page.

What are you trying to accomplish with your newsletter? You want to win hearts, clicks, fans, and followers, right? On average, your recipients only have an attention span of about 8 seconds. An intelligently constructed, image heavy newsletter is sure to increase sales.

The leaves have begun to change color and fall, triggering an eager, optimistic target group becoming even more enthusiastic to buy. As they snuggle under their fleece blankets on the comfy couch, by the glow of their iPhone screens, thoughts of the upcoming holidays fill their minds. It’s high time to power-up your email marketing campaigns – Halloween, Thanksgiving, Black Friday, Christmas, and New Year’s are right around the corner!

Clever Designs with Mail Designer Pro, increase your potential for success. We’ll show you how…

background_fit

Take it up a notch with Wallpaper Mode – Backgrounds with a bang!

A picture is worth a thousand words, and boy do they sell! Pictures put readers in the right mood and give potential customers a stronger emotional connection to your products or sales. With the improved background features from Mail Designer Pro, you can create brilliant, breathtaking effects with full surface hero images. Be creative and stretch mood pictures over an entire email. A catchy slogan and large fonts will help give your newsletter that extra umpf.

Tip: It’s important to use an image that works well in Mobile Mode because when viewed on a smartphone, your recipient will be scrolling. Basically, within 8 minutes of viewing your newsletter,, your readers should get into the right mood, recognize your style, and understand the offer and promotional period at hand.

background_lunch_2

Pictures add an extra value to the style of your newsletter: A special fall menu for your restaurant, an invitation to an Open House, or a last minute weekend sale – the right background adds a subtle, but meaningful reinforcement to your message.
A little bit of taste is helpful for bringing across the right message. We’ll show you how to use background art for your desktop and mobile versions.

Find the right background image

Bigger is better. Ideally, you should look for pictures that are at least 4000px wide. This gives you more leeway for positioning and the picture will remain sharp for Retina displays

Extra leeway: Keep in mind that you will most likely want to include text boxes on top of your picture. Therefore, it is not recommended to use a picture with lots of details throughout but instead one with depth, colors, or slightly blurred. This way it’s easier to find appropriate spots for Headlines and texts.

unsplash

Picture databases as inspiration: If you search the web for pictures, you’re sure to find some good image databases for downloading pictures, such as these:

Sometimes, simply browsing through the different images can give you inspiration for your newsletters. Of course it’s always best if you start off with your own ideas.

Layout cheat sheet: Create emails with backgrounds

More or less text? Before you start, it’s best to decide if you want to work with transparent text boxes or with non-transparent layout blocks. The latter variety is appealing when you’ll be including a longer text.

Give your background space: Try to keep the top and up to the first third of your newsletter free. This space is important to let the background image make its impression. For texts, you could use a text/picture layout block and reduce it, such as seen in the following example: Texts should be at least 16px big so that the work well on mobile screens.

background_wild

Style with transparent layers: If you use minimal text, as in: Quick information, sales, transaction emails – you can give your background picture even more room. Try working with picture layout blocks which you can include layer by layer for your texts.

Check out these 3 examples to see how different the moods can be depending on how a background is used…

background_hero_02 background_hero_03 background_hero_01

For the layers, drag a square or circle onto your picture layout block from the Graphic Tools. Turn the opacity down to around 80% so that it is slightly see-through. With this method, it requires a bit more work to create the mobile versions.

Tip: Increase your click rate: Try this method as well to help push your Call-to-Actions. Adjust the picture so that the background drags attention to one of your links.

Apply, position, and optimize the background for your desktop version

To position a background, click on the background icon link at the bottom. Now you can pull the edges of your background to adjust the size. With the zoom feature, you can adjust the background image to fit your newsletter exactly. By holding the mouse button while you drag, you can move the inner area of your background picture.

Tips: Background images can increase the volume of data in your newsletters. Using Optimize Background, you can further compress the image. Decouple and adjust the background for the mobile version.

Detach and adjust the background for the mobile version

You’ll most likely need to choose a smaller section of the background picture to use for the smartphone version. Go to the Mobile Layout View for Smartphones and then to Background Mode.
background_lunch_03By slightly moving the background picture, Mail Designer asks if you’d like to decouple the background from the desktop Design. After decoupling, you can adjust the background exactly to fit the narrow smartphone screen.

5 tips for catchy CTAs with a good conversion

When it comes to a Call to Action (CTA), it’s best to get inspired by the modern webtrends. The same rule applies here:  The CTA must first work on the mobile version before you transfer it to the desktop one.

cta_style

One single CTA in a newsletter makes more of an impact than five. The fewer choices your recipient has, the better.

Here are five helpful CTA Design tips for you:

• Slogan booster: Use a modern web font. Position your text on your lead picture and highlight one motivational word in which you build in your CTA. Tip: Using special characters such as “>” actually help to boost your text link.

cta_headline

• Transparent surfaces and button graphics give your CTA a modern look

cta_blur

• Light lines: Try using simple, (1pt), lightly rounded outline in combination with a thin font (for example: Open Sans) positioned on top of a lead picture.

cta_blur_02

• High contrast: It’s not only about the color of a CTA, but the contrast. According to a recent study, an online shop increased its sales by 30% simply by changing their buttons to green. Due to the contrast with the background, they became much more visible.

cta_contrast

• Make it different Surprise them with nonconventional button shapes and postions. Who says you can’t use a round button?

cta_fashion

Check your hero image: Does it help if you move your hero image to a differnt section? Find the best position to make it a real eye-catcher.  Does the content flow? Are the recipients in the zone? Then this is the right spot for an effective CTA.
background-mixer_03

 

Mail Designer Pro 3.0.6 — new Image-Workflows and Style improvements

By | Company, Mail Designer | No Comments

wood-coffee-laptop-hero-7094-2

Autumn is a golden time of year. A perfect time to cuddle up with your Macbook and let your creative juices flow. We hope that our newest update for Mail Designer Pro 3.0.6 inspires you to create even more amazing newsletters. We’re happy to announce that as of today you can download the Mail Designer Pro 3.0.6. The new version has a lot of improvements for creative professionals.

NEW: Replace Image

We’ve all been there: You’ve designed a great header image with the perfect font, logos, call-to-action button – everything. Then your clients asks you to change the background photo for something “more fun”. Ugh.

Introducing ‘Replace image’ – simply swap out any image for a “better” one, while keeping the size, position and layout of the original.

It’s easy to replace the original picture with a new one in exactly the same location, with the exact same size as before, and all of the original layout properties of the picture layout block. When you replace a picture, the graphics and fonts remain where and how they were.

bildschirmfoto-2016-09-26-um-15-18-51mdpro_3-0-6_02

Mini Makeover: Style improvement

It’s easy to lose track of everything when you use a lot of styles. You guys have told us what you like about styles and what needs improving: First off, the lock is gone. Next: we’ve improved the indicator that lets you know which style is currently selected. And we’ve also fixed a few bugs that could occur when switching between styles and ’No style’ text. And we’ve also removed the confusing ‘All emphases’ option – simply select all text and hit ‘Remove’ instead.

bildschirmfoto-2016-09-26-um-15-24-06

 

Additional Improvements

  • Shadows are exported correctly
  • The color picker has been improved and we’ve fixed some color profile issues that could lead to colors being slightly off
  • You can now hit Shift+Return to inert a simple line break instead of starting a new paragraph
  • Resizing with modifier keys works like in other apps
  • An issue that could cause exported PDFs to cut off has been fixed
  • Alignment guides are now underneath layout block edges, so they aren’t accidentally selected when you’re trying to adjust your layout

Let us know if you have any comments or thoughts on the new update! Your Mail Designer Pro Team

 

Get ready for our Mail Designer Pro 3.0.5 performance update

By | Mail Designer | No Comments

mdp-blog2_03-1

Nǐ hǎo – We’re excited to say that as of today you can download the new Mail Designer Pro 3.0.5. #GoChina! Our developers are pleased to announce that the new Mail Designer Pro is now also available in Chinese! But that’s not all. We also pushed the performance of our design engine and added some two new useful shortcuts.

All the changes:

· New: Hit ⌘ N to instantly start a new blank design
· New: Placeholders for Apple Mail
· ⌘ K is now the default shortcut for creating new text links
· Mobile device previews now correctly reflect web font support in Gmail
· Clarified how placeholders work with MailChimp and Campaign Monitor
· We now show a hint on how to accurately preview your design in MailChimp
· Fixed an issue that could cause really wide layouts when adding layout blocks
· We’ve fixed an issue with image backgrounds in Apple Mail
· Improved support for macOS Sierra Public Beta

We can’t wait to see what you create with Mail Designer Pro 3.0.5 (download here).

Team equinux

P.S. If you like Mail Designer Pro, please take a moment to rate it on the App Store – it really helps us out, thanks!

Mail Designer Pro 3.0.3: Set the scene with logos, links, and sales deals

By | Company, Mail Designer | No Comments

How the new Mail Designer Pro 3.0.3 update perfects your newsletter Design

The hotter the weather, the hotter the features. With the current Mail Designer Pro update, users can look forward to 3 new productive features.

Brand new layout blocks for headers with logo and navigation menu links

Feature your most important links in the header of your layout as you would on a webpage: It’s easy to do with the new layout blocks. Just add your logo on the left and next to it your important links, such as contact, store, etc…

MDP_3.03_LayoutBlocks

Strike! Use strike-through formatting on your text – perfect for sales prices and other eye-catchers

Perfect for sales prices, showing the old price with a strike through it. Just select the desired text, chose the Strike function – done.

MDP_3.03.Strike

More space for your Design: Paragraph spacing

Set the amount of space to leave before and after your text paragraphs – for nicer formatting and improved readability. You no longer need to work with placeholders before and after your text layout blocks.

MDP_3.03_Spacing

The new Mail Designer Pro 3.0.3 is now available for download.

The Mail Designer Team looks forward to your feedback and suggestions for new features.