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!
