‹#› 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | Boost your 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

‹#› 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | marketing webinar series SESSION 02 Pushing the boundaries

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | 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!

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | Seagate s over the years Background images, bullet-proof buttons and animations s were very tabular and fixed width As bandwidth improves, more images introduced Responsive and less tabular design

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

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | 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 This is why single image s 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

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | 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, OX49 5PX, UK | +44 (0) | | Responsive design and layout

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | The future of responsive Find out more here: 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 clients with one set of code Your code isn’t full of hacks for specific clients

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | 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: Transparent (less clickable) Resizes for varying text lengths Curvy (where supported) Text appears transparent Gradients and borders

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | 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 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:

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | 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: Fallback If animated gifs are not supported (Outlook) the 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.

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | 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 , or even the entire , can be animated Find out more here: Fallback Only turn on where supported and ensure design still works without.

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | CSS for hover states Useful to aid interactivity on buttons like this 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

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | CSS Interactivity In supported clients CSS3 allows you to add more interactivity than was previously possible, and create web-like experiences in !

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | Where is it supported? Find out more here:

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | 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 s towards differing levels of support: Our approach is aim for the best but cater for the worst

1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | How to test it Our favourite testing platform is Litmus, other services exist such as on AcidLitmus on Acid Send one and see it rendered in a variety of clients Litmus also offers a builder service with instant previews as well as an 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, OX49 5PX, UK | +44 (0) | | Resources to get you going Litmus – –Engaged community, builder, awesome testing, cool conference, blog on Acid – –Testing, great free templates, blog, tips and tricks Campaign Monitor - –ESP, provide lots of info, useful resources section Mailchimp – –ESP, active in community, blog Fresh Inbox - –Interactive techniques Really good s – –Showcase of cool s

‹#› 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | This has been… SESSION 02 Pushing the boundaries

‹#› 1973 Limited, Couching House, Watlington, Oxfordshire, OX49 5PX, UK | +44 (0) | | 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.