Hi anonymous question asker. Bad news for the designers out there: not much.
Emails have the digital capability of a sausage. They are literally stuck in the past as vast swathes of the market are still stuck on old versions of Outlook which uses a version of Word to render rather than a browser. As such only basics really work easily.
Adding for example a gradient background means that any text over that area would need to be exported as an image rather than as live text, obscuring it from view on email clients which require you to turn on images to view and also makes this a design job each time for any changes to the email rather than simple html text changes
Background images don’t work. Extending things 100% width to section it out doesn’t work (as evidenced by your current emails which have horizontal scroll bars on Outlook)
Whilst you could argue that certain styles like a drop shadow could be applied to the foot of each section only to more capable email clients. With a responsive email design you are adding in a far greater margin for error with how the email handles in the hundreds of email clients available. Increasing QA and build times exponentially.
After having tried all these things previously I know from previous results that they have little effect to CTR, they generally just create headaches.
Animated gifs may add a bit of pizazz but again Outlook won’t render the animation showing only a static of the first frame so any essential messaging/CTA needs to be on the first frame, also Outlook will probably initially block images. Apart from this, support is actually pretty good for animated gifs and may be the clever way of adding in a differentiation that can be handled at design stage without adding to much time at build. Asos are using this technique quite a bit for their product emails but I can see this being more appropriate to their needs as it allows you to see different shots of products without increasing length. I haven’t any stats to show the effectiveness of this techniques yet. Here is a url about it though with words written by someone probably cleverer than me:
As always, for me it’s more about about a compelling subject line, offer copy and simple postcard style email with less distraction anyways to not waste the users precious time & push the users to the conversion goal with all of this verified via A/B testing
 As you may have guessed, this is a response to an email that came in at work. Having concluded writing it I obviously thought these opinions may be useful later on.
I’m as guilty of doing this as anyone else that claims to be a UX designer:
That little asterix, usually accompanied by some little text. If you’re real lucky it appears at the top of the form, if you’re medium lucky it’s at the bottom but it is there. Unlucky users will get nothing.
Why is this important?
It’s just one of those esoteric symbols that we that work in the tech world take for granted. “They’ll know that fields required, it’s got a red asterix” and yeah, potentially for the relatively internet savvy that is true.
Unfortunately the world is not full of the relatively internet savvy and that little red asterix has got to the point of an afterthought nowadays. We add it as a check to ourselves, “yep that form is clear and simple now” but for so many people it’s really not. As anyone who has wrestled with bad forms before knows It adds friction to a journey and can be a conversion killer. Couple it with non-existent live in-line validation & the user may not know until the end of the process that they missed a required field. As much as we may slave over that form, no one wants to fill in forms; they are boring, they are a means to an end and your asterix may be stopping me from getting to that end, or buying stuff, whatever your goal is.
This is a simple one, just write (required) after the field label.
If you want you can set it in small text, you can italicise it, you can colour it red.
Whatever. It doesn’t matter (actually, all of those things will probably help the user notice it). The easiest way to let a new visitor know that that field is required is to simply tell them with a word.
If anyones curious about what you can do within the constraints, attached is a UI I’ve done (not connected up at the moment though). Notifications in the infographic illustrate what it’s like to design for. Elements are full width (there is a special grouped element that allows you to add to elements into a line) and limited in styles.
Custom fonts are supported but not massively recommended at this time as I understand. A lot of black is recommended (the OLED screen saves power by not powering pixels when set to black which apparently makes for far deeper and richer colours).
Modal/scroll view and hierarchical views are about all the view methods you have but seem the most appropriate. Of course all code is ran on the phone rather than the device but this is something I expect to change when Apple rolls out the next version of watchKit at WWDC
TLDR: the way our eyes look at things, users see the terminal area or the bottom right corner of a rectangle/square the most. The diagram attached shows how we do this. It’s a familiar pattern; I instantly remember it from my DM days. That was where we put CTA’s on 2 page spreads an’ that as it converted better.
Anyways, was just perusing the apple site and noticed their product pages now have a persistent window footer with the CTA in the terminal area. I assume the CTA would be appropriately coloured in blue or similar if the button was clickable. At this time the page is a kind of a marquee landing page, the other Macs don’t seem to share the same style product page according to my quick few clicks around.
Interesting idea and wouldn’t have thought twice about it if I hadn’t just read that article this morning. This could be a very good UX pattern to nick. We did a persistent top bar CTA for the last two commerce things I’ve done but that was at the top of the page and I can’t remember whether they made it past my wires. But it is true for me. I do see that CTA down there more than I look back up at the top of the page.