Responsive Design Best Practices

Size: px

Start display at page:

Download "Responsive Design Best Practices"

Timothy Gardner
10 years ago
Views:

1 Responsive Design Best Practices

2 Heather Shore Account Director Silverpop Harlan Cayetano Sr. Specialist Silverpop Yin Mac Program Manager Silverpop Andrea Shyrock Production Manager Alchemy Worx

3 Multi-Screen Optimization

4 Litmus/Knotice Multi-Screen Optimization January 2013 Opens Most brands can expect to see 50% of their s opened on a mobile device in the coming six to 12 months. 25% 42% Mobile Desktop Webmail 33%

their emails opened on a mobile device in the

5 Multi-Screen Optimization

6 Multi-Screen Optimization Start with grid design Plan for multiple screens Simple Calls to Action Larger fonts Large CTA buttons Use media queries

7 Multi-Screen Optimization s 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.

be clickable Wrap content so mobile users only need to scroll up and down and not left

8 Responsive

9 Source: Style Campaign 3 column to 2 column

10 Responsive Design Uses media queries 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%

conditional statement which enables alternate styles If the screen size is x, they

11 Responsive Design Adult finger covers 45 pixels Call to action" buttons should have proper padding space - 15 pixels. s without 15 pixels have a 28% lower conversion rate. Causes "tap error Source: Style Campaign

12 Responsive Design Beyond Call-to-action needs to go to a responsive landing page Responsive principals apply to landing pages: Clear CTA above the fold Branded design matching 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.

matching email experience Figure out where to place elements within the larger page Figure out

13 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   <link href="includes/phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:600px)">  <link href="includes/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:601px) and (max-width:800px)">  <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.

--[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"> <!

15 Responsive Design Device / Native 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

16 Responsive Testing Always test before deploying your campaigns Use a rendering tool like Insights to test Yahoo not showing Desktop version, but Mobile version

17 Client Examples

18 Client Examples Scaleable layout and images

22 UPS Shows the framework of table structure.

23 Simplify header image and remove text from the background image

24 Stack elements of intro section

25 This is an example of a totally fluid design that will fit any screen size when opened.

26 Multi-Screen Optimization: Things to consider Final s 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.

27 How can Silverpop help? Download the Multi-Screen Optimization whitepaper Listen to Multiscreen Design: Lessons from the Pros webinar

28 Thank you

Responsive Email Design Guide. The fundamentals of designing and building mobile optimized email

Responsive Email Design Guide. The fundamentals of designing and building mobile optimized email Responsive Email Design Guide The fundamentals of designing and building mobile optimized email With the rapid increase of smartphone and tablet adoption, mobile email opens are growing exponentially every