Email design has lagged website design for years. This is mainly because email clients haven’t optimized themselves to the changing digital design landscape (especially the emergence of responsive design) as quickly.
However, over the past five years, email clients have begun to support features that were originally reserved for the web. Most of all it was Announcement in 2016 that Gmail would now support embedded CSS and media queries – two tools that enable responsive design.
Email designers finally have a chance to apply for email, which is what web developers have learned about modern design over the past two decades. Here’s What Email Designers Can Learn From Web Developers.
Pay attention to responsive design, especially on mobile devices
More emails were opened in 2019 on mobile devices than on the desktop. Email designers today need to prioritize how emails are presented on mobile devices without affecting readability on desktops or tablets.
This is where responsive design comes into play. Responsive design means that your design adapts to the screen size and resolution of the device it is read on.
We recommend following the example of the website developers and creating three different wireframes for each email (or email template): one for mobile, one for desktop, and one for tablets.
Then use Media inquiries to tell the layout how to render it based on factors such as screen size, or use the liquid method for email clients that do not support media queries.
Let’s look at the difference. An unresponsive email can be rendered on mobile devices with small text that is difficult to read:
Responsive email design, on the other hand, appears optimized for mobile reading:
Keep the design simple for readability
Website developers know that a simple design is best when it comes to mobile readability. Smaller screens make it impossible to comfortably navigate through multiple columns or creative fonts and designs.
Here are the best ways to keep the design simple:
Use a single column layout
Single column layouts Render most clearly on smaller screens such as mobile devices. In addition, they allow designers to create a single flow of information that guides readers to take a desired action (such as clicking a button).
This single flow of information is also a better user experience than scrolling or zooming in from page to page on a small smartphone screen to access all of the content.
Reduce visual clutter
Visual clutter is any design element that can be removed and does not change the effect of the message.
For example, partitions used to separate sections instead of white space could be viewed as a visual clutter. Likewise, fonts like bold, italic, and various headings could be seen as cluttered if they aren’t strictly necessary to get the message across.
Try to make the design as clean as possible and you will likely improve the user experience.
Only have one CTA button
Since they have mastered the art of conversion-driven design, developers know that it is critical not to ask readers to choose from multiple actions. Instead, designers should only have one call-to-action so that it is clear what readers should do next.
Also, make your CTA a bigger, contrasting button rather than hyperlinked text. A button is easier to tap with your finger on a mobile device or tablet than text with hyperlinks.
For example, this single-column email from Planoly is visually minimalist and leads directly to a single CTA button:
Borrowing advanced responsive design strategies from the web
Creating a one-column mobile design is the least email designers need to do to create responsive email. However, designers who want to make the user experience even better across all devices can take advantage of these slightly more advanced strategies:
Use progressive disclosure for email with a lot of text
When e-mails are written like mini-essays, readers experience a seemingly endless flow of text on a mobile device, even though the e-mail does not appear long on the desktop.
To solve this problem, email designers can use the “Progressive disclosure” Web developer strategy. Certain elements of the e-mail (e.g. text sections) are hidden under interactive elements (e.g. headings) and only become visible when the reader taps it.
Progressive disclosure allows readers to experience the email as organized and minimal and to jump to the section they want to read.
Overlay text on images with live text + background images
In the past, every time an email designer wanted to display text over an image, they had to create a separate graphic of the image and the text overlay, and then insert that graphic into the email template.
This works fine unless the email client doesn’t properly render your graphic – and then your message is suddenly missing a vital headline. In addition, designers must create different graphics for each device wireframe, which adds time.
Instead, designers can borrow a strategy from website developers: Live text and a background picture to create your text overlays. This allows you to have the overlaid text image automatically adjusted for each device – without the risk of rendering failing.
For example, The Royal Children’s Hospital used live text over a background image to create this dynamic email:
Email clients are finally catching up with website platforms in terms of design features. Email designers should turn to web developers to take advantage of these new features and create more responsive, beautiful, and conversion-friendly emails.