24 hours of code

Standard

Hi guys! Yep – you read that title right, I’m going to be coding emails for 24 hours without stopping to raise money for charity. I’ll be live streaming the whole event.

What emails will you be making?

The emails I code will be pre-designed by the company I work for, Mosaic, and coded during the event. This is where I need your help.

The emails that are created will be created for anyone who wants one. All I ask for in return is a donation: it can be any amount. I am aiming to code 10 emails in the 24 hours and I need 9 more people/companies who need emails.

What you get for your donation?

  • A bespoke email designed by Mosaic and coded by me during the live stream.
  • The email set up in your existing email service provider or, if you don’t have one, will set your up in Mailchimp or a similar system.
  • I’ll teach you how to use your email template for future sends via Skype or Google Hangouts.
  • Ongoing support on your email.

If you are interested or know anyone who would be please get in touch at alex.ilhan@outlook.com

24 hours, you say – what are the rules?

Yep – 24 hours straight!  The rules:

  • I can stop only for bathroom breaks (the clock will be paused)
  • The whole event will be live streamed
  • I can stand up/walk around (still on live stream) occasionally.
  • I will stop coding occasionally to post small updates on Twitter.

Who are you raising money for?

I’m still looking for a suitable charity. Any suggestions will be greatly appreciated. I’ve emailed a few tech-based charities and I’m waiting for replies.

Will I be able to sponsor you?

Yep! Once I have the website for it set up you’ll be able to donate/sponsor me.

If you have any ideas for this event please get in touch at alex.ilhan@outlook.com – I’d appreciate anyone sharing this post on Social Media.

Image swapping on mobile done easily

Standard

Just a quick post, a way of changing images without much hassle.

This uses a CSS pseudo elements. We hide the desktop image and simply use the a:after pseudo element within the media queries.

Stick this into your media queries (Also have a method of hiding images on mobile)

#swap a:after {
content: url('mobile image link');
}

Add this to your HTML.

<span id="swap"><a href="##" style="text-decoration:none !important;"><img alt="alt tag" border="0" src="desktop image link" style="display: block" class="hide"></a></span>

I’ve only briefly tested this on iPhone, let me know how you all get on!

Hidden preheaders – save screen real estate

Standard

There’s been a lot of talk recently about mobile emails. Specifically subject line length, preheaders and how to leverage them both for maximum results. Subject line length varies across mobile devices, as highlighted in this excellent infographic from Mass Transmit, but the one thing that’s for sure is the amount of characters you can use is a lot less than a traditional desktop-orientated email.

This is where the power of the preheader comes in, it allows you to continue your subject line and provides you with an extra chance to entice readers into opening your email. Here’s a random snapshot of my mobile inbox and how five random emails have setup their preheaders:

Preheaders

The negative side to preheaders is the valuable real estate they take up on the screen. For this post I’m going to be using the free mobile optimised template I created as an example. Below is a side-by-side comparison to how both the desktop and mobile version of the email look with and without the preheader.

mobile-preheader

desktop-preheader

Although the difference isn’t huge, it still takes up screen real estate.

A workaround

So, if you would like to use preheaders as a continuation from your subject line but don’t want them taking up space, the solution is simple.

Add this to your area:

<style type="text/css">
span.preheader { display: none !important; }
</style>

And set your preheader up as this:

<span class="preheader" style="display:none !important;">Preheader text goes here</span>

This will hide your preheader inside the email on both desktop and mobile clients while still displaying in the inbox.