Design for Web, Email, and Mobile Marketing: How the Medium Affects Your Creative Approach
•Download as PPTX, PDF•
1 like•1,161 views
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.
Recommended
More Related Content
Viewers also liked
Viewers also liked (15)
More from BlueHornet
More from BlueHornet (20)
Recently uploaded
Recently uploaded (20)
Design for Web, Email, and Mobile Marketing: How the Medium Affects Your Creative Approach
- 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!
Editor's Notes
- 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