We recently had a client ask to use the Open Sans web font in an email campaign, which we eventually got working, so I thought I’d share the process. The client has a large amount of mobile users, so the priority was to get support in Android and iOS. In this case, the font had to be used for branding reasons, but using web fonts in email could be a useful technique to help avoid building text (especially headlines) as images – this both helps images-off performance and also saves many a responsive headache.
However as HTML 5 starts to be supported by email clients and web browsers, it opens up the doors for a much richer experience for the user, and allows marketers to experiment with things like scrolling product boxes, and video & audio with controls.
Recently different email client providers have been moving towards supporting this type of technology, particularly webmail clients, who have been adding HTML 5 doctypes to their pages (this was behind the recent Gmail/Firefox issue). This week’s announcement by Yahoo Mail builds on that – as they’ve just announced a beta version of their new HTML 5 Mobile Webmail for iPhone and iPod touch.
If you’re on an iPhone or iPod touch, you can access the new beta by visiting http://m.yahoo.com/mail and tapping on ‘Preview the new Yahoo! Mail’.
Looking at the beta on an iPhone 4 really shows what HTML 5 is capable of, and where email clients are going – it’s exciting!
Above: this is the inbox view – you can see a carousel of photo thumbnails, which have been rotated and had a drop shadow added. You can gesture left and right to scroll through photos. These are custom published, so these are from my friends on flickr.
Below: Here’s what’s really clever – when you click/thumb an image it opens into a nice lightbox style preview: