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.
Paddings, Margins and Borders in Modern HTML Emails
Throughout this tutorial series, we have been using paddings, margins and borders a lot. We haveRead more
Typography in Modern HTML Emails
In the last few weeks, we went through the main principles and limitations of HTML Emails.Read more
Background Images in Modern HTML Emails
This article uncovers the approaches how background images can be set in email HTML. Various emailRead more