design for web, email, and mobile marketing: how the medium affects your creative approach

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!