{"id":2368,"date":"2015-12-10T21:08:37","date_gmt":"2015-12-10T21:08:37","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=2368"},"modified":"2016-11-28T03:31:30","modified_gmt":"2016-11-28T03:31:30","slug":"burberrys-interactive-scarf-personalizer","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/burberrys-interactive-scarf-personalizer\/","title":{"rendered":"Burberry’s Interactive Scarf Personalizer Email"},"content":{"rendered":"

\"burberry-side-by-side3\"<\/a><\/p>\n

Burberry sent a really slick kinetic email campaign featuring a 3 step interactive scarf personalizer. The email allowed recipients viewing the email on a webkit based email client<\/a> the ability to select a scarf and then view a preview of the scarf with the recipient’s initials monogrammed on the scarf.<\/p>\n

Needless to say, I was blown away. This was by far the most sophisticated interactive email I’ve come across so far.<\/p>\n

Check out the email here<\/a>.

<\/p>\n

Step 1: Selecting the scarf type<\/h4>\n



<\/p>\n

\"burberry-step1\"<\/a>

<\/p>\n

The initial screen displays a 3 step progress bar at the top giving a strong hint to the recipient that this email may be “more than meets the eye”.<\/p>\n

Under the progress bar features two animated scarfs with a “Classic” and Lightweight” button above each of them. What’s interesting is that the animated scarfs consists of 20 frames within a single jpeg “sprite sheet” and the animation involves sequentially shifting the frames within view using the background-position style. The mobile sheet was 275KB and the desktop version was 517KB – the file sizes are probably smaller than equivalent animated gifs with higher color fidelity to boot!<\/p>\n

\"burberry-sprite\"<\/a><\/p>\n

Here’s an interesting article explaining sprite sheet animation <\/a>using the steps() function.<\/p>\n



<\/p>\n

Step 2: Selecting the scarf pattern<\/h4>\n

\"burberry-step2\"<\/a><\/p>\n

This screen displays an animated scarf chosen on the previous step. The recipient can then select a pattern. The user can return to the previous screen by clicking on the progress bar or the “Choose Again” button.<\/p>\n



<\/p>\n

Step 3: Viewing the monogrammed scarf<\/h4>\n

\"burberry-step3\"<\/a><\/p>\n

At this step the recipient is given another surprise. The recipient’s initials are shown monogrammed into the selected scarf! The recipient can then click over to the Burberry website to purchase the scarf.<\/p>\n

The technology behind the monogram is done using Adobe’s Scene 7<\/a>. Personalized or “on demand imagery” have been around for a while, but whats so cool about this example is just how realistic the monogram looks. <\/p>\n

\"burberry-monogram\"<\/a><\/p>\n

Try it yourself by visiting this link<\/a> and changing the last two letters at the end of the URL.<\/p>\n



<\/p>\n

Kinetic campaign of the year?<\/h4>\n

I have to say I’ve come across quite a few impressive campaigns that integrate interactivity and CSS animations but this email takes the cake for sheer technical execution.<\/p>\n

Thanks to Jim Maddock<\/a> for sharing the example!<\/p>\n





\n

\n
\nSubscribe to the #EmailGeeks Newsletter<\/span>\n

<\/p>\n