Ever wondered how to design the perfect email template for any device? We’ve got you covered with this how-to article explaining a mobile-first approach to email design.
If you’re a smartphone user, you’ve probably experienced the frustration of opening HTML email on your device. and one or more of the following happens:
- An overlapping mess of graphics, text and icons greets you and you immediately think “unsubscribe” and/or “delete”.
- The text is so tiny that you either zoom in (and then have to drag left, right, up and down to see the rest of the text) OR get your reading glasses .
- The touch targets are too small for his giant fingers.
- The space between the touch targets is inconceivable, so when tries to hit one thing, ends up hitting three things.
So how do we as UX professionals fix problems like these in our your emails? How sure are we that tackling HTML email issues on smartphones is worth our time? Case in point: In the company’s 2014 year-end review of the email client market share report, Litmus reported that email opens on mobile devices rose steadily from 8% in 2011 to 48% in 2014.
The math is pretty straightforward on that: a huge increase in 500%!
Photo credit: Litmus
As user experience designers, we’ve all seen how Responsive Web Design (RWD) techniques and a mobile-first approach have modernized sites. website in the last four years. But many of us still don’t know how to apply those principles to HTML email design. With more people than ever opening email on their mobile devices, it’s time we took a critical look at our design approach and examined the process for creating great email experiences, regardless of screen size.
Shorten Responsive Email Learning Curve
If you’re starting from scratch when it comes to designing responsive HTML email designs, you can find a wealth of resources online ranging from design technical references from email to general guides on mobile fundamentals.
It’s definitely worth looking at different approaches to designing mobile-optimized emails, including the media query approach and the single column approach.
I’m not sure where to start when it comes to really coding your HTML email design? Don’t worry about that. You can also download 7 responsive email templates (and their PSDs) for free.
And finally, check out the awesome responsive design cheat sheet every email designer should print right away! and paste on the wall.
Identify the HTML Email Design That Achieves Your Goals
What goals do you have for your HTML? email? Maybe you want to maximize clicks on a “Learn More” button? Or maybe you’re pushing for more social media followers through Facebook and Twitter touch goals.
Whichever the case, you want to identify the design that will help you achieve your business goals. For example, if you’re looking for a 1:2 column newsletter design, here’s a responsive HTML email design with a featured image, navigation, ample white space, and easy-to-touch CTAs that display in preview. of iPad Mini.
Here’s the same layout in a preview of the Gmail app on an Android device.
So what kind of design will help you? achieve your business objectives? As a UX professional, an important part of the process is researching the type of content you are sending to your audience and the actions you would ideally like them to take.
Create a low-fidelity responsive email prototype
Okay, what’s next?
Try creating a low-fidelity responsive prototype of your HTML email that includes breakpoints for supported screen sizes and devices. If you cocked your head after reading that, that’s totally understandable. Let’s break it down.
- An outline helps you visualize the hierarchy of your email design. You put in the basic components of your email without putting in any pretty content or visuals. Think grayscale boxes with a sprinkling of text placeholders.
- By adding responsive breakpoints to your HTML email wireframes, you can create a prototype interactive app that simulates how your user will view email on their iPhone, Android mobile device, tablet, and desktop.
Step 1: Create a Wireframe for the Mobile View
Since we are taking a mobile-first approach to email design responsive, you’ll want to start by creating a wireframe for your mobile view. UXPin makes this very easy by having pre-made spaces and breakpoints for mobile spaces.
If you haven’t already, go ahead and create a free account. Feel free to keep checking out the preview project that I’ll describe below. For the purposes of this tutorial, we will be using Greek content; however, you should always use actual content (or at least approximate content) as that is what your users care about most.
Start by creating a new wireframe. In the tab area, click “+ Add Responsive Version” (you can ignore the Default tab).
When presented with the option to choose a preset, select “iPhone (320px)” (mobile first, remember? ). Once selected, uncheck the “I want to copy all items from:” checkbox because we don’t need it right now.
On the new 320px canvas, drag and drop the elements of your email. For example, you can put a hero image, some headers, and some text elements in place for the mobile-friendly email view. Customize the elements to fit the breakpoint.
That’s our first layout using the breakpoint for responsive HTML email layout. Next, we’ll set up additional breakpoints to simulate email interactions for tablet and desktop users.
Step 2: Resize Outlines for Tablet and Desktop Views
Now that you have your mobile HTML view wireframe set up, let’s add wireframes for both the tablet and the standard website view.
Again, click Click “+Add Responsive Version” in the tab area and select “iPads (768 px)” or “Standard Websites (992 px)” from this drop-down list. Time saving tip: Yes check the “I want to copy all elements from:” checkbox and select the starting breakpoint (“iPhone 320px”), all elements in that structure will be copied to your new wireframe and breakpoint.
Once you add your tablet and website canvases, you can rearrange or resize HTML email elements to that view.
Step 3: Preview the prototype
OK, now you have all the basic components in place. You have your HTML email schematics for mobile view, tablet view, and desktop view. Let’s see the simulation! In UXPin, click the “Simulation” button .
Now, you want to make sure that you can simulate how your layout will adapt to different viewports (for example, mobile, tablet, or desktop.) To do this, click the Settings and check the “Auto resize” option (bottom right corner of your screen during preview).
Okay! Let’s try it out. We can simulate the 320 pixel iPhone breakpoint from our HTML email :
Tablet 768 pixel breakpoint:
And the 992px breakpoint of a desktop:
Summing Up
Well, you may have skimmed through the title of the article and then jumped to this section (CliffsNotes, right?) or read the entire article and are eagerly awaiting the summary.
< In short, users view emails on their mobile devices far more than they used to, which means designers need to consider responsive web design techniques and mobile-first principles when creating their designs. HTML email.
As a UX professional, take a critical look at your approach to email. or HTML layouts and follow the steps below to ensure great email experiences, regardless of screen size.
- Educate yourself on responsive email design
- Identify HTML Email Design That Achieves Your Goals
- Create a Low Fidelity Responsive Email Prototype
Feel free to practice what you just learned in UXPin with a free trial.
.