1. ‹#› 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online Boost your email marketing Attend at least 1 full session and ask a question to be entered into the draw to win an iPad Pro. Questions will be answered in the Q&A session taking place February 23 rd 2016

2. ‹#› 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online Email marketing webinar series SESSION 02 Pushing the boundaries

3. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online LAURA HARRISON Digital marketing agency based in the UK Design, development and reporting 10 year history working with Seagate Who are we? DAVE BLACKCHRIS BARNETT We collect postcards from our holidays!

4. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online Seagate emails over the years Background images, bullet-proof buttons and animations 2009 Emails were very tabular and fixed width As bandwidth improves, more images introduced Responsive and less tabular design 201320112015

5. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online So what’s new? Bullet-proof buttons CSS animation Responsive design and layout Animated Gifs Background images Hover states

6. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online A solid framework to embellish 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 Images Off Images On

7. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online 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

8. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online Responsive design and layout

9. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online The future of responsive Find out more here: https://www.emailonacid.com/blog/article/email-development/a-fluid-hybrid-design-primerhttps://www.emailonacid.com/blog/article/email-development/a-fluid-hybrid-design-primer 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

10. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online 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! Find out more here: https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-designhttps://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design Transparent (less clickable) Resizes for varying text lengths Curvy (where supported) Text appears transparent Gradients and borders

11. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online 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://1973online.co.uk/background-images-in-email-unattainable-or-is-it/http://1973online.co.uk/background-images-in-email-unattainable-or-is-it/

12. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online 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 Find out more here: http://1973online.co.uk/making-animated-gifs-using-adobe-after-effects/http://1973online.co.uk/making-animated-gifs-using-adobe-after-effects/ 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.

13. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online CSS animations Using CSS3 supported in Webkit clients (E.g. iOS) 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 Find out more here: http://1973online.co.uk/css-animations-moving-sprites-on-an-arc/http://1973online.co.uk/css-animations-moving-sprites-on-an-arc/ Fallback Only turn on where supported and ensure design still works without.

14. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online CSS for hover states Useful to aid interactivity on buttons like this email More applicable where a mouse is being used Hover states can be taken further with rollover images 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 iOS. Gmail for example supports hover states

15. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online CSS Interactivity In supported email clients CSS3 allows you to add more interactivity than was previously possible, and create web-like experiences in email!

16. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online Where is it supported? Find out more here: http://1973online.co.uk/email-in-2015-what-works-and-what-doesnt/http://1973online.co.uk/email-in-2015-what-works-and-what-doesnt/

17. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online Support model Static 23% Gmail app Outlook (Windows) Outlook.com Limited 20% Gmail (webmail) Yahoo! AOL Interactive 57% iOS Apple Mail Mailbox Source: Mark Robbins at RebelMail You can target your emails towards differing levels of support: Our approach is aim for the best but cater for the worst

18. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online How to test it Our favourite testing platform is Litmus, other services exist such as Email on AcidLitmus 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

19. 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online Resources to get you going Litmus – http://www.litmus.comhttp://www.litmus.com –Engaged community, builder, awesome testing, cool conference, blog Email on Acid – http://www.emailonacid.com/http://www.emailonacid.com/ –Testing, great free templates, blog, tips and tricks Campaign Monitor - https://www.campaignmonitor.com/resources/https://www.campaignmonitor.com/resources/ –ESP, provide lots of info, useful resources section Mailchimp – http://mailchimp.com/http://mailchimp.com/ –ESP, active in email community, blog Fresh Inbox - http://freshinbox.com/blog/http://freshinbox.com/blog/ –Interactive email techniques Really good emails – http://reallygoodemails.com/http://reallygoodemails.com/ –Showcase of cool emails

20. ‹#› 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online This has been… SESSION 02 Pushing the boundaries with @1973online

21. ‹#› 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0)1491 613732 | www.1973online.co.uk | info@1973online.co.uk | @1973online 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.