Our latests thoughts about things that only matters to us


While a lot of online communication has moved to social media, email is still a very important part of any online marketing campaign. And when we think of marketing emails, what generally comes to mind is HTML email, rather than plain text. Designing for email is much like designing a simple webpage, but there are some key differences you need to take into consideration.

Image credit: artequip


You also need to keep in mind that email is a push, rather than pull, communication. People often get emails at an overwhelming rate, and not always when it’s convenient for them to look at them. That means you have mere fractions of a second to catch their attention before they move on to the next message in their inbox (unlike with a website, which they’ve chosen to visit at a particular time). But as long as you keep that in mind—that you have only an instant to catch your reader’s attention—you’ll have a much easier and smoother experience in designing effective emails.

So many people are accessing email from a mobile device these days (nearly half of all emails are opened in mobile apps), that it’s become pretty pointless to spend a bunch of time designing beautiful emails that don’t display properly on such devices.

After all, if the email doesn’t look right when they check it on their phone, what are the chances your subscribers are going to look at it again when back at their desk? I’d wager pretty slim. In fact, most of them are probably just going to delete the email, or worse — unsubscribe.

There are two ways to go about designing for mobile. You can create emails that resize to fit the reader’s screen, which can be perfectly adequate for some simple designs. Or you can create a responsive email design that will adapt to different screen sizes.

There are advantages and disadvantages to either approach. Emails that resize are fairly easy to code, and will tend to work on virtually any device. But they work best with very simple email designs that can handle being viewed at significantly smaller than desktop sizes.

Responsive designs are much more complex to code, and aren’t supported by every mobile browser (though support is likely to continue to improve in the future).


Responsive designs are likely to be more practical for most of your HTML emails than layouts that simply resize. This is because on very small screens, emails that have simply been shrunk will almost certainly become very difficult to read.

We’ve already discussed why mobile-friendly emails are vital, but here are a few things to keep in mind when actually designing those emails. These are the things that should be triggered for mobile layouts, and can be adapted for the larger-screen versions of your emails.

  1. Your layout should be fairly narrow: somewhere in the range of 500-600 pixels is standard. This will make them more readable on both desktop and mobile devices, with less chance for your layout to go all wonky when it’s resized.
  2. Make sure your fonts are large enough. Be aware of what the minimum font sizes for various platforms so that your fonts aren’t upscaled (which could affect your layout). For example, iOS uses a minimum font size of 13 pixels.
  3. Clickable areas need to be tap-friendly. That means making them big enough and isolated enough from other links so that a user can easily activate them on the first try (because you may not get a second).
  4. Don’t hesitate to use display:none to hide unnecessary elements on your mobile layouts. What is user-friendly on a desktop or even a tablet becomes annoying clutter on a smartphone. Less is definitely more on smaller screens.

It’s worth taking the time to sketch out wireframes for both your mobile and desktop email versions before you start coding. Pay careful attention to where your call-to-action and other important information appears on the mobile version especially.

Typography considerations

While a lot of designers focus on the graphical content of HTML emails, the typography is even more important than on many websites. After all, considering how many email clients prevent images from loading initially, some of your email recipients may only ever see the typography.

Consider using large type sizes for better legibility regardless of screen size. Also keep in mind line lengths on various screen sizes, and make sure that they’re not too long (which can make it hard for the eye to travel from one line to the next without losing its place) or too short (which just makes more scrolling necessary).

Be sure to use headings and other typographic formatting to make your email content more scannable, especially if your emails are more than a couple of paragraphs.

Overall, email typography isn’t much different from web typography in general, besides the previously-mentioned part about it being more likely to be the first and/or only thing your readers see.


There are a lot of different kinds of emails you may be sending out to your subscriber lists (or designing for clients). Each one serves its own purpose, and each one should be designed in a way that best serves that purpose.


One of the most common email types is the newsletter. These often consist of a lot of links, frequently with short bits of text accompanying them, or they consist of longer articles. In either case, there’s a good chance that there won’t be a single call-to-action present, and instead there may be quite a few links to click.

This presents a unique challenge, as designers and content creators have to still decide on some kind of priority or hierarchy for the content within the email. In many instances, this will mean one featured story or link to draw the reader in, with additional content given lesser weight.

The Ultimate Guide to Email Design

While a lot of online communication has moved to social media, email is still a very important part of any online marketing campaign.

Read More

The Ultimate Guide to Email Design

While a lot of online communication has moved to social media, email is still a very important part of any online marketing campaign.

Read More


I’d like to find that guy who was promoted to customers, that they could manage their own website “as easily as using a word processor”.

Read More

Stay Connected

Join us on our social networks for all the latest updates, product/service announcements and more.


> See More


> See More


> Add Us To Your Circle


6th October, Egypt.

M: +20 10 699 520 40
E: AhmedMoftah@live.com

© 2005-2017 AhmedMoftah