create beautiful responsive marketo emails & landing pages... no coding required!
TRANSCRIPT
Create Beautiful Responsive Marketo Emails & Landing Pages... No Coding Required!
April 15, 2015
Pierce Ujjainwalla
Founder/Marketo Champion
Revenue Pulse
Page 2
An Evolution to Mobile
Page 3
Emails being Opened on Mobile
Page 4
53%% of Emails Being Opened on Mobile Devices in 2015
Source: CampaignMonitor
Page 5
512%% Growth of Mobile Opens in the Past 4 Years
Source: Litmus
Page 6
What is Responsive Design?
Email and landing pages that will respond to the recipient’s environment based on:
• Screen Size
• Email Client/Application
• Device
• Web Browser
Page 7
What can you do with Responsive Design?
• Resize content (text/images)
• Hide/show content
• Stack columns
• Restyle content
Page 8
Types of Responsive Design
1. Fluid (Full width with no breakpoints)
2. Adaptive (Fixed widths with multiple breakpoints)
3. Responsive (Fluid widths being constantly responsive)
Page 9
Fluid
Page 10
Adaptive
1023px 500px 480px
Page 11
Responsive
Page 12
Why Responsive Design Matters…
Page 13
Page 14
Impact of Responsive Templates
Source: MailChimp
Page 15
Source: MailChimp
Page 16
Responsive template adoption is low.
42%
Almost half of Marketers NEVER
use responsive templates.
Source: ExactTarget
58%
Page 17
Why!?
Page 18
+ 200 more lines of code
Page 19
Creating Responsive Templates is Hard.
• Requires coding knowledge
• Email clients/applications are finicky
• Design is subjective, hard to explain
Page 20
What are your options?
1. Agency
2. Internal Resources (Designer/Developer)
3. Marketo Template (www.templates.marketo.com)
4. Marketo Mobile Functionality (Landing Pages Only)
5. ?????
Page 21
Page 22
Responsive
53% of emails opened on mobile. Get templates that are
up to the test.
Customizable
Pick a layout, customize branding, colors, and social links.
Tested
Best-in-class templates, tested across all email clients and
devices using Litmus.
www.knak.io
Page 23
Page 24
Page 25
Page 26
Page 27
Editable in Marketo
Page 28
Responsive Design Myths
Debunked.
Page 29
Myth #1 1 line of code makes a template responsive
False.
• Responsive templates require hundreds of lines of code• Average Email: 300 lines of code
• Average Landing Page: 500 lines of code
• Each element needs to be coded using media queries or wrapping techniques
Page 30
Myth #22 versions of templates are required (1 for desktop, 1 for mobile)
False.
• Media queries are able to determine the size of the recipient/visitor’s screen and sizes the elements accordingly
Page 31
Myth #3WYSIWYG Editor cannot be used for responsive templates.
False.
• A properly designed responsive template will allow you to use the WYSIWYG editor just like any other template.
Page 32
Worst Practice #1
Page 33
Worst Practice #2
Page 34
Myth #4Rich text can be applied over banner images in email.
It depends.
• Outlook 2007, 2010 and 2013 requires a conditional comment for this to work.
• Marketo removes conditional comments from HTML code.
Page 35
Adding Rich Text Over an Image Banner
Page 36
Myth #5Separate images are required for mobile
It depends.
• One set of images can be resized using media queries
• However, in some cases multiple images are desirable.• More difficult to work with in the WYSIWYG editor
Page 37
Separate Images for Desktop vs. Mobile
Page 38
*Bonus*TypeKit or Webfonts can be used.
It depends.
Landing Pages
Browsers can leverage TypeKit or Webfonts
Emails
Only certain email clients support Webfonts (not
TypeKit)
Page 39
Support for Webfonts in Email
Page 40
3 Key Take-Aways
1. Marketers need to design and develop emails and landing pages optimized for mobile.
2. Designing and developing responsive templates is hard, but it doesn’t have to be.
3. Responsive templates don’t just look nice, they improve campaign performance, too!
Page 42
Contact Us
Pierce Ujjainwalla
Founder/Marketo Champion Revenue Pulse
@marketing_101 Booth #35
Thank You!