Designing for emails

By February 6, 2015Email Design, Graphic Design

Email design is a tricky thing to do. There are many more limitations with it than there is for web design or mobile design.

Email design is pretty old school and uses tables for design. Meaning anything you design has to be contained in a square and nothing fancy an be applied to the styling. So any gradients and drop shadows are a no. Unless you were to make that area into an image.
Your font choices are also limited to web safe fonts like arial, times new roman, helvetica etc. If the design is to contain real text you will have to stick to those fonts and make sure text and image/styling do not overlap as this isn’t plausible in most email clients.

There is also the choice of having the email designed to a responsive layout, meaning many more limitation. You want real text otherwise when your text is scaled down won’t be readable. Then there is the issue of how it will look when your design stacks down onto mobile.
Pixel dimensions for a responsive email template is 580px for non responsive designs you can have it designed at 700px wide. I generally have a 10 pix bleed on each side when designing. There is an example of this further down in the article.
There is a difficult balance between image based email design and desktop designed. For example you could have something like this:
Evernote-Camera-Roll-20150122-075945
Designed for desktop but barely legible on mobile. It looks stylish but misses the points on not being a responsive design.
Whereas something like this:
Evernote-Camera-Roll-20150122-080201
Works reasonably well on mobile. It contains realtext larger imagery and large font styles. It’s a good balance between image and text.
And when it comes to designing email templates for clients you’re very limited on what you can do creatively. You can design them something nice and they turn around wanting something else entirely to what you’ve discussed ruining the functionality of the design.
Here are two examples of well done desktop emails.
Screen-Shot-2015-02-06-at-13.42.54 Screen-Shot-2015-02-06-at-13.42.32
The UXPin design hitting all the right markers as they are a tech based company and know how to engage with their readers. By the look of it it seems to be all text based (apart from the obvious images in the design).
The ticket factory has too much information on it to be of any real interest. Yes it works, no it is not an engaging design. Sending out separate newsletters catered towards the receiver would’ve been more beneficial.
Here is an example of how I’ve designed emails in the past:
 Screen-Shot-2015-02-06-at-13.50.39
Almost all of this is sliced out as images, I work with the developers to make sure they get the correct size so these can work in a responsive design. The banner gets sliced into 3 parts, the part peaking out from the header, the header itself, then the rest of the banner. The next area is kept as real text and then the 4 Call to actions (CTA) are all sliced out as images. It would be doable to have it as image an text but from what I’ve seen it tends to get tedious and complicated.
Shaz

Author Shaz

More posts by Shaz