background preloader

A Responsive Email Framework

A Responsive Email Framework
We know building HTML emails is hard, especially responsive emails. That's why we created Foundation for Emails. Get away from complex table markup and inconsistent results. Email marketing is good for your business. Common UI Patterns to Build Faster You can use these UI patterns in your designs to quickly get your email into shape. Emails that work in all of the major clients, even Outlook There’s no need to worry about inconsistent spacing and odd rendering issues with your layouts. View our compatibility chart → The ZURB Email Stack will make you an email pro Upgrade your email workflow to save time be more efficient. Learn more about the ZURB Email Stack → Inlining CSS is was a pain It used to be that every time you had to make a change to your email, you had to copy the contents, open the inliner in your browser, paste it in and inline. Check out our web inliner → Related:  NewsletterEmailing

The Fab Four technique - Responsive Emails without Media Queries The Fab Four technique to create Responsive Emails without Media Queries I think I found a new way to create responsive emails, without media queries. The solution involves the CSS calc() function and the three width, min-width and max-width properties. Or as I like to call them all together: the Fab Four (in CSS). The problem Making responsive emails is hard, especially since email clients on mobile (like Gmail, Yahoo or don’t support media queries. That last approach has been my favorite so far. Once all the blocks are stacked, they don’t take the full width of the email. I’ve been looking for ways to solve this problem for a long time. A solution Remembering width, min-width and max-width On top of the calc() function, the solution I found involves these three CSS properties. If the width value is greater than the max-width value, max-width wins.If the min-width value is greater than the width or max-width values, min-width wins. (Answer : the box would be 480px wide.) Demo

MJML - The Responsive Email Framework Creating Email Newsletters That Convert Do you send an email newsletter to help drive sales and revenue for your business? You’re not alone. In fact, according to our own research, email newsletters are still one of the most popular types of email campaigns marketers send. But do you know the different elements to include in your newsletter to get the best results? If not, you could be missing out on valuable clicks and sales. In this post, you'll learn you 6 key elements to include in your newsletter to help increase conversions and drive more sales & revenue. What is an email newsletter? An email newsletter is a regularly distributed email campaign that is generally about one main topic of interest. Our own monthly newsletter is an example of this. It’s sent on a regular basis (every month) and contains links to a number of articles all about a common topic of interest: email marketing. 6 tips for creating a high-converting email newsletter 1. The key to success here is to use a ‘From’ name your subscribers will recognize. 2. 3. 4.

Gmail supporte bien la balise <style> et les media queries – L'intégration d'e-mails Une croyance courante dans l’intégration d’e-mails est de dire que Gmail ne supporte pas les styles ou le responsive design. En réalité, c’est un peu plus fin que ça. En avril dernier, EmailOnAcid rappelait que Gmail supporte bien la balise <style>. Intrigué, j’ai fait mes petits tests, et je confirme : la version desktop du webmail Gmail conserve bien une balise <style> incluse dans le <head> d’un e-mail. … sera transformé en : Le hic (parce que forcément il y a un hic), c’est que Gmail supprime toutes les classes et identifiants au sein du code HTML de l’e-mail. Mais du coup, ça signifie qu’on peut jouer sur des styles ciblant des balises. On pourrait alors imaginer styler des éléments non plus par classe mais par leur position dans le code HTML. Par contre, Gmail conserve bien les règles utilisant des sélecteurs d’éléments enfants ou adjacents, comme >, + ou ~. Mais surtout, ces bidouilles ne concernent que la version desktop du webmail Gmail.

How To Write Addictive Newsletters That Trigger Conversion Building an online presence is more than just creating a stunning website, though this is an essential first step. Every business, big or small, can benefit from a compelling newsletter. This marketing tool will grow your brand, increase followers loyalty, give you a direct opportunity to communicate news and product offers and show clients (or potential clients) what you’re all about. Never created one before? Here’s what you need to become someone’s inbox regular: Wix’s Shout Out application is an amazing tool that helps you create, design and send professional newsletters to your contacts. Headers & Value Let’s start where every good story does, at the beginning. Hey Hey CTA Next is your Call To Action. Brief Good things come in small packages. Clear Again…Clear. Stay Stunning Beauty isn’t only for the pageants. Ready to amp up your online presence?

A Beginner’s Guide: Email Campaigns From Start to Finish Creating an email campaign from scratch can be a daunting task. We're going to cover the basic steps of bringing an email campaign to fruition in this blog. We'll help you get your bearings and plan out the steps you need to complete before you hit the "send" button. First, let's take a look at all the steps that are part of the email campaign process. 1. Step 1 in this process has to be noticing that an email is needed. Or, you may have an idea for a one-time only email. 2. This document is your (and your team's) guide to creating the email. The goal is probably the most important part of the requirements doc. Fill out the tone, voice & person section to help whoever writes the copy make sure that they achieve the effect you were looking for. The subject line is a very important part of an email, some marketers would argue that it's the most important part. Finally, we need to detail the outline. 3. Draft Email Copy Stick to the point. Find Artwork 4. 5. 6. 7. 8. 9. Rinse and Repeat

