CLEAN CODE FOR COMPLEX S

Transcription

1 CLEAN CODE FOR COMPLEX S With the increased popularity of mobile devices, good development has become more important than ever. Design studios are working hard to keep up with trends and deliver responsive s that render well on a large variety of devices. When I first began developing s in 2010, I thought I had a good understanding of what was acceptable and what was unacceptable to use in HTML: i.e., not using tables, inline style on elements, or JavaScript in my code. However, many applications (including webmail) will not recognize some of the other standard coding practices developers have become accustomed to, including absolute positioning, background images, and stylesheets. s built using these techniques will not render properly on a majority of systems. WATCH OUT! These common tools will break your Paragraph (<p>) and Div tags Many examples of good s seen online show the use of Div tags, but I highly recommend against it. Different clients render these items with different line-height spacing and margins, often creating problems with the formatting in general. Instead, place your text in a single cell of a Table and control paragraph text with break (<br>) tags. Background Images The use of background colors is perfectly fine, but background images are often removed by an client, resulting in very plain s. Instead, be creative with using space. Break images up so that they still appear as backgrounds when placed around other objects. Text inside the image itself can still appear on the image, but it will not be selectable. If you absolutely must use a background image, make sure that your code degrades gracefully so the text content, if any, is not lost. Design studios are working hard to keep up with trends and deliver responsive s that render well on a large variety of devices East John Street Seattle, Washington catalysis.com

2 JavaScript Some distributors allow you to include basic server-side JS in your code prior to the send, but it is rare. Any JavaScript included in your will be removed by every mail client when it hits the user s mail server. This includes analytic script, such as Google Analytics. Stylesheets External stylesheets are nearly ubiquitous in web development, but they re against rules and often ignored when encountered by clients. This can be devastating to a standards-compliant . However, mobile clients often support internal stylesheets and we can use this to our advantage more on this later. Advanced CSS You have to be very careful with the types of CSS you use in s. Stick with the basic and common properties established in CSS2. Most CSS3 properties will not work properly in s. This includes floats, animations, transforms, positioning, among others. Campaign Monitor has a great list of the supported types of CSS for and webmail clients. THE MAGIC OF TABLES The biggest word of advice I have is: use tables, but carefully. Limit the number of columns and stick to rows as often as possible. Nesting tables inside of tables, while considered terrible practice in web development, is not only accepted but encouraged for controlling layout and copy within an . While Span tags are fine, most content formatting should be controlled using the containing TD cell, applied with inline styling. Keep in mind that the box model works differently for a number of clients, so you will want to avoid using padding and margin attributes on the sides of cells (though top and bottom are fine). Instead of applying a padding or margin to the side of your content, simply create a new empty table cell next to the content and establish its width in pixels. I also recommend including a non-break space ( ) The biggest word of advice I have is: use tables, but carefully East John Street Seattle, Washington catalysis.com

3 character in these empty cells to prevent a handful of clients from removing any cell with no information in it. AVOIDING THE BLACKLIST You can avoid being blacklisted by: Keeping subject lines short! They should always be fewer than 70 characters in length, including spaces and other non-letter characters. The total should be less than 70 kilobytes. Defying this rule alone won t get you flagged as a spammer, but it will raise some eyebrows especially if you re doing a large send. The 70 KB total includes both the images and the source code of the itself. The footer of your should always include a mailing address and, if it s a subscription-based , a way to unsubscribe from the mailing list. USE TABLES TO CREATE RESPONSIVE S Responsive design is in high demand in the web development world. But how do you create responsive s using tables, but without using standard stylesheets or an out-of-box system like Bootstrap? The answer lies in the tables themselves. Use percentage-based widths on your tables and their cells to control the width of content displayed on the screen. One of the most exciting aspects of mobile technology is its use of new clients that support features not available for use elsewhere, in particular, CSS stylesheets (which I ve spent most of this paper telling you not to use). You can use a CSS stylesheet in an if you include it (without using an external call) in the Head of your . Keep in mind that you can only use the CSS types as specified earlier, meaning that you have to limit the type of interaction your users will experience. You can use this technique to establish a mobile-friendly using classes defined in the stylesheet, and inline style on elements for non East John Street Seattle, Washington catalysis.com

4 mobile clients. Place your Style attribute after your Class or ID attribute in the element hierarchy to accomplish this. Also consider your intended recipient. Because mobile users have devices that generally read stylesheets, format the style in your Head s stylesheet to reflect how mobile-users will view your content. Desktop-based users will still see your in its original form, while mobile users will see a fresh take on the s design. USING ANIMATED GIF IMAGES Special consideration needs to be given when using an animated image in your namely, it will not work. Animated GIF images do not animate in Outlook. Instead, they will display the first frame of the image. If your animated GIF uses text or completes an animated sequence, you may consider making the first frame a very brief copy of the last frame of your animation so Outlook users can view the content without animation. Additionally, animated graphics are often enormous and are likely to break the 70 KB rule single-handedly. Using one may land you on the blacklist. To reduce this risk, keep your animated GIFs as small as possible with as few moving pixels as possible. INCLUDE A RESET FOR OUTLOOK In every I create, I add a few resets that are designed to help Outlook render s as intended. Because almost all other clients will ignore a stylesheet, but Outlook will read it, we re able to include functionality directly for Outlook that won t affect our s on other systems. CONCLUSION Now that customers are fully mobile and expect the right content delivered in the format that suits them best, well-executed s are more important than ever. The new standard? s that can be opened seamlessly across devices, flashy enough to be noticed by customers, yet simple enough to be ignored by spam filters. It s a delicate balance, but 1601 East John Street Seattle, Washington catalysis.com

5 reaching customers at the time and place they are most likely to respond creates a reaction that s worth the effort. ABOUT CATALYSIS Catalysis is a Seattle-based digital marketing agency and home to 50+ strategists, data architects, mathematicians, developers, and writers. We help you study your audience to find answers in their behaviors. With relationship marketing expertise across , web, social, and analytics, Catalysis creates targeted campaigns to deliver the results you want. Our clients include: Microsoft, MSN, Bing, Xbox, Gap, Old Navy, Banana Republic, The Bill & Melinda Gates Foundation, Mithun, Moss Adams, Zumiez, Winebid, and Treehouse For more information, contact info@catalysis.com or visit our website at The information contained in this publication is general and is for informational purposes only. Catalysis makes no warranties, express or implied, in this material East John Street Seattle, Washington catalysis.com