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.

1. Design for Web, Email and Mobile Marketing Michael Buchmiller – Manager of Creative Services Michael McKibben – Creative Designer

2. Design for Web, Email and Mobile Marketing Be everywhere your customers are Ensure your message is on brand and on target Maximize intended results

3. The Right Vehicle - Understanding Your Capabilities By Design - Consistency & EffectivenessMobile Marketing

4. The Right Vehicle for the Right Job

5. Screen Resolutions 1680 x 1050 – 21” desktop computer 1440 x 900 – 15” laptop computer 1024 x 768 – Apple iPad 480 x 320 – Apple iPhone 240 x 260 – RIM Blackberry Pearl Recommended email width = 600 *All sizes in pixels

6. Technical Capabilities – Laptop/Desktop Web- Full HTML- Flash- Video- Full CSS Support- Forms- JavaScript Email- Limited HTML- Limited CSS- Image Limitations (blocking, background)

7. Technical Capabilities - Mobile Web- Limited HTML & CSS- Flash – device dependent- Video- Forms- JavaScript Email- HTML & CSS - Depends on Device- Image Limitations (blocking, background)

8. By Design – Consistency & Effectiveness Website Email

9. Brand Consistency Why?- Trust- Credibility How?- One voice- Web/email, online/offline, everything should match.

10. Brand Reputation Quality of Design Free of typos and errors Adheres to style guides- fonts- colors- logo placement- layout

11. By Design Email Website

12. Brand Reputation – A Bad Apple

14. Font

16. Mobile Rendering 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. Mobile – Consumption – Preview/Absorb Desktop – Creation/Consumption – Interaction/Engagement

18. Obstacles to good smartphone rendering

19. Email rendering engines and operating systems

21. Definitions What do we mean by Operating System? A program that manages the resources and process of a computer Provides the interactive graphic interface between user and device Controls functions of calling, texting, web browsing, using apps, and rendering emails

22. Major Smartphone Operating Systems iPhone OS - Apple iPhone Android OS - Google Nexus One, HTC Dream, T-Mobile G1, Nook, 18+ others Blackberry OS - RIM Blackberry Symbian OS - Nokia, Samsung, Sony Ericsson Windows Mobile OS - Samsung, HP, Motorola Palm webOS - Palm Pre, Palm Pixi

23. Who Uses Smartphones? Users are twice as likely to own for business use only Predominantly male Versus average mobile users… 65% more likely to be between 25 and 34 Nearly 2x more likely to make over $100,000/year * According to a December 2009 Gartner report

25. Blackberry and iPhone are the largest US players, 2 & 3 respectively in the global market

27. Mobile Screen Resolutions RIM Blackberry Curve: 320 x 240 Apple iPhone 3G: 480 x 320 RIM Blackberry Storm: 480 x 360 RIM Blackberry Pearl: 240 x 260 G1 by HTC: 320 x 480

29. Ability to render HTML at all is dependent on service

30. Third party applications available, still affected by service

31. If HTML is allowed, tries to fit entire email within constraints of screen

33. Automatically scaled down to fit width of the display

34. Users can easily zoom in and out

35. Images are shown by default

37. Gmail app: images don’t load by default, zooming not available, otherwise great at HTML rendering

40. Creating a Web Hosted Mobile Version Smartphone web browsers offer better support than email clients (rendering, zooming, default image viewing, etc.) Link to hosted version in header of email Take advantage of web-based reporting tools

41. Creating a Web Hosted Mobile Version Hosted Mobile Version of Email Original HTML email

42. Additional Resources BlueHornet Whitepapers Best Practices for HTML Email Rendering The Third Screen: What Email Marketers Need to Know About Mobile Rendering

43. Thank You and Enjoy San Diego!