Transcription
how to designyour emails
how to design your emailsemail designCongratulations! You’ve gotten yoursubscribers to open your emails.Now, what do they see? Think aboutnot only how your content reads,but also what it looks like.While it’s true that beauty is in the eyeof the beholder, here are a few basicsto guide you to design success: Think about the width of youremail. Most common is 600 pixels. Remember that Flash, JavaScript,video and other rich media won’twork in an HTML email. Focus on what will appear “abovethe fold” in the preview pane ondesktop computers, laptops, andon mobile devices. Pretty is not always better;sometimes text-heavy emails canbe quite effective. Publisher’sClearing House often uses textheavy emails that get 40% openrates and 87% click-to-open rates! Provide a plain text version forsubscribers who simply don’t likeHTML versions.2
how to design your emailsemail designImagesMost email clients now block allimages by default, so users musttake the initiative to unblock if theywant to see them. The semi-goodnews, according to David Daniels ofThe Relevancy Group: “55% ofconsumers stated that they turn onthe images in the emails that theyreceive, which rivals the 57% ofconsumers who state they checktheir primary personal email accounton their mobile devices.”Nonetheless, many recipients will belooking at your emails withoutimages. Here are a few steps youcan take to respond: Create bulletproof buttonsthat look like images but areactually cleverly formattedHTML. The buttons ensure thatsubscribers will see the mostimportant points of your email,regardless of whether or notthey’ve blocked images. Thefolks at Mass Transmit havecreated a cool bulletproofbutton generator. Give it a try! Use image “alt” tags so thatrecipients who’ve blockedimages know what they’remissing. For example, a picture ofa red cashmere sweater couldhave an alt tag that reads, “redcashmere sweater.” If you’reoffering 15% off of the price ofthat sweater, the alt tag shoulddefinitely read, “15% off redcashmere sweater.” Get creative with images-offdesign. Check out what thecreative team at Pizza Express did: Test animated GIFs. Starbucksused animated GIFs in a February2012 email. We can’t animate theexample for you in this guide but,if you squint, you can probablyimagine the stars “falling” downthe page.Once again, it comes back to trust. In order to getsubscribers to care enough about your images to downloadthem, they must have confidence in your content.3
how to design your emailsmobile designEighty-one percent of people readtheir emails on mobile devices, and41% of commercial emails wereopened on devices in the secondhalf of 2012. This is up from 27% ayear earlier, and from 13% at the endof 2010. When we see the numbersfor 2013 and beyond they are sure tobe even higher.MobileYet even with all this explosive growthin mobile email, 58% of emailmarketers are still not designingfor it. And MarketingSherpa reportsthat 31% of marketers don’t evenknow their mobile email open rate!DesktopWebmailSource: Litmus4
how to design your emailsmobile designScalable and Responsive DesignThere are two common designoptions for mobile — scalableor responsive: Scalable: The layout is clickableand the type is readable, evenwhen reduced 50% in size.Scalable design avoids largewidths and includes big typeand big buttons. Responsive: The layout of apage responds based on theproportions of the screen onwhich it’s presented. This designis becoming increasinglycommon for use in emails, aswell as on websites.Media QueriesMedia queries allow you to control thelayout and display of your email basedon the mobile device that is being usedto open it. However, it’s important toknow that not all mobile email clientssupport media queries. StyleCampaign, a company that specializesin responsive email design, maintains agood list of what is supported byvarious clients.You can also use media queries tofine-tune your code with designs forspecific devices and situations,including horizontal vs. vertical layout,and even iPad-specific layouts. Mediaqueries also let you include mobilespecific CSS to handle single-columnlayouts and widths under 600 pixels.But there are a few things to rememberwhen using media queries: Most people access mobile emailon 320 x 480 pixel screens. If a device does not supportresponsive design, then it will bescaled. So it’s worth thinking abouta scalable design, nonetheless. Readers use their fingers toselect items, so use pronouncedimage buttons and keep themsimple. Links and buttons with aminimum target area of 44 44pixels (per Apple guidelines)are ideal. Make sure images are readablewhen resized, or include mobilespecific images. The minimumfont size displayed on iPhones is13 pixels; anything smaller will beupscaled and could breakyour layout. Use display: none; to hide anypart of the design that isunnecessary for email. Extracallouts and social sharingbuttons may work on a desktopor laptop computer, but canclutter a mobile experience. Pay attention to the pre-header— the preview shown in manymobile email clients. Give yourpre-header language the samecare and attention that you applyto your subject line, and avoidsimply displaying ‘view inbrowser’ text.@media Support Across Mobile AppsiPhone nativeiPad nativeAndroid 2.1 nativeAndroid 2.2 nativeAndroid 2.3 nativeAndroid 4.x nativeGmail mobile appsMailbox iOS appYahoo! mobile appsWindows Mobile 7Windows Mobile 7.5Windows Mobile 8BlackBerry OS 6BlackBerry OS 7BlackBerry Z10Kindle Fire nativeSource: stylecampaign.com5
how to design your emailsdesign testingDesign Testing across ClientsOne of the most frustrating thingsabout designing for email is that youhave little control over what youraudience actually sees. There are alot of different email clients acrossdesktop and mobile and tons ofvariation in how they display HTMLand handle previews panes. Tomake things worse, users cancustomize email appearance bychanging font size and turningimages on or off. The same emailclient can even display messagesdifferently from ISP to ISP! If there’sone thing you can be sure of, it’s thatyour email doesn’t look the same toall subscribers.You can’t control everything, but youcan test your design across differentclients. With enough resources, youcould do this manually, but, better yet,you can use a tool such as Marketo’sEmail Deliverability Power Pack toautomate the testing process. Here’swhat the output of our tool looks like.The 6 Golden Rules of Mobile Emailby: Simms JenkinsCEO & Founder of BrightWave MarketingI believe mobile to be the biggest thing toever impact email. It can also affect yourbrand since email closely ties to how yourbrand is perceived. If you send too manyemails, offer a poor user experience, badrendering, etc., your brand equity can suffer.Good mobile email drives revenue.According to Adobe, 71% said mobilepurchasing decisions are most influencedby emails from companies. That is huge!1. Smartphone owners are more likelyto read emails than make calls2. Consumers read more emails onmobile devices than a browseror desktop3. How your email looks onsmartphones matters to consumers4. Understand where your subscribersread your email to determine theright approachSource: Marketo Email Deliverability Power Pack5. What you are trying to accomplish inyour mobile email should impactyour approach & strategy6. Device matters and behavior varies
Marketing Software. Easy, Powerful, Complete.Marketo, (NASDAQ MKTO) uniquely provides an easy-to-use, powerful and completemarketing software platform that propels fast-growing small companies and globalenterprises alike. Marketo marketing automation and sales effectiveness softwarestreamlines marketing processes, delivers more campaigns, generates more win-readyleads, and improves sales performance. With proven technology, comprehensiveservices and expert guidance, Marketo helps thousands of companies around theworld turn marketing from a cost center into a revenue driver. 2013 Marketo, Inc. All rights reserved.www.marketo.comblog.marketo.comContact Marketo: 1.877.260.6586sales@marketo.com
services and expert guidance, Marketo helps thousands of companies around the world turn marketing from a cost center into a revenue driver. Contact Marketo: 1.877.260.6586 sales@marketo.com www.marketo.com blog.marketo.com
