Mobile is here to stay, and we’re increasingly reading email on the go. Senior Web Designer Kelli Sommer writes about how Ohio State is responding with responsive email templates.
While people are pulling out their phones to check their email, we’ve started the process of making our email communications responsive. Even better, we’ve put together a set of awesome responsive email templates for all campus communicators that can be used as is or used as a reference for designing your own responsive email templates.
What is responsive email?
In a nutshell, a responsive email will respond to the device being used to view it. Layouts rearrange so that content stacks and becomes scrollable rather than having to pinch and zoom to read it. Fonts can be sized up or down. Links become large buttons for easy tapping.
Why is responsive design so crucial?
Simply because the use of mobile phones to read and respond to emails is growing rapidly. It is likely that a growing percentage of your readers are viewing your message on a mobile device.
If your message doesn’t look good on their mobile device, subscribers will quickly delete it. Those messages may look OK on a desktop or laptop, but text is often too small to read, images are hard to see, and links are too tiny to tap on a mobile device. Nearly all emails are viewed just once, so there is no second chance!
Responsive emails encourage more engagement. Checking one’s email is the most popular activity on a mobile device (not making actual phone calls!), so those brief interactions during their daily routine mean that you must focus on getting your point across quickly.
How does a responsive email work?
The template uses media queries, which is a special set of CSS styles that detect the screen size of the device and then “turn on” a different set of rules based on that screen size.
Responsive design in itself isn’t anything new. If you’ve worked in any HTML in the past 15 years, you’ve probably created a table. You’ve probably specified that the table’s width should be 100 percent rather than a fixed number of pixels. That’s the most basic form of responsive design: displaying something at 100 percent the width of the device you’re viewing it on.