it's been a while since i could post a "your email sucks" post. either people are reading my blog or people are getting better training on email design and coding. in the interest of my own vanity, i'm going with people are reading my blog.
this week though i got one that is just all kinds of wrong...
let me admit this, it's no secret if you know me outside of social media and blogging circles that i have a thing for oakley. i don't know what it is, i just like the style and the design of their products, lord knows i'm not their target demographic of "active life-styler" but like so many in our field i can appreciate good design and good products. so that's why this blog post pains me. something dear oakley went way wrong with communication.
 |
| oakley, we have a problem. |
next i went to the desktop version to view this, thinking they couldn't have honestly produced such a poorly rendering email. guess what, same thing. this is one of those cases where you as the email marketing professional just hangs your head in shame and sucks it up and moves on.
so what went wrong?
without looking at the code, here are some possible scenarios that went wrong:
- the obvious, some one came to the design team/coder/marketer at 3pm on a friday afternoon and said "this has to go out today". this was rushed through and as i always say, "lack of planning on your part doesn't constitute an emergency on mine" (fyi, this saying flies in the office once; twice if your lucky, so use it sparingly).
- aside from someone wanting to hit a deadline for a product announcement, there are other things that could have been fixed with this email. sure the graphics are pretty, and well done, but if they would have just removed the graphics at the far right hand side of the email, it wouldn't have been half bad. the email would have been a width that is consistent with mobile friendly design, and would have passed muster.
- the dreaded "why does gmail put space under/around my images?" conundrum. this exists, swear to god. but the fix is so simple that once you google it you're like honestly why didn't i think of that?... the fix is to add a style to the image, display:block;, that fixes most issues with sliced images and extra space. (yeah, face-palm on that)
- adaptive design... just a few days ago i told some one that all of the big esp's are preaching "adaptive design" and i said yeah it's important but if you're doing it for the sake of doing it, it's like drinking kool-aid without the sugar. as i was playing with this one to do the screen shot, i noticed that things were "adaptive". text became smushed up, images were closer and things like that. this is a case where the code for the adaptive design was just wrong. it caused the design to go bad.
how do you fix something like this?
well, after the send, it's too late. (how many times have you been asked by a email stakeholder, hey i know you just hit send, but i the date for the event is wrong, can you recall it?) all of this could have been fixed in the testing stage.
people come on, test your emails! and no i don't mean with litmus and returnpath or that it looked good in the esp when i set this up to go.
- if you're coding emails from hand, use the design view in dreamweaver to look at the basic rendering, then view it in multiple browsers, you can quickly catch most wrong things in your browser - if you are coding an adaptive design, make sure you use a browser that supports responsive design and media calls.
- set it up in your esp, use the preview mechanisms in that tool
- send it to litmus or returnpath and see how it renders
- send the email to yourself, send it to your phone, send it to your tablet, send it your outlook, send it to your gmail, send it to other addresses at isp's that make up your send list. email is free people, use that to your advantage
- finally, develop code and wireframes that works for you and that is scalable and that is at your comfort level
0 comments:
Post a Comment