src="http://www.getelastic.com/wp-content/uploads/responsive-email-design.jpg" class="alignleft" />Responsive Web Design (RWD) is hot, hot, hot, and gaining steam among ecommerce websites. But not to be overlooked is responsive email design (RED). As we learned from href="http://www.getelastic.com/why-responsive-email-matters-infographic/" target="_blank">last week’s infographic, 43% of email is currently opened on mobile devices, headed towards 50% by the end of the year ( href="http://www.litmus.com/" target="_blank">Litmus). For some brands, like Hugo Boss, mobile opens account for 60% ( href="http://stylecampaign.com/" target="_blank">Anna Yeaman).
Shrunken email creative might survive users’ mobile habits if only they would view the same messages across devices. But research shows only 3% do (in retail, it’s 2%). Don’t bank on users forgiving your unoptimized content and marking it for later viewing. You get one shot. What’s worse, 1/3 of users will unsubscribe from your list if they can’t read your messages on their small screens.
What is responsive email design?
Responsive email identifies a device’s screen or display size using the @media query and serves the appropriate layout determined by the designer. The most common “breakpoint” is 480 pixels (iPhone specs), but any breakpoint can be set to target various screen sizes including tablets and phablets.
Unlike scalable design which scales 100% table widths down to any screen size, responsive allows room for a designer to modify, hide, stack, add or expand/collapse content to optimize usability for narrow screens. While scalable design is certainly easier to code and is likely to “work” on all devices, usability can suffer when layout and design elements are not designed from the smallest screen up. Scalable’s best for text-based emails without many graphics (i.e. not retail email!) Responsive doesn’t require desktop layout to conform to narrow-width best practices, offering the most flexibility and control over merchandising and content.
Unfortunately, responsive isn’t foolproof. Some email clients like Gmail and Outlook strip out CSS style sheets and don’t support @media queries. It’s reported that users prefer to sync these accounts through a phone’s native email application (which does support @media) which will render the responsive version properly, but Gmail’s native app, for example, does not.
Best practice is to plan for failure by using flexible grid and fixed-width layout in your HTML template, and to test href="http://stylecampaign.com/blog/2012/10/responsive-email-support/" target="_blank">known problematic clients.
Tips for responsive email design
/>
Layout / template
1. Use a “mobile first” approach. Generally, beginning with the mobile experience and working up to desktop is much easier than trying to retrofit desktop content. That said, there are no rules that your desktop and mobile creative have to contain the same content or mirror design, so don’t feel you must constrain your desktop design to what is contained in your mobile version.
2. Simplify navigation. Be brave enough to let go of the idea that your email template needs a category menu. Users don’t treat emails like websites, they scan the content and decide if there’s anything worthy to click. Category menus, though ubiquitous, are often unnecessary. Go ahead and check your email analytics. What percentage clicks on your category menu vs. your merchandising zones? Exactly.
href="http://www.degdigital.com/blog/the-benefits-of-responsive-email-design-a-crocs-case-study/" target="_blank">Crocs tested a responsive version which included a bold strip-down of its menu.
align="center">
Responsive did beat both desktop and static versions in revenue and AOV, though clicks were consistent. Removing navigation links did not hurt metrics.
Also consider removing unnecessary links like social sharing buttons in headers and footers.
3. Get stack-happy Rather than scale down images, transform horizontal assortments into vertical at the 480px breakpoint. The Crocs example above illustrates this.
Two- and three-column layouts can also be stacked into one. Though RueLaLa is praised for its responsive website, its email is not.
align="center">
Style
4. Use a readable font This doesn’t just mean sans-serif. Use a minimum of 13 pixels (iPhone’s minimum font size), as smaller fonts get scaled up by the device and can affect your layout.
align="center">
Watch out for bold, capitalized words. They’re harder to read in smaller font on smaller screens, especially when they’re white-on-black, as in Sephora’s calls-to-action above.
The example below illustrates the challenge with script and fat fonts, and low contrast between images and text.
align="center">
5. Use high contrast Always recommended for Web, but all the more important on mobile devices which are not only tiny, but often used in lower-light conditions. Don’t do this if you can help it!
align="center">
Content
6. Lead with the important stuff. Ask yourself if the customer can digest your most important messaging without scrolling, and does it compel them to scroll or click through?
7. Hide unnecessary pre-header and footer content. Unless you’re obligated for legal or branding reasons, consider nixing extra text that push down your most important content. Hint: kill the “mobile friendly version” link, you’re responsive, baby!
8. Rethink your merchandising. If your emails are typically jam-packed full of products and offers, consider stripping them down for mobile users. Remember, your desktop assortment doesn’t have to match mobile. Think of user context and what’s optimal within that.
9. Use text messaging. Not that kind of text messaging! Use text-based messaging instead of images for your main “hook” content for clients that are images-off by default.
align="center">
This email gets the point across. A strong hook will motivate the customer to turn images on, or just click right on through.
10. Design for images off Avoid the white screen of death.
align="center">
The above is from an Internet Retailer top 5 company! This link points to information on href="http://www.getelastic.com/email-design-for-gmail/" target="_blank">designing for images off.
11. Modify images You’re not forced to scale down images with the responsive approach. In fact, many images lose their context as they shrink. Consider cropping or swapping images, or even removing them completely.
12. Optimize image size Page load speed is important for Web, even more important for mobile devices connecting to flaky Starbucks wi-fi.
13. Sharpen your image High density retina display requires higher resolution images to appear sharp.
14. Replace animated GIFs with static images That’s GIF (like the href="http://howtopronouncegif.com/" target="_blank">peanut butter). Won’t work on mobile, so pick the still shot you want!
Calls to action
15. Use large tap targets. School yourself on href="http://www.lukew.com/ff/entry.asp?1649" target="_blank">designing for touch screens. To start, links and buttons should be a minimum of 44 x 44 pixels, according to Apple guidelines.
16. Embrace white space. White space is your friend. The most common design mistake I see on mobile are link targets too.close.together.
17. Make the button bigger! Yup. Within reason.
18. Fold ‘em. Pay attention to placement of call to action, remembering the fold depends on whether the device is in portrait or landscape mode. This doesn’t mean you should have a call to action as high as possible to accommodate landscape users. But content that appears above both folds should be enticing enough to lead to a strong call to action with minimal thumb action.
19. Make them proximal to content. Every link is in essence a call-to-action. Product links should be close enough to their corresponding images for users to know what they’re clicking. Ditto for any type of link/button in your message.
20. Make links look like links. Sound like Web usability kindergarten? It’s still important, especially since modern designs style links as colored text without underlining (see Sephora example above).
21. Optimize CTAs for images off. Buttons are images, too.
22. Use click-to-call when appropriate. What’s narrower than 480 pixels is probably a mobile device. This is user context handed to you on a silver platter, so use it when it makes sense.
23. Link to mobile friendly landing pages. Don’t drop the ball on your website!
24. Copy promo codes. Auto-applying a discount code for email referrals is boss for mobile users who have a harder time toggling between open tabs and applications.
align="center">
Better yet, inform the customer that it will be auto-applied.
Is it worth the effort?
Responsive does carry a higher cost in time, effort and resources than its alternatives, but as mobile opens top 50% (check your analytics to see where you stand), it’s too costly to disappoint your email subscribers with an unusable experience. It’s also much cheaper and quicker to apply responsive to and test a single email campaign than it is to undergo a responsive website overhaul. If you’re considering applying responsive to your website, starting with an email campaign can help build the case for the whole shebang. Finally, if you are responsive, don’t forget email (like RueLaLa), it’s just as important.
A friendly reminder I’ll be speaking on href="http://events.nrf.com/merchandisingws13/public/MainHall.aspx?ID=21141&sortMenu=101000" target="_blank">Mobile Commerce: Is Responsive Right for Retail? at the Shop.org Merchandising Workshop in Huntington Beach, July 16. If you’re headed that way, please say hello.
via Get Elastic Ecommerce Blog http://www.getelastic.com/24-tips-for-responsive-email-design/
The post 24 Tips for Responsive Email Design appeared first on Money Rail.
via MoneyRail.NET Online Money Making
Posts
0 comments:
Post a Comment