What is Responsive Email Design?
Responsive email design allows your email to look its best no matter where it’s opened – a smart phone’s email app, a web browser on a computer, or an email client such as Microsoft Outlook. Furthermore, every screen is different. Even when the physical dimensions are the same, different resolutions (the number of pixels that can be drawn on the screen) can dramatically change how the content of an email appears. It’s important to ensure your email will look great no matter where – or how – it’s being viewed.
The technology behind responsive email design is the same technology behind responsive web design, which allows websites to render correctly on computer, tablets, and mobile devices – HTML and CSS. Different platforms interpret both HTML and CSS slightly differently and some platforms don’t support certain HTML and CSS features that other platforms do.
There are many unique considerations to take into account when designing a responsive email. These include:
- Button Size: The difference between how a mobile screen reads a finger tap and a computer registers a mouse click at a cursor’s location is not insignificant. A mouse click is nearly pixel-precise, while a finger tap covers a broad area and can read differently depending on the angle of the finger, how clean the screen is, whether the user has callouses, etc. Buttons and links should appear much larger on mobile displays, to make responding to your CTA as easy and painless as possible.
- Content Width: Content designed to work well on a narrow, vertically-oriented display often looks terrible when stretched to fit a desktop window. There are multiple ways to handle this, including setting a maximum width for the displayed content – scaling as needed for the different screen sizes of phones, but only scaling to a certain size, regardless of whether the user has their browser window set to full screen or not.
- Image Placement and Resolution: Much like content width and button sizes, loading different images depending on how – and where – the email is being viewed is critical to loading your content quickly and beautifully.
- Content: More and more users are reading their email on the go. Tailoring your content itself, based on whether the user is viewing the email on a phone vs a desktop computer, lets you add an extra level of customization that can make your content shine! Relying on system information available to the user’s email client, It’s even possible to change content based on time of day, the users location, or even weather conditions!
It is important to realize that responsive HTML email design – just like a web page – loads some elements from a web server, most notably – images. There’s no real limit to what content you pull from a server – including displaying text from a database, etc. There is a practical limit, however, as you don’t want a user to feel they must wait for an email to load successfully. Some email clients block images until prompted to load them by the user, so make sure your design and copy is compelling enough that the user clicks that “Load Images” button.
