Responsive Design for

Transcription

1 Good to Know Guide: Responsive Design for INSIDE YOU LL FIND... Responsive Design Overview Media Queries Explained Best Practices How It Works Samples of Design Approach Responsive vs. Predictive Provided by 1

2 Overview: Responsive Design Marketers who work to deliver the right message at the right time now also need to design that message for delivery in the right format. One way to ensure the optimum experience across device types and screen sizes is to incorporate responsive design. At the heart of true responsive design are three key features: Media queries and media query listeners to automate content displayed; A flexible, grid-based layout that uses relative sizing; Scalable images and media, through dynamic resizing or CSS. The difference between mobile-optimized and responsive design is the fact that all three of these technical features must be in place for an design to be deemed responsive. Responsive design is basically (also Web pages) built on a flexible grid framework that adjusts to the audience s viewport. Responsive design uses media queries to serve up images and content based on the resolution or screen size of the device used for view. By using a CSS coding technique, designers can create content and creative that automatically formats and resizes itself to adjust to the screen size being used by the recipient. Basically, the design auto-optimizes. This approach can also be used to hide non-essential parts of the from the mobile viewer elements that would be fine to show on a PC, but are a bit too much for the mobile view. These design techniques can also bring attention to the call-to-action across device views, update text sizes to be larger, and change visuals, such as background images and colors. 2

