Progressive email concepts — 2018/19
For those of you who followed all my old blog posts and have seen my talks I used to do a lot with animation, interaction, backgrounds, and talk about progressive enhancement, and so on.
I still do that from time-to-time with the the focus largely being on simplicity and working within design a system, but here’s a few things I’ve made over the last few years which I may or may not have shared, I can’t remember.
I’m not sharing code as significant bits and pieces will have dated over time, but these my give you some ideas for different use cases perhaps.
Icons and Pop-ups
These are all part of a larger range of ‘modules’ we created to work within builds the client already had, which makes life a little trickier but was still a fun challenge. The team did a lot of great design work and planning, and really everything here is pretty subtle, and consistent, despite a lot going on they’re still pretty clean and simple looking.
A lot of what you see here is placeholder content, as that would eventually be driven dynamically. Notice the ‘faded text’ and ticked icons variations, or different coloured icons throughout, which are different based on what the individual account has activated.
The biggest challenge was to get all that same content to work within a mobile space (below), without creating adaptive emails. Not just stacking the icons, but also to keep the content within a relevant space, with a similar functionality.
Fallbacks
The important thing to consider when creating something like this, is the fallback. It often gets left aside until it’s too late. But for something like this I find it’s best to plan ahead, so you have some choices…
A) A completely separate email.
B) The same email with all the same content, just expanded.
C) Design it so it still gets the same message across. The icons fallback back to a consistent style, and a generic fallback message is created to cover what you want to get across.
Below, is a similar variant, but here with the addition of a plus and minus toggles, these are done with sprites, simple because they work easily, and don’t need to be there in the fallback.
And another variant which was the expansion of content from the 2 boxes.
This helped keep the email compact, as although the fallback was as normal email would be with the content for both options showing, and quite long. Interactivity here helps the email be specific, and give both options and equal hierarchy.
Interactive Animation/faux-video
This was a big challenge. Essentially here I am using interactivity to jump between the 2 video animations, so both are playing at the same time and the user swaps between them, until eventually they arrive together at the end, to promote the show.
Overall it’s a little long, but it was a nice experiment to try and mimic the TV spot in a fun way.
Character profile
Fairly straight forward. Click a character, and find out a bit about them in the lead up to the show starting. Spacing and consistency was the biggest challenge here. The pop-up is sitting on a background image, and everyone in a line made mobile tricky and probably pushed bondaries of ideal “pressy pressy thumb size rules”.
Text conversation/Randomiser
I built this while I had a chest infection as it was race against time, and don’t really remember doing most of it, so it’s a bit of blur. Anyway, this went out before valentines day 2019, and the the whole team did a great concept and design job on this.
Creating a fake randomiser, which in turn generated content when selected took a while to get my head around, and then it would have been constant back and forth, adjustments for different mobile screens, and how the animations appear and disappear within the space would have probably been a tedious struggle. (Especially if the feedback was “can you make that appear half a second faster”) because I would have to change everything to accommodate that.
I believe this also had some little easter eggs hidden within it, such asif you click the heart you got a discount or something like that.
Design your own
This was a concept build to demonstrate the possibilities of “if the assets exists” we can do quite a lot. A car here is simply the use case I chose.
I’d done a lot of “faux-video” stuff for animation, and this is basically an animated, faux-video, image gallery,
Guided Tour/Interactive brochure
A concept mock-up again as I wanted to bring create the email version of a digital brochure. From this i’ve gone on to use those circles icons/path progress in a few places now.
Show and Tell done… hopefully they’re useful in some way to someone.
Give me a shout if you wanna talk more about them, or work with us on creating some new ideas, and new bespoke emails for a launch, or theme for example. Or better, perhaps something as part of an email design system, so you can re-use them and still make emails quickly, and consistently.
Cheers,
Kristian
