MOBILE OPTIMIZATION. the what, why and how of responsive design

Transcription

1 MOBILE OPTIMIZATION the what, why and how of responsive design includes a step-by-step tutorial

2 Table of Contents Chapter 1: Why Go Responsive?... 2 Chapter 2: Case Studies: Adapting to Responsive Design... 4 Chapter 3: Responsive Design Tutorial... 8 Chapter 4: Free Responsive Template

3 Chapter 1: Why Go Responsive? We are living in the age of mobile devices. We don t go anywhere without our phones and it's hard to remember a time when social networks, news and s weren't at our fingertips. The chart below ranks the most popular smartphone activities. Guess what comes in at #1? This is a screen capture from IDC and Facebook: Always Connected. Over 53% of total opens occurred on mobile devices in 2014, making responsive design one of the most powerful tools available to designers, developers and marketers today. Unfortunately, it s also one of the most confusing. From certain clients not supporting media queries to choosing the min and max width, coding s that look fantastic on every device can be quite the challenge. No need to panic, though. We ve been researching, coding and trouble-shooting responsive s from the get-go and documented all of the quirks and fixes along the way. 2

4 In this guide, you ll get everything from case studies to an easy responsive design tutorial to troubleshooting tips and more. So what are you waiting for? Dig in to discover all you need to know to create an that looks beautiful in every inbox, every time. 3

5 Chapter 2: Case Studies: Adapting to Responsive Design It can be hard to convince higher-ups or customers to spend the time and money required to create mobile-friendly s. But it s vitally important. Optyn reported that 75% of smartphone users delete s they can t read (i.e.: non-responsive s rendered illegible on a mobile device). So, we scoured the web and found three case studies that exemplify the results responsive design can achieve. Auto Trader s responsive newsletter Auto Trader, an online marketplace for car shoppers and sellers, was sending out a monthly newsletter to over 250,000 subscribers across the U.K. They examined the stats of their carenthusiast audience and noticed that over 40% of their opens occurred on mobile devices, but their template was not responsive. Spurred by the need to make their mobile-friendly, they recruited full-service digital agency Chalk and Pixel to code and design a new template from scratch. Chalk and Pixel was charged with increasing both engagement levels and trust in the brand. The new template design improved metrics across the board when compared to the previous month s newsletter. It saw a: 20% increase in open rate 45% increase in engagement 134% increase in click throughs Take a look at Chalk and Pixel s new template for Auto Trader that meets the unique requirements of all mobile devices. 4

6 This is a screen capture provided by Chalk and Pixel. The new design also utilizes preheader text, CSS based buttons and styled alt text to improve the overall look and feel, taking Auto Trader s campaigns to the next level. 5

7 Crocs: Static desktop design vs. responsive design The hospitality and the travel industries have been the fastest adopters of responsive design. Some industries, though, haven t embraced mobilefriendly techniques. Even though DEG Digital reported that 60% of retail brands subscribers view s on a mobile device, this industry has been sluggish when it comes to going responsive. Crocs led the way, though, when they teamed up with DEG Digital to create a responsive . DEG Digital created a mobile-friendly design and a static desktop version of Croc s promotional A 50/50 split test of these two versions found that the mobile-friendly template beat the static layout by a landslide: 7.66% increase in CTR iphone read engagement had a 15.63% lift Mobile read engagement had an 8.82% lift The image to the right is a screen capture from DEG Digital s website. 6

8 Stream Companies and the Montgomeryville Nissan Dealership Stream Companies, a fully integrated advertising agency, has been implementing Montgomeryville Nissan s marketing since Utilizing on Acid s analytics, Stream determined that 41% of Montgomeryville Nissan s subscribers were opening the dealership s unresponsive sales and service campaigns on mobile devices. Montgomeryville Nissan already had a beautiful and successful template design. Stream Companies leveraged their pre-existing templates and updated them with the proper code to optimize their s for the mobile audience. This is a screen capture from Stream Companies case study. The new layout adapts to different devices and screen sizes with the flexibility to show the same content, or restrict the amount of content shown, wherever and whenever. To ensure their revamp of Montgomeryville Nissan s templates was effective, Stream ran three 50/50 split tests over a month s time. In these tests, 50% of the list received the new responsive template and 50% of the list received the non-responsive template. Every other element of the two s being tested were identical (from name, from address, promotional content and subject lines). The responsive reigned victorious over the original design: Test #1: 7

9 7% higher open rate 16% higher CTR Test #2: 148% higher open rate 6% higher CTR Test #3: 48% higher open rate 43% higher CTR Mobile optimization yielded an impressive surge in opens and clicks for Montgomeryville Nissan, allowing them to communicate with more customers than ever before. Seize the day The time to go responsive is now. About half of your audience reads on their phone, and that number will continue to grow. And the case studies we ve shared point to the importance of responsive design for your marketing efforts. Now that we ve helped you make the case for responsive design, we ll give you the tools you need to create those mobile-friendly templates. 8