3 Media Queries Explained Responsive design is based on the use of media queries to pull the correct size of image or content according to viewport or screen size. CSS3 media queries help create a fluid layout that is continuously responsive to the user s display dimensions. It does so by targeting the maximum and minimum widths, rather than specific, device-sized orientations. The good thing about media queries is they re fast, resizing content to fit without having to refresh the page. When you use a responsive grid layout, you only need a single template for all views. This means your team can be more productive with less maintenance of the code base. It also minimizes the need for back-end developers to get involved with the presentation layer. However, there is no silver bullet here. Be aware that media queries are not supported by old browsers and some apps. You also may need to adapt for Internet Explorer using a combination of conditional comments and JavaScript. For examples of responsive design using media queries in action, check out: A sample of CSS3 media query language: /* Smaller than standard 960 (devices and browsers) only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) only screen and (max-width: 767px) {} /* Mobile Landscape to Tablet Portrait (devices and browsers) only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait to Mobile Landscape Size (devices and browsers) only screen and (max-width: 479px) {} 3

4 Responsive design allows you to loosely format your by device. Your two-column that looks great on PC and tablet reduces to a one-column layout when viewed on your cell phone. This takes a bit more design work but, because the mobile audience is large and growing, it may be worth the extra effort. You also can work with your ESP to redesign your formats to incorporate responsive design. Test: Be sure to test everything well before you send. Preview it across desktop, mobile and tablet. It also helps to use a rendering tool like our Campaign Preview to ensure your responsive formats correctly. Try: One thing to note is that responsive design works only in the native mail apps in the iphone and Android. Recipients reading s on their mobile devices using either the mobile browser or proprietary apps (for example, the Gmail app) will see the desktop version of the . Make sure the rendering still looks OK even in those instances and tighten the desktop version up as necessary for those use cases. Track: And finally, don t forget to track open and click-through rates so you can quantify the impact this new technique has on your metrics. For more tips, download the Good To Know Guide: Optimizing for Mobile What to Expect By Device Type Android Some Android devices do not support responsive design. Several apps (including Yahoo and Gmail) will not read CSS media queries. Native clients on an exchange server will not read CSS media queries. Not all Android devices download images. If a device is not supported and the query is not read, the desktop version will automatically be displayed. iphone ios fully supports responsive design in native App. Gmail and Yahoo Mail Apps are NOT supported. BlackBerry, Windows, Other Devices These will not support responsive design. When Forwarding Responsive s... Forwarded s will display both desktop and responsive content, resulting in duplicated content. 4

5 Best Practices for Responsive Design Use your data, not your gut. If you re not quite sure about using responsive design, or if optimizing for mobile is a priority, look to your data. Chances are your mobile open rates are higher than you d expect. Let your data determine when and where to optimize campaigns. If you find desktop conversion rates to be significantly higher (especially if you have a strong mobile open rates), you need look at improving mobile experiences as mobile use increases. Design the mobile version first. Create a mobile-optimized version first, then base the desktop version on that, and not the other way around. This goes for styling, spacing and length of copy. It s easier to add more to the baseline mobile phone version than it is to sacrifice content when paring down a full-blown desktop design. Don t use images as your call to action. If images are turned off, you re in trouble. It s a good idea to always include one call to action that s text or non-graphical. Content that shows without images must be strong enough to either turn on the images, or to get the click. Key content goes on top. Content should display beautifully even when images do not. Avoid large images in the upper left area. Again, design for images turned off. Hide the less important content on the mobile versions. This means you need to establish what the priority content is, and let the cream rise to the top (of the ). Use larger font sizes. 14px is a recommended minimum. 5

6 Skip the three-column format. Use a 1- or 2-column format instead. Some suggest a width of 640px, which you can separate into two columns that are 320px wide. Design for touch. Allow enough space for tappiness, which means buttons are at least 32x32px with enough padding to make a 44x44px target, with plenty of surrounding white space. Leave HTML text as standard as possible. That means use font sizes that are whole numbers. Don t reduce the spacing between letters and don t tighten the line height. Schedule extra time for design, development and testing. Responsive design is more complicated than designing separate s there are more working parts that require attention. Development tips: Avoid background images, animated GIFs, and image maps. Limit CSS and implement as inline CSS. Also, use tables for formatting and specify background colors. Beware of inconsistent grids. Use ALT text for images that contain critical copy but leave the ALT text blank for non-essential images. Also, set the width and height for all images in the HTML. Don t trust special characters. Use the ASCII HTML code to display special characters. Don t trust them to come through on their own. Use your data to evaluate the mobile audience. What percentage are opening on mobile? And on what device? If you re not sure, get in touch for free tracking snippets to use on your upcoming campaigns. us at info@knotice.com for more details. Don t be a perfectionist. Responsive is flexible and adaptive by design. Your s will not look alike across devices that s the point. Widows and odd line breaks will happen. Use a preview tool, but know that each version will not match. 6

7 Other Advice /Mobile Merge - Consider your an extension of your overall approach to mobile. and mobile teams need to come together to bring the best possible brand experience to your customers across channels. As the mobile audience takes over as the majority audience, your marketing team should be focused on improving mobile design and rendering on mobile devices. They also need to test to make sure the links and destinations within that take the audience to a mobile-friendly experience. It can be difficult to find success with a mobile-first mindset if the teams handling strategy, planning and execution spend most of their time behind laptops. Instead, understand how mobile users manage a full inbox, the different ways they view and evaluate s and post-click experiences, and the functional limitations they may encounter. Test using the popular clients and browsers. Also test with the default set at images off so you can see how your tags and content render without images shown. Clean any clutter and make sure your message can carry regardless of image downloads. Use a variety of mobile devices for your tests to make sure the brand experience that starts with an is a solid one. Fonts render differently on different OS, so use system fonts for HTML text; however, text in images can use any font. Keep it simple no custom kerning or tracking. Play it straight. Be realistic when using responsive design as part of your strategy. QA is complicated, so prioritize the revisions. If you design for mobile first, then design around images being turned off, you re already ahead of the game. 7

8 Here s How It Works Responsive design incorporates all possible elements of an into one HTML file, relying on media queries to present or suppress individual content/design modules based on the size of the screen used to view. The illustration below shows the different content options packed into the HTML of a single , and how each renders by device. Responsive design is more work, but it helps optimize for most anything, and it s particularly handy when device type is unknown. Company Logo Company Logo Company Logo Company Logo 8

9 Samples of Design Approach Mobile-Friendly Design The on the left shows how the desktop renders on a mobile device. The on the right shows an designed in a mobile-friendly format. Notice the legibility of the text and the clarity of the call to action on the mobile-friendly version. Also note the offer is above the fold so recipients do not have to scroll down to take action. Desktop Mobile Friendly Responsive Design This example compares the desktop version (left) to the same built using a responsive format. By incorporating responsive design, you can see the readability and styling is significantly improved over the desktop version, as well as the mobile-friendly version shown in the example above. Note the text is clean, clear, legible and the call to action is highlighted. Desktop Responsive 9

10 Desktop Predictive Predictive Design With the right platform and data environment, you can connect recipients with the device associated to that person. For instance, people on your list who have opened any of your s 4 consecutive times on their iphone are very likely to open the next time on their iphone. Historic activity is a great predictor of future activity. Once established, you can design s specific to the user experience for that technology. To the left shows a desktop version, compared to an designed specifically for iphone. Notice the clarity of device-specific design. Responsive Predictive Responsive vs. Predictive Here we see responsive (left) as compared to predictive or devicespecific design. You can see both are legible and more attractive as compared to their desktop counterpart. However, predictive design allows for design decisions to be made with confidence, since you understand how things will render. In this example, notice the call to action as a button returns (since images download automatically on iphone, this is a safe choice), with branding and content. 10

11 Desktop Responsive Predictive Examples of Rendering on an Android Device As we mentioned earlier in this guide, responsive is no silver bullet or cure-all to mobile optimization, but it can be a smart solution when device type used is unknown. Even with responsive, rendering can be difficult across Android devices. When you know a person in your audience is consistently an Android opener, perhaps predictive design is better to use. Above are three versions of the same . On the desktop version, you can see the image falling away off to the right of the viewport. The user would have to swipe the screen to see what s hiding. While it is good that the text is placed to the left, it still leaves much to be desired as a mobile experience. The responsive design version is better. While there is no visible call to action and almost too much text for mobile, at least the design fits nicely within the viewport the content is legible. The predictive version designed for Android users is clean and clear - even with embedded images turned off. You still get an attractive, legible with a call to action that sits above the fold. 11

12 Desktop Responsive Predictive Android Devices with No Images Loaded Many styles of Android phone leave images turned off by default (as do some clients, such as Outlook). This is where the rubber meets the road for mobile-friendly, responsive and predictive designs. As you can see in the desktop version, the mobile experience leaves a person, well, empty. On the bright side, they did use ALT text effectively to read something meaningful when no images are downloaded. But it s far from great overall. The center responsive version shows clean, clear text but the call to action remains buried below and requires extra effort on the part of the user to view. The predictive design on the right, even with images off, shows a clean, clear look. The call to action still shows up well. The only thing missing is the company logo, which may or may not impact conversions in this case. Some may debate the choice of responsive versus predictive. Only testing can determine the best course of action. Use your data to understand your audience, then provide them with the best mobile experience for your campaigns. 12

13 Our Perspective: Responsive vs. Predictive Responsive design is the latest, greatest approach to mobile optimization. It s a solid option, especially when you don t know the device affiliation, or if doing specific versioning is not necessarily going to provide more lift off of the responsive version itself. But when you have a unified data environment (one that can gather pertinent information about cross-channel campaign engagement, even across ios) and you can determine the affinity between the recipient and their device of choice, predictive design may be a better choice. Of course, responsive is a hot topic for marketers optimizing for mobile. And while it s a good solution, it s not necessarily the best solution in every case. If your platform can handle specific versioning based on historic open patterns by device, it s worthwhile to test and see which approach responsive or predictive will provide the best lift in campaign response. Some suggest marketers view responsive design as a catch-all approach, to make sure campaigns look good regardless of screen size, increasing the likelihood of a solid mobile experience when device types are unknown. However, when responsive breaks down, or when you want an unique to the full-functioning features of each device for a more robust experience, predictive design is the way to go. Predictive design is all about using your data to create excellent experiences specific to device type of the recipient. Predictive is somewhat opposite of responsive, though both should be part of your arsenal, depending on the level of device fragmentation in your audience. 13

14 Instead of using a kitchen sink strategy and including every possibility into one HTML counting on media queries to sort it all, predictive takes a more proactive approach based on device-specific targeting segmentation. That capability is based on customer data. As responsive is a catch-all, predictive is anticipated, based on historic audience data to identify a relevant design approach based on past customer interaction. For instance, if you know specific people in your audience use their ipad to open s during the workday, your design can offer an outstanding tablet experience sent to those people. Desktop openers can get desktop versions. The iphone and Android openers can each receive device-specific versions that will render best on those device types. While marketers are excited about the opportunities of responsive, once you understand device affiliation, it s better to offer the approach that leverages that data for the best brand experience possible. Once you have the data, you can be predictive. Responsive? Predictive? Which to Use When Predictive relies on a form of audience targeting. Start with a look at your overall opens, mobile versus desktop, and the types of devices used. If you don t work with an service provider (ESP) who can tell you how each person in your audience engages with each , and on what device, get in touch with your Knotice representative. Also, we ll also be offering a free mobile opens reporting service, which may be worth exploring for your upcoming campaigns. If you find yourself heading down a path where you re versioning the creative specifically for mobile, that may be the trigger point to explore a predictive approach once you know the device affiliation of your recipients. While responsive has many benefits, simplifying production is not one of them. Things can get complicated quickly. You may find that a predictive approach simplifies things, making it easier from a coding and workflow perspective. 14

15 When looking at predictive design, testing will help to determine if device-specific creative provides more lift. Another consideration is your team resources, and whether you have the production capacity (and the right platform) to efficiently manage device-specific versioning, rather than the complications of responsive design execution. Device affiliation matters to both approaches. When testing, and once you understand what performs best for the specific versioning, you don t have to have a predictive-only or responsiveonly approach. Hybrids work also. You may want to take a responsive approach, with predictive, device-specific versions only sending to known Android openers, or another combination of approaches. One question to ask is whether or not your ESP can easily version content easily, based on specific rules informed by your data preferably by integration with a unified data environment. If so, then you can use your data, and segment the versioning of creative based on that. If you have a single view of the customer, this is easy to do and easier to test. A Shared Vision for All Versions The goal is to send that looks great; however, keep in mind that not every experience is going to be perfect. It s about deduction versus knowing. Operationally, if you know that someone consistently opens on a specific device, it makes sense to design for that device and send that version to that person. You can decide what those rules should be to define what a mobile opener means such as last 3 opens on the same device, etc. When you can identify those consistencies, predictive makes sense from an experiential standpoint. This ensures they ll have a great experience, custom-tailored to the device they most often use. The only way to know for sure is to test. Look at your data. Design around the needs, wants and preferences of your customers. Both responsive and predictive approaches have the same goal a fantastic experience for each person on your list optimized for their device choices. 15

16 Good to Know Guide: Optimizing for Mobile Good to Know Guide: Improving Your Open Rates Prepared by Mobile Opens Report 2nd Half of 2012 Q3/Q % Q1/Q Q3/Q Q1/Q Q % 20% 27% 0% 10% 20% 30% 40% 50% @ 29% During the second half of 2012, 41% of s opened were opened on a mobile device Opens Q3/Q Download your copy at: Find out more: info@knotice.com