Responsive Design Best Practices
Heather Shore Account Director Silverpop Harlan Cayetano Sr. Email Specialist Silverpop Yin Mac Program Manager Silverpop Andrea Shyrock Production Manager Alchemy Worx
Multi-Screen Optimization
Litmus/Knotice Multi-Screen Optimization January 2013 Opens Most brands can expect to see 50% of their emails opened on a mobile device in the coming six to 12 months. 25% 42% Mobile Desktop Webmail 33%
Multi-Screen Optimization
Multi-Screen Optimization Start with grid design Plan for multiple screens Simple Calls to Action Larger fonts Large CTA buttons Use media queries
Multi-Screen Optimization Emails should be clear and simple and any non essential elements removed Create larger buttons so easier to click or design whole sections to be clickable Wrap content so mobile users only need to scroll up and down and not left and right Streamline content really think about what users on their mobile will interact with.
Responsive
Source: Style Campaign 3 column to 2 column
Responsive Design Uses media queries or @media Detects screen size of the device being read on and enables alternate styles accordingly Not a line of code, more like a conditional statement which enables alternate styles If the screen size is x, they display y If the screen size is x, then increase headline to y If screen size is x, then show image at 100%
Responsive Design Adult finger covers 45 pixels Call to action" buttons should have proper padding space - 15 pixels. Emails without 15 pixels have a 28% lower conversion rate. Causes "tap error Source: Style Campaign
Responsive Design Beyond Email Call-to-action needs to go to a responsive landing page Responsive email principals apply to landing pages: Clear CTA above the fold Branded design matching email experience Figure out where to place elements within the larger page Figure out element order for smaller screens Make sure you can code the placement in CSS without breaking the layout.
Responsive Design in Landing Pages here is the code in the <head> section: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> This line snaps the page to the width of the screen <meta http-equiv="x-ua-compatible" content="ie=9" /> This line makes sure ie 9 reads queries <!--[if lt IE 9]> Default css for ie older browsers <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="includes/test-2col.css" type="text/css"> <![endif]--> <!-- Phone --> <link href="includes/phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:600px)"> <!-- Tablet --> <link href="includes/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:601px) and (max-width:800px)"> <!-- Desktop --> <link href="includes/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)"> Hides url bar on phones <script type="application/x-javascript"> if (navigator.useragent.indexof('iphone')!= -1) { addeventlistener("load", function() { settimeout(hideurlbar, 0); }, false); } function hideurlbar() { window.scrollto(0, 1); } </script> This code goes in the landing page html and references a css file for each screen size (phone, tablet, desktop). The browser or the client will pull in the correct CSS file.
Responsive Design Device / Native Email Client Media Query Support Android 2.1 Android Gmail BB OS 5 Droid Exchange Droid Yahoo Win Mobile 6.1 WP7 Yahoo No No No No No No No No
Responsive Testing Always test before deploying your campaigns Use a rendering tool like Email Insights to test Yahoo not showing Desktop version, but Mobile version
Client Examples
Client Examples Scaleable layout and images
UPS Shows the framework of table structure.
Simplify header image and remove text from the background image
Stack elements of intro section
This is an example of a totally fluid design that will fit any screen size when opened.
Multi-Screen Optimization: Things to consider Final emails may not be a perfect match to wireframes as the code controls the final layout, and dealing with multiple devices, screen sizes, mail clients and browsers.
How can Silverpop help? Download the Multi-Screen Optimization whitepaper Listen to Multiscreen Email Design: Lessons from the Pros webinar
Thank you