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

  • Beginner's Guide to Using Sass in Email Coding Beginner's Guide to Using Sass in Email Coding

    Do you repeat bits of CSS code across email template projects? Learn to use the Sass preprocessor language to change that and design reusable components.

    Read more
  • Open Source Email HTML Modification Tools for Email Developers Open Source Email HTML Modification Tools for Email Developers

    Grab these free & open-source HTML code modification tools created by EDMdesigner specifically for email coders.

    Read more
  • Managing Full-time Employees at a Growing SaaS Company Managing Full-time Employees at a Growing SaaS Company

    In this article you can read about how an early-stage startup can overcome management difficulties with the SCRUM methodology and the pomodoro technique.

    Read more