- \n
- The text is so tiny, you either zoom way in (and then you have to drag left, right, up and down to see the rest of the text) OR you get your reading glasses.<\/li>\n<\/ul>\n
- \n
- The tap targets are way too small for your giant fingers.<\/li>\n<\/ul>\n
- \n
- The spacing between the tap targets is unconscionable so when you try to tap one thing, you end up tapping three things.<\/li>\n<\/ul>\n
So how do we, as UX professionals, fix problems like these in our emails? How confident are we that it\u2019s even worth our time to address HTML email problems on smartphones? Case in point: in the company\u2019s 2014 year-end review of email client market share<\/a> report, Litmus<\/a> reported that email opens on mobile devices rose steadily from 8%<\/b> in 2011<\/b> to 48%<\/b> in 2014<\/b>.<\/p>\n
The math\u2019s pretty easy on that one \u2014 a whopping 500% increase!<\/p>\n
![\"image00\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image00.png\")
<\/p>\nPhoto credit: Litmus<\/a><\/p>\n
As user experience designers, we\u2019ve all seen how Responsive Web Design (RWD) techniques and a \u201cmobile-first\u201d approach have modernized websites over the last four years. But many of us are still in the dark about how to apply those principles to HTML email design. With more people than ever opening emails on their mobile devices, it\u2019s time that we take a critical look at our design approach and examine the process for creating great email experiences, regardless of screen size.<\/p>\n
Shorten the Responsive Email Learning Curve<\/h2>\n
If you are starting from square one when it comes to designing responsive HTML email layouts, you can find a vast amount of resources online that range from technical email design references<\/a> to sweeping guides on mobile fundamentals<\/a>. Before diving deeper into layout and responsiveness, it\u2019s also important to make sure your emails actually reach the inbox, which is why many teams rely on a warm up email<\/a> tool to establish sender trust early.<\/p>\n
It\u2019s definitely worth your time to look at different approaches to designing mobile-friendly emails, including the media query approach<\/a> as well as the single-column approach<\/a>.<\/p>\n
Not sure where to start when it comes to actually coding your HTML email layout? Don\u2019t worry about it. You can also download 7 responsive email templates (and their PSDs)<\/a> for free.<\/p>\n
And finally, check out the awesome Responsive Design Cheatsheet<\/a> that all email designers should print out immediately and tape on the wall.<\/p>\n
![\"Screen](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/Screen-Shot-2015-08-03-at-8.44.11-PM.png\")
<\/a><\/p>\nIdentify the HTML Email Layout that Achieves your Goals<\/h2>\n
What goals do you have for your HTML email? Maybe you want to maximize click-throughs on a \u201cLearn More\u201d button? Or, perhaps you are pushing for a greater social media following via the Facebook and Twitter tap targets.<\/p>\n
Whatever the case, you want to identify the layout that will help you achieve your business goals. For example, if you are looking for a 1:2 column newsletter layout, here\u2019s a responsive HTML email design with a hero image, navigation, ample white space and touch-friendly CTAs previewed in an iPad Mini viewport.<\/p>\n
![\"image02\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image02.png\")
<\/p>\nHere\u2019s the same layout in a previewer for the Gmail app on an Android device.<\/p>\n
![\"Screen](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/Screen-Shot-2015-08-04-at-2.04.27-PM.png\")
<\/p>\nSo, what kind of layout will help you achieve your<\/i> business goals? As a UX professional, an important part of the process is to investigate the type of content you are sending to your audience and the actions you would ideally like them to take.<\/p>\n
Build a Low-Fidelity Responsive Email Prototype<\/h2>\n
OK, so what\u2019s next?<\/p>\n
Try building a low-fidelity responsive prototype of your HTML email that includes breakpoints for the screen sizes and devices you\u2019re supporting. If you cocked your head after reading that, it\u2019s totally understandable. Let\u2019s break it down.<\/p>\n
- \n
- A wireframe<\/a> helps you visualize the hierarchy of your email layout. You put in the basic building blocks of your email without actually putting in content or pretty visuals. Think grayscale boxes with a sprinkling of text placeholders.<\/li>\n<\/ul>\n
- \n
- By adding responsive breakpoints to your HTML email wireframes, you can build an interactive prototype that simulates how your user will see the email on his or her iPhone, Android mobile device, tablet and desktop.<\/li>\n<\/ul>\n
Step 1: Create a Wireframe for Mobile View<\/b><\/p>\n
Because we\u2019re taking a mobile-first approach to responsive email design, you\u2019ll want to start by creating a wireframe for your mobile view. UXPin<\/a> makes this super easy by having pre-made spaces and breakpoints for mobile device spaces.<\/p>\n
If you haven\u2019t already, go ahead and create a free account<\/a>. Feel free to follow along by checking the preview project<\/a> I\u2019ll describe below. For the purposes of this tutorial, we’ll use Greeked out content\u2014however, you should always use real content (or at least rough content) since that’s what your users care about most.<\/p>\n
Start by creating a new wireframe. In the tabs area, click \u201c+Add responsive version\u201d (you can ignore the Default tab).<\/p>\n
![\"image04\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image04.png\")
<\/p>\nWhen presented with the option to choose a preset, select \u201ciPhone (320px)\u201d (mobile-first, remember?). Once selected, uncheck<\/b> the checkbox for \u201cI want to copy all elements from:\u201d because we don\u2019t need it at the moment.<\/p>\n
![\"image03\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image03.png\")
<\/p>\nIn the new 320px canvas, drag and drop your email elements. For example, you can put a hero image, some headings and a few text elements in place for the mobile-friendly email view. Customize the elements so they fit the breakpoint.<\/p>\n
![\"image06\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image06.png\")
<\/p>\nThat\u2019s our first design using the breakpoint for the responsive HTML email layout. Next, we\u2019ll set up additional breakpoints to simulate email interactions for users on tablets and desktops.<\/p>\n
Step 2: Resize Wireframes for Tablet and Desktop Views <\/b><\/p>\n
Now that you have the wireframe of your mobile HTML view set up, let\u2019s add wireframes for both the tablet and standard website views.<\/p>\n
Again, click \u201c+Add responsive version\u201d in the tabs area and select \u201ciPads (768px)\u201d or \u201cStandard Websites (992px)\u201d from the present drop-down list. Time-saving tip: If you check<\/b> the checkbox for \u201cI want to copy all elements from:\u201d and select the initial breakpoint (\u201ciPhone 320px\u201d), all elements from that wireframe will be copied to your new wireframe and breakpoint.<\/p>\n
![\"image05\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image05.png\")
<\/p>\nOnce you add your tablet and website canvases, you can easily rearrange \/ resize your HTML email elements for that view.<\/p>\n
![\"image08\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image08.png\")
<\/p>\nStep 3: Preview\u00a0Prototype<\/b><\/p>\n
OK, now you have all the building blocks in place. You have your HTML email wireframes for mobile view, tablet view and desktop view. Let\u2019s check out the simulation! In UXPin, click the \u201cSimulation\u201d button.<\/p>\n
Now, you want to make sure that you can simulate how your design will adapt to different viewports (e.g. mobile vs tablet vs desktop). To do so, click the Settings<\/b> icon and check the option for \u201cAuto Resize\u201d (lower right-hand corner of your screen when previewing).<\/p>\n
![\"image11\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image11.png\")
<\/p>\nNice! Let\u2019s test it out. We\u2019re able to simulate our HTML email\u2019s iPhone 320px breakpoint:<\/p>\n
![\"image09\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image09.png\")
<\/p>\nA tablet\u2019s 768px breakpoint:<\/p>\n
![\"image08\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image081.png\")
<\/p>\nAnd a desktop\u2019s 992px breakpoint:<\/p>\n
![\"image10\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/image10.png\")
<\/p>\nSumming It Up<\/h2>\n
OK, so you may have skimmed the title of the article and then skipped down to this section (CliffsNotes, right?) or you read the entire article and are eagerly awaiting the summary.<\/p>\n
In short, users are viewing emails on their mobile devices a lot more than they used to, which means designers should consider Responsive Web Design techniques and \u201cmobile-first\u201d principles when creating their HTML email layouts.<\/p>\n
As a UX professional, take a critical look at your approach to HTML email layouts and follow the steps below to ensure great email experiences, regardless of screen size.<\/p>\n
- \n
- Educate yourself on designing responsive emails<\/li>\n<\/ul>\n
- \n
- Identify the HTML email layout that achieves your goals<\/li>\n<\/ul>\n
- \n
- Build a Low-Fidelity responsive email prototype<\/li>\n<\/ul>\n
Feel free to practice what you’ve just learned in UXPin with a free trial<\/a>.<\/p>\n
- Build a Low-Fidelity responsive email prototype<\/li>\n<\/ul>\n
- Identify the HTML email layout that achieves your goals<\/li>\n<\/ul>\n
- Educate yourself on designing responsive emails<\/li>\n<\/ul>\n
- By adding responsive breakpoints to your HTML email wireframes, you can build an interactive prototype that simulates how your user will see the email on his or her iPhone, Android mobile device, tablet and desktop.<\/li>\n<\/ul>\n
- A wireframe<\/a> helps you visualize the hierarchy of your email layout. You put in the basic building blocks of your email without actually putting in content or pretty visuals. Think grayscale boxes with a sprinkling of text placeholders.<\/li>\n<\/ul>\n
- The spacing between the tap targets is unconscionable so when you try to tap one thing, you end up tapping three things.<\/li>\n<\/ul>\n
- The tap targets are way too small for your giant fingers.<\/li>\n<\/ul>\n
![\"upload\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/upload.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"