Design for Web, Email, and Mobile Marketing: How the Medium Affects Your Creative Approach


Published on

You need design consistency across your website, email, and mobile channels. But that doesn't mean that you can simply "copy and paste" creative from one format to another if you want to achieve the best results. Learn how to strike the perfect balance between consistency and effectiveness regardless of how customers interact with your brand.

Published in: Business
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • This is what happens when you try to replicate your web page within an email. Avoid the pitfalls of treating code for email and code for websites as the same. A truck is for hauling, a car is not.
  • Different vehicles available
  • Mention HTML 5
  • Design for Web, Email, and Mobile Marketing: How the Medium Affects Your Creative Approach

    1. 1. Design for Web, Email and Mobile Marketing<br />Michael Buchmiller – Manager of Creative Services<br />Michael McKibben – Creative Designer<br />
    2. 2. Design for Web, Email and Mobile Marketing<br />Be everywhere your customers are<br />Ensure your message is on brand and on target<br />Maximize intended results<br />
    3. 3. The Right Vehicle - Understanding Your Capabilities By Design - Consistency & EffectivenessMobile Marketing<br />
    4. 4. The Right Vehicle for the Right Job<br />
    5. 5. Screen Resolutions<br />1680 x 1050 – 21” desktop computer<br />1440 x 900 – 15” laptop computer<br />1024 x 768 – Apple iPad<br />480 x 320 – Apple iPhone<br />240 x 260 – RIM Blackberry Pearl<br />Recommended email width = 600<br />*All sizes in pixels<br />
    6. 6. Technical Capabilities – Laptop/Desktop<br />Web- Full HTML- Flash- Video- Full CSS Support- Forms- JavaScript<br />Email- Limited HTML- Limited CSS- Image Limitations (blocking, background)<br />
    7. 7. Technical Capabilities - Mobile<br />Web- Limited HTML & CSS- Flash – device dependent- Video- Forms- JavaScript<br />Email- HTML & CSS - Depends on Device- Image Limitations (blocking, background)<br />
    8. 8. By Design – Consistency & Effectiveness<br />Website<br />Email<br />
    9. 9. Brand Consistency<br />Why?- Trust- Credibility<br />How?- One voice- Web/email, online/offline, everything should match.<br />
    10. 10. Brand Reputation<br />Quality of Design<br />Free of typos and errors<br />Adheres to style guides- fonts- colors- logo placement- layout<br />
    11. 11. By Design<br />Email <br />Website<br />
    12. 12. Brand Reputation – A Bad Apple<br />
    13. 13. Brand Reputation – A Bad Apple<br />What’s Wrong?<br /><ul><li>“The only place to buy iPhone”
    14. 14. Font
    15. 15. “Supported by Yahoo!”</li></li></ul><li>Mobile Rendering<br />
    16. 16. Mobile Rendering<br />Do more people check email on their smartphonesthan on their PC’s?They will.Smartphone sales will surpass PC sales by the end of 2011 with over 400 million shipments.<br />Mobile – Consumption – Preview/Absorb<br />Desktop – Creation/Consumption – Interaction/Engagement<br />
    17. 17. Mobile Rendering<br /><ul><li>Definitions, landscape, and marketshare
    18. 18. Obstacles to good smartphone rendering
    19. 19. Email rendering engines and operating systems
    20. 20. Six steps to improve smartphone rendering</li></li></ul><li>Definitions<br />What do we mean by Smartphone?<br />Mobile phone that offers PC-like functionality<br />Can run software, play media, connect to the internet<br />Includes a QWERTY keyboard<br />
    21. 21. Definitions<br />What do we mean by Operating System?<br />A program that manages the resources and process of a computer<br />Provides the interactive graphic interface between user and device<br />Controls functions of calling, texting, web browsing, using apps, and rendering emails<br />
    22. 22. Major Smartphone Operating Systems<br />iPhone OS - Apple iPhone <br />Android OS - Google Nexus One, HTC Dream, T-Mobile G1, Nook, 18+ others <br />Blackberry OS - RIM Blackberry<br />Symbian OS - Nokia, Samsung, Sony Ericsson <br />Windows Mobile OS - Samsung, HP, Motorola<br />Palm webOS - Palm Pre, Palm Pixi <br />
    23. 23. Who Uses Smartphones?<br />Users are twice as likely to own for business use only<br />Predominantly male<br />Versus average mobile users…<br />65% more likely to be between 25 and 34<br />Nearly 2x more likely to make over $100,000/year<br />* According to a December 2009 Gartner report<br />
    24. 24. US and Global Smartphone Usage<br /><ul><li> Symbian leads the global market, not a big player in the US.
    25. 25. Blackberry and iPhone are the largest US players, 2 & 3 respectively in the global market
    26. 26. Windows Mobile is the only OS losing market share in the US</li></li></ul><li>Obstacles to Good Smartphone Rendering<br />Screen Size<br />Device Models<br />Operating Systems<br />
    27. 27. Mobile Screen Resolutions<br /> RIM Blackberry Curve: 320 x 240 <br />Apple iPhone 3G: 480 x 320 <br />RIM Blackberry Storm: 480 x 360 <br />RIM Blackberry Pearl: 240 x 260 <br />G1 by HTC: 320 x 480<br />
    28. 28. Blackberry OS<br /><ul><li>Two different services BIS and BES
    29. 29. Ability to render HTML at all is dependent on service
    30. 30. Third party applications available, still affected by service
    31. 31. If HTML is allowed, tries to fit entire email within constraints of screen
    32. 32. Images are re-sized, columns of information are collapsed, affects tables and bullet lists</li></li></ul><li>iPhone OS<br /><ul><li>First to deliver full-color, beautifully rendered HTML emails
    33. 33. Automatically scaled down to fit width of the display
    34. 34. Users can easily zoom in and out
    35. 35. Images are shown by default
    36. 36. Small resolution, difficult to easily read a 600 pixel wide email </li></li></ul><li>Android OS<br /><ul><li>Two unique email applications… built-in Gmail app and a separate app for all other accounts
    37. 37. Gmail app: images don’t load by default, zooming not available, otherwise great at HTML rendering
    38. 38. Separate app: not as robust, reports of user issues</li></li></ul><li>Other Operating Systems<br /><ul><li>Symbian: Older versions don’t render HTML. Newer versions on Nokia phones are known to render HTML but haven’t been tested.
    39. 39. Windows Mobile: Can render HTML but affected by email service provider. Similar issues to Blackberry OS</li></li></ul><li>Six Steps to Improve Smartphone Email Rendering Now<br />Create a web hosted mobile version<br />Use your space wisely<br />Use ALT tags for your image<br />Avoid nested tables and multiple columns<br />Validate your code<br />Test your campaigns<br />
    40. 40. Creating a Web Hosted Mobile Version<br />Smartphone web browsers offer better support than email clients (rendering, zooming, default image viewing, etc.)<br />Link to hosted version in header of email<br />Take advantage of web-based reporting tools<br />
    41. 41. Creating a Web Hosted Mobile Version<br />Hosted Mobile Version of Email<br />Original HTML email<br />
    42. 42. Additional Resources<br />BlueHornet Whitepapers<br />Best Practices for HTML Email Rendering<br />The Third Screen: What Email Marketers Need to Know About Mobile Rendering<br />
    43. 43. Thank You and Enjoy San Diego!<br />