Boost your email marketing Attend at least 1
Boost your email marketing Attend at least 1 full session and ask a question to be entered into the draw to win an i. Pad Pro. Questions will be answered in the Q&A session taking place February 23 rd 2016 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online ‹#›
Email marketing webinar series SESSION 02 Pushing the boundaries 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online ‹#›
Who are we? DAVE BLACK LAURA HARRISON We collect postcards from our holidays! 10 year history working with Seagate CHRIS BARNETT Design, development and reporting Digital marketing agency based in the UK 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
Seagate emails over the years 2009 2011 2013 2015 Emails were very tabular and fixed width As bandwidth improves, more images introduced Responsive and less tabular design Background images, bullet-proof buttons and animations 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
So what’s new? Animated Gifs Bullet-proof buttons Background images Responsive design and layout Hover states CSS animation 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
A solid framework to embellish Images On • Images Off Styling as much as you can using HTML and CSS instead of images is good because: – HTML will display before the images download – If a user has images turned off, content and CTAs are preserved – Animated gifs can be relatively large to download, so its good to show something to the user immediately when they open the email • This is why single image emails are bad for the user and are more likely to be spam trapped • 60% text to 40% images is a good rule of thumb 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
Responsive design and layout • Trends show continuing growth of mobile • Media queries create “break points” for the most common device widths, and adapt imagery and content accordingly • Buttons and paragraphs can become full-width • Everything you need to know should be covered in first view on phone • Push the boundaries by swapping content and turning things on and off for devices to create different user experiences 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
Responsive design and layout 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
The future of responsive • Fluid hybrid, spongy, whatever you want to call it! • Resizes to any device width without media queries (so works in Gmail) • Benefits include consistency across email clients with one set of code • Your code isn’t full of hacks for specific clients Find out more here: https: //www. emailonacid. com/blog/article/email-development/a-fluid-hybrid-design-primer 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
Bulletproof buttons • Can have rounded corners where supported • Proper text so shows if images turned off • Dynamically resizes to the copy • Whole button is clickable • Language localisation, or even personalisation within the button • No more making hundreds of jpegs! Gradients and borders Curvy (where supported) Text appears transparent Transparent (less clickable) Resizes for varying text lengths Find out more here: https: //litmus. com/blog/a-guide-to-bulletproof-buttons-in-email-design 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
Background images • Allows you to use HTML text over a background without having to embed the text in the image • Text is still displayed when images turned off • Supported in 99% of email clients • Set a similar colour as a background for where images are turned off • Try an animated gif in a background Find out more here: http: //1973 online. co. uk/background-images-in-email-unattainable-or-is-it/ 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
Animated gifs • Use where appropriate and not distracting • Adobe After Effects can create a smoother animation that can be imported to Photoshop for final GIF • …but keep an eye on the file size Fallback If animated gifs are not supported (Outlook) the email client will display the first frame. If this is not what you want you can set up a media query to change the content for Outlook. Find out more here: http: //1973 online. co. uk/making-animated-gifs-using-adobe-after-effects/ 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
CSS animations • Using CSS 3 supported in Webkit clients (E. g. i. OS) • Lighter file size than a gif • Freedom to animate wherever (across tables) like our spaceman • Any element of the email, or even the entire email, can be animated Fallback Only turn on where supported and ensure design still works without. Find out more here: http: //1973 online. co. uk/css-animations-moving-sprites-on-an-arc/ 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
CSS for hover states • Useful to aid interactivity on buttons like this email Fallback If not supported, viewer just won’t see the hover state so its definitely worth adding touches like this in for those that can – its not just i. OS. Gmail for example supports hover states • More applicable where a mouse is being used • Hover states can be taken further with rollover images 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
CSS Interactivity In supported email clients CSS 3 allows you to add more interactivity than was previously possible, and create web-like experiences in email! 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
Where is it supported? Find out more here: http: //1973 online. co. uk/email-in-2015 -what-works-and-what-doesnt/ 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
Support model You can target your emails towards differing levels of support: Interactive Limited Static 57% 20% 23% i. OS Gmail (webmail) Gmail app Apple Mail Yahoo! Outlook (Windows) Mailbox AOL Outlook. com Our approach is aim for the best but cater for the worst Source: Mark Robbins at Rebel. Mail 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
How to test it • Our favourite testing platform is Litmus, other services exist such as Email on Acid • Send one email and see it rendered in a variety of clients • Litmus also offers a builder service with instant previews as well as an email checklist so you don’t miss anything • Having dummy devices helps to be absolutely sure its displayed as you want, and to also test interactivity 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
Resources to get you going • Litmus – http: //www. litmus. com – Engaged community, builder, awesome testing, cool conference, blog • Email on Acid – http: //www. emailonacid. com/ – Testing, great free templates, blog, tips and tricks • Campaign Monitor - https: //www. campaignmonitor. com/resources/ – ESP, provide lots of info, useful resources section • Mailchimp – http: //mailchimp. com/ – ESP, active in email community, blog • Fresh Inbox - http: //freshinbox. com/blog/ – Interactive email techniques • Really good emails – http: //reallygoodemails. com/ – Showcase of cool emails 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online
This has been… SESSION 02 Pushing the boundaries with @1973 online 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online ‹#›
Tune in next time for… SESSION 03 Q&A Submit a question for our Q&A session in February, where we’ll pick some to deep dive into as well as a live quick fire question round. 1973 Limited, Couching House, Watlington, Oxfordshire, OX 49 5 PX, UK | +44 (0)1491 613732 | www. 1973 online. co. uk | info@1973 online. co. uk | @1973 online ‹#›
- Slides: 21