background preloader

Responsive Email Design

Responsive Email Design
While phone screen sizes have been steadily increasing over the years along with screen resolution, it can be tempting to include more and more images in your emails. But a word of caution: While images can bring an extra wow factor to your emails, images should always be thoughtfully added with accessibility and mobile load times top of mind. In this chapter, we’ll look at some techniques that take advantage of supported CSS properties like background-image. Using background images for better headers Support and the use of background images have been on the rise in the last couple of years thanks in part to increased CSS support utilizing all the benefits that media queries can bring. One benefit of the increased support is the ability to put live text on images. Background images and live text In the past, if you wanted to include text on an image, it was created as a single graphic. Let’s see how this is done. Background images in Outlook: setting up a DOCTYPE

Optimizing your email for mobile devices with the @media query Designing for the mobile web is nothing particularly new - or rare. With pretty much every decent handset available providing the “full web” experience, there are really not a lot of popular sites left that don’t include a mobile stylesheet for small screens. It seems that mobile stylesheets haven’t proven to be quite as popular in email, despite the advantages they provide to devices that make use of the @media query. Lets take a look at optimizing your HTML email for mobile, including the finer points of using @media in Campaign Monitor. Why optimize HTML email for mobile? To be honest, viewing HTML email on a mobile device can be plain fiddly. By creating a separate set of styles to be used by devices that recognize the @media query, you can optimize your emails in a similar fashion to how web pages are being optimized for the mobile today. How does this work? We’ve done it before, but lets walk through Panic software’s example again. Lets walk through this.

The Science of Looking Good in the Inbox CSSHow do I add margins to my image so text will wrap around it? Outlook 2007 and 2010 do not support the margin or padding CSS properties when placed within an image. Try using hspace and/or vspace:<img src=“ align=“left” vspace=“10” hspace=“10” /> Or add the additional spacing to the image itself (in pixels). CSSHow do I make a long text string wrap to the next line? If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style: This is a Microsoft only property so it should not adversely effect other clients. CSSI see a 1px white border around my table cells. If you are using a background color in your table cell, you might see a 1px white border around the contents of the TD. Or you can add it inline:<td style=“border-collapse: collapse;”>... Check out this post from Campaign Monitor for more info. If you are trying to “right” or “left” align multiple nested tables, the fix is a little more involved.

35 Outstanding HTML Email Newsletter Templates Email marketing and newsletters are a critical part of the marketing plan of many businesses large and small. If you’re not already using email marketing for your own business or offering services for your clients, this is certainly an area to explore. One of the aspects of email marketing is the design of the email itself. While text-based emails can be effective in certain industries, most businesses prefer to have a newsletter or email template that will present the message in an attractive way. While most email list managers will offer some free templates and/or a WYSIWYG editor for designing your own email, there may be times when these options don’t meet your needs. In these situations your options will be to design and code a custom template on your own, outsource the work, or purchase a template that does meet your needs. Fortunately, there is a large selection of HTML email templates available for purchase at very reasonable prices. Metro – $18 Market – $18 Karma – $15 Leaf – $16

Un e-mail en HTML responsive multi-clients L'e-mail (ou newsletter) reste encore aujourd’hui un moyen efficace de transmettre des informations à ses utilisateurs ou clients. En mode texte, aucun problème, c'est un standard interprété sans difficulté. En mode HTML c'est un art ô combien délicat en partie dû au nombre de clients lecteurs d'e-mail sur le marché qui ont des comportements bien différents (encore plus désormais que les navigateurs classiques). Cette disparité de l'interprétation des e-mails au format HTML provient de plusieurs facteurs : Les clients e-mails lourds (Outlook, Thunderbird, Lotus Notes...) ont un fonctionnement radicalement différents des webmails (Gmail, Yahoo Mail, Hotmail, Outlook.com...). Mettons fin immédiatement à vos désirs les plus fous : encore plus que le web, la réalisation d'e-mails graphiques en HTML, au pixel près ou presque, sur toutes les plates-formes, est une utopie. Voici quelques astuces et bonnes pratiques pour obtenir des e-mails au rendu proche sur la majorité des programmes.

Bulletproof email buttons | Campaign Monitor Bonnes pratiques communication et marketing: Indicateurs statistiques d'e-mailing ---DOSSIER---Les statistiques disponibles en e-mailing Eu égard à son très faible coût de revient (essentiellement celui du salaire des personnes en charges de la conception et de l’envoi), l’e-mailing est un moyen de communication de plus en plus plébiscité par les entreprises pour effectuer de la prospection ou de la fidélisation de clientèle.Un autre atout essentiel est sa possibilité de suivi statistique. Détaillons-en les différents indicateurs : Le taux d'adresses délivrées Avant de se demander si une personne est intéressée par votre e-mail, encore faut il qu’elle l’ai reçu ! Le taux d’adresses délivrées est l’indicateur de qualité et d’actualisation de votre fichier. Les taux d'ouvertures cumulées et uniques Le taux d’ouverture indique que non seulement le message est arrivé dans la boite de votre destinataire, mais qu’il l’a vu. Concrètement, ce taux est influencé par différent facteurs : Cumulé ou unique ? Coin technique : Comment se calcul le taux d’ouverture ?

10 of the Leading Mailing List Managers Email marketing is a major part of doing business online and staying in touch with your customers. When compared to other types of marketing and advertising, the return on investment is often higher with email marketing than any other method of advertising. Whether you are looking to gain new customers, get more repeat purchases from existing customers, or just to stay in touch through newsletters, email marketing offers plenty of potential. One of the challenges of getting started with email marketing is to find the right service. AWeber AWeber is one of the leading options for email marketing, and it is the one that we use for the Vandely Design Newsletter. With AWeber you can send newsletters to your list, set up autoresponders and a sequence of automatically delivered messages, automatically create emails from your blogs RSS feed, and of course you can track everything with helpful analytics. Another reason that we recommend AWeber is because of their customer support. MailChimp Emma

Related: