Wednesday, 11 June 2014

I've been busy in the lab...

I haven't posted here for a while - I will remedy that soon - I have however, been fairly active posting some email techie type stuff here:


Check it out when you get a chance and let me know what you think.



Friday, 2 May 2014

Harvey Nichols: top of the class

Harvey Nichols

Subject line: New In: Paul Smith, Lanvin, Givenchy, Katie Eary and J.Lindeberg

View original email here: http://michaeljohnragan.com/examples/harvey_nicks.html

This email I received from Harvey Nichols caught my eye as a great example of "best practice/best in class" email marketing.

From the subject line with the most valuable word in product marketing: "new" and name dropping, to the very effective pre-header wish/command "make them yours" and the defensive design techniques used, this email demands to be opened.

Here it is with images blocked (or view original and block the images in your browser if you are feeling really motivated):




The mix of alt text, live text and block colour is a great way to convey an impression of the email even before the recipient has decided to download the images or not. This reinforces the minimal feel to the email when images are displayed in full, reflecting the brand image.

I like the monochrome header and footer and this muted palette allows the products to rise to the surface and sell themselves. 

The email is responsive (adaptive) and stacks neatly into 2x2 blocks maximising user experience for mobile devices. 

"Top of the class, now jump off" as my old Geography teacher used to say almost every time someone got a question right, oh how we laughed (we never did, not once).

Thursday, 10 April 2014

Mothercare for some CSS bubbles, sir?

Mothercare

Subject line: From little paddlers to mighty swimmers.

View original email here: http://michaeljohnragan.com/examples/mothercare.html

Open this email in a half decent browser and wait for a few seconds... You will then see some bubbles floating up and effortlessly glide over all the HTML elements. 

Visually, this is a very appealing way to focus the eye, just as it feels as though the recipient might be eyeballing the entire email and scanning for relevant content. This kind of mechanism could be interpreted as "a distraction" by the naysayer,  but truly, if the reader is engaged in the content then these bubbles can't hurt, they can only help in the mailclient/scenarios which will actually accept these animations.

This idea of subtle shapes moving seamlessly over the email main body create a perception of depth and interest even to the point of scrolling to "find out where the bubbles are coming from". A well executed concept - I particularly like the little touches like reducing the bubble amount for smaller screen sizes and from a code point of view, how they have envisioned the table align structure and left some space for expansion without overcomplicating matters. 

Good job Mothercare.



Monday, 31 March 2014

MailChimp "responsive ascii art" email...

I've seen it all now.*

Have a look at it though; resize your browser window, it's glorious:
http://michaeljohnragan.com/examples/plainwrong.html

One of the joys of this email is in the selectively hiding pieces of the puzzle, so that when it reconnects on a smaller screen, it still makes a meaningful shape.

Controlling the way text looks in HTML email to this level of precision is quite a challenge.

When I had a look at the code, I expected to see lots of <pre> but instead I saw a mega font stack of about 14,000 fonts, white-space:pre-wrap; shennanigans and non-breaking space + span tag city. I also saw role="presentation" which I think might be something to do with helping screen readers to avoid the ascii art. I'm not entirely convinced that this will render as intended in a few of the usual suspects, such as Outlook which could probably be fixed with a conditional statement or 2, but who cares?

As an aside - this is yet another one of those "2 doctype emails". Does anyone know why?

Sign up for the newsletter here and also see the archive (some really interesting content, well worth a look) http://www.theuxnewsletter.com/

* I haven't.



Wednesday, 29 January 2014

Gmail image caching: death of pixel art in email and something more sinister?

Gmail no longer blocking images from December 2013 did get some e-marketers in a tiz over the festive season. Seems that Gmail is always doing something to rattle the digital cages out there: remember "tabs" and how much of a "thing" they were? Or still are? I forget. 

There may be implications down the line as images are now pushed through Google’s own secure proxy servers. In the present this means faster, cleaner, neater email, in the future this could mean disempowerment like this and this. Google plays the long game, and is looking to have total control of your inbox. That's a big task, good luck I guess.

