So, thrilled to be back actually coding emails rather than copying and pasting, churning out what can only be described as spam. And coding Device Responsive email at that, happy days.
So yesterday, I was struggling over a small bit of code; for the desktop version they wanted a paragraph of text followed by a CTA, on mobile they wanted the CTA before the text.
So having dismissed the idea of being able to make the two elements switch places, I started doing what I’ve done successfully before; having 2 versions of the button, one that appears on desktop but hides on mobile, the other appearing on mobile, but hiding on desktop.
However, the button was not just an image of a button, oh no, we do things properly here. This button is a combo of a background image (yes, you read that right), a gif, and text. Where before I’d easily been able to hide the table that the image was in, this combo of elements was proving to be more tricky. I managed to make it work on everything (according to Litmus) except for gmail, both desktop and mobile apps. On gmail, all elements were displaying.
I tried hiding everything within the CTA, the <tr>s, the <table>s as well as the <td>s and <img>. I even wrapped everything in a <div> and tried to hide that. I scoured google, found various ‘fixes’ that didn’t work. I sent out SOSs on Twitter, and received opinions and comments of “can’t be done on gmail”. No! I refused to accept that. I eventually did get some promises of help from two email gurus (@iamelliot and @omgitsonlyalex). And with that, I packed up my stuff and got on a train back to London.
Sat on the train, gazing out of the window at the beautiful Surrey hillside, my mind started to wander. I started debating visibility styles (crazy, I know), then I did what I should have done much earlier. I stopped thinking about how to hide the button, and went back to the original problem. As I started thinking about how to make the two elements ‘switch’ I went back over how I’d done similar things in the past. And suddenly it hit me, the solution to the original problem (not the new complicated problem I’d created) was so simple and obvious, I swore out loud. I then swore on Twitter to avoid being thrown off the train. but it didn’t vent the frustration that had been building all afternoon. If only I’d taken a break earlier on in the day, stepped away from the problem, gone back to the start.
I guess that some of you reading this will probably have already thought of this solution, probably right back at the start, then read the rest of this wandering what I was thinking of following this train of thought! For those of you who haven’t figured it out yet…
If hiding a block of mixed elements was too problematic, don’t do it. Hide the block of text and duplicate that instead!
So to clarify instead of this:
Row 1 -CTA (hidden on desktop)
Row 2 – text
Row 3 – CTA (hidden on mobile)
Row 1 – text (hidden on mobile)
Row 2 – CTA
Row 3 – text (hidden on desktop)
Now I don’t know for sure if it works yet,as haven’t implemented it, but I do. I just know it will!