Create Beautiful Responsive Marketo Emails & Landing Pages... No Coding Required!
•Download as PPTX, PDF•
5 likes•3,270 views
In this session from the 2015 Marketo Summit, Pierce Ujjainwalla, Marketo Champion and Co-founder of Knak covers: - the importance of responsive design - the reason half of marketers don't use responsive templates - a new way marketers can make responsive templates, with no coding required - 5 responsive design myths, debunked
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (13)
Recently uploaded
Recently uploaded (20)
Create Beautiful Responsive Marketo Emails & Landing Pages... No Coding Required!
- 1. Create Beautiful Responsive Marketo Emails & Landing Pages... No Coding Required! April 15, 2015 Pierce Ujjainwalla Founder/Marketo Champion Revenue Pulse
- 2. Page 2 An Evolution to Mobile
- 3. Page 3 Emails being Opened on Mobile
- 4. Page 4 53%% of Emails Being Opened on Mobile Devices in 2015 Source: CampaignMonitor
- 5. Page 5 512%% Growth of Mobile Opens in the Past 4 Years Source: Litmus
- 6. 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
- 7. Page 7 What can you do with Responsive Design? • Resize content (text/images) • Hide/show content • Stack columns • Restyle content
- 8. 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)
- 9. Page 9 Fluid
- 10. Page 10 Adaptive 1023px 500px 480px
- 12. Page 12 Why Responsive Design Matters…
- 13. Page 13
- 14. Page 14 Impact of Responsive Templates Source: MailChimp
- 16. Page 16 Responsive template adoption is low. 42 % Almost half of Marketers NEVER use responsive templates. Source: ExactTarget 58%
- 17. Page 17 Why!?
- 18. Page 18 + 200 more lines of code
- 19. Page 19 Creating Responsive Templates is Hard. • Requires coding knowledge • Email clients/applications are finicky • Design is subjective, hard to explain
- 20. 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. ?????
- 21. Page 21
- 22. 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
- 23. Page 23
- 24. Page 24
- 25. Page 25
- 26. Page 26
- 27. Page 27 Editable in Marketo
- 29. 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
- 30. Page 30 Myth #2 2 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
- 31. Page 31 Myth #3 WYSIWYG 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.
- 32. Page 32 Worst Practice #1
- 33. Page 33 Worst Practice #2
- 34. Page 34 Myth #4 Rich 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.
- 35. Page 35 Adding Rich Text Over an Image Banner
- 36. Page 36 Myth #5 Separate 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
- 37. Page 37 Separate Images for Desktop vs. Mobile
- 38. 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)
- 39. Page 39 Support for Webfonts in Email
- 40. 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!
- 41. Page 41 Get Started Today! Build Your First Template, FREE: www.knak.io
- 42. Page 42 Contact Us Pierce Ujjainwalla Founder/Marketo Champion Revenue Pulse pierce@revenuepulse.com @marketing_101 Booth #35
- 43. Thank You!
Editor's Notes
- Hey guys thanks for coming. Want to start off by giving you a bit of context on how we got here. I got into Marketo automation 8 years ago at Cognos IBM. Then I went to a couple of startups where I realized that they really needed marketing automation, and implemented and lead Marketo. From there I founded Revenue Pulse, a Marketo consultancy, that helps Enterprise customers like Microsoft, Trend Micro and Amdocs and startups like Klipfolio and others get the most out of their Marketo investment. The reason why I chose to speak on this subject, is because it is the single biggest problem that our clients have today. Last year I spoke on analytics, and creating reports that executives will love. That is definitely an important topic and we are all about driving revenue, but I think templates are equally important, and I’ll tell you why. It’s the ONLY part of your entire marketing automation deployment that your customers and prospects will actually SEE. We go into clients all the time who have spent months and tons of money setting up their instances, but they have spent no time on their templates, the one customer-facing piece.
- Stat from Litmus, they are tracking over 1 Billion emails per month.
- Stat from
- Stat from Litmus
- Resizing width but not the elements
- - 500px would only ever appear like this on a PC Device that’s 500px wide would scale appropriately Viewport=screen size
- Marketo Mobile Functionality – you have to maintain two templates, and rebuild the mobile version from scratch.
- I’ve been in your shoes, I want to have the best templates in the world that just look awesome. But I don’t have the knack for that. That’s where Knak comes in. Knak is a SaaS based Marketo template builder for marketers. The first of its kind.
- 1 line of code makes a template responsive 2 versions of templates are required (1 for desktop, 1 for mobile) WYSIWYG editor cannot be used for responsive assets Rich text can be applied over banner images in emails Separate images are required for mobile
- Can’t truly be responsive without media queries