Bulletproof email buttons

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 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. Fortunately, there is a large selection of HTML email templates available for purchase at very reasonable prices. Metro – $18 Market – $18 Karma – $15 Oceanic Email – $16 Modern Business 3 Light – $15 Corporate Newsletter Template V1 – $12 Versatile Newsletter 2 – $15 Rich Typography Email Template – $9 Elegance – HTML Email Template – $10 Storesletter – $15 Leaf – $16 Business – $18 Modern Business 4 HTML Email Template – $10 Clean Mail – $17 La Mode – $15 Mobilized-1 – $18 Shop News Email Template – $18

Prism Effect Slider with Canvas A tutorial on how to create a slider with a "prism" effect using HTML5 canvas globalCompositeOperation and a layering technique. From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform. Today we’d like to show you how to build a simple slider with an interesting “prism” effect. The idea is to place a shape in front of the slider and “reflect” the images of each slide, in order to create the illusion of a prism. The demo is supported in all major browsers, including Internet Explorer 9. The Technique The technique used to create the effect is actually pretty simple: first we’ll load and render the mask, which could be either an SVG or a PNG image (the important thing is that it has to have transparency), then we will render the slide’s image and apply the globalCompositeOperation. The ‘globalCompositeOperation’ canvas property lets you define how an image should be drawn over another image. The HTML and CSS The JavaScript

Les astuces pour coder un emailing sans s'arracher les cheveux Coder un emailing c’est… tout un art. L’art de faire en sorte d’écrire du code HTML lu de la même façon par tous les mailers dans tous les navigateurs. Ce n’est pas mission impossible, mais il faut savoir ce qui passe et ce qui ne passe pas, et connaître quelques petits « hacks » pour corriger certains bugs d’affichages. C’est après m’être arrachée les cheveux pour savoir comment supprimer l’espace blanc de 3px qui apparait entre deux images avec des liens dans une newsletter que j’ai décidé d’écrire cet article ou je vais recenser toutes les astuces à connaître. Je commence donc avec cette histoire d’espace blanc entre deux images : Problème de code newsletter : espace blanc entre deux images avec des liens Il arrive de devoir découper une image en plusieurs parties pour pouvoir mettre deux liens différents derrière, et compter sur le fait que les deux images se touchent pour que le découpage ne se voit pas. La solution : ajouter l’attribut style="display:block;" à votre image.

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. These techniques will not only allow you to display mobile-optimized images throughout your designs, but ensure they look crisp at any width. 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 Let’s see how this is done. So let’s put it all together.

How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition. From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform. To better explain that title right off the bat, here’s what we’re about to learn, and it’s easier than you think. Give it a go, change the shirt from yellow to blue by using the color picker in the bottom right corner: You can see another example of this in the demo Color this sofa! Imagine this for a second: You’ve finally done it, over the summer, you and a buddy are about to launch your screen printing start up out of your shared house, it’s not much, but you have a working setup and a few local bands and non-profits have already shown interest. You’ve seen this often happen online, and the solution is almost always a picture of one color, and little dots that represent the rest of the options. JavaScript

Foundation for Emails 2 Docs Getting Started There are two ways to get started with Foundation for Emails: the CSS version and the Sass version. The CSS version is a ZIP file download with all the HTML and CSS you need to get started writing an HTML email. Get Started with CSS Version The Sass version gives you more control over the visual styles of the framework, and a full build process, which includes a Sass compiler and image compression. Get Started with Sass Version What's in the Box? Get to know the pieces of Foundation. General Components 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.

Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items Easily manage projects with monday.com Let's say we wanted to have something like this: At first, this doesn't seem too complicated. We start with 12 numbered items: - 12.times do |i| .item #{i} We give these items dimensions, position them absolutely in the middle of their container, give them a background, a box-shadow (or a border) and tweak the text-related properties a bit so that everything looks nice. So far, so good: Now all that's left is to distribute them on a circle, right? The result seems fine at first: However, on closer inspection, we notice that we have a problem: item 11 is above both item 0 and item 10, while item 0 is below both item 1 and 11: There are a number of ways to get around this, but they feel kind of hacky and tedious because they involve either duplicating elements, cutting corners with clip-path, adding pseudo-elements to cover the corners or cut them out via overflow. So, what's the best solution then? 3D to the rescue! Let's tackle these issues one by one.

Emailing : comment attirer l'attention des consommateurs ? Les Français passent de moins en moins de temps sur les emails et préféreraient des messages plus informatifs que promotionnels, révèle la dernière étude d'Adobe sur l'utilisation de l'email par les consommateurs. Changement d'habitudes en matière de messagerie électronique : selon la troisième enquête annuelle menée par Adobe auprès de 3 000 cadres européens, avec un focus sur la France, les consommateurs passent de moins en moins de temps sur leurs emails. Avec 5,1 heures par jour consacrées par les Français à la lecture des messages électroniques (contre 6,5 heures en 2016), l'exigence, pour les marques, de se démarquer pour être lu s'accentue. D'autant, que les consommateurs affirment préférer les emails informatifs aux messages commerciaux (promotions). L'indifférence face à la consultation d'emails ? L'ordinateur reste le device privilégié pour consulter ses emails personnels et professionnels (85 %). 74 % des emails professionnels et 60 % des emails personnels sont ouverts.