10 Chapter 3: Responsive Design Tutorial Already have a non-responsive template that you love? We ve got you covered. We re going to take a template from 99designs (one that we wrote about in our 600+ Free Templates blog) and add responsive behavior to it so you can see how it's done. If you don t already have a template, go to their site and get one so that you can follow along. For this tutorial, I am using the newsletter blue template, called NEWSLETTER BLUE.html. You'll want to open it up in a text editor, and save a new version of it that you ll make responsive. Add a style block If you don t already have a style block, you re going to need one. This is where the media queries go, and that s what is going to make your responsive. A media query is a conditional statement that contains extra CSS rules to change the appearance of the when the conditions in the statement are met. For this , we re going to use the same media queries that we used in our Responsive Template. You can check out the basic code right here: <style only screen and (max-width: 640px) only screen and (max-width: 479px) { </style> The first media query will trigger for screens of less than 640 pixels in width. The second query triggers for screens of less than 479 pixels in width. For more on min/max width, check out this blog. The query that triggers on smaller screens comes last so that it will take precedence over the earlier CSS rules in the block. We re going to place our styles inside these media queries in the later steps. 9

11 Control the width of the container element We need to control the width of the containing element, so that the narrows to a single column on smaller devices. To start, let's identify the parts of the that determine its width. In this case, we re looking at: <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center"> All we need to do is add a class to this table to control its width. <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" class="devicewidth"> Now, we ll add this class to our media only screen and (max-width: 640px) { body[yahoo].devicewidth only screen and (max-width: 479px) { body[yahoo].devicewidth {width:280px!important; If you save your file and resize the window now, you won t be able to see any changes. That s because resizing the container element isn t the only thing we need to do to make the reach the correct width. Any image or table that is too wide for the new table width will cause it to stretch to accommodate the wider element. That s why, in the next step, we re going to need to apply classes to some of the images in this to control their size as well. Add new classes to relevant images Some of the images in this are so wide (more than 440 or 280 pixels wide, respectively) that they re going to break out of the new sizes for the table that we picked earlier. We re going 10

12 to add some special classes to help resize them. For instance, in the 's header, we have a long horizontal bar. <td height="30"><img src="images/promo-green2_01_04.jpg" width="393" height="30" border="0" alt=""/></td> This bar is set to be 393 pixels wide, which will combine with the rest of the header to be too big. To fix this, we ll add another class: <td height="30"><img src="images/promo-green2_01_04.jpg" width="393" height="30" border="0" alt="" class="devicewidth2"/></td> The featured image for the is too wide, as is another image being used as a horizontal rule near the bottom. We ll do the same thing for them, with a custom class. For example, the featured image: <td align="center"><a href= " target="_blank"><img src="images/promo-green2_02.jpg" alt="" width="598" height="249" border="0"/></a></td> Becomes: <td align="center"><a href= " target="_blank"><img src="images/promo-green2_02.jpg" alt="" width="598" border="0" class="devicewidth3"/></a></td> Notice that we removed the height attribute. If we leave the height attribute, the image will look stretched to reach that height. In other words, if we don't specify a height, it will automatically maintain its ratio. Now we will change the size of these images in the media queries: 11

13 @media only screen and (max-width: 640px) { body[yahoo].devicewidth {width:440px!important; body[yahoo].devicewidth2 {width:300px!important; body[yahoo].devicewidth3 only screen and (max-width: 479px) { body[yahoo].devicewidth {width:280px!important; body[yahoo].devicewidth2 {width:200px!important; body[yahoo].devicewidth3 {width:380px!important; After this, when you resize the window, you should see the blue bar and horizontal rules get small enough to accommodate the new responsive behaviors. The won t get any smaller, though, because the table structure is still keeping it at the same size. In the next step, we ll add a style to make the tables stack under each other. 12

14 Make some TDs Display:Block Most designers use a table structure to create a float:left type effect for their content blocks. In this case, we have a sidebar on the right that will need to move under the rest of the content for the smaller views. Luckily for us, this is actually a pretty easy trick. We ll just add a style to the containing TDs, in this case there are two of them. The TD containing the content on the left is width 58%, and the right side TD is width 35%. <td width="58%" align="left" valign="top">...lots of code in between here... <td width="35%" align="left" valign="top"> Let's add in the block_td class here. <td width="58%" align="left" valign="top" class="block_td">...lots of code in between here... <td width="35%" align="left" valign="top" class="block_td"> Now we ll add the only screen and (max-width: 640px) { body[yahoo].devicewidth {width:440px!important; body[yahoo].devicewidth2 {width:300px!important; body[yahoo].devicewidth3 {width:440px!important; body[yahoo].block_td {display: only screen and (max-width: 479px) { body[yahoo].devicewidth {width:280px!important; body[yahoo].devicewidth2 {width:200px!important; body[yahoo].devicewidth3 {width:380px!important; 13

15 With this class, each of these TDs will display in its own vertical space instead of sitting side by side. They re still constrained by the percent width listed inline, so we ll have to overwrite that in the next step. Fix percent-based TDs Now our two main content TDs look like this: <td width="58%" align="left" valign="top" class="block_td">...lots of code in between here... <td width="35%" align="left" valign="top" class="block_td"> 14

16 We ll add another class to them to make them 100% width on mobile. I m calling this class percent_td, but you can name it anything you like. <td width="58%" align="left" valign="top" class="block_td percent_td">...lots of code in between here... <td width="35%" align="left" valign="top" class="block_td percent_td"> I am creating a new class because there are a lot more places you'll want to use this in the to make sure that all of these content blocks expand to full size in the mobile view. Now let s add the only screen and (max-width: 640px) { body[yahoo].devicewidth {width:440px!important; body[yahoo].devicewidth2 {width:300px!important; body[yahoo].devicewidth3 {width:440px!important; body[yahoo].block_td {display: block; body[yahoo].percent_td {width: only screen and (max-width: 479px) { body[yahoo].devicewidth {width:280px!important; body[yahoo].devicewidth2 {width:200px!important; body[yahoo].devicewidth3 {width:380px!important; Notice that we only need to add this style to the first media query, because anything that triggers the second query will also trigger the first. Our is looking pretty good now! We do still have a few lingering problems to clean up. 15

17 Add finishing touches If you ve been following these directions faithfully, you ll see there are still a few problems. A remnant of the dashed border that separated the left and right columns can still be seen, as well as the image from the right column just floating in space. Let s hide both of these things in the mobile view, to clean it up a bit. The following technique can be used to hide almost any element 16

18 of the that you don t want to show on mobile, if applied carefully. Be wary of removing whole table rows or cells, as this can sometimes mess with the rest of the structure of a table. This is the code that creates the border effect: <td width="5%" style="border-right:2px dashed #95989a"> </td> So we ll add the dashed class to it. We ll overwrite the border to 0 in CSS. <td width="5%" style="border-right:2px dashed #95989a" class="dashed"> </td> We ll also add the hidden class to the image from the right column: <td><a href=" target="_blank"><img src="images/newsletter GREEN03.jpg" alt="buy her" width="181" height="144" border="0" class="hidden"/></a></td> 17

19 Last, we need to reset the size of some percent based TDs that are now too big. We ll set these to be 155px wide, slightly larger than the image they contain. <td width="43%"><img src="images/newsletter GREEN01.jpg" width="150" height="130" border="0" alt=""/></td> Becomes: <td width="43%" class="pic_td"><img src="images/newsletter GREEN01.jpg" width="150" height="130" border="0" alt=""/></td> 18

20 Give each of the following TDs (with 57% width) the percent_td class so that they ll occupy the remaining width of the row. And now the last bit of only screen and (max-width: 640px) { body[yahoo].devicewidth {width:440px!important; body[yahoo].devicewidth2 {width:300px!important; body[yahoo].devicewidth3 {width:440px!important; body[yahoo].block_td {display: block; body[yahoo].percent_td {width: 100%!important; body[yahoo].pic_td {width: 155px!important; body[yahoo].dashed {border-right: 0px!important; body[yahoo].hidden {display: only screen and (max-width: 479px) { body[yahoo].devicewidth {width:280px!important; body[yahoo].devicewidth2 {width:200px!important; body[yahoo].devicewidth3 {width:380px!important; That's it! You should now have a pretty good looking responsive template. Of course, you'll probably want to tweak some of the padding and a few other details to really add some polish to it. If you need help troubleshooting any coding issues, check out our blog where we ve been documenting client quirks for over 5 years! 19

21 Chapter 4: Free Responsive Template If you ve made it this far, it s safe to assume you understand that different clients and devices can do the darndest things to your responsive template. After we ve harped on the importance and effectiveness of responsive design, it would be almost criminal to leave you without any mobile-friendly resources. That s why we have an easy to customize, free responsive template. We continually run our template through our testing platform to ensure it looks beautiful in the most popular clients and mobile devices. The breakpoints we ve selected for this template (determined through our most common dimensions research and media query test) are as follows: 1. A width less than 480px for the iphone and smaller smart phones. 2. A width between 481px and 640px for medium sized Android devices 3. A default dimension of 580px for tablets, web, and desktop clients In addition, you can mix and match each section of this layout and we tried to make it pretty generic because your needs will likely change over time. And since every inbox will display your differently, it is important to test before you hit send. on Acid simplifies your testing process. Send an to our system and we ll generate screenshots in the most popular clients and devices in minutes. We don t stop there. You can also use our code analysis to identify troublemakers and tap into our tips and tricks to solve those quirky display problems. Send with confidence and maximize your ROI for every campaign by trying us free for 7 days. 20