design for web, email, and mobile marketing: how the medium affects your creative approach
DESCRIPTION
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.TRANSCRIPT
Design for Web, Email and Mobile Marketing
Michael Buchmiller – Manager of Creative Services
Michael McKibben – Creative Designer
Design for Web, Email and Mobile Marketing
> Be everywhere your customers are
> Ensure your message is on brand and on target
> Maximize intended results
The Right Vehicle - Understanding Your Capabilities
By Design - Consistency & Effectiveness
Mobile Marketing
The Right Vehicle for the Right Job
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
Technical Capabilities – Laptop/Desktop
> Web- Full HTML- Flash- Video- Full CSS Support- Forms- JavaScript
> Email- Limited HTML- Limited CSS- Image Limitations (blocking, background)
Technical Capabilities - Mobile
> Web- Limited HTML & CSS- Flash – device dependent- Video- Forms- JavaScript
> Email- HTML & CSS - Depends on Device- Image Limitations (blocking, background)
By Design – Consistency & Effectiveness
Website Email
Brand Consistency
> Why?- Trust- Credibility
> How?- One voice- Web/email, online/offline, everything should match.
Brand Reputation
> Quality of Design
> Free of typos and errors
> Adheres to style guides- fonts- colors- logo placement- layout
By Design
Email Website
Brand Reputation – A Bad Apple
Brand Reputation – A Bad Apple
What’s Wrong?
> “The only place to buy iPhone”
> Font
> “Supported by Yahoo!”
Mobile Rendering
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
Mobile Rendering
> Definitions, landscape, and marketshare
> Obstacles to good smartphone rendering
> Email rendering engines and operating systems
> Six steps to improve smartphone rendering
Definitions
What do we mean by Smartphone?
> Mobile phone that offers PC-like functionality> Can run software, play media, connect to the internet> Includes a QWERTY keyboard
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
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
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
US and Global Smartphone Usage
> Symbian leads the global market, not a big player in the US.
> Blackberry and iPhone are the largest US players, 2 & 3 respectively in the
global market
> Windows Mobile is the only OS losing market share in the US
Obstacles to Good Smartphone Rendering
> Screen Size> Device Models> Operating Systems
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
Blackberry OS
> Two different services BIS and BES
> Ability to render HTML at all is dependent on service
> Third party applications available, still affected by service
> If HTML is allowed, tries to fit entire email within constraints of screen
> Images are re-sized, columns of information are collapsed, affects tables and bullet lists
iPhone OS
> First to deliver full-color, beautifully rendered HTML emails
> Automatically scaled down to fit width of the display
> Users can easily zoom in and out
> Images are shown by default
> Small resolution, difficult to easily read a 600 pixel wide email
Android OS
> Two unique email applications… built-in Gmail app and a separate app for all other accounts
> Gmail app: images don’t load by default, zooming not available, otherwise great at HTML rendering
> Separate app: not as robust, reports of user issues
Other Operating Systems
> Symbian: Older versions don’t render HTML. Newer versions on Nokia phones are known to render HTML but haven’t been tested.
> Windows Mobile: Can render HTML but affected by email service provider. Similar issues to Blackberry OS
Six Steps to Improve Smartphone Email Rendering Now
> Create a web hosted mobile version> Use your space wisely> Use ALT tags for your image> Avoid nested tables and multiple columns> Validate your code> Test your campaigns
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
Creating a Web Hosted Mobile Version
Original HTML email Hosted Mobile Version of Email
Additional Resources
> BlueHornet Whitepapers> Best Practices for HTML Email Rendering> The Third Screen: What Email Marketers Need to Know About Mobile Rendering
Thank You and Enjoy San Diego!