Responsive eCommerce Email Marketing Best Practices

  • View
    212

  • Download
    0

Embed Size (px)

DESCRIPTION

In this post Danny from eCommerce Cosmos goes over 5 good things you should know before you send those eTail holiday campaigns.

Text of Responsive eCommerce Email Marketing Best Practices

  • 5GoodThingstoKnowAboutResponsiveEmailMarketing

    Trying to get your responsive email template underway isnt always an easy task. There are several things to consider. The way you markup your template, and the CSS properties used, can significantlyalteryouremaildisplayacrossmultipleclients.

    Ive been building responsive websites for years but recently

    started exploring responsive email design, and began to search for

  • some simple techniques thatll get any template designer started in

    therightdirection.

    1. Tables inside Tables inside Table Rows insideOneBigTable!Ok,thatsnotexactlyhowitgoes..butyoucatchmydrift

    The need to use div tags in email (even in 2014) is limited. A study

    on campaignmonitor.com analyzed the use of div markup versus

    tablebased markup, and tested the results across multiple email

    clients. The results were messy.. many email clients didnt render

    the CSS properties needed for the appropriate display, including

    thelatestversionofOutlook.

    While the idea of using div tags in email markup is highly frowned

    upon, there is often a misconception associated with it. Div tags

    can be useful in some situations, such as the replacement of br

  • and p tags, and can sometimes be used to save time on inline

    styling.

    Anexampleofresponsiveemailmarkup:

    The html text in the picture below would nest (in a table) in between

    thetdtagthatcontainsthebackgroundimage.

  • 2.SayGoodbyetoExternalStyleSheetsIn responsive email design, there is no need or use for external

    stylesheets

  • All styles and media queries should take place in the head of your

    htmldocument.

    3.MobileFirst,AlwaysStartwiththesmallestdeviceresolutionIf youve ever messed around with responsive design before, you

    know that when a small device zooms out to catch up with a wide

  • layout, the text is impossible to read. We combat this by adding a

    mediaquery.

    In responsive design, we know that the smallest device screen to

    consideristheiPhoneinportraitmode.

    The width of an iPhone in portrait mode is 320px wide. So well use

    this as our starting point and account for all device widths that are

    greaterthan320pxbutlessthan480px.

    4.DeclaringClassesResponsive design means that youre dealing with tables, and

    dealing with tables can sometimes be confusing for beginning

    developers(asweirdasitsounds).

    The way to manage your classes within your media queries, is to

    set the class name to the html element associated with it. For

    example, here we have multiple tables within our 480px media

  • query. Notice how some tables need to span the entire 100% of

    thedevice,andothersless.

    5.SizeMattersA good calltoaction can be the difference betweenclickthroughsandabandonment.In addition, proper fontsizes and button sizes need to be

    considered..

    For mobile design, an absolute minimum fontsize of 16px is

    recommended.

    Apple suggests a fontsize of 17px 22px, and Google suggests

    18px22px,withthecalltoactionbeingatleast46pxinheight.

    The best way to ensure that your calltoaction is sufficient, is to

    putitthroughthesquinttest.

  • If you or someone else can still tell what the calltoaction is when

    youresquinting,youvepassedthetest.

    Ive been doing this for about a year, anyone that wants to share

    their expertise id love to hear about your responsive email

    success.

    Danny is a project manager at eCommerce Cosmos. He's on the cutting edge of responsive emaildesign,behavioralemailmarketing,andwebsitedevelopment