Want Better Email Conversion Rates? Try These 7 Tips. (Infographic) Email marketing can deliver tremendous results when it is done correctly. It is one of the most effective forms of online marketing -- and that isn't going to change anytime soon. Are your email campaigns performing as well as they could be? Related: 5 Do's and Don'ts For Creating Effective Email Lists My company teamed up with HubSpot to create the infographic below, using the data from the 2014 Science of Email Report. While every business is going to have a different audience and there isn't a single email solution that will work for everyone, this data is great to use as a starting point for your own testing. Click to Enlarge Related: Here Are 6 Data-Backed Tricks for Getting Your Sales Emails Opened Emailology - The Science of Looking Good in the Inbox

Increasing Usability for E-mail Newsletters E-mail marketing has been very popular in the past ten years and it still is, most likely because of its relatively reduced costs, low amount of work required and quite large potential audience. E-mail marketing is a direct way of sending commercial messages to a group of people by using the e-mail as the main and only channel. E-mail newsletters are not always sent because a company needs to sell a product, sell ads or request donations, but is sometimes meant to build loyalty, trust and brand awareness. There are many usability guidelines for e-mail marketers to follow and in the past couple of years the number of guidelines has actually increased, as users request more and more from providers and tend to ignore poorly designed layouts. Time is also an important matter today; more important than it was ten years ago. Subject line What can you learn from here? E-mail marketing: when? In my opinion the key to e-mail marketing is branding. Scanning, not reading Responsive (again) Typography

Insérer une vidéo dans un email : la tendance marketing de l'année Pourquoi n’y a-t-il pas plus de vidéos dans les emails commerciaux ? Poutant, quand on voit le taux de visite de youtube, on sait que la vidéo en ligne n’est pas morte. Une vidéo, c’est simple a réaliser, c’est un contenu souvent de qualité, qui va faire passer votre message et construire votre image de marque de facon ludique. Nouvel article : 5 logiciels d’emailing marketing en français Si chez Webmarketing & co’m, on adore Mailchimp, certains sont rebutés par l’interface entièrement en anglais. A découvrir ici : 5 logiciels d’emailing marketing en français. Pourquoi vouloir insérer une vidéo dans un email ? Déjà la vidéo propose un bien meilleur taux de conversion. Si vous avez besoin d’autres raisons : La vidéo propose une expérience différente. Comment ca marche ? A l’origine, insérer une vidéo dans un email est assez simple. Par contre, tous les clients de messagerie ne supportent pas les vidéos en HTML5. Et alors, comment on fait ?

Email is not Dead Symbols in Subject Lines | Campaign Monitor Using symbols, or emoji in subject lines isn't a new idea. However, now that many of us have emoji-friendly mobile devices and regularly read our email on them, it's become an increasingly popular tactic for attracting attention in crowded inboxes. To see how practical this technique is, we tested out a variety of symbols to see how reliably they display across a range of email popular clients. The Verdict Use with caution! Use with caution! Copy, paste The first point of confusion that folks have when it comes to including symbols in subject lines is how to get them there. Symbol support in popular email clients This copy-paste technique works surprisingly well. With the exception of Outlook 2003, there was near-universal support. Keep in mind that if a character isn't supported in the email client, the recipient will see a ☐ character instead. Finally, we haven't yet managed to trigger spam filters by including symbols in subject lines (and we used a lot of symbols in our tests).

GetResponse Blog - Email Marketing Tips