On the plus-side, "image blocking" always meant Gmail was allowing subscribers to open emails without downloading images - if they choose - and so not been tracked as open. This auto images on approach may actually "improve" the metrics. More registered opens is great, but the overall impact must be small and a new baseline can be set. 

So marketers are peeved at the potential tracking pixel shenanigans and loss of some metrics such as true "total email opens" apparently, but perhaps have had their lizard brain quietened by the promise of "increased security" (no comment) and the designers are ecstatic that their lovely designs get displayed de-facto.  In fact almost everyone in email design land seems to be happy with this apart from me. I am one of an odd few email developers who like to make pixel artwork specifically for email, which is only shown when images are blocked. Gmail & FireFox was my favourite combination to test with and could get some really nice looking results. With gmail no longer blocking the images by default, a decent chunk of the target audience now will no longer see it. Advanced defensive design techniques are still valuable, but this is a reminder that one day they may ultimately be 'rendered' useless. (Sorry for the pun, I can't help myself).

This is a huge nail in the pixel art coffin. Remember Mozify? How we laughed (no offence) that is/was no threat to the highest level of defensive design techniques. If you want to pixellate and hide something cool in an email, you need to do it properly, applying a filter and serving up a pixelated blurry poor quality version of the hero doesn't cut it (clever as it is).

Same goes for using a "pixel art creating tool" - too many flaws, even the "good" ones! Pixel art is hand made for a reason, its part of the charm. But this? This is bad news. I have a gmail account, and I used to look forward to getting any pixel art emails through and seeing them in all their glory. Sure Outlook still blocks and some android but really, its making me wonder if its really worth doing it anymore.

I wish Gmail would stop tinkering with this stuff and sort out the real problems like: the Gmail app so it handles media queries and stops overcomplicating mobile email. Whist I'm at it, it could try to be a little more robust and forgiving in rendering HTML structure. And stop messing with doctype and outright ignoring CSS for no good reason. Stop making links blue because you want them to be. And hurry up and support some more tags like <video> and generally, just stop being so bloody *annoying*.


Further reading:
https://litmus.com/blog/gmail-adds-image-caching-what-you-need-to-know
http://arstechnica.com/information-technology/2013/12/gmail-blows-up-e-mail-marketing-by-caching-all-images-on-google-servers/
http://blog.wordtothewise.com/2013/12/gmail-deploys-image-proxy-servers/
http://blog.mailchimp.com/how-gmails-image-caching-affects-open-tracking/

Post essentially predicting the limited future of pixel art:
http://www.mediapost.com/publications/article/216345/an-email-carol-ghosts-of-predictions-past-presen.html

Thursday, 16 January 2014

I'm Lovin' It.

McDonalds

Subject line: The Big Tasty returns to McDonald’s

View original email here: http://michaeljohnragan.com/examples/Mcdonalds.html

This email was forwarded on to me today, and its the first time I've seen the impression of "responsive" pixel art in action. I have played with the idea in the past, essentially by drawing 2 elements and simply hiding one of them, but it's nice to see someone actually considering how the pixel art will render in mobile.

These guys have taken a slightly different approach. They have just built 2 emails, 1 desktop and 1 mobile, so its not technically as impressive as it could be (and doesn't look so great in gmail app etc) but still does the job.

Kudos to them, think it looks good overall - I think I prefer it in the mobile in fact.

With images blocked (desktop):





With images blocked (mobile):


Sidenote:
I find the <!-- (c) McDonald's 2013. All rights reserved. --> in the HTML comment at the top of the code quite an amusing counterweight to the fun nature of hiding something in the code. Rather ruins the potential 'hipsterness' of it all (reminded with a bump that it is McDonalds after all). Part of the charm of pixel art is that it is hand-made, like a stamp of authenticity - incidentally another reason why pixel art 'generators' don't cut it for me. It shows that the brand is prepared to be playful and creative so to somehow stamp a completely unnecessary "copyright" on the code is a bit off - its not even on their website source, so why put it on an email?

Friday, 22 November 2013

The difference between Responsive and Adaptive email

This is a very common question in email marketing land these days. One that I have seen answered both badly and worse-than-badly recently - so I'll have a go at being succinct using a picture and a swear word: