1. Desktop-centric design

The least friendly solution towards mobiles and other smart devices is of course the desktop-centric design.

This uses multiple columns (which are often not displayed correctly on smaller screens), small text and images, small CTAs, buttons and links that are not easily tappable and close to each other. Overall it provides a user experience that may be perfect for a desktop user but catastrophic for a mobile user.

2. Quasi-mobile-aware design

The quasi-mobile-aware design is one step ahead. In this case the primary content of the email is made mobile-aware, meaning it can be easily consumed on smaller screens as well.

However the header and footer are still optimized for desktop and this solution can end up providing a poor UX for smart device owners too.

This type is the most popular because marketers who abandon purely desktop-centric design tend go for it. It is however only a half-measure and on the long term it should only serve as a launch pad to responsive design.

3. Mobile-aware design

The first approach that can be considered as truly mobile-friendly is the mobile-aware design. It mostly uses single column, large fonts that are easily readable at arms distance on smaller screens and buttons big enough to be tappable without problem. Right now approximately 15% of promotional emails are mobile-aware.

Switching from desktop-centric to this solution requires leaving a lot of things behind, but that should be a good thing as you can create more straightforward copy and visuals.

It is also very simple to create as it is not truly responsive, it is only a simple enough design to be displayed perfectly on small screens.

4. Responsive-aware design

The responsive-aware design uses the same solutions for the main content than the previous one, but also uses responsive headers and footers.

These two areas are generally highly converting ones, they deserve the extra care. Making them responsive is the best thing you can do. They are usually packed with text and navigation, which means if you keep them that way they will provide a bad UX on small screens.

But if they are responsive they will be easy to use even on smaller screens, resulting in higher CTR.

5. Responsive email design

The most advanced solution is clearly responsive email design, chameleon of the smart-era.

Responsive email templates change their appearance according to the device they are opened on thus they provide the best user experience for everyone. In 2015 the share of responsive email designs accounted for most of the growth in the mobile-friendly email segment and it is now the standard for marketers who understand consumer habits. Email clients are also moving toward supporting responsive design “standards”, but still one of the biggest players, the Gmail Mobile App, is reluctant to truly support responsive email design techniques.

Which stage are you at?

If you have already started to get rid off desktop-centric design than you are on the right track. It may be worth to speed up the process, but if you already have a goal to be fully responsive than there isn’t too much to worry about.

There are still tons of multinational companies who not only have a desktop centric email, but also have a non-responsive website! Take advantage of this, and as a small, fast moving business do your best to be as advanced as possible.

If you want an easy solution, then you should definitely try an online responsive email builder. These software will provide you with an easy to use interface and fully responsive templates that can be created faster than ever before.

If you want to stay in the game, responsive email design is the way to go – and for that you should use the best and most cost-effective solution, a drag-and-drop template builder.

Author
Roland Pokornyik

Roland Pokornyik

CEO / Co-founder @ Chamaileon.io & EDMdesigner.com

  • Content Images in Modern HTML Emails Content Images in Modern HTML Emails

    In the last few months I have been following the previous posts of the Modern HTML

    Read more
  • HTML Email Width - Overcoming the 600px Limitation HTML Email Width - Overcoming the 600px Limitation

    The de facto standard for HTML emails' width is 600 pixels. But why is that? We

    Read more
  • The Drop Calc Method to Create Responsive HTML Emails The Drop Calc Method to Create Responsive HTML Emails

    Originally I was going to write an article about the different techniques which you can create

    Read more